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

View File

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

View File

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