Replace duration by live info
This commit is contained in:
parent
20c72fc6d5
commit
aab8cb0891
|
@ -5,7 +5,8 @@
|
||||||
<a class="img" :title="watchVideoMessage" target="_blank" rel="nofollow noreferrer noopener" v-bind:href="video.url">
|
<a class="img" :title="watchVideoMessage" target="_blank" rel="nofollow noreferrer noopener" v-bind:href="video.url">
|
||||||
<img v-bind:src="getVideoThumbnailUrl()" alt="">
|
<img v-bind:src="getVideoThumbnailUrl()" alt="">
|
||||||
|
|
||||||
<span class="duration">{{ formattedDuration }}</span>
|
<span v-if="video.isLive" class="live-info" v-translate>LIVE</span>
|
||||||
|
<span v-else class="duration">{{ formattedDuration }}</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -80,18 +81,27 @@
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.duration {
|
.duration,
|
||||||
|
.live-info {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
right: 5px;
|
right: 5px;
|
||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.duration {
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-info {
|
||||||
|
background-color: rgba(224, 8, 8 ,.8);
|
||||||
|
font-weight: $font-semibold;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $small-view) {
|
@media screen and (max-width: $small-view) {
|
||||||
--thumbnail-width: calc(100% + 10px);
|
--thumbnail-width: calc(100% + 10px);
|
||||||
--thumbnail-height: auto;
|
--thumbnail-height: auto;
|
||||||
|
|
Loading…
Reference in New Issue