[Theme][GitHub] feedly theme built from scratch

[levito]

@Uribou, yep.

In feedly.css in line 992, you find this:

Code: Select all

/* single-line previews */
#floatingTitle .titleWrap,
.cdm.expandable:not(.active) .titleWrap,
.hlTitle {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}


This makes the entries single-line. The first selector is for the floating title, the second for the expandable view, the third for the classic three-pane view.

I think the best is to override this with a custom style, so you can safely keep updating the theme:

Code: Select all

.cdm.expandable:not(.active) .titleWrap,
.hlTitle {
   white-space: normal;
}


[ilook]

I've installed your theme but i don't know how to change my reader to feedly-traditional ?

[levito]

@ilook: hit "f Shift+c" to toggle combined feed display to separate feed display, then "a w" to toggle widescreen mode, then hide the feed tree with the button along the left side of the window.

[ilook]

@ilook: hit "f Shift+c" to toggle combined feed display to separate feed display, then "a w" to toggle widescreen mode, then hide the feed tree with the button along the left side of the window.

It works.Thanks.

[levito]

Hey guys,

I did lots of changes in the last weeks. The theme has a lot more similarity to the real Feedly now. I think it's cleaner and fresher, also more space efficient. The OP is updated with a little changelog.

Have fun!

[davidm]

Not sure about the latest changes. I find that the "Special" header is very unintuitive. It's not predictable that it will take you to the Favourites feed. And it's even less intuitive that a link to collapse a folder and the headline for that folder are styled exactly the same way, since they are totally different things. I think this is taking the Feedly imitation one step too far.

I like that the two toolbars are now in the same row, but would change the styling a little (maybe moving the "selection bar" to the left, next to the feed name?).

Anyway, this is still an incredibly detailed and professional work.

[levito]

Hey davidm,

good point. I was unsure, too. In the end, I liked the fact to have a large clickable area to open/collapse the Special feeds, so I went for it. I think it's very seldom that you want to view all the Special category at once - you basically get the same as with viewing "All articles".

That's why I first just had hidden the Special category folder and only displayed the children. You might like that version better. Get it here:

https://github.com/levito/tt-rss-feedly ... 2a274d38b0

Let me know what you think!

[davidm]

Well, I'm not too keen in any of the two options really.

Idea: since the Special folder title is not quite useful... why not hiding it altogether and leaving only the collapse link?

[davidm]

I have another suggestion. I love that star/publish/select icons for items on the list only appear on mouseover, but they stay visible at all times when active. Would you something similar for scores? Keep it hidden, visible on mouseover, but stay visible if score is different from zero. Now, you have no info about the score unless you mouseover.

[levito]

Good idea, but it's hardly possible with the current markup. The score icon is originally beneath the feed icon, separate from the select/star/publish icons. So I positioned it absolutely. That's why it can't push the content away.

If I would instead position the feed icon absolutely on the left (so I can keep the score icon in the flow), there would always be a gap on the left side when single feeds are selected. This would be ugly.

I like the idea though, so I'll try to find a solution. But I can't promise anything.

[poirier]

Nice look! And thank you for implementing widescreen layout.

[KaleKal]

Nice work.
A suggestion: You should probably use an absolute path if referring to default resources like images. feedly.css(749) url("../images/indicator_tiny.gif") => url("/images/indicator_tiny.gif")
It is more robust if people (like me) put themes into separate directories and only create an @import-css in the theme-directory.

[levito]

Guys, I added compatibility with the rethemed tt-rss dev version from GitHub in a new branch: https://github.com/levito/tt-rss-feedly ... ss-retheme

The changes in both tt-rss and my theme are not backward compatible, so be sure to use the appropriate version.

[elmer]

Hi!

Thanks for a great theme!
For the life of me I can't figure out how to enable all the features that are shown in your screenshot though, i.e.

feedly-expandable.png (157.27 KiB) Viewed 7963 times

All I get is this view, which is quite usable but not as good as yours:

ttrss-myscreen.png (175.24 KiB) Viewed 7963 times

I'm using tt-rss 1.11 and the respective 'master' branch of the feedly theme. Tried with both Chrome and FF (I'm using a Mac)

Thanks in advance for any advice!
Elmer

[levito]

Hi Elmer,

TT-RSS features different views for feeds. Have a look in the Actions menu > Keyboard shortcuts help.

To switch to combined view (and back to split view), press "f Shift+c".

In combined view, you can toggle auto-expand with "f c". In split view you can toggle widescreen mode (article view on the right side) via "a Shift+w".

All these options can also be set in the preferences.

One more thing: In the next version of the theme, the feed labels will be back in split mode. It's available for the current development code of TT-RSS, i.e. GitHub trunk. A lot of HTML and CSS has been changed there. If you want to play with it, clone TT-RSS from GitHub and use this branch of my theme: https://github.com/levito/tt-rss-feedly ... ss-retheme

Cheers!