mirror of https://github.com/Chocobozzz/PeerTube
Client Better design for video watch
Chocobozzz
parent
383bfc8356
commit
09223546a4
|
|
@ -1,5 +1,6 @@
|
|||
<h3>Account</h3>
|
||||
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Change password</div>
|
||||
|
||||
|
|
@ -7,7 +8,9 @@
|
|||
<my-account-change-password></my-account-change-password>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Update my informations</div>
|
||||
|
||||
|
|
@ -15,3 +18,4 @@
|
|||
<my-account-details [user]="user"></my-account-details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ menu {
|
|||
height: 30px;
|
||||
color: #9cabb8;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none !important;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<div class="input-group">
|
||||
|
||||
<span class="input-group-addon icon-addon">
|
||||
|
|
|
|||
|
|
@ -31,52 +31,36 @@
|
|||
</div>
|
||||
|
||||
<div *ngIf="video !== null" id="video-info">
|
||||
<div class="row" id="video-name-actions">
|
||||
<div class="col-md-6">
|
||||
<div class="row">
|
||||
<div id="video-name" class="col-md-12">
|
||||
{{ video.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12" id="video-by-date">
|
||||
<span id="video-by">
|
||||
from
|
||||
<a [routerLink]="['/videos/list', { field: 'author', search: video.author }]" class="video-miniature-author">
|
||||
{{ video.by }}
|
||||
</a>
|
||||
</span>
|
||||
<span id="video-date">on {{ video.createdAt | date:'short' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row video-name-views">
|
||||
<div id="video-name" class="col-md-8">
|
||||
{{ video.name }}
|
||||
</div>
|
||||
|
||||
<div id="video-actions" class="col-md-6 text-right">
|
||||
<div id="rates">
|
||||
<button
|
||||
id="likes" class="btn btn-default"
|
||||
[ngClass]="{ 'not-interactive-btn': !isUserLoggedIn(), 'activated-btn': userRating === 'like' }" (click)="setLike()"
|
||||
>
|
||||
<span class="glyphicon glyphicon-thumbs-up"></span> {{ video.likes }}
|
||||
</button>
|
||||
<div class="col-md-4 pull-right video-views">
|
||||
{{ video.views}} views
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="dislikes" class="btn btn-default"
|
||||
[ngClass]="{ 'not-interactive-btn': !isUserLoggedIn(), 'activated-btn': userRating === 'dislike' }" (click)="setDislike()"
|
||||
>
|
||||
<span class=" glyphicon glyphicon-thumbs-down"></span> {{ video.dislikes }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="row video-small-blocks">
|
||||
<div class="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 }]">
|
||||
{{ video.by }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button id="share" class="btn btn-default" (click)="showShareModal()">
|
||||
<span class="glyphicon glyphicon-share"></span> Share
|
||||
</button>
|
||||
<div class="col-md-3 video-small-block video-small-block-share">
|
||||
<a class="option" (click)="showShareModal()" title="Share the video">
|
||||
<span class="glyphicon glyphicon-share"></span>
|
||||
<span class="video-small-block-text">Share</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="btn-group" dropdown>
|
||||
<button id="single-button" type="button" id="more" class="btn btn-default" dropdownToggle>
|
||||
<span class="glyphicon glyphicon-option-horizontal"></span> More
|
||||
</button>
|
||||
<div class="col-md-3 video-small-block video-small-block-more">
|
||||
<div class="video-small-block-dropdown" dropdown dropup="true" placement="right">
|
||||
<a class="option" title="Access to more options" dropdownToggle>
|
||||
<span class="glyphicon glyphicon-option-horizontal"></span>
|
||||
<span class="video-small-block-text">More</span>
|
||||
</a>
|
||||
|
||||
<ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
|
||||
<li *ngIf="canUserUpdateVideo()" role="menuitem">
|
||||
|
|
@ -87,7 +71,7 @@
|
|||
|
||||
<li role="menuitem">
|
||||
<a class="dropdown-item" title="Get magnet URI" href="#" (click)="showMagnetUriModal($event)">
|
||||
<span class="glyphicon glyphicon-magnet"></span> Magnet
|
||||
<span class="glyphicon glyphicon-magnet"></span> Magnet
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
|
@ -111,45 +95,70 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="video-tags-views" class="row">
|
||||
<div class="col-md-8">
|
||||
<a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
|
||||
{{ tag }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 video-small-block video-small-block-rating">
|
||||
<div class="video-small-block-like">
|
||||
<span
|
||||
class="glyphicon glyphicon-thumbs-up" title="Like this video"
|
||||
[ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'like' }" (click)="setLike()"
|
||||
></span>
|
||||
|
||||
<div id="video-views" class="col-md-4 text-right">
|
||||
{{ video.views }} views
|
||||
<span class="video-small-block-text">
|
||||
{{ video.likes }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="video-small-block-dislike">
|
||||
<span
|
||||
class="glyphicon glyphicon-thumbs-down" title="Dislike this video"
|
||||
[ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'dislike' }" (click)="setDislike()"
|
||||
></span>
|
||||
|
||||
<span class="video-small-block-text">
|
||||
{{ video.dislikes }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="video-category" class="row">
|
||||
<div class="col-md-12">
|
||||
<span id="category-label">Category:</span>
|
||||
{{ video.categoryLabel }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row video-details">
|
||||
<div class="video-details-date-description col-md-9">
|
||||
<div class="video-details-date">
|
||||
Published on {{ video.createdAt | date:'short' }}
|
||||
</div>
|
||||
|
||||
<div id="video-licence" class="row">
|
||||
<div class="col-md-12">
|
||||
<span id="licence-label">Licence:</span>
|
||||
{{ video.licenceLabel }}
|
||||
<div class="video-details-description">
|
||||
{{ video.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="video-language" class="row">
|
||||
<div class="col-md-12">
|
||||
<span id="language-label">Language:</span>
|
||||
{{ video.languageLabel }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-details-attributes col-md-3">
|
||||
<div class="video-details-attribute">
|
||||
<span class="video-details-attribute-label">
|
||||
Category:
|
||||
</span>
|
||||
<span class="video-details-attribute-value">
|
||||
{{ video.categoryLabel }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="video-description" class="row">
|
||||
<div class="col-md-12">
|
||||
<div id="description-label">Description</div>
|
||||
{{ video.description }}
|
||||
<div class="video-details-attribute">
|
||||
<span class="video-details-attribute-label">
|
||||
Licence:
|
||||
</span>
|
||||
<span class="video-details-attribute-value">
|
||||
{{ video.licenceLabel }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="video-details-attribute">
|
||||
<span class="video-details-attribute-label">
|
||||
Language:
|
||||
</span>
|
||||
<span class="video-details-attribute-value">
|
||||
{{ video.languageLabel }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,102 +32,136 @@
|
|||
}
|
||||
|
||||
#video-info {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
margin-top: 10px;
|
||||
padding-top: 5px;
|
||||
.video-name-views {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
height: $video-watch-title-height;
|
||||
line-height: $video-watch-title-height;
|
||||
padding: 0 30px;
|
||||
|
||||
#video-name-actions {
|
||||
|
||||
#video-name {
|
||||
font-size: 20px;
|
||||
.video-views {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.btn .glyphicon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.video-small-blocks {
|
||||
height: 150px;
|
||||
color: $video-watch-info-color;
|
||||
border-color: $video-watch-border-color;
|
||||
border-width: 1px 0px;
|
||||
border-style: solid;
|
||||
|
||||
#rates {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
.video-small-block {
|
||||
height: $video-watch-info-height;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
// Remove focus style
|
||||
.btn:focus {
|
||||
outline: 0;
|
||||
a {
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&, &:hover {
|
||||
color: inherit;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.activated-btn {
|
||||
color: #333;
|
||||
background-color: #e6e6e6;
|
||||
border-color: #8c8c8c;
|
||||
.option .glyphicon {
|
||||
font-size: 22px;
|
||||
color: inherit;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.not-interactive-btn {
|
||||
cursor: default;
|
||||
.video-small-block-text {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
border-color: #ccc;
|
||||
box-shadow: none;
|
||||
outline: 0;
|
||||
.video-small-block:not(:last-child) {
|
||||
border-width: 0 1px 0 0;
|
||||
border-color: $video-watch-border-color;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.video-small-block-author {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.video-small-block-share, .video-small-block-more {
|
||||
a.option {
|
||||
display: block;
|
||||
|
||||
.glyphicon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#share, #more {
|
||||
.video-small-block-more .video-small-block-dropdown {
|
||||
position: relative;
|
||||
|
||||
.dropdown-item .glyphicon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-small-block-rating {
|
||||
|
||||
.video-small-block-like {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.video-small-block-text {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.glyphicon {
|
||||
font-size: 18px;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.interactive {
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&.activated, &:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-details {
|
||||
margin-top: 30px;
|
||||
|
||||
.video-details-date-description {
|
||||
padding-left: 30px;
|
||||
|
||||
.video-details-date {
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-details-attributes {
|
||||
font-weight: bold;
|
||||
opacity: 0.85;
|
||||
}
|
||||
font-size: 12px;
|
||||
|
||||
#more-menu .dropdown-item .glyphicon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#video-by-date {
|
||||
font-size: 13px;
|
||||
opacity: 0.6;
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#video-date:before {
|
||||
content: '\002022';
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#video-tags-views {
|
||||
margin-top: 10px;
|
||||
|
||||
a {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#video-views {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
#video-category {
|
||||
margin-top: 10px;
|
||||
|
||||
#category-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
#video-licence #licence-label, #video-language #language-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#video-description {
|
||||
margin-top: 10px;
|
||||
|
||||
#description-label {
|
||||
font-weight: bold;
|
||||
.video-details-attribute-label {
|
||||
color: $video-watch-info-color;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,15 @@
|
|||
$grey-color: #555;
|
||||
|
||||
$black-background: #1d2125;
|
||||
$grey-background: #f6f2f2;
|
||||
|
||||
$header-height: 60px;
|
||||
$header-height: 65px;
|
||||
$header-border-color: #e9eff6;
|
||||
|
||||
$video-miniature-title-color: #16a2b7;
|
||||
$video-miniature-other-infos: #686767;
|
||||
|
||||
$video-watch-border-color: #eceef4;
|
||||
$video-watch-title-height: 90px;
|
||||
$video-watch-info-color: #8e909b;
|
||||
$video-watch-info-height: 150px;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,10 @@ input.readonly {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.glyphicon-black {
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -61,7 +65,7 @@ input.readonly {
|
|||
|
||||
#peertube-title {
|
||||
background-color: #fff;
|
||||
border-right: 2px solid $header-border-color;
|
||||
border-right: 1px solid $header-border-color;
|
||||
font-size: 25px;
|
||||
line-height: $header-height;
|
||||
text-align: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue