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.

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

Wrap Watch ft-icon buttons below before they go fully vertical #4735

Conversation

MarmadileManteater
Copy link
Contributor

Wrap Watch ft-icon buttons below before they go fully vertical

Pull Request Type

  • Bugfix
  • Feature Implementation
  • Documentation
  • Other

Description

When there is a long channel name (ex: ThatGuyFromThatOneChannel) and the width of the window is narrow, the ft icon buttons in the watch video info wrap into a vertical line. This creates a lot of white-space above and below the channel name. This PR addresses this by moving the buttons under the channel info when the window width is narrow <460px.

Screenshots

before after
before after

Testing

  1. Open a video with a channel name that is very long and one word (ex: https://youtu.be/7e7jGSzmzIw or https://youtu.be/_5xMT3mQTrg )
  2. Reduce the window width to <=460px
  3. Ensure the ft-icons in the watch-video-info wrap below the channel information

Desktop

  • OS: Windows 10
  • OS Version: Pro Version 21H2 Installed on ‎4/‎3/‎2022 OS build 19044.1889 Experience Windows Feature Experience Pack 120.2212.4180.0
  • FreeTube version: 65b7ba1

Additional context

I also considered solving the problem by limiting the width of the channel name and forcing it to break word. It is technically less whitespace, but everything feels a bit crunched together IMHO.

@github-actions github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Mar 1, 2024
@FreeTubeBot FreeTubeBot enabled auto-merge (squash) March 1, 2024 22:23
@FreeTubeBot FreeTubeBot merged commit 9c2c4a9 into FreeTubeApp:development Mar 3, 2024
5 checks passed
@github-actions github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Mar 3, 2024
PikachuEXE added a commit to PikachuEXE/FreeTube that referenced this pull request Mar 4, 2024
* development: (29 commits)
  Translated using Weblate (Chinese (Traditional))
  Fix URL copied via right click menu (FreeTubeApp#4690)
  Translated using Weblate (Croatian)
  Wrap ft-icon buttons below before they go fully vertical (FreeTubeApp#4735)
  * Make activating a chapter selector makes window scroll to top like clicking on timestamp links (FreeTubeApp#4722)
  Translated using Weblate (Portuguese (Brazil))
  Translated using Weblate (Portuguese (Brazil))
  Make video thumbnails have certain height before image loading starts to avoid layout shifts (FreeTubeApp#4723)
  Update subscription cache when visiting a channel (FreeTubeApp#4667)
  Fix fallback to Invidious for the podcasts channel tab (FreeTubeApp#4731)
  Translated using Weblate (Portuguese (Brazil))
  Translated using Weblate (Arabic)
  Translated using Weblate (Polish)
  Translated using Weblate (Dutch)
  Translated using Weblate (Icelandic)
  Translated using Weblate (Spanish)
  Translated using Weblate (Arabic)
  Translated using Weblate (Icelandic)
  Translated using Weblate (Italian)
  Translated using Weblate (Chinese (Simplified))
  ...
PikachuEXE added a commit to PikachuEXE/FreeTube that referenced this pull request Mar 7, 2024
* development: (161 commits)
  Add video search in user playlist feature (FreeTubeApp#4622)
  Add discussion info when opening an issue (FreeTubeApp#4676)
  Translated using Weblate (Lithuanian)
  Translated using Weblate (Serbian)
  Translated using Weblate (Estonian)
  Bump mini-css-extract-plugin from 2.8.0 to 2.8.1 (FreeTubeApp#4742)
  Bump electron from 28.2.3 to 29.1.0 (FreeTubeApp#4743)
  Bump lefthook from 1.6.1 to 1.6.4 (FreeTubeApp#4740)
  Bump the babel group with 2 updates (FreeTubeApp#4739)
  Bump swiper from 11.0.6 to 11.0.7 (FreeTubeApp#4741)
  Bump electron-builder from 24.12.0 to 24.13.3 (FreeTubeApp#4744)
  Split view count and published date into two lines on small displays (FreeTubeApp#4736)
  Translated using Weblate (Chinese (Traditional))
  Fix URL copied via right click menu (FreeTubeApp#4690)
  Translated using Weblate (Croatian)
  Wrap ft-icon buttons below before they go fully vertical (FreeTubeApp#4735)
  * Make activating a chapter selector makes window scroll to top like clicking on timestamp links (FreeTubeApp#4722)
  Translated using Weblate (Portuguese (Brazil))
  Translated using Weblate (Portuguese (Brazil))
  Make video thumbnails have certain height before image loading starts to avoid layout shifts (FreeTubeApp#4723)
  ...

# Conflicts:
#	src/renderer/views/Playlist/Playlist.vue
@MarmadileManteater MarmadileManteater deleted the responsiveness-watch-info branch March 16, 2024 16:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants