General layout improvement: Top level navigation + structure

[math-GH]

The first draft was presented in #5966. This is now the implementation.

close #4224

This PR is still in draft but I am happy about each comment or feedback

• Roughly fine with Origine theme (wide screen)
• Roughly fine with Origine theme (small screen/mobile devices)
• introduce a new break point 1200px
• Fine with each theme
  • Origine
  • Origine compact
  • Alternative dark
  • Dark/Dark Pink
  • Ansum/Mapco
  • Flat design
  • Nord
  • Pafat
  • Swage
• Install routine page
• views
  • normal view
  • global view
  • reading view
• Anonym. reading
• login page
• about page as guest
• TOS page as guest
• check extensions
  • Colorful List
  • Custom CSS
  • Custom JS
  • Image Proxy (not relevant, but works fine)
  • Quick Collapse
  • ReadingTime
  • Share By Email <== buggy
  • Sticky Feeds (not necessary anymore)
  • Title-Wrap
  • ShowFeedID
  • ThreePanesView <== buggy
  • any other important extension, that needs to be checked?
• navigation buttons
  • invisible buttons
  • visible buttons
  • left button
  • right button
  • up button
• options for less buttons in the header
• Update screenshots of the themes

known issues

• Tested the shortcuts for switching the views
• offset of mark read while scrolling
• extensions
  • Share By Email <== it will break the layout. But there is another bug: [Share By Email] Warnings Extensions#210
  • ThreePanesView <== mark reads while scrolling does not work
• ....... please leave feedback and your testing results here in the comment sections ....

(more screenshots + description will follow)

Out of scope

(not so important, discussion needed, PR could follow):

• [ ]reorganize the navigation side bar (aside_config.phtml, aside_subscription.phtml), following the new dropdown menu structure

[Alkarex]

I like the fixed bar at the top 👍🏻

I am more neutral about the left bar. But it is nice with an update 🙂

The improvements of the mobile view are what I am most looking forward to.

A couple of notes, which you probably already have spotted:

• The "plus" button (to add feeds) leads to a dead link
• With the option "auto mark as read during scroll", the vertical cut before which articles should be marked as read should be adjusted a bit (at the moment, it is about ~2 articles off).

[Alkarex]

The complexity with the flush is that it depends on some buffering / size of content, at more than one place in the pipeline all the way to the screen of the user.
You can reproduce it by adding a sleep(10); for instance around:

FreshRSS/app/Controllers/indexController.php

Line 77 in 01eaaed

$view->entries = FreshRSS_index_Controller::listEntriesByContext();

[math-GH]

it is not the smartest solution to solve #6162 but it works so far.

[math-GH]

Here are three regressions from some quick tests:

1. Keyboard navigation: when landing on FreshRSS homepage without doing anything, I used to be able to click on the keyboard ↓ (down arrow) to scroll down the articles. That does not seem to work anymore in the current PR, as it first requires clicking somewhere in the article section for the scroll to work.

2. Closing user labels: in this PR, closing the drop-down menu requires clicking again precisely on the menu link, instead of being able to click anywhere

@Alkarex This feedback was very valuable. It gave me the kick to finde a better solution as display:grid for the main layout. Now a lot of issues and workarounds are fixed (hopefully). The handling should be as it was before :) Please check it.