tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Right align like bar counters

This commit is contained in:
Cadence Ember 2020-06-17 23:37:36 +12:00
parent 274d5dbc86
commit 6cb99b2d2e
No known key found for this signature in database
GPG Key ID: 128B99B1B74A6412
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/renderer/components/watch-video-info/watch-video-info.sass
View File

@ -39,10 +39,10 @@
.likeSection .likeSection
margin-top: 16px margin-top: 16px
font-size: 14px font-size: 14px
display: grid display: flex
grid-template-columns: auto auto flex-direction: column
justify-content: space-between
margin-left: auto margin-left: auto
text-align: right
max-width: 210px max-width: 210px
@media screen and (max-width: 680px) @media screen and (max-width: 680px)
@ -51,10 +51,11 @@
.likeBar .likeBar
height: 8px height: 8px
border-radius: 4px border-radius: 4px
background: red
grid-column: 1 / 3
margin-bottom: 4px margin-bottom: 4px
.likeCount
margin-right: 6px
.videoOptions .videoOptions
margin-top: 16px margin-top: 16px
display: flex display: flex

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

@ -48,8 +48,10 @@
class="likeBar" class="likeBar"
:style="{ background: `linear-gradient(to right, var(--accent-color) ${likePercentageRatio}%, #9E9E9E ${likePercentageRatio}%` }" :style="{ background: `linear-gradient(to right, var(--accent-color) ${likePercentageRatio}%, #9E9E9E ${likePercentageRatio}%` }"
></div> ></div>
<div class="likeCount">👍 {{ likeCount }}</div> <div>
<div class="dislikeCount">{{ dislikeCount }} 👎</div> <span class="likeCount">👍 {{ likeCount }}</span>
<span class="dislikeCount">👎 {{ dislikeCount }}</span>
</div>
</div> </div>
</div> </div>
<div class="videoOptions"> <div class="videoOptions">