From 4a5e479bdfa20c4bcd05eb9de28db59c4f8be060 Mon Sep 17 00:00:00 2001 From: Emma Date: Mon, 4 Mar 2024 03:11:04 -0500 Subject: [PATCH 1/8] Split view count and published date into two lines on small displays (#4736) * Split view count and published date into two lines on small displays * Add blank line Co-authored-by: PikachuEXE * Add blank line back --------- Co-authored-by: PikachuEXE --- .../watch-video-info/watch-video-info.scss | 54 ++++++++++++------- .../watch-video-info/watch-video-info.vue | 6 ++- 2 files changed, 38 insertions(+), 22 deletions(-) diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss index 4ffea33c35f6c..09177b58dae35 100644 --- a/src/renderer/components/watch-video-info/watch-video-info.scss +++ b/src/renderer/components/watch-video-info/watch-video-info.scss @@ -85,29 +85,43 @@ color: var(--tertiary-text-color); .likeSection { - color: var(--tertiary-text-color); - display: flex; - flex-direction: column; - margin-inline-start: auto; - margin-block-start: 4px; - max-inline-size: 210px; - text-align: end; + color: var(--tertiary-text-color); + display: flex; + flex-direction: column; + margin-inline-start: auto; + margin-block-start: 4px; + max-inline-size: 210px; + text-align: end; - @media screen and (max-width: 680px) { - margin-inline-start: 0; - text-align: start; - } + @media screen and (max-width: 680px) { + margin-inline-start: 0; + text-align: start; + } - .likeBar { - border-radius: 4px; - block-size: 8px; - margin-block-end: 4px; + .likeBar { + border-radius: 4px; + block-size: 8px; + margin-block-end: 4px; + } + + .likeCount { + margin-inline-end: 0; + display: flex; + gap: 3px; + } } + .datePublishedAndViewCount { + @media only screen and (max-width: 460px) { + display: flex; + justify-content: left; + flex-direction: column; - .likeCount { - margin-inline-end: 0; - display: flex; - gap: 3px; + .seperator { + display: none; + } + } + } + .videoViews { + white-space: nowrap; } -} } diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue index 78d6f137b9d49..76843dbb4112b 100644 --- a/src/renderer/components/watch-video-info/watch-video-info.vue +++ b/src/renderer/components/watch-video-info/watch-video-info.vue @@ -10,8 +10,10 @@
{{ publishedString }} {{ dateString }} -