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

Client Better design for video watch

pull/71/head
Chocobozzz 2017-04-21 16:40:45 +02:00
parent 383bfc8356
commit 09223546a4
7 changed files with 213 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/account/account.component.html
View File

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

1
client/src/app/core/menu/menu-admin.component.scss
View File

@ -9,6 +9,7 @@ menu {
height: 30px;
color: #9cabb8;
cursor: pointer;
transition: color 0.3s;
&:hover, &:focus {
text-decoration: none !important;

1
client/src/app/shared/search/search.component.html
View File

@ -1,4 +1,3 @@
<div class="input-group">
<span class="input-group-addon icon-addon">

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

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

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

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

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

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

6
client/src/sass/application.scss
View File

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