mirror of https://github.com/Chocobozzz/PeerTube
Client: display video tags
parent
b362290d40
commit
8ce9e815c8
|
@ -11,7 +11,7 @@
|
||||||
Inspirations from:
|
Inspirations from:
|
||||||
|
|
||||||
* [Aurélien Salomon](https://dribbble.com/shots/1338727-Youtube-Redesign)
|
* [Aurélien Salomon](https://dribbble.com/shots/1338727-Youtube-Redesign)
|
||||||
* [Adrien Thomas](https://dribbble.com/shots/1363194-YouTube-Redesign-Profil-page)
|
* [Wojciech Zieliński](https://dribbble.com/shots/3000315-youtube-concept)
|
||||||
|
|
||||||
# Fonts
|
# Fonts
|
||||||
|
|
||||||
|
|
|
@ -24,6 +24,12 @@
|
||||||
<a [routerLink]="['/videos/watch', video.id]" [attr.title]="getVideoName()" class="video-miniature-name">{{ getVideoName() }}</a>
|
<a [routerLink]="['/videos/watch', video.id]" [attr.title]="getVideoName()" class="video-miniature-name">{{ getVideoName() }}</a>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
<div class="video-miniature-tags">
|
||||||
|
<span *ngFor="let tag of video.tags" class="video-miniature-tag">
|
||||||
|
<a [routerLink]="['/videos/list', { field: 'tags', search: tag, sort: currentSort }]" class="label label-primary">{{ tag }}</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
|
<a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
|
||||||
<span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
|
<span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -157,6 +157,19 @@
|
||||||
{{ video.languageLabel }}
|
{{ video.languageLabel }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="video-details-attribute">
|
||||||
|
<span class="video-details-attribute-label">
|
||||||
|
Tags:
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div class="video-details-tags">
|
||||||
|
<a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
|
||||||
|
{{ tag }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -80,7 +80,7 @@
|
||||||
.option .glyphicon {
|
.option .glyphicon {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
opacity: 0.9;
|
opacity: 0.6;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -170,5 +170,15 @@
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.video-details-tags {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 3px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,6 +15,6 @@ $video-miniature-other-infos: #686767;
|
||||||
|
|
||||||
$video-watch-border-color: #eceef4;
|
$video-watch-border-color: #eceef4;
|
||||||
$video-watch-title-height: 90px;
|
$video-watch-title-height: 90px;
|
||||||
$video-watch-info-color: #8e909b;
|
$video-watch-info-color: #9da0ae;
|
||||||
$video-watch-info-height: 120px;
|
$video-watch-info-height: 120px;
|
||||||
$video-watch-info-padding-left: 40px;
|
$video-watch-info-padding-left: 40px;
|
||||||
|
|
Loading…
Reference in New Issue