aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/header/header.component.scss2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html230
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss8
-rw-r--r--client/src/sass/application.scss58
-rw-r--r--client/src/sass/video-js-custom.scss14
5 files changed, 152 insertions, 160 deletions
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 5f64ede98..fba70dd2f 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -7,7 +7,7 @@
7 color: #000; 7 color: #000;
8 } 8 }
9 9
10 @media screen and (max-width: 800px) { 10 @media screen and (max-width: 600px) {
11 width: calc(100% - 150px); 11 width: calc(100% - 150px);
12 } 12 }
13 13
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 43b175acc..f99e84caf 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -5,148 +5,148 @@
5 </div> 5 </div>
6 6
7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> 7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
8</div>
9
10<!-- Video information -->
11<div *ngIf="video" class="margin-content video-bottom">
12 <div class="video-info">
13 <div class="video-info-name-actions">
14 <div class="video-info-name">{{ video.name }}</div>
15 8
16 <div class="video-info-actions"> 9 <!-- Video information -->
17 <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" class="action-button"> 10 <div *ngIf="video" class="margin-content video-bottom">
18 <span class="icon icon-like" title="Like this video" (click)="setLike()"></span> 11 <div class="video-info">
19 </div> 12 <div class="video-info-name-actions">
13 <div class="video-info-name">{{ video.name }}</div>
20 14
21 <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" class="action-button"> 15 <div class="video-info-actions">
22 <span class="icon icon-dislike" title="Dislike this video" (click)="setDislike()"></span> 16 <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" class="action-button">
23 </div> 17 <span class="icon icon-like" title="Like this video" (click)="setLike()"></span>
18 </div>
24 19
25 <div (click)="showShareModal()" class="action-button"> 20 <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" class="action-button">
26 <span class="icon icon-share"></span> 21 <span class="icon icon-dislike" title="Dislike this video" (click)="setDislike()"></span>
27 Share 22 </div>
28 </div>
29 23
30 <div class="action-more" dropdown dropup="true" placement="right"> 24 <div (click)="showShareModal()" class="action-button">
31 <div class="action-button" dropdownToggle> 25 <span class="icon icon-share"></span>
32 <span class="icon icon-more"></span> 26 Share
33 </div> 27 </div>
34 28
35 <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> 29 <div class="action-more" dropdown dropup="true" placement="right">
36 <li role="menuitem"> 30 <div class="action-button" dropdownToggle>
37 <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)"> 31 <span class="icon icon-more"></span>
38 <span class="icon icon-download"></span> Download 32 </div>
39 </a> 33
40 </li> 34 <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
41 35 <li role="menuitem">
42 <li *ngIf="isUserLoggedIn()" role="menuitem"> 36 <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
43 <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)"> 37 <span class="icon icon-download"></span> Download
44 <span class="icon icon-alert"></span> Report 38 </a>
45 </a> 39 </li>
46 </li> 40
47 41 <li *ngIf="isUserLoggedIn()" role="menuitem">
48 <li *ngIf="isVideoBlacklistable()" role="menuitem"> 42 <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
49 <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)"> 43 <span class="icon icon-alert"></span> Report
50 <span class="icon icon-blacklist"></span> Blacklist 44 </a>
51 </a> 45 </li>
52 </li> 46
53 </ul> 47 <li *ngIf="isVideoBlacklistable()" role="menuitem">
48 <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
49 <span class="icon icon-blacklist"></span> Blacklist
50 </a>
51 </li>
52 </ul>
53 </div>
54 </div> 54 </div>
55 </div> 55 </div>
56 </div>
57 56
58 <div class="video-info-date-views-bar"> 57 <div class="video-info-date-views-bar">
59 <div class="video-info-date-views"> 58 <div class="video-info-date-views">
60 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views 59 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
61 </div> 60 </div>
62 61
63 <div *ngIf="video.likes !== 0 || video.dislikes !== 0" class="video-info-likes-dislikes-bar"> 62 <div *ngIf="video.likes !== 0 || video.dislikes !== 0" class="video-info-likes-dislikes-bar">
64 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> 63 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
64 </div>
65 </div> 65 </div>
66 </div>
67 66
68 <div class="video-info-channel"> 67 <div class="video-info-channel">
69 {{ video.channel.name }} 68 {{ video.channel.name }}
70 <!-- Here will be the subscribe button --> 69 <!-- Here will be the subscribe button -->
71 </div> 70 </div>
72 71
73 <div class="video-info-by"> 72 <div class="video-info-by">
74 By {{ video.by }} 73 By {{ video.by }}
75 <img [src]="getAvatarPath()" alt="Account avatar" /> 74 <img [src]="getAvatarPath()" alt="Account avatar" />
76 </div> 75 </div>
77 76
78 <div class="video-info-description"> 77 <div class="video-info-description">
79 <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div> 78 <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
80 79
81 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length === 250" (click)="showMoreDescription()"> 80 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length === 250" (click)="showMoreDescription()">
82 Show more 81 Show more
83 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span> 82 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
84 <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader> 83 <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
85 </div> 84 </div>
86 85
87 <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more"> 86 <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
88 Show less 87 Show less
89 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span> 88 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
89 </div>
90 </div> 90 </div>
91 </div>
92 91
93 <div class="video-attributes"> 92 <div class="video-attributes">
94 <div class="video-attribute"> 93 <div class="video-attribute">
95 <span class="video-attribute-label"> 94 <span class="video-attribute-label">
96 Privacy 95 Privacy
97 </span> 96 </span>
98 <span class="video-attribute-value"> 97 <span class="video-attribute-value">
99 {{ video.privacyLabel }} 98 {{ video.privacyLabel }}
100 </span> 99 </span>
101 </div> 100 </div>
102 101
103 <div class="video-attribute"> 102 <div class="video-attribute">
104 <span class="video-attribute-label"> 103 <span class="video-attribute-label">
105 Category 104 Category
106 </span> 105 </span>
107 <span class="video-attribute-value"> 106 <span class="video-attribute-value">
108 {{ video.categoryLabel }} 107 {{ video.categoryLabel }}
109 </span> 108 </span>
110 </div> 109 </div>
111 110
112 <div class="video-attribute"> 111 <div class="video-attribute">
113 <span class="video-attribute-label"> 112 <span class="video-attribute-label">
114 Licence 113 Licence
115 </span> 114 </span>
116 <span class="video-attribute-value"> 115 <span class="video-attribute-value">
117 {{ video.licenceLabel }} 116 {{ video.licenceLabel }}
118 </span> 117 </span>
119 </div> 118 </div>
120 119
121 <div class="video-attribute"> 120 <div class="video-attribute">
122 <span class="video-attribute-label"> 121 <span class="video-attribute-label">
123 Language 122 Language
124 </span> 123 </span>
125 <span class="video-attribute-value"> 124 <span class="video-attribute-value">
126 {{ video.languageLabel }} 125 {{ video.languageLabel }}
127 </span> 126 </span>
128 </div> 127 </div>
129 128
130 <div class="video-attribute"> 129 <div class="video-attribute">
131 <span class="video-attribute-label"> 130 <span class="video-attribute-label">
132 Tags 131 Tags
133 </span> 132 </span>
134 133
135 <span class="video-attribute-value"> 134 <span class="video-attribute-value">
136 {{ getVideoTags() }} 135 {{ getVideoTags() }}
137 </span> 136 </span>
137 </div>
138 </div> 138 </div>
139 </div>
140 139
141 </div>
142
143 <div class="other-videos">
144 <div class="title-page title-page-single">
145 Other videos
146 </div> 140 </div>
147 141
148 <div *ngFor="let video of otherVideos"> 142 <div class="other-videos">
149 <my-video-miniature [video]="video" [user]="user"></my-video-miniature> 143 <div class="title-page title-page-single">
144 Other videos
145 </div>
146
147 <div *ngFor="let video of otherVideos">
148 <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
149 </div>
150 </div> 150 </div>
151 </div> 151 </div>
152</div> 152</div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 83a7cc41d..9daa757b4 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -216,14 +216,18 @@
216} 216}
217 217
218 218
219@media screen and (max-width: 800px) { 219@media screen and (max-width: 1000px) {
220 .other-videos { 220 .other-videos {
221 display: none; 221 display: none;
222 } 222 }
223}
223 224
225@media screen and (max-width: 800px) {
224 .video-bottom { 226 .video-bottom {
227 margin: 20px 0 0 0;
228
225 .video-info { 229 .video-info {
226 margin-right: 10px; 230 margin-right: 0;
227 231
228 .video-info-name-actions { 232 .video-info-name-actions {
229 align-items: left; 233 align-items: left;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 6352dd4fb..9a93411e9 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -107,35 +107,6 @@ label {
107 font-weight: bold; 107 font-weight: bold;
108} 108}
109 109
110// On small screen, menu is absolute
111@media screen and (max-width: 800px) {
112 .title-menu-left {
113 width: 150px !important;
114 position: absolute !important;
115 z-index: 10000;
116 }
117
118 .main-col {
119 margin-left: 0;
120
121 &, &.expanded {
122 .margin-content {
123 margin-left: 10px;
124 margin-right: 10px;
125 }
126
127 .sub-menu {
128 padding-left: 10px;
129 margin-bottom: 10px;
130 }
131
132 input[type=text], input[type=password] {
133 width: 100% !important;
134 }
135 }
136 }
137}
138
139// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d 110// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
140.glyphicon-refresh-animate { 111.glyphicon-refresh-animate {
141 -animation: spin .7s infinite linear; 112 -animation: spin .7s infinite linear;
@@ -330,3 +301,32 @@ p-datatable {
330 @include peertube-button-link; 301 @include peertube-button-link;
331 @include grey-button; 302 @include grey-button;
332} 303}
304
305// On small screen, menu is absolute
306@media screen and (max-width: 800px) {
307 .title-menu-left {
308 width: 150px !important;
309 position: absolute !important;
310 z-index: 10000;
311 }
312
313 .main-col {
314 margin-left: 0;
315
316 &, &.expanded {
317 .margin-content {
318 margin-left: 10px;
319 margin-right: 10px;
320 }
321
322 .sub-menu {
323 padding-left: 10px;
324 margin-bottom: 10px;
325 }
326
327 input[type=text], input[type=password] {
328 width: 100% !important;
329 }
330 }
331 }
332}
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 2fcfc6203..fe9495e77 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -28,10 +28,6 @@ $control-bar-height: 34px;
28 $big-play-width: 3em; 28 $big-play-width: 3em;
29 $big-play-height: 1.5em; 29 $big-play-height: 1.5em;
30 30
31 line-height: $big-play-height;
32 height: $big-play-height;
33 width: $big-play-width;
34
35 border: 0; 31 border: 0;
36 border-radius: 0.3em; 32 border-radius: 0.3em;
37 33
@@ -39,10 +35,7 @@ $control-bar-height: 34px;
39 top: 50%; 35 top: 50%;
40 margin-left: -($big-play-width / 2); 36 margin-left: -($big-play-width / 2);
41 margin-top: -($big-play-height / 2); 37 margin-top: -($big-play-height / 2);
42 } 38 background-color: transparent !important;
43
44 &:hover .vjs-big-play-button {
45 background-color: transparent;
46 } 39 }
47 40
48 .vjs-control-bar, 41 .vjs-control-bar,
@@ -321,13 +314,8 @@ $control-bar-height: 34px;
321 314
322// Thanks: https://projects.lukehaas.me/css-loaders/ 315// Thanks: https://projects.lukehaas.me/css-loaders/
323.vjs-loading-spinner { 316.vjs-loading-spinner {
324 margin: 0 !important;
325 //position: absolute;
326 // 15px is the nav bar height
327 top: calc(50% - 15px);
328 left: 50%; 317 left: 50%;
329 font-size: 10px; 318 font-size: 10px;
330 position: relative;
331 text-indent: -9999em; 319 text-indent: -9999em;
332 border: 0.7em solid rgba(255, 255, 255, 0.2); 320 border: 0.7em solid rgba(255, 255, 255, 0.2);
333 border-left-color: #ffffff; 321 border-left-color: #ffffff;