forks/peertube
1
0
Fork 0
Code Releases Activity

Clean up bottom video bar

Browse source
This commit is contained in:
Chocobozzz 2017-07-06 17:18:10 +02:00
parent e14852b4bf
commit 4e1b09735d
2 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/src/app/videos/video-watch/video-watch.component.html
View file

@ -43,8 +43,9 @@
<div class="row video-small-blocks"> <div class="row video-small-blocks">
<div class="col-xs-5 col-xs-3 col-md-3 video-small-block video-small-block-author"> <div class="col-xs-5 col-xs-3 col-md-3 video-small-block video-small-block-author">
<a title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'author', search: video.author }]"> <a class="option" title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'author', search: video.author }]">
{{ video.by }} <span class="glyphicon glyphicon-user"></span>
<span class="video-small-block-text">{{ video.by }}</span>
</a> </a>
</div> </div>

24
client/src/app/videos/video-watch/video-watch.component.scss
View file

@ -77,13 +77,18 @@
&:hover { &:hover {
color: #000 !important; color: #000 !important;
} }
&:hover > .glyphicon {
opacity: 1 !important;
}
} }
.option .glyphicon { .option .glyphicon {
font-size: 22px; font-size: 22px;
color: inherit; color: inherit;
opacity: 0.6; opacity: 0.15;
margin-bottom: 10px; margin-bottom: 10px;
transition: opacity 0.3s;
} }
.video-small-block-text { .video-small-block-text {
@ -98,11 +103,14 @@
border-style: solid; border-style: solid;
} }
.video-small-block-author { .video-small-block-author, .video-small-block-more {
font-size: 15px; a.option {
font-weight: bold; display: block;
text-align: left;
padding-left: $video-watch-info-padding-left; .glyphicon {
display: block;
}
}
} }
.video-small-block-share, .video-small-block-more { .video-small-block-share, .video-small-block-more {
@ -136,13 +144,15 @@
.glyphicon { .glyphicon {
font-size: 18px; font-size: 18px;
margin: 0 10px 0 0; margin: 0 10px 0 0;
opacity: 0.3;
} }
.interactive { .interactive {
cursor: pointer; cursor: pointer;
transition: color 0.3s; transition: opacity, color 0.3s;
&.activated, &:hover { &.activated, &:hover {
opacity: 1;
color: #000; color: #000;
} }
} }