Horizontal scrolling instead of single column view

[mcnesium]

I was trying to implement an alternative to the single-column mode for long articles and imho more intuitive and magazine-like reading style for long articles: horizontal scrolling

This will look like this (kind of):

and the CSS is actually as easy as

    .entry-content {
        column-count: auto;
        column-width: 10em;
        overflow-x: auto;
    }

-> the width of the columns is chosen arbitrarily for this example

There are a couple of caveats here, which I would like to discuss.

First of all, .entry-content must have a height: 100% or so (maybe calc(100% - 100px), whatever) and for this to work .entry must have a defined height as well. That's the tricky part, because it must only have it while it is flipped open, and collapse if closed.

Problem: in the current implementation .entry does not know whether it is flipped open or not.

So I tried to add parent.addClass('open'); to it after here and parent.removeClass('open'); after here and after here

This seemed to work in the first place, but then I found that those toggles are not fired when using keyboard short cuts. So I was about to search for where those are implemented, but then figured that the resulting code would make this pretty messy.

So I wondered, whether there are some meta toggles somewhere in the code, where adding or removing open class would be more appropriate, or maybe this approach is completely stupid and people who know the code better than me may have a different suggestion on how to achieve horizontal scrolling for long articles. Maybe I should rather wait for upcoming v3, because all the code will be rewritten anyway? I don't know, so please discuss.

[niol]

Having spent some time with the client code, I'd say that there are no meta toggles for entryOpen and entryClose and that I would create them in selfoss-ui.js (if they are more than one line) and refactor the existing code to use them.

[jtojnar]

https://github.com/SSilence/selfoss/pull/1133 will allow you matching expanded item contents using .entry[aria-expanded="true"] .entry-content CSS selector.

[akash07k]

Hi @niol Have you done anything in regards to that?

[niol]

I'm sorry but I do not understand what you are refering to. Please be more specific.

[akash07k]

I was trying to say that have you done any progress in regards to Horizontal scrolling instead of single column?

[niol]

I'm note sure why this was closed as it does not seem to be fixed. I'll look into this when I have time if it's not fixed.

[jtojnar]

Sorry, should not have closed this.

[jtojnar]

https://github.com/SSilence/selfoss/pull/1134 will use .expanded class on the .entry.