lasers/FreeTube
1
0
Fork 0
mirror of https://github.com/FreeTubeApp/FreeTube synced 2024-12-11 12:09:35 +01:00
Code Issues Projects Releases Wiki Activity

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

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

* Add blank line

Co-authored-by: PikachuEXE <git@pikachuexe.net>

* Add blank line back

---------

Co-authored-by: PikachuEXE <git@pikachuexe.net>
This commit is contained in:
Emma 2024-03-04 03:11:04 -05:00 committed by GitHub
parent 0a11571f9d
commit 4a5e479bdf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/renderer/components/watch-video-info/watch-video-info.scss
View File

@ -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;
@media screen and (max-width: 680px) {
margin-inline-start: 0;
text-align: start;
}
.likeBar {
border-radius: 4px;
block-size: 8px;
margin-block-end: 4px;
}
.likeCount {
margin-inline-end: 0;
color: var(--tertiary-text-color);
display: flex;
gap: 3px;
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;
}
.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;
.seperator {
display: none;
}
}
}
.videoViews {
white-space: nowrap;
}
}
}

6
src/renderer/components/watch-video-info/watch-video-info.vue
View File

@ -10,8 +10,10 @@
<div class="videoMetrics">
<div class="datePublishedAndViewCount">
{{ publishedString }} {{ dateString }}
<template v-if="!hideVideoViews">
• {{ parsedViewCount }}
<template
v-if="!hideVideoViews"
>
<span class="seperator">• </span><span class="videoViews">{{ parsedViewCount }}</span>
</template>
</div>
<div