Client: beautiful watch page
This commit is contained in:
Chocobozzz
parent
ea9f487b40
commit
897ec54d76
|
|
@ -1,3 +1,6 @@
|
|||
<div class="row">
|
||||
<div class="content-padding">
|
||||
|
||||
<h3>Make friends</h3>
|
||||
|
||||
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
||||
|
|
@ -28,3 +31,5 @@
|
|||
|
||||
<input type="submit" value="Make friends" class="btn btn-default" [disabled]="!isFormValid()">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<div class="row">
|
||||
<div class="content-padding">
|
||||
<h3>Friends list</h3>
|
||||
|
||||
<ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table>
|
||||
|
|
@ -9,3 +11,5 @@
|
|||
<a *ngIf="!hasFriends()" class="btn btn-success pull-right" [routerLink]="['/admin/friends/add']">
|
||||
Make friends
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<div class="row">
|
||||
<div class="content-padding">
|
||||
|
||||
<h3>Requests stats</h3>
|
||||
|
||||
<div *ngFor="let requestSchedulerName of statsTitles | keys" class="col-lg-4 col-md-12">
|
||||
|
|
@ -36,3 +39,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<div class="row">
|
||||
<div class="content-padding">
|
||||
|
||||
<h3>Add user</h3>
|
||||
|
||||
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
||||
|
|
@ -38,3 +41,5 @@
|
|||
|
||||
<input type="submit" value="Add user" class="btn btn-default" [disabled]="!form.valid">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<div class="row">
|
||||
<div class="content-padding">
|
||||
|
||||
<h3>Users list</h3>
|
||||
|
||||
<ng2-smart-table
|
||||
|
|
@ -9,3 +12,5 @@
|
|||
<span class="glyphicon glyphicon-plus"></span>
|
||||
Add user
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<div class="row">
|
||||
<div class="content-padding">
|
||||
|
||||
<h3>Video abuses list</h3>
|
||||
|
||||
<ng2-smart-table
|
||||
[settings]="tableSettings" [source]="videoAbusesSource"
|
||||
></ng2-smart-table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<div class="row">
|
||||
<div class="content-padding">
|
||||
<h3>Account</h3>
|
||||
|
||||
<div class="col-md-6 col-sm-12">
|
||||
|
|
@ -19,3 +21,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,15 +16,16 @@
|
|||
</div>
|
||||
|
||||
<div class="col-md-10 col-sm-9 col-xs-9 main-col">
|
||||
<div class="header">
|
||||
<my-search></my-search>
|
||||
<div class="row header">
|
||||
<!-- 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 class="main-row">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<footer class="row">
|
||||
PeerTube, CopyLeft 2015-2017
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,10 +30,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-size: small;
|
||||
margin: 30px 10px 0 10px;
|
||||
my-search {
|
||||
// Fix col-md-* padding
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid $footer-border-color;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<div class="row">
|
||||
<div class="content-padding">
|
||||
|
||||
<h3>Login</h3>
|
||||
|
||||
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
||||
|
|
@ -27,3 +30,5 @@
|
|||
|
||||
<input type="submit" value="Login" class="btn btn-default" [disabled]="!form.valid">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<div class="row">
|
||||
<div class="content-padding">
|
||||
|
||||
<h3>Signup</h3>
|
||||
|
||||
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
||||
|
|
@ -38,3 +41,6 @@
|
|||
|
||||
<input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<div class="row">
|
||||
<div class="content-padding">
|
||||
|
||||
<h3>Upload a video</h3>
|
||||
|
||||
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
||||
|
|
@ -112,3 +115,5 @@
|
|||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<div class="row">
|
||||
<div class="content-padding">
|
||||
|
||||
<h3>Update {{ video?.name }}</h3>
|
||||
|
||||
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
||||
|
|
@ -85,3 +88,5 @@
|
|||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
|
||||
|
||||
<my-loader [loading]="loading | async"></my-loader>
|
||||
</div>
|
||||
|
||||
|
||||
<my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="videos-miniatures">
|
||||
<div class="col-md-12 no-video" *ngIf="isThereNoVideo()">There is no video.</div>
|
||||
<div class="content-padding videos-miniatures">
|
||||
<div class="no-video" *ngIf="isThereNoVideo()">There is no video.</div>
|
||||
|
||||
<my-video-miniature
|
||||
class="ng-animate"
|
||||
|
|
|
|||
|
|
@ -3,18 +3,12 @@
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
|
||||
my-video-sort {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.videos-total-results {
|
||||
font-size: 13px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
my-loader {
|
||||
|
|
@ -26,6 +20,7 @@
|
|||
.videos-miniatures {
|
||||
min-height: 720px;
|
||||
text-align: center;
|
||||
padding-top: 0;
|
||||
|
||||
my-video-miniature {
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -25,9 +25,6 @@
|
|||
</span>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,6 @@
|
|||
font-weight: bold;
|
||||
transition: color 0.2s;
|
||||
font-size: 15px;
|
||||
color: $video-miniature-title-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
|
@ -88,17 +87,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.video-miniature-author, .video-miniature-views-created-at {
|
||||
.video-miniature-author, .video-miniature-created-at {
|
||||
display: block;
|
||||
margin-left: 1px;
|
||||
font-size: 11px;
|
||||
color: $video-miniature-other-infos;
|
||||
opacity: 0.9;
|
||||
|
||||
.video-miniature-created-at::before {
|
||||
content: '\002022';
|
||||
margin: 0 2px 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-miniature-author {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<!-- We need the video container for videojs so we just hide it -->
|
||||
<div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9">
|
||||
<video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video>
|
||||
|
|
@ -22,7 +21,6 @@
|
|||
|
||||
<div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="torrent-info" class="row">
|
||||
<div id="torrent-info-download" class="col-md-4 col-sm-4 col-xs-4">Download: {{ downloadSpeed | bytes }}/s</div>
|
||||
|
|
@ -32,7 +30,7 @@
|
|||
|
||||
<div *ngIf="video !== null" id="video-info">
|
||||
<div class="row video-name-views">
|
||||
<div id="video-name" class="col-md-8">
|
||||
<div class="col-md-8 video-name">
|
||||
{{ video.name }}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,10 +37,15 @@
|
|||
font-size: 18px;
|
||||
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 {
|
||||
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 {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
padding-left: $video-watch-info-padding-left;
|
||||
}
|
||||
|
||||
.video-small-block-share, .video-small-block-more {
|
||||
|
|
@ -144,7 +151,7 @@
|
|||
margin-top: 30px;
|
||||
|
||||
.video-details-date-description {
|
||||
padding-left: 30px;
|
||||
padding-left: $video-watch-info-padding-left;
|
||||
|
||||
.video-details-date {
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -9,10 +9,12 @@ $menu-color-block: #686f77;
|
|||
$header-height: 65px;
|
||||
$header-border-color: #e9eff6;
|
||||
|
||||
$video-miniature-title-color: #16a2b7;
|
||||
$footer-border-color: $header-border-color;
|
||||
|
||||
$video-miniature-other-infos: #686767;
|
||||
|
||||
$video-watch-border-color: #eceef4;
|
||||
$video-watch-title-height: 90px;
|
||||
$video-watch-info-color: #8e909b;
|
||||
$video-watch-info-height: 120px;
|
||||
$video-watch-info-padding-left: 40px;
|
||||
|
|
|
|||
|
|
@ -41,9 +41,8 @@ input.readonly {
|
|||
}
|
||||
|
||||
.main-col {
|
||||
padding: 0;
|
||||
|
||||
.main-row {
|
||||
.content-padding {
|
||||
padding: 15px 30px;
|
||||
|
||||
@media screen and (min-width: 1400px) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue