Combined mode but grid

horrible, huh?

@media screen and (min-width: 1400px) {
		#headlines-frame {
			display : grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap : 8px;

			.cdm.expanded {
				.footer {
					border : 0;
				}

				border : 1px solid @border-default;
			}
		}
	}
}

I kind of like it. The concept at least.

You got me curious.

A little rough in its current form if you’re someone toggling collapsed mode. Not sure exactly what caused it, but I wound up with the page getting wider a time or two while I tried it out. I’m sure that it’s actually pretty desirable for image-heavy uses, such as your example of Reddit. Would not have guessed that it could be pulled off with just some lines of CSS, but I don’t know web dev.

Neat.

yeah this would obviously only work for expanded mode :slight_smile:

a bit more polished looking, i think.

e: it’s an option now.

i made a really primitive plugin that fakes masonry layout for the grid:

its somewhat buggy and lacks any optimization whatsoever but cool nonetheless (when it works). enjoy.

https://git.tt-rss.org/fox/ttrss-grid-masonry

e: this needs latest master, just in case.

So I’ve been using this view and I like it but one small issue I can’t figure out how to fix is word wrapping in the frames. Words keep getting split between lines and making things hard to read sometimes. Is that something I can fix with the custom css?

edit: I should have mentioned I am running the dynamic docker setup and I restarted the containers a few hours ago.

i should probably go easier on word-breaking in there, limit to links only or something like that.

https://git.tt-rss.org/fox/tt-rss/src/branch/master/themes/light/tt-rss.less#L749

Hi @fox,awesome to see that rush of progress!

I’d suggest using word-wrap: break-word; instead of word-break: break-all;. This makes words only break if they are really wider than the container. Short words are not affected. So you might then also remove the restriction to links.

yeah this could work for text, but for links specifically it can make things ugly (uglier?):

which is why i went with break-all.

Thanks for the quick reply and your explanation – I get your point. The only problematic edge-case I see with this is links at the end of a line.

But I think that’s okay.

Thanks for the quick fix. It’s much better. I’m really liking the grid layout with mark as read on scroll. Thanks.

I think it’s a nice layout to be set to feeds like Dilbert

Good, now add it to android app :grin:

Feel a bit guilty since I gave feedback and disappeared.

I have an image heavy feed I’m very far behind on, and your first post made me try out expanded instead of collapsed. Sped things up immensely because apparently marking posts as read when you flip through them was CPU heavy on my server.

After that, columns just made things even faster for me.

I did run into an edge case that most people probably wouldn’t have even noticed, where a headline would be top-to-bottom in one column at 1080p, so I ham-fisted some CSS to set a max-height on titleWrap.

Thanks so much for this feature, fox. Didn’t even know I needed it.

Sorry to resurrect this old thread. I’ve really grown to love grid mode but I noticed the article headlines sometimes break words on to separate lines. It seems to happen with all themes. I don’t have the masonry plugin active either.

I’m using the stock docker setup.

yeah it’s a stock CSS thing, it’s either that or super long words breaking layout. i’m not fond of either behaviors. :frowning:

there are several rules like this in the .less files:

word-break : break-all;

ideas welcome, etc.

Thanks for confirming. I will take the occassional headline issue over breaking the layout. I’ll use this as a chance to learn something and if I come up with a fix I’ll let you know.

How do I activate this? I installed the Plugin and set the checkmark, but nothing happens.

there’s a built-in grid mode (check the hotkeys), plugin takes over it and does the masonry thing (badly).