Skip to content

Horizontal scrolling instead of single column view #1127

@mcnesium

Description

@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):

Screenshot from 2019-08-25 17-38-45

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions