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.

Sign up for GitHub

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

Jump to bottom

[Feature Request]: Improve CSS in various places #4284

Open
3 tasks done
efb4f5ff-1298-471a-8973-3d47447115dc opened this issue Nov 5, 2023 · 0 comments
Open
3 tasks done

[Feature Request]: Improve CSS in various places #4284

efb4f5ff-1298-471a-8973-3d47447115dc opened this issue Nov 5, 2023 · 0 comments
Labels
E: ease of use improvement E: visual improvement enhancement New feature or request

Comments

@efb4f5ff-1298-471a-8973-3d47447115dc
Copy link
Member

Guidelines

  • I have searched the issue tracker for open and closed issues that are similar to the feature request I want to file, without success.
  • I have searched the documentation for information that matches the description of the feature request I want to file, without success.
  • This issue contains only one feature request.

Problem Description

Unicode character has been used in testing: 𒐫

My findings (all of these findings have corresponding screenshots):

The following applies for these pages Subscriptions, Trending, Most Popular, Playlist, History, Search and Profile page with the setting enabled view video type = grid

  1. Video titles are getting too long in the vertical direction.
  2. Profile names are overlapping on other profile names or even video titles.
  3. Profile names don't stay within the border of the grid.
  4. Thumbnail is getting stretched in horizontal direction.

The following applies for the Video player page.

  1. Video title getting too long in the vertical direction.
  2. Profile name getting too long.
  3. Video description is getting too long.
  4. Buttons under the video dont stay within the border.

The following applies for the Comment section on the Video player page.

  1. Profile name getting too long.
  2. Comments don't stay within the border.
  3. Comments getting too long in vertical direction.
  4. Allot of Unicode characters are not supported by FreeTube.

The following applies for the Up next section on the Video player page.

  1. Profile name doesn't stay within the border of the grid, stretches the other titles out of border and the option button doesn't stay in place.
  2. Video title gets too long.

The following applies for the Channel page.

  1. Profile name getting too long and doesn't stay within border.
  2. Channel description getting too long.

The following applies for the Playlist page.

  1. Title gets too long.
  2. Profile name gets too long.
  3. Video section: Title gets too long.
  4. Video section: Profile name gets too long.

The following applies for the Playlist section on the video page.

  1. Playlist title doesnt stay within border.
  2. Profile name of list creator gets too long.
  3. Thumbnails in list doesn't stay within the list.
  4. Video title gets too long.
  5. Profile name gets too long.

The following applies for these pages Subscriptions, Trending, Most Popular, Playlist, History, Search and Profile page with the setting enabled view video type = list

  1. Video title is getting to long in horizontal direction and gets out of border.
  2. Profile name is getting to long in horizontal direction and gets out of border.
  3. Video description is not consistently shown on every page.

Proposed Solution

Some of the 'solutions' have corresponding screenshots

  1. Cut a title off when its too long and put three dots(...) at the end.
  2. Cut profile name off when its too long and maybe put three dots(...) at the end.
  3. Profile name must stay within the border and cut off if too long.
  4. Stay within the borders of the grid.
  5. Cut the title off then its too long.
  6. Cut of the profile name when it is too long.
  7. Make an preview of the description and a button to click on that says 'Show more' and when u click on it you'll see the full description.
  8. Stay within the border of the section where the buttons normally are.
  9. Cut the profile name off when too long.
  10. Comment must stay within border and cut off if too long and put three dots(...) at the end.
  11. Make a preview and a tab that says 'Read more' and when u click on it you'll see the full comment.
  12. I really don't know a solution for this.
  13. Stay within the border (cut the profile name off), don't stretch other titles out of the border and option button stays in place.
  14. Cut of title when it gets too long.
  15. Cut profile name off when too long and profile name stays within border.
  16. Cut of when its too long and put three dots(...) at the end with a show more button.
  17. Make the title visible in the vertical direction.
  18. Make the profile name visible in vertical direction.
  19. If title reaches end of border, continue the title in the line below.
  20. If Profile name reaches end of border, cut profile name off.
  21. If title reaches end of border, cut title off.
  22. Cut the profile name off and put ... behind it.
  23. Make the thumbnails stay in the list.
  24. Cut a title off when its too long and put three dots(...) at the end.
  25. Cut the profile name off when too long.
  26. Display title properly and dont let it go out of the border.
  27. Display profile name properly and dont let it go out of the border.
  28. Display description everywhere.

Alternatives Considered

All the 'alternatives' have corresponding screenshots

  1. None
  2. YT cuts them off when they're too long but they also implemented that when u hover on a profile name, the full profile name shows itself in a popup. However on the profile page YT just removed the profile name, because there is no need for it to be there.
  3. None.
  4. None.
  5. None.
  6. Same alternative as number 2.
  7. None.
  8. None.
  9. Same alternative as number 2.
  10. None.
  11. None.
  12. None.
  13. Same alternative as number 2.
  14. None.
  15. Same alternative as number 2.
  16. None.
  17. None.
  18. Same alternative as number 2.
  19. None.
  20. Same alternative as number 2.
  21. None.
  22. Same alternative as number 2.
  23. None.
  24. None.
  25. Same alternative as number 2.
  26. None.
  27. Same alternative as number 2.
  28. None.

Issue Labels

ease of use improvement, visual improvement

Additional Information

Screenshots (Dark theme is FreeTube and Light theme is YouTube Solution / Alternative)

  1. https://www.youtube.com/results?search_query=%F0%92%90%AB+
    Screenshot (12)

  2. https://www.youtube.com/results?search_query=%F0%92%90%AB+
    Capture

Alternative:
Screenshot (14)

  1. https://www.youtube.com/results?search_query=%F0%92%90%AB+
    Capture

  2. Best way to find this is to search 𒐫 with filter Type: Videos enabled
    Capture

  3. https://youtu.be/mAMdleRNTjk
    Capture

YT solution:
Capture1

  1. https://youtu.be/gSlhGZg4Kfc
    Capture

  2. https://www.youtube.com/watch?v=mAMdleRNTjk
    Capture

YT solution:
Capture1

  1. https://youtu.be/ta67rqaSVnc
    Capture

  2. https://www.youtube.com/watch?v=aXqt-10pWpw
    Capture

  3. https://youtu.be/UAj01-6lWD8
    Capture

  4. https://youtu.be/UAj01-6lWD8
    (Well its not the same comment but you'll get the principle)
    Capture

YT solution:
Capture1

  1. https://youtu.be/oL59ryNVaXk
    Capture
    Capture1

  2. https://www.youtube.com/channel/UCYjRiR2FeyxpROu3laVWo_Q
    (Go to his channel > watch a vid > check the up next section > if u dont see it > go back to his channel and watch a other vid > check up next section > repeat procedure untill u get the result)
    Capture

  3. I couldn't find an example for this so i edited this with the developer tools.
    14 new

  4. https://www.youtube.com/channel/UCYjRiR2FeyxpROu3laVWo_Q
    Capture

  5. I couldn't find an example for this so i edited this with the developer tools.
    16 new

  6. https://youtube.com/playlist?list=PL_7YUVmmp-LeUE2P6AbRKr4bRsr6p2ycs

qc3YsQeiS2.mp4

YT solution:
Capture

  1. https://www.youtube.com/playlist?list=PLU_lUL8sj0nuNfOcOxuPOEFCuOEYCJ4ir (See video 15, the same scrolling problem happens here too.)
    Capture

  2. https://www.youtube.com/playlist?list=PLECWFmo8x9dZdduiItKmg1qS40vUB68Ir

PMkJxv0t2a.mp4
  1. https://www.youtube.com/playlist?list=PLECWFmo8x9dZdduiItKmg1qS40vUB68Ir
PMkJxv0t2a.mp4
  1. https://youtube.com/playlist?list=PL_7YUVmmp-LeUE2P6AbRKr4bRsr6p2ycs (U will get to the playlist page. U need to start a video in the list.)
    Playlist name

YT solution:
Playlist name

  1. https://www.youtube.com/playlist?list=PLECWFmo8x9dZdduiItKmg1qS40vUB68Ir (U will get to the playlist page. U need to start a video in the list.)

Profile name

  1. https://www.youtube.com/playlist?list=PLECWFmo8x9dZdduiItKmg1qS40vUB68Ir (U will get to the playlist page. U need to start a video in the list.)
Border.thumbnails.mp4

  1. I couldn't find an example for this so i edited this with the developer tools.
    22

  2. I couldn't find an example for this so i edited this with the developer tools.

23.mp4
  1. Search for 𒐫 with this filter enabled Type=video
nQkZYS5X4E.mp4
  1. Search for 𒐫 with this filter enabled Type=video
nQkZYS5X4E.mp4
  1. Just check out the pages like in the video.
lbOuDGtkAP.mp4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
E: ease of use improvement E: visual improvement enhancement New feature or request
Projects
Feature Requests
Status: To assign
Milestone
No milestone
Development

No branches or pull requests
1 participant
@efb4f5ff-1298-471a-8973-3d47447115dc