From 3c7b143fce0531323fa30d50be053bc44789b1a5 Mon Sep 17 00:00:00 2001 From: Emma Date: Tue, 11 Oct 2022 03:38:31 -0400 Subject: [PATCH] Improving responsiveness in Settings (#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 --- .../components/ft-select/ft-select.css | 25 ++++++++++++++- .../ft-settings-section.sass | 32 +++++++++++++++++-- .../components/ft-slider/ft-slider.css | 6 ++++ .../ft-sponsor-block-category.sass | 2 ++ .../ft-toggle-switch/ft-toggle-switch.sass | 4 ++- .../ft-toggle-switch/ft-toggle-switch.vue | 3 +- 6 files changed, 67 insertions(+), 5 deletions(-) diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css index 067c5e0f..a7a404c9 100644 --- a/src/renderer/components/ft-select/ft-select.css +++ b/src/renderer/components/ft-select/ft-select.css @@ -38,7 +38,7 @@ font-family: inherit; background-color: transparent; color: var(--primary-text-color); - width: 200px; + width: 240px; padding: 10px 10px 10px 0; font-size: 18px; border-radius: 0; @@ -143,3 +143,26 @@ pointer-events: none; opacity: 0.5; } + +@media only screen and (max-width: 1000px) { + .select .select-text { + max-width: 240px; + } +} + +@media only screen and (max-width: 800px) { + .select { + width: 100%; + } + .select .select-text { + display:block; + max-width: 95%; + } +} + +@media only screen and (max-width: 680px) { + .select { + padding: 0px; + margin-right: -15px; + } +} diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.sass b/src/renderer/components/ft-settings-section/ft-settings-section.sass index 7f1afebd..c41023fa 100644 --- a/src/renderer/components/ft-settings-section/ft-settings-section.sass +++ b/src/renderer/components/ft-settings-section/ft-settings-section.sass @@ -2,12 +2,19 @@ background-color: var(--card-bg-color) width: 85% margin: 0 auto + @media only screen and (max-width: 800px) + width: 100% &[open] padding-bottom: 15px - @media only screen and (max-width: 680px) - width: 90% + > div + width: 100% + padding: 0px 20px + box-sizing: border-box + > div:not(:last-child):not(.ft-flex-box) + @media only screen and (max-width: 800px) + margin-bottom: 20px .sectionLine width: 100% @@ -52,3 +59,24 @@ @media only screen and (max-width: 500px) :deep(.settingsFlexStart500px) justify-content: flex-start + +@media only screen and (max-width: 680px) + .settingsSection + > div + :deep(.text.bottom) + left: -85px + :deep(.switch-ctn.containsTooltip) + left: -10px + margin-right: 5px + padding: 0px 10px 0px 10px + :not(.select) + > :deep(.tooltip) + display: inline-block + position: absolute + right: -25px + top: 12px + .settingsFlexStart460px :deep(.tooltip) + right: 0px + top: -2px + :deep(.switch-ctn) + margin: 10px 7px diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css index bc91c097..b4169819 100644 --- a/src/renderer/components/ft-slider/ft-slider.css +++ b/src/renderer/components/ft-slider/ft-slider.css @@ -242,3 +242,9 @@ box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important; transform: scale(4, 4); } + +@media only screen and (max-width: 680px) { + .pure-material-slider { + width: 100%; + } +} diff --git a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass index 66a10f1c..5eab71ed 100644 --- a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass +++ b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass @@ -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 diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass index 74584998..d33e7f66 100644 --- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass +++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass @@ -76,4 +76,6 @@ .switch-input:disabled + & background-color: #BDBDBD - + + @media (max-width: 680px) + max-width: 250px diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue index 03d8d078..e5d910e2 100644 --- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue +++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue @@ -3,7 +3,8 @@ class="switch-ctn" :class="{ compact, - disabled: disabled + disabled: disabled, + containsTooltip: tooltip.length > 0 }" >