fossar / selfoss

multipurpose rss reader, live stream, mashup, aggregation web application
https://selfoss.aditu.de
GNU General Public License v3.0
2.35k stars 343 forks source link

Mobile Next / Previous buttons #1406

Closed baz4096 closed 1 year ago

baz4096 commented 1 year ago

On 2.18, when viewed on a narrow mobile device (iphone) there used to be a Next button that closed the current item, and opened the next item, without having to scroll back to the top of the article and saving an additional two keypresses - the equivalent of the 'J' keyboard shortcut on devices with keys... Where did this button go? On 2.19, we only have "Open" at the bottom of each article. Also, I seem to recall a "Previous" button (I could be wrong!), which I used much less frequently, but still miss. Is it possible to restore these two buttons?

jtojnar commented 1 year ago

Looking at the style sheet, the button is hidden by default:

https://github.com/fossar/selfoss/blob/bfb1f966dcab24abc6b99ae31ac7f336d69dc314/assets/styles/main.scss#L690-L692

Then displayed for screens with width ≤ 1024px:

https://github.com/fossar/selfoss/blob/bfb1f966dcab24abc6b99ae31ac7f336d69dc314/assets/styles/main.scss#L1150-L1152

And then hidden again for width ≤ 641px:

https://github.com/fossar/selfoss/blob/bfb1f966dcab24abc6b99ae31ac7f336d69dc314/assets/styles/main.scss#L1405-L1407

I am not sure if this ever changed but you can always override this by adding the following to user.css file in your selfoss directory:

@media only screen and (max-width: 641px) {
    .entry-toolbar .entry-next {
        display: block;
    }
}

I do not recall any “Previous” button and was not able to find entry-prev in the source history.

baz4096 commented 1 year ago

Thank you! I'm probably wrong about the previous button. Thanks for the tip. Next on the top bar isn't overly convenient on mobile devices - I much preferred it at the bottom where it's easy for your thumb to reach - however compared to no Next, at all, this is great. Many thanks.

jtojnar commented 1 year ago

Oh, right for showing it at the bottom, you can do:

@media only screen and (max-width: 641px) {
    .entry-smartphone-share .entry-next {
        display: block;
    }
}
baz4096 commented 1 year ago

Now it's perfect again, many thanks 👍

jtojnar commented 1 year ago

I found out why it regressed so I have decided to fix it in selfoss itself.

thewholelifetolearn commented 8 months ago

I have tried the latest snapshot. I have the button displayed, but when I go to the next feed, it doesn't mark as read the feed that has just been read.