Add a responsive top menu #2696
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The previous step of adopting full bootstrap was a huge leap forward, reducing a huge amount of work adding responsiveness by using bootstrap's built-in components and functionality. As for the looks, there are 2 major changes: - Borders were added to top menu buttons, which made button boundaries easier to spot on mobile screens. - Buttons' hover effect was set to `brightness` filter. The previous implementation was using a rectangle tile as the background image, which would become odd on mobile screens, because the buttons are going to grow, the background tiles, however, remains the same size. Some current TODO's: - I really want to replace the image icons with bootstrap's monocolor svg icons. This should be approved beforehand, though. - The big gap on mobile screens between the left side panel and the main torrent list is also on the agenda for rewriting. We can use a bootstrap's offcanvas on the side panel.
|
Could we remove the borders on the top menu icons on desktop displays? Also, can we fix the fix the theme breakage with the top menu? I believe it's caused from changing from |
- Reverted the top menu from `<nav>` to `<div>` for compatility for diffreent themes. - Removed top menu buttons' borders on desktop screens.
jevenski
commented
Jul 24, 2024
|
The color schemes of the collapse menu for every theme still need to be adjusted. Please allow a few more moments. |
|
All the themes are now modified and tested. Everything should fit in with the overall display styles of each theme now. |
jevenski
added a commit
to jevenski/ruTorrent
that referenced
this pull request
Jul 28, 2024
* Add a responsive top menu The previous step of adopting full bootstrap was a huge leap forward, reducing a huge amount of work adding responsiveness by using bootstrap's built-in components and functionality. As for the looks, there are 2 major changes: - Borders were added to top menu buttons, which made button boundaries easier to spot on mobile screens. - Buttons' hover effect was set to `brightness` filter. The previous implementation was using a rectangle tile as the background image, which would become odd on mobile screens, because the buttons are going to grow, the background tiles, however, remains the same size. Some current TODO's: - I really want to replace the image icons with bootstrap's monocolor svg icons. This should be approved beforehand, though. - The big gap on mobile screens between the left side panel and the main torrent list is also on the agenda for rewriting. We can use a bootstrap's offcanvas on the side panel. * Add bootstrap js functionality * Fix theme compatibility on top menu - Reverted the top menu from `<nav>` to `<div>` for compatility for diffreent themes. - Removed top menu buttons' borders on desktop screens. * Adapt all themes to responsive top menu
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The previous step of adopting full bootstrap was a huge leap forward, reducing a huge amount of work adding responsiveness by using bootstrap's built-in components and functionality. As for the looks, there are 2 major changes:
brightnessfilter. The previous implementation was using a rectangle tile as the background image, which would become odd on mobile screens, because the buttons are going to grow, the background tiles, however, remains the same size.Some current TODO's:
Desktop screens:
Mobile screens:
Mobile screens with top menu open:
