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

Client: beautiful watch page

pull/71/head
Chocobozzz 2017-04-21 18:26:09 +02:00
parent ea9f487b40
commit 897ec54d76
21 changed files with 471 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/app/+admin/friends/friend-add/friend-add.component.html
View File

@ -1,8 +1,11 @@
<h3>Make friends</h3> <div class="row">
<div class="content-padding">
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <h3>Make friends</h3>
<form (ngSubmit)="makeFriends()" [formGroup]="form"> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<form (ngSubmit)="makeFriends()" [formGroup]="form">
<div class="form-group" *ngFor="let host of hosts; let id = index; trackBy:customTrackBy"> <div class="form-group" *ngFor="let host of hosts; let id = index; trackBy:customTrackBy">
<label for="username">Host</label> <label for="username">Host</label>
@ -27,4 +30,6 @@
</div> </div>
<input type="submit" value="Make friends" class="btn btn-default" [disabled]="!isFormValid()"> <input type="submit" value="Make friends" class="btn btn-default" [disabled]="!isFormValid()">
</form> </form>
</div>
</div>

16
client/src/app/+admin/friends/friend-list/friend-list.component.html
View File

@ -1,11 +1,15 @@
<h3>Friends list</h3> <div class="row">
<div class="content-padding">
<h3>Friends list</h3>
<ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table> <ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table>
<a *ngIf="hasFriends()" class="btn btn-danger pull-left" (click)="quitFriends()"> <a *ngIf="hasFriends()" class="btn btn-danger pull-left" (click)="quitFriends()">
Quit friends Quit friends
</a> </a>
<a *ngIf="!hasFriends()" class="btn btn-success pull-right" [routerLink]="['/admin/friends/add']"> <a *ngIf="!hasFriends()" class="btn btn-success pull-right" [routerLink]="['/admin/friends/add']">
Make friends Make friends
</a> </a>
</div>
</div>

9
client/src/app/+admin/requests/request-stats/request-stats.component.html
View File

@ -1,6 +1,9 @@
<h3>Requests stats</h3> <div class="row">
<div class="content-padding">
<div *ngFor="let requestSchedulerName of statsTitles | keys" class="col-lg-4 col-md-12"> <h3>Requests stats</h3>
<div *ngFor="let requestSchedulerName of statsTitles | keys" class="col-lg-4 col-md-12">
<div class="panel panel-default" *ngIf="stats[requestSchedulerName] !== null"> <div class="panel panel-default" *ngIf="stats[requestSchedulerName] !== null">
<div class="panel-heading">{{ statsTitles[requestSchedulerName] }}</div> <div class="panel-heading">{{ statsTitles[requestSchedulerName] }}</div>
@ -35,4 +38,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>

13
client/src/app/+admin/users/user-add/user-add.component.html
View File

@ -1,8 +1,11 @@
<h3>Add user</h3> <div class="row">
<div class="content-padding">
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <h3>Add user</h3>
<form role="form" (ngSubmit)="addUser()" [formGroup]="form"> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<form role="form" (ngSubmit)="addUser()" [formGroup]="form">
<div class="form-group"> <div class="form-group">
<label for="username">Username</label> <label for="username">Username</label>
<input <input
@ -37,4 +40,6 @@
</div> </div>
<input type="submit" value="Add user" class="btn btn-default" [disabled]="!form.valid"> <input type="submit" value="Add user" class="btn btn-default" [disabled]="!form.valid">
</form> </form>
</div>
</div>

15
client/src/app/+admin/users/user-list/user-list.component.html
View File

@ -1,11 +1,16 @@
<h3>Users list</h3> <div class="row">
<div class="content-padding">
<ng2-smart-table <h3>Users list</h3>
<ng2-smart-table
[settings]="tableSettings" [source]="usersSource" [settings]="tableSettings" [source]="usersSource"
(delete)="removeUser($event)" (delete)="removeUser($event)"
></ng2-smart-table> ></ng2-smart-table>
<a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']"> <a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']">
<span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-plus"></span>
Add user Add user
</a> </a>
</div>
</div>

12
client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
View File

@ -1,5 +1,11 @@
<h3>Video abuses list</h3> <div class="row">
<div class="content-padding">
<ng2-smart-table <h3>Video abuses list</h3>
<ng2-smart-table
[settings]="tableSettings" [source]="videoAbusesSource" [settings]="tableSettings" [source]="videoAbusesSource"
></ng2-smart-table> ></ng2-smart-table>
</div>
</div>

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

@ -1,21 +1,25 @@
<h3>Account</h3> <div class="row">
<div class="content-padding">
<h3>Account</h3>
<div class="col-md-6 col-sm-12"> <div class="col-md-6 col-sm-12">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Change password</div> <div class="panel-heading">Change password</div>
<div class="panel-body"> <div class="panel-body">
<my-account-change-password></my-account-change-password> <my-account-change-password></my-account-change-password>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6 col-sm-12"> <div class="col-md-6 col-sm-12">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Update my informations</div> <div class="panel-heading">Update my informations</div>
<div class="panel-body"> <div class="panel-body">
<my-account-details [user]="user"></my-account-details> <my-account-details [user]="user"></my-account-details>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>

7
client/src/app/app.component.html
View File

@ -16,15 +16,16 @@
</div> </div>
<div class="col-md-10 col-sm-9 col-xs-9 main-col"> <div class="col-md-10 col-sm-9 col-xs-9 main-col">
<div class="header"> <div class="row header">
<my-search></my-search> <!-- We need to reset col-md-* because my-search is in fixed position -->
<my-search class="col-md-10 col-sm-9 col-xs-9"></my-search>
</div> </div>
<div class="main-row"> <div class="main-row">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
<footer> <footer class="row">
PeerTube, CopyLeft 2015-2017 PeerTube, CopyLeft 2015-2017
</footer> </footer>
</div> </div>

17
client/src/app/app.component.scss
View File

@ -30,10 +30,15 @@
} }
} }
footer { my-search {
border-top: 1px solid rgba(0, 0, 0, 0.2); // Fix col-md-* padding
padding: 10px; padding: 0;
text-align: center; }
font-size: small;
margin: 30px 10px 0 10px; footer {
border-top: 1px solid $footer-border-color;
padding: 10px 0;
text-align: center;
font-size: 11px;
margin-top: 30px;
} }

13
client/src/app/login/login.component.html
View File

@ -1,8 +1,11 @@
<h3>Login</h3> <div class="row">
<div class="content-padding">
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <h3>Login</h3>
<form role="form" (ngSubmit)="login()" [formGroup]="form"> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<form role="form" (ngSubmit)="login()" [formGroup]="form">
<div class="form-group"> <div class="form-group">
<label for="username">Username</label> <label for="username">Username</label>
<input <input
@ -26,4 +29,6 @@
</div> </div>
<input type="submit" value="Login" class="btn btn-default" [disabled]="!form.valid"> <input type="submit" value="Login" class="btn btn-default" [disabled]="!form.valid">
</form> </form>
</div>
</div>

14
client/src/app/signup/signup.component.html
View File

@ -1,8 +1,11 @@
<h3>Signup</h3> <div class="row">
<div class="content-padding">
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <h3>Signup</h3>
<form role="form" (ngSubmit)="signup()" [formGroup]="form"> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<form role="form" (ngSubmit)="signup()" [formGroup]="form">
<div class="form-group"> <div class="form-group">
<label for="username">Username</label> <label for="username">Username</label>
<input <input
@ -37,4 +40,7 @@
</div> </div>
<input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid"> <input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid">
</form> </form>
</div>
</div>

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

@ -1,8 +1,11 @@
<h3>Upload a video</h3> <div class="row">
<div class="content-padding">
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <h3>Upload a video</h3>
<form novalidate [formGroup]="form"> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<form novalidate [formGroup]="form">
<div class="form-group"> <div class="form-group">
<label for="name">Name</label> <label for="name">Name</label>
<input <input
@ -111,4 +114,6 @@
(click)="upload()" (click)="upload()"
> >
</div> </div>
</form> </form>
</div>
</div>

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

@ -1,8 +1,11 @@
<h3>Update {{ video?.name }}</h3> <div class="row">
<div class="content-padding">
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <h3>Update {{ video?.name }}</h3>
<form novalidate [formGroup]="form"> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<form novalidate [formGroup]="form">
<div class="form-group"> <div class="form-group">
<label for="name">Name</label> <label for="name">Name</label>
<input <input
@ -84,4 +87,6 @@
(click)="update()" (click)="update()"
> >
</div> </div>
</form> </form>
</div>
</div>

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

@ -1,16 +1,19 @@
<div class="row col-md-12 videos-info"> <div class="row">
<div class="content-padding">
<div class="videos-info">
<div class="col-md-9 col-xs-5 videos-total-results"> <div class="col-md-9 col-xs-5 videos-total-results">
<span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span> <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
<my-loader [loading]="loading | async"></my-loader> <my-loader [loading]="loading | async"></my-loader>
</div> </div>
<my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort> <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
</div>
</div>
</div> </div>
<div class="videos-miniatures"> <div class="content-padding videos-miniatures">
<div class="col-md-12 no-video" *ngIf="isThereNoVideo()">There is no video.</div> <div class="no-video" *ngIf="isThereNoVideo()">There is no video.</div>
<my-video-miniature <my-video-miniature
class="ng-animate" class="ng-animate"

7
client/src/app/videos/video-list/video-list.component.scss
View File

@ -3,18 +3,12 @@
margin-left: 0; margin-left: 0;
} }
margin-bottom: 20px;
border-bottom: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
my-video-sort {
padding-right: 0;
}
.videos-total-results { .videos-total-results {
font-size: 13px; font-size: 13px;
padding-left: 0;
} }
my-loader { my-loader {
@ -26,6 +20,7 @@
.videos-miniatures { .videos-miniatures {
min-height: 720px; min-height: 720px;
text-align: center; text-align: center;
padding-top: 0;
my-video-miniature { my-video-miniature {
text-align: left; text-align: left;

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

@ -25,9 +25,6 @@
</span> </span>
<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-views-created-at">
<span class="video-miniature-views">{{ video.views }} views</span>
<span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span> <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
</span>
</div> </div>
</div> </div>

8
client/src/app/videos/video-list/video-miniature.component.scss
View File

@ -64,7 +64,6 @@
font-weight: bold; font-weight: bold;
transition: color 0.2s; transition: color 0.2s;
font-size: 15px; font-size: 15px;
color: $video-miniature-title-color;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -88,17 +87,12 @@
} }
} }
.video-miniature-author, .video-miniature-views-created-at { .video-miniature-author, .video-miniature-created-at {
display: block; display: block;
margin-left: 1px; margin-left: 1px;
font-size: 11px; font-size: 11px;
color: $video-miniature-other-infos; color: $video-miniature-other-infos;
opacity: 0.9; opacity: 0.9;
.video-miniature-created-at::before {
content: '\002022';
margin: 0 2px 0 1px;
}
} }
.video-miniature-author { .video-miniature-author {

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

@ -14,14 +14,12 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12">
<!-- We need the video container for videojs so we just hide it --> <!-- We need the video container for videojs so we just hide it -->
<div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9"> <div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9">
<video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video> <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video>
</div> </div>
<div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
</div>
</div> </div>
<div id="torrent-info" class="row"> <div id="torrent-info" class="row">
@ -32,7 +30,7 @@
<div *ngIf="video !== null" id="video-info"> <div *ngIf="video !== null" id="video-info">
<div class="row video-name-views"> <div class="row video-name-views">
<div id="video-name" class="col-md-8"> <div class="col-md-8 video-name">
{{ video.name }} {{ video.name }}
</div> </div>

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

@ -37,10 +37,15 @@
font-size: 18px; font-size: 18px;
height: $video-watch-title-height; height: $video-watch-title-height;
line-height: $video-watch-title-height; line-height: $video-watch-title-height;
padding: 0 30px;
.video-name {
padding-left: $video-watch-info-padding-left;
}
.video-views { .video-views {
text-align: right; text-align: right;
// Keep a symmetry with the video name
padding-right: $video-watch-info-padding-left
} }
} }
@ -94,6 +99,8 @@
.video-small-block-author { .video-small-block-author {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
text-align: left;
padding-left: $video-watch-info-padding-left;
} }
.video-small-block-share, .video-small-block-more { .video-small-block-share, .video-small-block-more {
@ -144,7 +151,7 @@
margin-top: 30px; margin-top: 30px;
.video-details-date-description { .video-details-date-description {
padding-left: 30px; padding-left: $video-watch-info-padding-left;
.video-details-date { .video-details-date {
font-weight: bold; font-weight: bold;

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

@ -9,10 +9,12 @@ $menu-color-block: #686f77;
$header-height: 65px; $header-height: 65px;
$header-border-color: #e9eff6; $header-border-color: #e9eff6;
$video-miniature-title-color: #16a2b7; $footer-border-color: $header-border-color;
$video-miniature-other-infos: #686767; $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: #8e909b;
$video-watch-info-height: 120px; $video-watch-info-height: 120px;
$video-watch-info-padding-left: 40px;

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

@ -41,9 +41,8 @@ input.readonly {
} }
.main-col { .main-col {
padding: 0;
.main-row { .content-padding {
padding: 15px 30px; padding: 15px 30px;
@media screen and (min-width: 1400px) { @media screen and (min-width: 1400px) {