forked from FreeTubeApp/FreeTube
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improving responsiveness in Settings (FreeTubeApp#2694)
* Removing a `width:auto` which was overriding the width for a lot of .select-text * Making the general-settings component not overflow * Reducing margin in settings when window is narrow * Moving invidious instance tooltip to reduce overflow * Reducing the width of sliders to be 100% at maximum Before this change, the preset width `380px` could easily be wider than the window. * Reducing overflow in Theme Settings - Added breakpoint for theme `select`s - Added breakpoint for the UI scale slider * Reducing the remaining overflow in settings This moves all of the tooltips slightly to the left when the window is narrow to reduce overflow. * Expanding the sponsorblock settings to full width * Moving remaining tooltips into a fixed zone * Floating the tooltip icon to the right When the display is narrow, the tooltip can sometimes overflow, and it is very difficult to predict how it will overflow if the tool tip icon comes directly after a locale string. This change floats those icons into a centralized location where the tooltip can be guaranteed to not overflow. * Removing some irrelevant changes * Reducing margin on switches * Removing bottom margin on the last section * Making room for overflow ellipsis * Adding class `.containsTooltip` to `ft-toggle` This should make is easier to style the toggles which contain tooltips specficially. * Modifying the media query for tooltips * Adding a media query to reduce data settings margin
- Loading branch information
1 parent
3af6dd7
commit 3c7b143
Showing
6 changed files
with
67 additions
and
5 deletions.
There are no files selected for viewing
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
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
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
2 changes: 2 additions & 0 deletions
2
src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,7 @@ | ||
.sponsorBlockCategory | ||
margin-top: 30px | ||
padding: 0 10px | ||
@media only screen and (max-width: 680px) | ||
width: 100% | ||
.sponsorTitle | ||
font-size: x-large |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -76,4 +76,6 @@ | |
|
||
.switch-input:disabled + & | ||
background-color: #BDBDBD | ||
|
||
|
||
@media (max-width: 680px) | ||
max-width: 250px |
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