Freshrss: Multiline titles

[tiborepcek]

Hi, i would like to ask, if there is some option to enable multiline titles in RSS feeds, so that i can read the whole (long) title of an article. Thank you.

[Frenzie]

Not presently, but it may not be too hard to do with some custom CSS. I think I may have once said I'd look into it but I never found the time to.

Part of the problem is that there's no colspan in CSS display:table, so instead a different approach like flexbox needs to be used. A problem in the sense that you probably need at least a good hour to play around with it, not in the sense that it's particularly difficult.

[Frenzie]

Quick proof of concept that doesn't look half-bad:

.horizontal-list{display:flex;flex-wrap:wrap}
.flux .item > a {white-space:normal}
.flux:not(.current):hover .item.title {position:relative;max-width:inherit}
.item:last-child{margin-left:auto}

[aledeg]

See #1938

[tiborepcek]

Quick proof of concept that doesn't look half-bad:

.horizontal-list{display:flex;flex-wrap:wrap}
.flux .item > a {white-space:normal}
.flux:not(.current):hover .item.title {position:relative;max-width:inherit}
.item:last-child{margin-left:auto}

Thanks @Frenzie , it works via Custom CSS user extension on desktop and on mobile too.

[aledeg]

Maybe you could add a PR on the extension repository to add your snippet as a tip for other users.

[Frenzie]

Not that quick 10 minute proof of concept. But with another 15 minutes, the result is probably about right:

.horizontal-list {
 display: flex;
 /* uncomment to allow title to expand onto its own line */
 /*flex-wrap: wrap;*/
}
.horizontal-list.bottom {
 display: table;
}
.flux .item {
 flex-shrink: 0;
 line-height: normal;
 padding: .3em 0;
}
.flux .item > a {
 white-space: normal;
}
.flux:not(.current):hover .item.title {
 position: relative;
 max-width: inherit;
}
.flux_header .title {
 flex: auto;
}

[Alkarex]

What do you think: should we make an option for that?

[aledeg]

As I mentioned earlier, we can add the snippet in the customCSS repository. I am not sure it's a relevant option. I am saying that because I always use a wide screen. But maybe most of users are not.

[Frenzie]

I'd go a step further. I think something along those lines should be the default. In wider use cases it doesn't matter much either way, but to me it's still better up to at least ~1200 virtual pixels if you like to see the date. On smaller widths, such as smaller windows but most notably mobile, it makes an enormous difference.

I don't really see much of a point in making it an option though.

[Alkarex]

For people without a wide screen, it could indeed make sense as @Frenzie suggests to have an automatic CSS rule based on window width triggering this mode. Could you feel like making a PR, @Frenzie ?

[Frenzie]

The vertical alignment is still slightly off as written and it wouldn't make much sense to write it as an override if it were the default, so I definitely wouldn't mind but it could take a while. :-)

It could make sense more or less as currently written if you wanted it behind an @media max-width rule, but since wider window widths will almost always automatically turn out single-line that seems like an unnecessary complication at best. In case a single-line guarantee is considered desirable on large widths, an @media min-width with a truncation override seems like a better approach to me.

For people without a wide screen

PS I have a wide screen, but I seldom use my windows maximized. I consider that a waste of screen estate. ;-)

[jkinable]

@Frenzie thanks a lot, this works great! Is there a way to make this the 'default'? Instead of having all users enable the 'css-extension' and then uploading the css code, it would be great if somehow I can have this as the default.

[Frenzie]

First #2477. :-)

[hanshafner]

Thank you Frenzie for this https://github.com/FreshRSS/FreshRSS/issues/2344#issuecomment-480271415

It would be wonderful if this was the default behaviour for FreshRSS. <3 <3

[marienfressinaud]

Sooo, let's finish this discussion with a final PR ;)

It seems that we all agree that we prefer to have full titles. We even have a fix proposed by @Frenzie and a dedicated extension created by @jkinable! Does anyone have a different opinion?

Last thing I'd like to know before fixing it is: do you think we should have an option? My opinion is "no": full titles seem to provide a better experience and the less options we have to maintain the better I feel. We still can propose a CustomCSS snippet or a dedicated extension.

I think @Frenzie said there was still a small issue with alignment, but I think I can handle it.

[Frenzie]

It shouldn't be an option; at most like I said above we could consider not doing it for @media min-width at-least-1000-or-so.

My only real concern is that my CSS snippet is very much written as a user CSS, that is, an override of other styles that have no right to exist at all anymore if we want this result.

The alignment issue is (probably) significantly more minor.

I'm not opposed to essentially just copy/pasting those lines into the styles, but I'd be a bit ashamed to submit such a PR myself. ;-)

[marienfressinaud]

Don't worry, I planed to use it as a base, I'll improve it if it's needed :) I already did for my own theme, it's just that I'm not sure to be able to port what I did to the existing themes

[aledeg]

Since there is the TitleWrap extension, I think we could close that issue.