mirror of https://github.com/FreeTubeApp/FreeTube
8 Commits
| Author | SHA1 | Message | Date |
|---|---|---|---|
Jason
|
ab3c1b9b29
|
Show when Subscriptions / Trending / Most Popular were last updated (#4380)
* Implement first draft of last subscription refresh timestamp * Update styling to be a top bar * Update styling to be banner-compatible, & increase banner X button size on mobile * Update subscription refresh timestamp to be relative * Implement refresh timestamps for Shorts, Live, and Community tabs * Extract refresh widget to its own component * Add Trending and Popular refresh widgets with timestamps * Fix justifying when no timestamp exists * Move timestamps to utils store * Remove unneeded ref classes and currentLocale computed property * Add page-specific titles for each feed type * Implement showing least recent cache date per profile * Update styling property placement & match top nav box shadow on ft-refresh-widget * Implement showing timestamp for profile only if all channel subscriptions can be found in cache * Disable refresh button instead of removing it or the widget from the DOM * Increase top banner's top margin * Update channel caching calls to provide timestamps * Modify updateCacheByChannel functions to have default timestamp of new Date() * Fix 30-day month relative date calculation scenarios through new optional parameter * Rectify Case 3 (see https://github.com/FreeTubeApp/FreeTube/pull/3668) * Add back missing line in Popular.js |
|
|
Jason
|
23f1618fcb
|
Add back 3 Stylelint configs (#4350)
* Add back @double-great/stylelint-a11y Stylelint plugin Notably, we choose to not use the 'a11y/no-outline-none' rule. The reason for this being that our focus ring suffices for almost every use case (https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum), and using the same hover and focus styling can be considered bad design in many cases. YT goes the direction of foregoing the focus ring for many of its components and choosing a barely darker color than its :hover for :focus styling, which is controversial. Accessibility-wise, at the very least, using the same hover and focus styling can be confusing, especially for sighted users who use keyboard navigation. * Add back stylelint-config-sass-guidelines * Add back stylelint-config-standard * Satisfy media-prefers-reduced-motion a11y rule This is not recognized as a fix by the rule due to its limited detection logic, so this rule is not being imported directly. * Remove duplicate code * Implement linting fixes * Implement _ft-list-item.scss linting fixes excluding no-descending-specificity Properly implementing the no-descending-specificity rule in this file seems to utterly destroy the styling. This would be its own entire initiative to unravel. * Restart from scratch modifications of _ft-list-item.scss * Resolve styling discrepancies introduced with ft-list-channel and ft-tooltip |
|
|
Jason
|
3db6f437c9
|
Implement Stylelint linting of CSS logical properties (#4023)
* Add Stylelint plugin and rule for evaluating use of logical properties * Implement stylelint-advised use of logical properties in SCSS files * Implement stylelint-advised use of logical properties in CSS files * Implement stylelint linting before each commit to any branch of the repo * Remove other Stylelint plugins so that we can add them in later one-by-one After discussing this with the FreeTube team, it seems that we are still undecided on which rules we want to be active, including ones currently enabled. As a stopgap fix, we disabled Stylelint checking in our pre-commit Git hook and our recommended > freetube@0.19.0 lint-fix > run-p eslint-fix lint-style-fix command. With this change, we will be using Stylelint in our > freetube@0.19.0 lint-fix > run-p eslint-fix lint-style-fix command, while giving us the flexibility to add in additional desired plugins and rules as separate efforts. * Add video player to .stylelintignore * Replace non-logical property usage in templates This is not enforced by the plugin at this time. * Remove use of logical properties from ft-video-player, & allow empty input when .stylelintignore files are changed * Update ft-video-player.css to disable use of logical property linter We want to avoid introducing directionality-specific properties that could muck up the video player. * Remove redundant/unnecessary scripts in package.json |
|
|
Jason
|
6f2a535212
|
Implement right-to-left interface (#3970)
* Replace margin-left with margin-inline-start * Replace margin-right with margin-inline-end * Replace padding-left with padding-inline-start * Replace padding-right with padding-inline-end * Replace padding-top & padding-bottom with padding-block; continue replacing padding-left and padding-right with padding-inline-start and padding-inline-end * Add updated rtl-compatible margins to ft-slider and fix indentation * Replace margin-top & margin-bottom with margin-block; continue replacing margin-left and margin-right with margin-inline-start and margin-inline-end * Continue replacing with margin-block and margin-inline * Replace left and right with inset-inline-start and inset-inline-end This commit also changes border-left to border-inline-start, and border-right to border-inline-end. * Replace margin-bottom, top, and bottom with margin-block-end, inset-block-start, and inset-block-end This commit also replaces border-top and border-bottom with border-block-start and border-block-end. * Replace text-align left and right with text-align start and end * Fix syntax error with inset-block-end * Implement dynamic float: left/right based on direction ltr/rtl * Implement dynamic navigation arrow placement based on direction ltr/rtl To the fullest of my understanding, it is expected for the left navigation in rtl-supporting browsers to be for forward navigation, and the right one to be for backward navigation. * Add direction to body based on preferred language * Implement horizontal directionality coefficient to fix translate working in wrong x-direction for rtl languages * Add explicit text-align: start in places to ensure rtl version is correctly aligned * Add text-align: start to places where it is not inferred to enable proper rtl text orientation * Fix search bar magnifying glass being too far right issue * Move body.dir-setting logic to setLocale to fix dir not setting correctly on page reload * Change .switchColumn to have align-items: start instead of justify-items: start I have validated this for all settings tabs; the justify-content: start did nothing in any language, left-to-right or right-to-left. Replacing it with align-items: start aligned all menu switch items by their switches, not by their labels. This makes for a much more uniform settings section for trl languages. * Fix emergent bug in which history icons are temporarily disabled on changing language to one with different directionality Given that which icon is displayed for which history arrow is now dynamic based on the user's directionality, changing of the icon resets the font-awesome-icon state and thus re-adds the base disabled class to both arrows. This means that changing your language to one that has a different directionality was falsely setting the arrows to their disabled state (until the route is changed, after which the history icons will be fully back to normal). This commmit refactors the history icon setting logic to use class binding to two booleans in the top-nav component's data rather than adding and removing the disabled classes directly to the arrow elements' classLists, thus cleaning up the implementation and fixing the bug. * Add Kurdish to rtl languages list & add li items to be right-aligned on rtl languages * Force FreeTube logo to be ordered left-to-right for 'brand consistency' * Add styling flipping font-awesome icons for rtl languages except for exclusion list * Update isRightAligned with additional languages, and use it instead of locale value from store Kudos to absidue for pointing out this existing function for representing this, and that it grabs directly from the i18n object. This means that FreeTube will display the proper rtl interface if one is the user's system language, where it did not before. * Update isRightAligned property name to more clearly reflect rtl purpose * Simplify left/right arrow display logic Leverage the icons being flipped rather than manually setting the classes to their opposites when the directionality is RTL. * Replace justify-self: left & justify-self: right with justify-self; start and justify-self: end * Remove misguided attempt to emulate directionality-agnosticism with rightAligned class * Explicitly center FreeTube version on About page * Replace pre-existing identation issue * Replace margin-left with margin-inline-start * Replace margin-right with margin-inline-end * Replace padding-left with padding-inline-start * Replace padding-right with padding-inline-end * Replace padding-top & padding-bottom with padding-block; continue replacing padding-left and padding-right with padding-inline-start and padding-inline-end * Add updated rtl-compatible margins to ft-slider and fix indentation * Replace margin-top & margin-bottom with margin-block; continue replacing margin-left and margin-right with margin-inline-start and margin-inline-end * Continue replacing with margin-block and margin-inline * Replace left and right with inset-inline-start and inset-inline-end This commit also changes border-left to border-inline-start, and border-right to border-inline-end. * Replace margin-bottom, top, and bottom with margin-block-end, inset-block-start, and inset-block-end This commit also replaces border-top and border-bottom with border-block-start and border-block-end. * Replace text-align left and right with text-align start and end * Fix syntax error with inset-block-end * Implement dynamic float: left/right based on direction ltr/rtl * Implement dynamic navigation arrow placement based on direction ltr/rtl To the fullest of my understanding, it is expected for the left navigation in rtl-supporting browsers to be for forward navigation, and the right one to be for backward navigation. * Add direction to body based on preferred language * Implement horizontal directionality coefficient to fix translate working in wrong x-direction for rtl languages * Add explicit text-align: start in places to ensure rtl version is correctly aligned * Add text-align: start to places where it is not inferred to enable proper rtl text orientation * Fix search bar magnifying glass being too far right issue * Move body.dir-setting logic to setLocale to fix dir not setting correctly on page reload * Change .switchColumn to have align-items: start instead of justify-items: start I have validated this for all settings tabs; the justify-content: start did nothing in any language, left-to-right or right-to-left. Replacing it with align-items: start aligned all menu switch items by their switches, not by their labels. This makes for a much more uniform settings section for trl languages. * Fix emergent bug in which history icons are temporarily disabled on changing language to one with different directionality Given that which icon is displayed for which history arrow is now dynamic based on the user's directionality, changing of the icon resets the font-awesome-icon state and thus re-adds the base disabled class to both arrows. This means that changing your language to one that has a different directionality was falsely setting the arrows to their disabled state (until the route is changed, after which the history icons will be fully back to normal). This commmit refactors the history icon setting logic to use class binding to two booleans in the top-nav component's data rather than adding and removing the disabled classes directly to the arrow elements' classLists, thus cleaning up the implementation and fixing the bug. * Add Kurdish to rtl languages list & add li items to be right-aligned on rtl languages * Force FreeTube logo to be ordered left-to-right for 'brand consistency' * Add styling flipping font-awesome icons for rtl languages except for exclusion list * Update isRightAligned with additional languages, and use it instead of locale value from store Kudos to absidue for pointing out this existing function for representing this, and that it grabs directly from the i18n object. This means that FreeTube will display the proper rtl interface if one is the user's system language, where it did not before. * Update isRightAligned property name to more clearly reflect rtl purpose * Simplify left/right arrow display logic Leverage the icons being flipped rather than manually setting the classes to their opposites when the directionality is RTL. * Replace justify-self: left & justify-self: right with justify-self; start and justify-self: end * Remove misguided attempt to emulate directionality-agnosticism with rightAligned class * Explicitly center FreeTube version on About page * Fix question mark reversing logic for Arabic, Hebrew, Persian, and Urdu * Fix minor indentation issue Co-authored-by: absidue <48293849+absidue@users.noreply.github.com> * Remove unused function Co-authored-by: absidue <48293849+absidue@users.noreply.github.com> * Update src/renderer/components/ft-slider/ft-slider.css Co-authored-by: PikachuEXE <pikachuexe@gmail.com> --------- Co-authored-by: absidue <48293849+absidue@users.noreply.github.com> Co-authored-by: PikachuEXE <pikachuexe@gmail.com> |
|
|
Jason
|
539b084217
|
Keep reload buttons' position fixed on scroll (#1573)
* Makes reload buttons' position fixed * Changes reload buttons' positions to absolute on narrow enough screens Co-authored-by: Preston <freetubeapp@protonmail.com> |
|
Mykyta Poturai
|
739dddf74c |
Add caching for popular videos
Also add the button to refresh the cache |
|
Preston
|
2533161667 | Start on Mobile view and add Web Build option | |
|
Preston
|
ded6534d16 | Push Latest Code to Repository |