Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improving responsiveness in Settings #2694

Merged
merged 20 commits into from
Oct 11, 2022
Merged

Improving responsiveness in Settings #2694

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
6d1be0b
Removing a `width:auto` which was overriding
MarmadileManteater Oct 8, 2022
d5e2bc6
Making the general-settings component not overflow
MarmadileManteater Oct 8, 2022
c71536b
Merge branch 'upstream_development' into reducing-settings-overflow
MarmadileManteater Oct 8, 2022
df95495
Reducing margin in settings when window is narrow
MarmadileManteater Oct 8, 2022
f5eadd4
Moving invidious instance tooltip to reduce overflow
MarmadileManteater Oct 9, 2022
c70810c
Reducing the width of sliders to be 100% at maximum
MarmadileManteater Oct 9, 2022
6e9afe5
Reducing overflow in Theme Settings
MarmadileManteater Oct 9, 2022
16bddf5
Reducing the remaining overflow in settings
MarmadileManteater Oct 9, 2022
6a1e190
Expanding the sponsorblock settings to full width
MarmadileManteater Oct 9, 2022
e47c97f
Moving remaining tooltips into a fixed zone
MarmadileManteater Oct 9, 2022
1f7aa88
Floating the tooltip icon to the right
MarmadileManteater Oct 9, 2022
664bdcb
Removing some irrelevant changes
MarmadileManteater Oct 9, 2022
def68ab
Reducing margin on switches
MarmadileManteater Oct 9, 2022
6abc360
Removing bottom margin on the last section
MarmadileManteater Oct 9, 2022
2c4d775
Merge branch 'upstream_development' into reducing-settings-overflow
MarmadileManteater Oct 9, 2022
b86094d
Making room for overflow ellipsis
MarmadileManteater Oct 9, 2022
fd85ba9
Adding class `.containsTooltip` to `ft-toggle`
MarmadileManteater Oct 9, 2022
14f260b
Modifying the media query for tooltips
MarmadileManteater Oct 9, 2022
98093d2
Adding a media query to reduce data settings margin
MarmadileManteater Oct 9, 2022
b64ec6a
Merge branch 'upstream_development' into reducing-settings-overflow
MarmadileManteater Oct 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 24 additions & 1 deletion src/renderer/components/ft-select/ft-select.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}
32 changes: 30 additions & 2 deletions src/renderer/components/ft-settings-section/ft-settings-section.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%
Expand Down Expand Up @@ -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
6 changes: 6 additions & 0 deletions src/renderer/components/ft-slider/ft-slider.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
}
2 changes: 2 additions & 0 deletions src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass
View file
Open in desktop
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
4 changes: 3 additions & 1 deletion src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,4 +76,6 @@

.switch-input:disabled + &
background-color: #BDBDBD


@media (max-width: 680px)
max-width: 250px
3 changes: 2 additions & 1 deletion src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
class="switch-ctn"
:class="{
compact,
disabled: disabled
disabled: disabled,
containsTooltip: tooltip.length > 0
}"
>
<input
Expand Down