Improving responsiveness in Settings #2694
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 width for a lot of .select-text
Before this change, the preset width `380px` could easily be wider than the window.
- Added breakpoint for theme `select`s - Added breakpoint for the UI scale slider
This moves all of the tooltips slightly to the left when the window is narrow to reduce overflow.
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.
This should make is easier to style the toggles which contain tooltips specficially.
github-actions
bot
added
the
PR: waiting for review
ChunkyProgrammer
requested review from
absidue,
ChunkyProgrammer,
efb4f5ff-1298-471a-8973-3d47447115dc and
PikachuEXE
|
Looks like freetube was using some strange breakpoints to begin with but i wonder how feasible it'd be to use some more standard breakpoints
|
PikachuEXE
approved these changes
Oct 11, 2022
|
All tested locally including tooltip on < 660px |
absidue
approved these changes
Oct 11, 2022
github-actions
bot
removed
the
PR: waiting for review
MarmadileManteater
added a commit
to MarmadileManteater/FreeTubeAndroid
that referenced
this pull request
Oct 11, 2022
commit c886559 Merge: f4d73ca 09e61ae Author: Emma <MarmadileManteater@proton.me> Merge branch 'development' of https://github.com/MarmadileManteater/FreeTubeCordova into development commit f4d73ca Merge: 0e605d9 ae9d329 Author: Emma <MarmadileManteater@proton.me> Merge 'upstream/development' into development commit ae9d329 Author: atilluF <atilluf@outlook.com> Translated using Weblate (Italian) commit b2b9d97 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Bump electron-builder from 23.3.3 to 23.6.0 (FreeTubeApp#2705) commit 3c7b143 Author: Emma <MarmadileManteater@proton.me> Improving responsiveness in Settings (FreeTubeApp#2694) commit 3af6dd7 Author: Jeff Huang <s8321414@gmail.com> Translated using Weblate (Chinese (Traditional)) commit b127c85 Author: Eric <hamburger1024@mailbox.org> Translated using Weblate (Chinese (Simplified)) commit 40859b5 Author: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com> Update index.js (FreeTubeApp#2706) commit 3db62f6 Author: gallegonovato <fran-carro@hotmail.es> Translated using Weblate (Spanish) commit b4bfbdc Author: Ihor Hordiichuk <igor_ck@outlook.com> Translated using Weblate (Ukrainian) commit 09e61ae Merge: 0e605d9 bdb8b17 Author: Emma <MarmadileManteater@proton.me> Merge branch 'FreeTubeApp:development' into development commit 0e605d9 Author: Emma <MarmadileManteater@proton.me> Removing custom videoJS css which is no longer necessary commit d5bc0cd Merge: ec906ef 687352f Author: Emma <MarmadileManteater@proton.me> Merge remote-tracking branch 'upstream/development' into development commit ec906ef Merge: e202c79 7ca6440 Author: Emma <MarmadileManteater@proton.me> Merge branch 'upstream_development' into development commit bdb8b17 Merge: 687352f e64db7f Author: Hosted Weblate <hosted@weblate.org> Merge branch 'origin/development' into Weblate. commit e64db7f Author: Oğuz Ersen <oguz@ersen.moe> Translated using Weblate (Turkish) commit 66e1ff3 Author: Rex_sa <rex.sa@pm.me> Translated using Weblate (Arabic) commit 687352f Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Bump mikefarah/yq from 4.27.5 to 4.28.1 (FreeTubeApp#2703) commit 1508b05 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Bump lefthook from 1.1.1 to 1.1.2 (FreeTubeApp#2699) commit b3e0cc3 Author: Preston <freetubeapp@protonmail.com> Switch token for Flathub deployment commit c63149d Merge: 7fb5d47 f07aefd Author: Hosted Weblate <hosted@weblate.org> Merge branch 'origin/development' into Weblate. commit f07aefd Author: gallegonovato <fran-carro@hotmail.es> Translated using Weblate (Spanish) commit 7fb5d47 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Bump yt-channel-info from 3.1.0 to 3.1.1 (FreeTubeApp#2702) commit 5106868 Author: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com> Update report.yml (FreeTubeApp#2704) commit ce24739 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Bump mini-css-extract-plugin from 2.6.0 to 2.6.1 (FreeTubeApp#2701) commit 48fe90e Merge: 22a5062 03cb0db Author: Hosted Weblate <hosted@weblate.org> Merge branch 'origin/development' into Weblate. commit 03cb0db Author: gallegonovato <fran-carro@hotmail.es> Translated using Weblate (Galician) commit eeeb903 Author: Florin Voicu <florin.bkk@gmail.com> Translated using Weblate (Romanian) commit 74f57b7 Author: HexagonCDN <ctyducliem2006@gmail.com> Translated using Weblate (Vietnamese) commit 22a5062 Author: absidue <48293849+absidue@users.noreply.github.com> Move calculateColorLuminance, calculatePublishedDate and buildVTTFileLocally out of the store (FreeTubeApp#2692) commit 7ca6440 Author: Aiz <66974576+Aiz0@users.noreply.github.com> Add shortcuts for refresh buttons on Subscription, Trending, and Popular views (FreeTubeApp#2689) commit aa4a01b Author: absidue <48293849+absidue@users.noreply.github.com> Cleanup the web webpack config (FreeTubeApp#2690) commit 41fee01 Author: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com> Improve Importing Subscriptions (FreeTubeApp#2604) commit 2154255 Author: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com> Advertise FT better in README (FreeTubeApp#2677) **Full Changelog**: 0.17.1-nightly-66...0.17.1-nightly-67
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.
Improving responsiveness in Settings
Pull Request Type
Description
The settings view overflows the window when it is narrow
width <= 660. This PR aims to remove that overflow and improve the responsiveness when680 >= width >= 360.Screenshots
Before/After in General Settings
Before/After in Theme Settings
Before/After in Player Settings
Before/After in External Settings
Before/After in Subscription Settings
Before/After in Distraction Free Settings
Before/After in Privacy Settings
Before/After in Data Settings
Before/After in Proxy Settings
Before/After in Data Settings
Before/After in Parental Control Settings
Before/After in Sponsorblock Settings
Before/After tooltip
The tooltip was also adjusted to not overflow the window, but in order to do that, I added a media query to move it to the right of the
ft-toggle-switchinstead of being inline with the text. This is important because it is impossible to predict the position of the tooltip if the tooltip can change position based on the length of a locale string.Desktop (please complete the following information):
Additional Information
I picked
360as the cutoff point because there are other responsiveness issues with the app when thewidth <= 356which I didn't want to tackle in this PR.