interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Client: display video tags

This commit is contained in:
Chocobozzz 2017-04-23 21:57:08 +02:00
parent b362290d40
commit 8ce9e815c8
5 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CREDITS.md
View File

@ -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

6
client/src/app/videos/video-list/video-miniature.component.html
View File

@ -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>

13
client/src/app/videos/video-watch/video-watch.component.html
View File

@ -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>

12
client/src/app/videos/video-watch/video-watch.component.scss
View File

@ -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;
}
}
} }
} }

2
client/src/sass/_variables.scss
View File

@ -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;