kupietools
commented
10 months ago ...And then, having typed all that, I managed to get it done in pure CSS.
.flux .flux_header .item {
white-space: normal !important
}
.flux .horizontal-list * {
line-height:1rem !important;
padding: 0 !important;
margin: 0 !important
}
.flux_header .item.website span, .item.date, .day .date, .dropdown-menu > .no-mobile, .no-mobile {
display: inline !important;
}
.flux_header .title {
order: 4;
}
.item.title {
max-width:calc(100% - 35px) !important
/* this is because the built-in default them has an annoying resize-on-hover feature that made testing this while I worked on it on desktop harder. This max-width turns that off. */
}
.flux_header .item.link {
flex-basis: 10%;
order:2;
}
.horizontal-list {
flex-wrap: wrap;
}
.flux .websitename .item.website {
flex-basis: 90%;
white-space:normal;
}
.flux .item.date {
flex-basis: 100%;
white-space:normal;
order:3;
}I don't know if all those !importants were necessary, I just wanted to git 'er done.
math-GH
EDIT: I FOUND A PURE CSS WORKAROUND, PLEASE ALSO SEE BELOW COMMENT BEFORE RESPONDING. I'll leave this issue open in case the devs want to consider it, but for me, the problem is solved.
Is your feature request related to a problem? Please describe. I read FreshRSS on my iPhone SE. The current design, including all available themes and options that I have found, is terrible for small screens. It hides the name of the website (mistake number 1) but still consumes most of the screen width for that column (mistake number 2) which condenses the item title column to be about .5 inches wide (mistake number 3)
Describe the solution you’d like There should be a straightforward mobile-first theme or interface option that makes FreshRSS better usable on small phone screens without feeling like it's obviously a desktop layout being inefficiently and unreliably scrunched and modified to not quite fit on a phone. Other RSS readers have managed to make reading RSS feeds on small phone screens easy. While I could use another reader app with API access to freshRSS, that's added complexity and yet another single-purpose app taking up real estate on my phone when freshRSS is already perfectly capable of serving up an HTML front-end to a browser to read RSS feeds on all by itself without requiring additional software. It just currently doesn't do it in a way that is convenient for phone users.
Alternatively, something that allowed me to easily customize freshRSS's UI to do this would be great. The current "theme" system only allows customizing css attributes, when it's the fundamental HTML structure that's poorly designed for phone screens.
For instance, I'd love to define a "theme"-type customization that got completely rid of presenting RSS items as LIs as displayed as table cells and just output them in a structure manner more sensible for a list of text articles. Table cells are just not good for text-heavy layout that is not actually tabular data (numerical-only or only very brief text, not full sentence like article titles), and semantically, an RSS item is a list item, but that RSS item's title, date, and website aren't list items, and should be handled as such.
However it's done, I would like, for example, to be able to see one line with the website name and date, and then a second line below it giving the phone's full screen width to the title, including wrapping if the title wrapping extension is installed, rather than every RSS entry be side-by-side table cell data. I should be able to somehow specify this myself, or, if it can't be made so I can specify it, some sort of feature that was built-in to allow turning a more phone-screen-friendly display on or off as needed would be great and make this project much more usable for me.
Describe alternatives you’ve considered I've tried custom CSS. I could probably make it work eventually but it's taking a lot of time and I still haven't found a satisfactory answer, especially as the current structure makes it difficult to arrange the LIs to be better through CSS only.
Additional context
At present, here's how FreshRSS shows a list of recent items on my phone screen. As part of the effort to make this phone-friendly I turned off all the unnecessary icons that just took up space such as the website icon, favorite, and read/unread indicator. As you can see, still not very good marks for UX.
On the desktop, by the way, I have no problem with freshRSS's default design at all, it's absolutely great and totally usable. I just rarely use my desktop to check my news feeds.