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

Split view count and published date into two lines on small displays #4736

Conversation

MarmadileManteater
Copy link
Contributor

Split view count and published date into two lines on small displays

Pull Request Type

  • Bugfix
  • Feature Implementation
  • Documentation
  • Other

Description

The view count tends to split in a way that looks awkward on small displays. The number part of the view count ends up on a different line than the text part of the view count, and it makes it a little difficult to read. This PR addresses this by splitting the published date and view count onto different lines on small displays so that the view count is less likely to wrap in this way.

Screenshots

before after
before-2 after-2

Testing

  1. Make sure you are using the local API (iv seems to return 0 for likes ATM)
  2. Find a video with a high view count and a high like count (ex: https://youtu.be/K_CbgLpvH9E)
  3. Reduce the screen width to <= 460px
  4. Ensure the view count does not split the text part of the line from the number part

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 picked 460px because view counts and like counts can vary. The example video in the screenshots has plenty of space at screen width 460px, but not all videos do. That is why the width was picked.

@github-actions github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Mar 2, 2024
@FreeTubeBot FreeTubeBot enabled auto-merge (squash) March 2, 2024 00:46
@@ -70,31 +70,43 @@
.videoMetrics {
font-size: 14px;
color: var(--tertiary-text-color);

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why removing the blank line

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i mistakenly removed it, but it should be back now

MarmadileManteater and others added 2 commits March 3, 2024 07:07
Co-authored-by: PikachuEXE <git@pikachuexe.net>
@FreeTubeBot FreeTubeBot merged commit 4a5e479 into FreeTubeApp:development Mar 4, 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 4, 2024
PikachuEXE added a commit to PikachuEXE/FreeTube that referenced this pull request Mar 6, 2024
* development:
  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)
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 split-views-and-published-on-narrow-displays branch March 16, 2024 16:04
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