Convert FtSubscribeButton and watch-video-info SCSS to CSS #6814
+278
−293
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
absidue
requested review from
PikachuEXE,
efb4f5ff-1298-471a-8973-3d47447115dc,
ChunkyProgrammer,
kommunarr and
MarmadileManteater
github-actions
bot
added
the
PR: waiting for review
absidue
changed the title
PikachuEXE
requested changes
Feb 17, 2025
efb4f5ff-1298-471a-8973-3d47447115dc
previously approved these changes
Feb 17, 2025
Co-authored-by: PikachuEXE <[email protected]>
absidue
requested review from
PikachuEXE and
efb4f5ff-1298-471a-8973-3d47447115dc
efb4f5ff-1298-471a-8973-3d47447115dc
approved these changes
Feb 19, 2025
kommunarr
approved these changes
Feb 19, 2025
PikachuEXE
approved these changes
Feb 20, 2025
github-actions
bot
removed
the
PR: waiting for review
PikachuEXE
added a commit
to PikachuEXE/FreeTube
that referenced
this pull request
Feb 20, 2025
* development: (58 commits) Convert FtSubscribeButton and watch-video-info SCSS to CSS (FreeTubeApp#6814) Use numbers instead of strings for the DBActions and SyncEvents constants (FreeTubeApp#6815) Translated using Weblate (English (United Kingdom)) Fix: search history text overflows if search term is long (FreeTubeApp#6728) Check if a keyboard composition session is active when pressing 'Enter' on ft-input (FreeTubeApp#6799) use hq img (FreeTubeApp#6826) Move the choose default folder logic to the main process (FreeTubeApp#6811) Translated using Weblate (French) Translated using Weblate (Turkish) Set process.platform at build time (FreeTubeApp#6784) Use logical spec for float (FreeTubeApp#6783) Migrate DataSettings to the composition API (FreeTubeApp#6785) Local API: Improve audio quality by sorting streams, highest bitrate first (FreeTubeApp#6807) Bump sass from 1.84.0 to 1.85.0 (FreeTubeApp#6825) Bump webpack from 5.97.1 to 5.98.0 (FreeTubeApp#6820) Bump postcss from 8.5.1 to 8.5.2 in the stylelint group (FreeTubeApp#6819) Bump the babel group with 2 updates (FreeTubeApp#6817) Bump globals from 15.14.0 to 15.15.0 (FreeTubeApp#6823) Bump sass-loader from 16.0.4 to 16.0.5 (FreeTubeApp#6822) Bump eslint from 9.20.0 to 9.20.1 in the eslint group (FreeTubeApp#6818) ... # Conflicts: # src/renderer/components/watch-video-info/watch-video-info.scss # src/renderer/components/watch-video-info/watch-video-info.vue
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.
Convert FtSubscribeButton and watch-video-info SCSS to CSS
Pull Request Type
Description
The FtSubscribeButton component was only using SCSS because it was using nesting. It turned out that most of the nesting was not needed and in other places it could be removed by moving the classes from parent elements to the elements that actually needed them in the Vue template. There is now only one instance of a parent being referenced and it uses the more specific child combinator
>(direct parent) instead of the descendant selector (parent anywhere up the DOM tree) that can match any parent right up to the root node.The watch-video-info component was only using SCSS because it was using nesting, none of it turned out to be necessary. I also cleaned up the
optionclass that was being added to various elements in the Vue template but didn't exist in the CSS file.In most cases nesting isn't necessary as we use Vue's scoped CSS feature that limits the CSS to the current component, nesting actually breaks the scoped CSS functionality in various cases, resulting in the CSS leaking outside of the component. Less SCSS also means less work for the build pipeline.
Testing
Check that the subscribe button and watch-video-info components still look the same as before.
Desktop