aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-04-21 11:06:33 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-04-26 21:23:19 +0200
commit383bfc8356d444cbed1dab7e5c1b3bb16becfdfd (patch)
treeae0541d99056d75b08f14e8e4ea73f67f173d942 /client/src
parent240c64c5f4277f0ce36c094f0663bd30d264ec40 (diff)
downloadPeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.tar.gz
PeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.tar.zst
PeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.zip
Client: responsive design
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+admin/friends/friend-list/friend-list.component.html4
-rw-r--r--client/src/app/+admin/friends/friend-list/friend-list.component.scss4
-rw-r--r--client/src/app/+admin/requests/request-stats/request-stats.component.html51
-rw-r--r--client/src/app/+admin/requests/request-stats/request-stats.component.scss15
-rw-r--r--client/src/app/account/account.component.html18
-rw-r--r--client/src/app/account/account.component.scss2
-rw-r--r--client/src/app/app.component.html36
-rw-r--r--client/src/app/app.component.scss23
-rw-r--r--client/src/app/core/menu/menu-admin.component.html32
-rw-r--r--client/src/app/core/menu/menu-admin.component.scss26
-rw-r--r--client/src/app/core/menu/menu-admin.component.ts3
-rw-r--r--client/src/app/core/menu/menu.component.html46
-rw-r--r--client/src/app/core/menu/menu.component.ts3
-rw-r--r--client/src/app/shared/search/search.component.html20
-rw-r--r--client/src/app/shared/search/search.component.scss51
-rw-r--r--client/src/app/shared/search/search.component.ts3
-rw-r--r--client/src/app/videos/video-list/video-list.component.scss2
-rw-r--r--client/src/app/videos/video-list/video-list.component.ts2
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.html20
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.scss61
-rw-r--r--client/src/sass/_variables.scss8
-rw-r--r--client/src/sass/application.scss102
-rw-r--r--client/src/sass/pre-customizations.scss2
23 files changed, 317 insertions, 217 deletions
diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.html b/client/src/app/+admin/friends/friend-list/friend-list.component.html
index 254d0c65e..e15ecde14 100644
--- a/client/src/app/+admin/friends/friend-list/friend-list.component.html
+++ b/client/src/app/+admin/friends/friend-list/friend-list.component.html
@@ -2,10 +2,10 @@
2 2
3<ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table> 3<ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table>
4 4
5<a *ngIf="hasFriends()" class="add-user btn btn-danger pull-left" (click)="quitFriends()"> 5<a *ngIf="hasFriends()" class="btn btn-danger pull-left" (click)="quitFriends()">
6 Quit friends 6 Quit friends
7</a> 7</a>
8 8
9<a *ngIf="!hasFriends()" class="add-user btn btn-success pull-right" [routerLink]="['/admin/friends/add']"> 9<a *ngIf="!hasFriends()" class="btn btn-success pull-right" [routerLink]="['/admin/friends/add']">
10 Make friends 10 Make friends
11</a> 11</a>
diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.scss b/client/src/app/+admin/friends/friend-list/friend-list.component.scss
index cb597e12b..0a0f621c6 100644
--- a/client/src/app/+admin/friends/friend-list/friend-list.component.scss
+++ b/client/src/app/+admin/friends/friend-list/friend-list.component.scss
@@ -1,3 +1,3 @@
1table { 1.btn {
2 margin-bottom: 40px; 2 margin-top: 10px;
3} 3}
diff --git a/client/src/app/+admin/requests/request-stats/request-stats.component.html b/client/src/app/+admin/requests/request-stats/request-stats.component.html
index ca531258c..f35da6535 100644
--- a/client/src/app/+admin/requests/request-stats/request-stats.component.html
+++ b/client/src/app/+admin/requests/request-stats/request-stats.component.html
@@ -1,37 +1,38 @@
1<h3>Requests stats</h3> 1<h3>Requests stats</h3>
2 2
3<div *ngFor="let requestSchedulerName of statsTitles | keys"> 3<div *ngFor="let requestSchedulerName of statsTitles | keys" class="col-lg-4 col-md-12">
4 <div class="block" *ngIf="stats[requestSchedulerName] !== null"> 4 <div class="panel panel-default" *ngIf="stats[requestSchedulerName] !== null">
5 <h4>{{ statsTitles[requestSchedulerName] }}</h4> 5 <div class="panel-heading">{{ statsTitles[requestSchedulerName] }}</div>
6 6
7 <div class="requests-general"> 7 <div class="panel-body">
8 <div> 8 <div class="requests-general">
9 <span class="label-description">Remaining requests:</span> 9 <div>
10 {{ stats[requestSchedulerName].totalRequests }} 10 <span class="label-description">Remaining requests:</span>
11 </div> 11 {{ stats[requestSchedulerName].totalRequests }}
12 </div>
12 13
13 <div> 14 <div>
14 <span class="label-description">Interval seconds between requests:</span> 15 <span class="label-description">Interval seconds between requests:</span>
15 {{ stats[requestSchedulerName].secondsInterval }} 16 {{ stats[requestSchedulerName].secondsInterval }}
16 </div> 17 </div>
17 18
18 <div> 19 <div>
19 <span class="label-description">Remaining time before the scheduled request:</span> 20 <span class="label-description">Remaining time before the scheduled request:</span>
20 {{ stats[requestSchedulerName].remainingSeconds }} 21 {{ stats[requestSchedulerName].remainingSeconds }}
22 </div>
21 </div> 23 </div>
22 </div>
23 24
24 <div class="requests-limit"> 25 <div class="requests-limit">
25 <div> 26 <div>
26 <span class="label-description">Maximum number of different pods for a scheduled request:</span> 27 <span class="label-description">Maximum number of different pods for a scheduled request:</span>
27 {{ stats[requestSchedulerName].requestsLimitPods }} 28 {{ stats[requestSchedulerName].requestsLimitPods }}
28 </div> 29 </div>
29 30
30 <div> 31 <div>
31 <span class="label-description">Maximum number of requests per pod for a scheduled request:</span> 32 <span class="label-description">Maximum number of requests per pod for a scheduled request:</span>
32 {{ stats[requestSchedulerName].requestsLimitPerPod }} 33 {{ stats[requestSchedulerName].requestsLimitPerPod }}
34 </div>
33 </div> 35 </div>
34 </div> 36 </div>
35
36 </div> 37 </div>
37</div> 38</div>
diff --git a/client/src/app/+admin/requests/request-stats/request-stats.component.scss b/client/src/app/+admin/requests/request-stats/request-stats.component.scss
index c9f724604..b2c413259 100644
--- a/client/src/app/+admin/requests/request-stats/request-stats.component.scss
+++ b/client/src/app/+admin/requests/request-stats/request-stats.component.scss
@@ -1,23 +1,8 @@
1.block {
2 margin-bottom: 40px;
3}
4
5.label-description { 1.label-description {
6 display: inline-block;
7 font-weight: bold; 2 font-weight: bold;
8 color: black; 3 color: black;
9} 4}
10 5
11.requests-general {
12 .label-description {
13 width: 320px;
14 }
15}
16
17.requests-limit { 6.requests-limit {
18 margin-top: 20px; 7 margin-top: 20px;
19
20 .label-description {
21 width: 430px;
22 }
23} 8}
diff --git a/client/src/app/account/account.component.html b/client/src/app/account/account.component.html
index 6f10e79cd..24bcdf947 100644
--- a/client/src/app/account/account.component.html
+++ b/client/src/app/account/account.component.html
@@ -1,11 +1,17 @@
1<h3>Account</h3> 1<h3>Account</h3>
2 2
3<div class="block"> 3<div class="panel panel-default">
4 <h4>Change password</h4> 4 <div class="panel-heading">Change password</div>
5 <my-account-change-password></my-account-change-password> 5
6 <div class="panel-body">
7 <my-account-change-password></my-account-change-password>
8 </div>
6</div> 9</div>
7 10
8<div class="block"> 11<div class="panel panel-default">
9 <h4>Update my informations</h4> 12 <div class="panel-heading">Update my informations</div>
10 <my-account-details [user]="user"></my-account-details> 13
14 <div class="panel-body">
15 <my-account-details [user]="user"></my-account-details>
16 </div>
11</div> 17</div>
diff --git a/client/src/app/account/account.component.scss b/client/src/app/account/account.component.scss
index e0437e792..61b80d0a7 100644
--- a/client/src/app/account/account.component.scss
+++ b/client/src/app/account/account.component.scss
@@ -1,3 +1,3 @@
1.block { 1.panel {
2 margin-top: 40px; 2 margin-top: 40px;
3} 3}
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 0c8e18a2f..f1eb6e021 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,31 +1,31 @@
1<div class="container"> 1<div class="container-fluid">
2 2 <div class="row">
3 <header class="row"> 3 <div class="col-md-2 col-sm-3 col-xs-3 title-menu-left">
4 <div class="col-md-2"> 4 <h4 id="peertube-title" class="title-menu-left-block header">
5 <h4 id="peertube-title">
6 <a [routerLink]="['/videos/list']">PeerTube</a> 5 <a [routerLink]="['/videos/list']">PeerTube</a>
7 </h4> 6 </h4>
8 </div>
9 7
10 <div class="col-md-9"> 8 <div class="title-menu-left-block menu">
11 <my-search></my-search> 9 <my-menu *ngIf="isInAdmin() === false"></my-menu>
10 <my-menu-admin *ngIf="isInAdmin() === true"></my-menu-admin>
11 </div>
12 </div> 12 </div>
13 </header>
14 13
14 <div class="col-md-10 col-sm-9 col-xs-9 main-col">
15 <div class="header">
16 <my-search></my-search>
17 </div>
15 18
16 <div class="row"> 19 <div class="main-row">
17 <my-menu *ngIf="isInAdmin() === false"></my-menu> 20 <router-outlet></router-outlet>
18 <my-menu-admin *ngIf="isInAdmin() === true"></my-menu-admin> 21 </div>
19
20 <div class="col-md-9 col-sm-8 col-xs-8 router-outlet-container">
21 <router-outlet></router-outlet>
22 </div> 22 </div>
23 </div> 23 </div>
24 24
25 <simple-notifications [options]="notificationOptions"></simple-notifications>
26 <my-confirm></my-confirm>
27
28 <footer> 25 <footer>
29 PeerTube, CopyLeft 2015-2017 26 PeerTube, CopyLeft 2015-2017
30 </footer> 27 </footer>
31</div> 28</div>
29
30<my-confirm></my-confirm>
31<simple-notifications [options]="notificationOptions"></simple-notifications>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 30d1bebde..e69de29bb 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -1,23 +0,0 @@
1#peertube-title a {
2 color: inherit !important;
3
4 &:hover {
5 color: inherit !important;
6 text-decoration: none !important;
7 }
8}
9
10header div {
11 line-height: 25px;
12 margin-bottom: 30px;
13}
14
15.router-outlet-container {
16 @media screen and (max-width: 400px) {
17 padding: 0 3px 0 3px;
18 }
19}
20
21[hidden] {
22 display: none !important;
23}
diff --git a/client/src/app/core/menu/menu-admin.component.html b/client/src/app/core/menu/menu-admin.component.html
index ad7a7a1b4..027799ee1 100644
--- a/client/src/app/core/menu/menu-admin.component.html
+++ b/client/src/app/core/menu/menu-admin.component.html
@@ -1,31 +1,31 @@
1<menu class="col-md-2 col-sm-3 col-xs-3"> 1<menu>
2 2
3 <div class="panel-block"> 3 <div class="panel-block">
4 <div id="panel-users" class="panel-button"> 4 <a routerLink="/admin/users/list" routerLinkActive="active">
5 <span class="hidden-xs glyphicon glyphicon-user"></span> 5 <span class="hidden-xs glyphicon glyphicon-user"></span>
6 <a [routerLink]="['/admin/users/list']">List users</a> 6 List users
7 </div> 7 </a>
8 8
9 <div id="panel-friends" class="panel-button"> 9 <a routerLink="/admin/friends/list" routerLinkActive="active">
10 <span class="hidden-xs glyphicon glyphicon-cloud"></span> 10 <span class="hidden-xs glyphicon glyphicon-cloud"></span>
11 <a [routerLink]="['/admin/friends/list']">List friends</a> 11 List friends
12 </div> 12 </a>
13 13
14 <div id="panel-request-stats" class="panel-button"> 14 <a routerLink="/admin/requests/stats" routerLinkActive="active">
15 <span class="hidden-xs glyphicon glyphicon-stats"></span> 15 <span class="hidden-xs glyphicon glyphicon-stats"></span>
16 <a [routerLink]="['/admin/requests/stats']">Request stats</a> 16 Request stats
17 </div> 17 </a>
18 18
19 <div id="panel-video-abuses" class="panel-button"> 19 <a routerLink="/admin/video-abuses/list" routerLinkActive="active">
20 <span class="hidden-xs glyphicon glyphicon-alert"></span> 20 <span class="hidden-xs glyphicon glyphicon-alert"></span>
21 <a [routerLink]="['/admin/video-abuses/list']">Video abuses</a> 21 Video abuses
22 </div> 22 </a>
23 </div> 23 </div>
24 24
25 <div class="panel-block"> 25 <div class="panel-block">
26 <div id="panel-quit-administration" class="panel-button"> 26 <a routerLink="/videos/list" routerLinkActive="active">
27 <span class="hidden-xs glyphicon glyphicon-cog"></span> 27 <span class="hidden-xs glyphicon glyphicon-cog"></span>
28 <a [routerLink]="['/videos/list']">Quit admin.</a> 28 Quit admin.
29 </div> 29 </a>
30 </div> 30 </div>
31</menu> 31</menu>
diff --git a/client/src/app/core/menu/menu-admin.component.scss b/client/src/app/core/menu/menu-admin.component.scss
new file mode 100644
index 000000000..487461224
--- /dev/null
+++ b/client/src/app/core/menu/menu-admin.component.scss
@@ -0,0 +1,26 @@
1menu {
2 background-color: $black-background;
3 padding: 20px;
4 margin: 0;
5 height: 100%;
6
7 a {
8 display: block;
9 height: 30px;
10 color: #9cabb8;
11 cursor: pointer;
12
13 &:hover, &:focus {
14 text-decoration: none !important;
15 outline: none !important;
16 }
17
18 .glyphicon {
19 margin-right: 20px;
20 }
21
22 &:hover, &.active {
23 color: #fff;
24 }
25 }
26}
diff --git a/client/src/app/core/menu/menu-admin.component.ts b/client/src/app/core/menu/menu-admin.component.ts
index 59ffccf9f..a3d920fdd 100644
--- a/client/src/app/core/menu/menu-admin.component.ts
+++ b/client/src/app/core/menu/menu-admin.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
2 2
3@Component({ 3@Component({
4 selector: 'my-menu-admin', 4 selector: 'my-menu-admin',
5 templateUrl: './menu-admin.component.html' 5 templateUrl: './menu-admin.component.html',
6 styleUrls: [ './menu-admin.component.scss' ]
6}) 7})
7export class MenuAdminComponent { } 8export class MenuAdminComponent { }
diff --git a/client/src/app/core/menu/menu.component.html b/client/src/app/core/menu/menu.component.html
index de17940a1..0b093882f 100644
--- a/client/src/app/core/menu/menu.component.html
+++ b/client/src/app/core/menu/menu.component.html
@@ -1,44 +1,44 @@
1<menu class="col-md-2 col-sm-3 col-xs-3"> 1<menu>
2 <div class="panel-block"> 2 <div class="panel-block">
3 <div id="panel-user-login" class="panel-button"> 3 <div id="panel-user-login" class="panel-button">
4 <span *ngIf="!isLoggedIn" > 4 <a *ngIf="!isLoggedIn" routerLink="/login" routerLinkActive="active">
5 <span class="hidden-xs glyphicon glyphicon-log-in"></span> 5 <span class="hidden-xs glyphicon glyphicon-log-in"></span>
6 <a [routerLink]="['/login']">Login</a> 6 Login
7 </span> 7 </a>
8 8
9 <span *ngIf="isLoggedIn"> 9 <a *ngIf="isLoggedIn" (click)="logout()">
10 <span class="hidden-xs glyphicon glyphicon-log-out"></span> 10 <span class="hidden-xs glyphicon glyphicon-log-out"></span>
11 <a *ngIf="isLoggedIn" (click)="logout()">Logout</a> 11 Logout
12 </span> 12 </a>
13 </div> 13 </div>
14 14
15 <div *ngIf="!isLoggedIn && isRegistrationEnabled()" id="panel-user-register" class="panel-button"> 15 <a *ngIf="!isLoggedIn && isRegistrationEnabled()" routerLink="/signup" routerLinkActive="active">
16 <span class="hidden-xs glyphicon glyphicon-user"></span> 16 <span class="hidden-xs glyphicon glyphicon-user"></span>
17 <a [routerLink]="['/signup']">Signup</a> 17 Signup
18 </div> 18 </a>
19 19
20 <div *ngIf="isLoggedIn" id="panel-user-account" class="panel-button"> 20 <a *ngIf="isLoggedIn" routerLink="/account" routerLinkActive="active">
21 <span class="hidden-xs glyphicon glyphicon-user"></span> 21 <span class="hidden-xs glyphicon glyphicon-user"></span>
22 <a [routerLink]="['/account']">My account</a> 22 My account
23 </div> 23 </a>
24 </div> 24 </div>
25 25
26 <div class="panel-block"> 26 <div class="panel-block">
27 <div id="panel-get-videos" class="panel-button"> 27 <a routerLink="/videos/list" routerLinkActive="active">
28 <span class="hidden-xs glyphicon glyphicon-list"></span> 28 <span class="hidden-xs glyphicon glyphicon-list"></span>
29 <a [routerLink]="['/videos/list']">See videos</a> 29 See videos
30 </div> 30 </a>
31 31
32 <div id="panel-upload-video" class="panel-button" *ngIf="isLoggedIn"> 32 <a *ngIf="isLoggedIn" routerLink="/videos/add" routerLinkActive="active">
33 <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span> 33 <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
34 <a [routerLink]="['/videos/add']">Upload a video</a> 34 Upload a video
35 </div> 35 </a>
36 </div> 36 </div>
37 37
38 <div class="panel-block" *ngIf="isUserAdmin()"> 38 <div class="panel-block">
39 <div id="panel-get-videos" class="panel-button"> 39 <a *ngIf="isUserAdmin()" routerLink="/admin" routerLinkActive="active">
40 <span class="hidden-xs glyphicon glyphicon-cog"></span> 40 <span class="hidden-xs glyphicon glyphicon-cog"></span>
41 <a [routerLink]="['/admin']">Administration</a> 41 Administration
42 </div> 42 </a>
43 </div> 43 </div>
44</menu> 44</menu>
diff --git a/client/src/app/core/menu/menu.component.ts b/client/src/app/core/menu/menu.component.ts
index d1f0fa807..e2b998747 100644
--- a/client/src/app/core/menu/menu.component.ts
+++ b/client/src/app/core/menu/menu.component.ts
@@ -6,7 +6,8 @@ import { ConfigService } from '../config';
6 6
7@Component({ 7@Component({
8 selector: 'my-menu', 8 selector: 'my-menu',
9 templateUrl: './menu.component.html' 9 templateUrl: './menu.component.html',
10 styleUrls: [ './menu-admin.component.scss' ]
10}) 11})
11export class MenuComponent implements OnInit { 12export class MenuComponent implements OnInit {
12 isLoggedIn: boolean; 13 isLoggedIn: boolean;
diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html
index 0c7b5038a..b03b977dc 100644
--- a/client/src/app/shared/search/search.component.html
+++ b/client/src/app/shared/search/search.component.html
@@ -1,17 +1,23 @@
1
1<div class="input-group"> 2<div class="input-group">
2 <div class="input-group-btn" dropdown> 3
4 <span class="input-group-addon icon-addon">
5 <span class="glyphicon glyphicon-search"></span>
6 </span>
7
8 <input
9 type="text" id="search-video" name="search-video" class="form-control" placeholder="Search" class="form-control"
10 [(ngModel)]="searchCriterias.value" (keyup.enter)="doSearch()"
11 >
12
13 <div class="input-group-btn" dropdown placement="bottom right">
3 <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle> 14 <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle>
4 {{ getStringChoice(searchCriterias.field) }} <span class="caret"></span> 15 {{ getStringChoice(searchCriterias.field) }} <span class="caret"></span>
5 </button> 16 </button>
6 <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu> 17 <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu>
7 <li *ngFor="let choice of choiceKeys" class="dropdown-item" role="menu-item"> 18 <li *ngFor="let choice of choiceKeys" class="dropdown-item" role="menu-item">
8 <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a> 19 <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a>
9 </li> 20 </li>
10 </ul> 21 </ul>
11 </div> 22 </div>
12
13 <input
14 type="text" id="search-video" name="search-video" class="form-control" placeholder="Search a video..." class="form-control"
15 [(ngModel)]="searchCriterias.value" (keyup.enter)="doSearch()"
16 >
17</div> 23</div>
diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss
new file mode 100644
index 000000000..583f9586f
--- /dev/null
+++ b/client/src/app/shared/search/search.component.scss
@@ -0,0 +1,51 @@
1.icon-addon {
2 background-color: #fff;
3 border-radius: 0;
4 border-color: $header-border-color;
5 border-width: 0 0 1px 0;
6 text-align: right;
7
8 .glyphicon-search {
9 width: 30px;
10 font-size: 20px;
11 }
12}
13
14input, button, .input-group {
15 height: 100%;
16}
17
18input, .input-group-btn {
19 border-radius: 0;
20 border-top: none;
21 border-left: none;
22}
23
24input {
25 height: $header-height;
26 border-right: none;
27 font-weight: bold;
28 box-shadow: none;
29
30 &, &:focus {
31 border-bottom: 1px solid $header-border-color !important;
32 outline: none !important;
33 box-shadow: none !important;
34 }
35}
36
37button {
38
39 &, &:hover, &:focus, &:active, &:visited {
40 background-color: #fff !important;
41 border-color: $header-border-color !important;
42 color: #858585 !important;
43 outline: none !important;
44
45 height: $header-height;
46 border-width: 0 0 1px 0;
47 font-weight: bold;
48 text-decoration: none;
49 box-shadow: none;
50 }
51}
diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts
index 9f7e156ec..48413b4f2 100644
--- a/client/src/app/shared/search/search.component.ts
+++ b/client/src/app/shared/search/search.component.ts
@@ -7,7 +7,8 @@ import { SearchService } from './search.service';
7 7
8@Component({ 8@Component({
9 selector: 'my-search', 9 selector: 'my-search',
10 templateUrl: './search.component.html' 10 templateUrl: './search.component.html',
11 styleUrls: [ './search.component.scss' ]
11}) 12})
12 13
13export class SearchComponent implements OnInit { 14export class SearchComponent implements OnInit {
diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/video-list.component.scss
index 010f0dbfe..5ece9d003 100644
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/video-list.component.scss
@@ -25,8 +25,10 @@
25 25
26.videos-miniatures { 26.videos-miniatures {
27 min-height: 720px; 27 min-height: 720px;
28 text-align: center;
28 29
29 my-video-miniature { 30 my-video-miniature {
31 text-align: left;
30 transition: all 0.5s ease; 32 transition: all 0.5s ease;
31 33
32 &.ng-enter { 34 &.ng-enter {
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index b9f19b4f1..16e1b5bcc 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -22,7 +22,7 @@ export class VideoListComponent implements OnInit, OnDestroy {
22 loading: BehaviorSubject<boolean> = new BehaviorSubject(false); 22 loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
23 pagination: RestPagination = { 23 pagination: RestPagination = {
24 currentPage: 1, 24 currentPage: 1,
25 itemsPerPage: 9, 25 itemsPerPage: 25,
26 totalItems: null 26 totalItems: null
27 }; 27 };
28 sort: SortField; 28 sort: SortField;
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index b8b448631..0b0b0d944 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -1,4 +1,4 @@
1<div class="video-miniature col-md-4 col-sm-6 col-xs-6" (mouseenter)="onHover()" (mouseleave)="onBlur()"> 1<div class="video-miniature" (mouseenter)="onHover()" (mouseleave)="onBlur()">
2 <a 2 <a
3 [routerLink]="['/videos/watch', video.id]" [attr.title]="video.description" 3 [routerLink]="['/videos/watch', video.id]" [attr.title]="video.description"
4 class="video-miniature-thumbnail" 4 class="video-miniature-thumbnail"
@@ -8,18 +8,20 @@
8 NSFW 8 NSFW
9 </div> 9 </div>
10 10
11 <span class="video-miniature-duration">{{ video.duration }}</span> 11 <div class="video-miniature-thumbnail-overlay">
12 <span class="video-miniature-thumbnail-overlay-views">{{ video.views }} views</span>
13 <span class="video-miniature-thumbnail-overlay-duration">{{ video.duration }}</span>
14 </div>
12 </a> 15 </a>
13 16
17 <span
18 *ngIf="displayRemoveIcon()" (click)="removeVideo(video.id)"
19 class="video-miniature-remove glyphicon glyphicon-remove"
20 ></span>
21
14 <div class="video-miniature-informations"> 22 <div class="video-miniature-informations">
15 <span class="video-miniature-name-tags"> 23 <span class="video-miniature-name">
16 <a [routerLink]="['/videos/watch', video.id]" [attr.title]="getVideoName()" class="video-miniature-name">{{ getVideoName() }}</a> 24 <a [routerLink]="['/videos/watch', video.id]" [attr.title]="getVideoName()" class="video-miniature-name">{{ getVideoName() }}</a>
17
18 <div class="video-miniature-tags">
19 <span *ngFor="let tag of video.tags" class="video-miniature-tag">
20 <a [routerLink]="['/videos/list', { field: 'tags', search: tag, sort: currentSort }]" class="label label-primary">{{ tag }}</a>
21 </span>
22 </div>
23 </span> 25 </span>
24 26
25 <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a> 27 <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index f88ced819..1a73648c4 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -1,15 +1,11 @@
1@import "../../../sass/pre-customizations.scss"; 1@import "../../../sass/pre-customizations.scss";
2 2
3.video-miniature { 3.video-miniature {
4 @media screen and (max-width: 400px) {
5 padding: 0;
6 }
7
8 margin-top: 30px; 4 margin-top: 30px;
9 display: inline-block; 5 display: inline-block;
10 position: relative; 6 position: relative;
11 min-width: 220px;
12 height: 190px; 7 height: 190px;
8 width: 220px;
13 9
14 .video-miniature-thumbnail { 10 .video-miniature-thumbnail {
15 display: inline-block; 11 display: inline-block;
@@ -30,37 +26,48 @@
30 height: 110px; 26 height: 110px;
31 } 27 }
32 28
33 .video-miniature-duration { 29 img, .thumbnail-nsfw {
30 border-radius: 3px;
31 }
32
33 .video-miniature-thumbnail-overlay {
34 position: absolute; 34 position: absolute;
35 right: 5px; 35 right: 0px;
36 bottom: 2px; 36 bottom: 0px;
37 display: inline-block; 37 display: inline-block;
38 background-color: rgba(0, 0, 0, 0.8); 38 background-color: rgba(0, 0, 0, 0.7);
39 color: rgba(255, 255, 255, 0.8); 39 color: #fff;
40 padding: 2px; 40 padding: 3px 5px;
41 font-size: 11px; 41 font-size: 11px;
42 font-weight: bold;
43 width: 100%;
44
45 .video-miniature-thumbnail-overlay-views {
46
47 }
48
49 .video-miniature-thumbnail-overlay-duration {
50 float: right;
51 }
42 } 52 }
43 } 53 }
44 54
45 .video-miniature-informations { 55 .video-miniature-informations {
46 width: 200px; 56 width: 200px;
47 57
48 .video-miniature-name-tags { 58 .video-miniature-name {
59 height: 23px;
49 display: block; 60 display: block;
61 overflow: hidden;
62 text-overflow: ellipsis;
63 white-space: nowrap;
64 font-weight: bold;
65 transition: color 0.2s;
66 font-size: 15px;
67 color: $video-miniature-title-color;
50 68
51 .video-miniature-name { 69 &:hover {
52 height: 23px; 70 text-decoration: none;
53 display: block;
54 overflow: hidden;
55 text-overflow: ellipsis;
56 white-space: nowrap;
57 font-weight: bold;
58 transition: color 0.2s;
59 font-size: 15px;
60
61 &:hover {
62 text-decoration: none;
63 }
64 } 71 }
65 72
66 .video-miniature-tags { 73 .video-miniature-tags {
@@ -84,8 +91,8 @@
84 .video-miniature-author, .video-miniature-views-created-at { 91 .video-miniature-author, .video-miniature-views-created-at {
85 display: block; 92 display: block;
86 margin-left: 1px; 93 margin-left: 1px;
87 font-size: 12px; 94 font-size: 11px;
88 color: #337ab7; 95 color: $video-miniature-other-infos;
89 opacity: 0.9; 96 opacity: 0.9;
90 97
91 .video-miniature-created-at::before { 98 .video-miniature-created-at::before {
diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss
new file mode 100644
index 000000000..be57db304
--- /dev/null
+++ b/client/src/sass/_variables.scss
@@ -0,0 +1,8 @@
1$black-background: #1d2125;
2$grey-background: #f6f2f2;
3
4$header-height: 60px;
5$header-border-color: #e9eff6;
6
7$video-miniature-title-color: #16a2b7;
8$video-miniature-other-infos: #686767;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index df3ee6c20..25d79a0cb 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,44 +1,81 @@
1@import '../../node_modules/video.js/dist/video-js.css'; 1@import '../../node_modules/video.js/dist/video-js.css';
2 2
3body { 3[hidden] {
4 padding: 20px; 4 display: none !important;
5}
5 6
6 @media screen and (max-width: 400px) { 7input.readonly {
7 padding: 3px; 8 /* Force blank on readonly inputs */
8 } 9 background-color: #fff !important;
9} 10}
10 11
11menu { 12.form-control, .btn {
12 @media screen and (max-width: 600px) { 13 border-radius: 0;
13 margin-right: 3px !important; 14}
14 padding: 3px !important;
15 min-height: 400px !important;
16 }
17 15
18 min-height: 600px; 16.glyphicon-black {
19 margin-right: 20px; 17 color: black;
20 border-right: 1px solid rgba(0, 0, 0, 0.2); 18}
19
20.header {
21 height: $header-height;
21 22
22 .panel-block:not(:last-child) { 23 .search-col {
23 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 24 height: 100%;
25 margin-left: -15px;
26 padding: 0;
24 } 27 }
28}
25 29
26 .panel-button { 30.main-col {
27 margin: 8px; 31 padding: 0;
28 cursor: pointer;
29 transition: margin 0.2s;
30 32
31 &:hover { 33 .main-row {
32 margin-left: 15px; 34 padding: 15px 30px;
35
36 @media screen and (min-width: 1400px) {
37 padding: 15px 40px;
33 } 38 }
34 39
35 a { 40 @media screen and (min-width: 1600px) {
36 color: #333333; 41 padding: 15px 50px;
42 }
43
44 @media screen and (min-width: 1800px) {
45 padding: 15px 60px;
37 } 46 }
38 } 47 }
48}
39 49
40 .glyphicon { 50.title-menu-left {
41 margin: 5px; 51 height: calc(100vh - #{$header-height});
52 padding-right: 0;
53
54 .title-menu-left-block {
55 margin-left: -15px;
56
57 &.menu {
58 height: 100%;
59 }
60 }
61
62 #peertube-title {
63 background-color: #fff;
64 border-right: 2px solid $header-border-color;
65 font-size: 25px;
66 line-height: $header-height;
67 text-align: center;
68 margin-top: 0;
69 margin-bottom: 0;
70
71 a {
72 color: inherit !important;
73
74 &:hover {
75 color: inherit !important;
76 text-decoration: none !important;
77 }
78 }
42 } 79 }
43} 80}
44 81
@@ -63,19 +100,6 @@ ng2-smart-table {
63 } 100 }
64} 101}
65 102
66[hidden] {
67 display: none !important;
68}
69
70input.readonly {
71 /* Force blank on readonly inputs */
72 background-color: #fff !important;
73}
74
75.glyphicon-black {
76 color: black;
77}
78
79footer { 103footer {
80 border-top: 1px solid rgba(0, 0, 0, 0.2); 104 border-top: 1px solid rgba(0, 0, 0, 0.2);
81 padding-top: 10px; 105 padding-top: 10px;
diff --git a/client/src/sass/pre-customizations.scss b/client/src/sass/pre-customizations.scss
index 0703b0c9a..693489828 100644
--- a/client/src/sass/pre-customizations.scss
+++ b/client/src/sass/pre-customizations.scss
@@ -1,3 +1,5 @@
1@import '_variables.scss';
2
1$bootstrap-sass-asset-helper: false !default; 3$bootstrap-sass-asset-helper: false !default;
2// 4//
3// Variables 5// Variables
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 21:41:34 +0000