aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-01-31 11:38:05 +0100
committerChocobozzz <me@florianbigard.com>2018-01-31 11:38:05 +0100
commit1f788f2044928325e48c5d88ecbc72501873558e (patch)
tree5adec286aa86477fd638efebe42ecf42d55043e5 /client/src/app/videos
parent6693df9dd60e6966186bcb7765218596de7b65c0 (diff)
downloadPeerTube-1f788f2044928325e48c5d88ecbc72501873558e.tar.gz
PeerTube-1f788f2044928325e48c5d88ecbc72501873558e.tar.zst
PeerTube-1f788f2044928325e48c5d88ecbc72501873558e.zip
Improve responsive on video watch
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html144
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss255
2 files changed, 214 insertions, 185 deletions
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 5921b4b72..74ead1b76 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -9,89 +9,91 @@
9 <!-- Video information --> 9 <!-- Video information -->
10 <div *ngIf="video" class="margin-content video-bottom"> 10 <div *ngIf="video" class="margin-content video-bottom">
11 <div class="video-info"> 11 <div class="video-info">
12 <div class="video-info-name-actions"> 12 <div class="video-info-first-row">
13 <div class="video-info-name">{{ video.name }}</div> 13 <div>
14 <div class="video-info-name">{{ video.name }}</div>
14 15
15 <div class="video-info-actions"> 16 <div class="video-info-date-views">
16 <div 17 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
17 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
18 class="action-button action-button-like"
19 >
20 <span class="icon icon-like" title="Like this video" ></span>
21 </div> 18 </div>
22 19
23 <div 20 <div class="video-info-channel">
24 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()" 21 {{ video.channel.displayName }}
25 class="action-button action-button-dislike" 22 <!-- Here will be the subscribe button -->
26 >
27 <span class="icon icon-dislike" title="Dislike this video"></span>
28 </div> 23 </div>
29 24
30 <div (click)="showShareModal()" class="action-button"> 25 <div class="video-info-by">
31 <span class="icon icon-share"></span> 26 By {{ video.by }}
32 Share 27 <img [src]="getAvatarPath()" alt="Account avatar" />
33 </div> 28 </div>
29 </div>
34 30
35 <div class="action-more" dropdown dropup="true" placement="right"> 31 <div class="video-actions-rates">
36 <div class="action-button" dropdownToggle> 32 <div class="video-actions">
37 <span class="icon icon-more"></span> 33 <div
34 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
35 class="action-button action-button-like"
36 >
37 <span class="icon icon-like" title="Like this video" ></span>
38 </div> 38 </div>
39 39
40 <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> 40 <div
41 <li role="menuitem"> 41 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
42 <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)"> 42 class="action-button action-button-dislike"
43 <span class="icon icon-download"></span> Download 43 >
44 </a> 44 <span class="icon icon-dislike" title="Dislike this video"></span>
45 </li> 45 </div>
46
47 <li *ngIf="isUserLoggedIn()" role="menuitem">
48 <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
49 <span class="icon icon-alert"></span> Report
50 </a>
51 </li>
52
53 <li *ngIf="isVideoBlacklistable()" role="menuitem">
54 <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
55 <span class="icon icon-blacklist"></span> Blacklist
56 </a>
57 </li>
58
59 <li *ngIf="isVideoUpdatable()" role="menuitem">
60 <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
61 <span class="icon icon-edit"></span> Update
62 </a>
63 </li>
64
65 <li *ngIf="isVideoRemovable()" role="menuitem">
66 <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
67 <span class="icon icon-blacklist"></span> Delete
68 </a>
69 </li>
70 </ul>
71 </div>
72 </div>
73 </div>
74
75 <div class="video-info-date-views-bar">
76 <div class="video-info-date-views">
77 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
78 </div>
79 46
80 <div 47 <div (click)="showShareModal()" class="action-button">
81 class="video-info-likes-dislikes-bar" 48 <span class="icon icon-share"></span>
82 *ngIf="video.likes !== 0 || video.dislikes !== 0" [tooltip]="likesBarTooltipText"> 49 Share
83 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> 50 </div>
84 </div>
85 </div>
86 51
87 <div class="video-info-channel"> 52 <div class="action-more" dropdown dropup="true" placement="right">
88 {{ video.channel.displayName }} 53 <div class="action-button" dropdownToggle>
89 <!-- Here will be the subscribe button --> 54 <span class="icon icon-more"></span>
90 </div> 55 </div>
56
57 <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
58 <li role="menuitem">
59 <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
60 <span class="icon icon-download"></span> Download
61 </a>
62 </li>
63
64 <li *ngIf="isUserLoggedIn()" role="menuitem">
65 <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
66 <span class="icon icon-alert"></span> Report
67 </a>
68 </li>
69
70 <li *ngIf="isVideoBlacklistable()" role="menuitem">
71 <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
72 <span class="icon icon-blacklist"></span> Blacklist
73 </a>
74 </li>
75
76 <li *ngIf="isVideoUpdatable()" role="menuitem">
77 <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
78 <span class="icon icon-edit"></span> Update
79 </a>
80 </li>
81
82 <li *ngIf="isVideoRemovable()" role="menuitem">
83 <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
84 <span class="icon icon-blacklist"></span> Delete
85 </a>
86 </li>
87 </ul>
88 </div>
89 </div>
91 90
92 <div class="video-info-by"> 91 <div
93 By {{ video.by }} 92 class="video-info-likes-dislikes-bar"
94 <img [src]="getAvatarPath()" alt="Account avatar" /> 93 *ngIf="video.likes !== 0 || video.dislikes !== 0" [tooltip]="likesBarTooltipText">
94 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
95 </div>
96 </div>
95 </div> 97 </div>
96 98
97 <div class="video-info-description"> 99 <div class="video-info-description">
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 7ebdfc0c4..d963f713d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -39,149 +39,156 @@
39 flex-grow: 1; 39 flex-grow: 1;
40 margin-right: 28px; 40 margin-right: 28px;
41 41
42 .video-info-name-actions { 42 .video-info-first-row {
43 display: flex; 43 display: flex;
44 align-items: center; 44
45 & > div {
46 flex-grow: 1;
47 }
45 48
46 .video-info-name { 49 .video-info-name {
47 margin-right: 30px; 50 margin-right: 30px;
51 height: 40px; // Align with the action buttons
48 font-size: 27px; 52 font-size: 27px;
49 font-weight: $font-semibold; 53 font-weight: $font-semibold;
50 flex-grow: 1; 54 flex-grow: 1;
51 } 55 }
52 56
53 .video-info-actions { 57 .video-info-date-views {
54 min-width: 215px; 58 font-size: 16px;
59 margin-bottom: 10px;
60 flex-grow: 1;
61 }
62
63 .video-info-channel {
64 font-weight: $font-semibold;
65 font-size: 15px;
66 }
67
68 .video-info-by {
55 display: flex; 69 display: flex;
56 justify-content: end; 70 align-items: center;
71 font-size: 13px;
72
73 img {
74 @include avatar(18px);
57 75
58 .action-button:not(:first-child), .action-more { 76 margin-left: 7px;
59 margin-left: 10px;
60 } 77 }
78 }
61 79
62 .action-button { 80 .video-actions-rates {
63 @include peertube-button; 81 display: flex;
64 @include grey-button; 82 flex-direction: column;
83 align-items: end;
65 84
66 font-size: 15px; 85 .video-actions {
67 font-weight: $font-semibold; 86 height: 40px; // Align with the title
68 display: inline-block; 87 min-width: 215px;
69 padding: 0 10px 0 10px; 88 display: flex;
89 align-items: center;
70 90
71 .icon { 91 .action-button:not(:first-child), .action-more {
72 @include icon(21px); 92 margin-left: 10px;
93 }
73 94
74 position: relative; 95 .action-button {
75 top: -2px; 96 @include peertube-button;
97 @include grey-button;
76 98
77 &.icon-like { 99 font-size: 15px;
78 background-image: url('../../../assets/images/video/like-grey.svg'); 100 font-weight: $font-semibold;
79 } 101 display: inline-block;
102 padding: 0 10px 0 10px;
80 103
81 &.icon-dislike { 104 .icon {
82 background-image: url('../../../assets/images/video/dislike-grey.svg'); 105 @include icon(21px);
83 }
84 106
85 &.icon-share { 107 position: relative;
86 background-image: url('../../../assets/images/video/share.svg'); 108 top: -2px;
87 } 109
110 &.icon-like {
111 background-image: url('../../../assets/images/video/like-grey.svg');
112 }
113
114 &.icon-dislike {
115 background-image: url('../../../assets/images/video/dislike-grey.svg');
116 }
88 117
89 &.icon-more { 118 &.icon-share {
90 background-image: url('../../../assets/images/video/more.svg'); 119 background-image: url('../../../assets/images/video/share.svg');
91 top: -1px; 120 }
121
122 &.icon-more {
123 background-image: url('../../../assets/images/video/more.svg');
124 top: -1px;
125 }
92 } 126 }
93 }
94 127
95 &.action-button-like.activated { 128 &.action-button-like.activated {
96 background-color: #39CC0B; 129 background-color: #39CC0B;
97 130
98 .icon-like { 131 .icon-like {
99 background-image: url('../../../assets/images/video/like-white.svg'); 132 background-image: url('../../../assets/images/video/like-white.svg');
133 }
100 } 134 }
101 }
102 135
103 &.action-button-dislike.activated { 136 &.action-button-dislike.activated {
104 background-color: #FF0000; 137 background-color: #FF0000;
105 138
106 .icon-dislike { 139 .icon-dislike {
107 background-image: url('../../../assets/images/video/dislike-white.svg'); 140 background-image: url('../../../assets/images/video/dislike-white.svg');
141 }
108 } 142 }
109 } 143 }
110 }
111 144
112 .action-more { 145 .action-more {
113 display: inline-block; 146 display: inline-block;
114 147
115 .dropdown-menu .dropdown-item { 148 .dropdown-menu .dropdown-item {
116 padding: 6px 24px; 149 padding: 6px 24px;
117 150
118 .icon { 151 .icon {
119 @include icon(24px); 152 @include icon(24px);
120 153
121 margin-right: 10px; 154 margin-right: 10px;
122 position: relative; 155 position: relative;
123 top: -1px; 156 top: -1px;
124 157
125 &.icon-download { 158 &.icon-download {
126 background-image: url('../../../assets/images/video/download-black.svg'); 159 background-image: url('../../../assets/images/video/download-black.svg');
127 } 160 }
128 161
129 &.icon-edit { 162 &.icon-edit {
130 background-image: url('../../../assets/images/global/edit-black.svg'); 163 background-image: url('../../../assets/images/global/edit-black.svg');
131 } 164 }
132 165
133 &.icon-alert { 166 &.icon-alert {
134 background-image: url('../../../assets/images/video/alert.svg'); 167 background-image: url('../../../assets/images/video/alert.svg');
135 } 168 }
136 169
137 &.icon-blacklist { 170 &.icon-blacklist {
138 background-image: url('../../../assets/images/video/blacklist.svg'); 171 background-image: url('../../../assets/images/video/blacklist.svg');
172 }
139 } 173 }
140 } 174 }
141 } 175 }
142 } 176 }
143 }
144 }
145
146 .video-info-date-views-bar {
147 display: flex;
148 177
149 .video-info-date-views { 178 .video-info-likes-dislikes-bar {
150 font-size: 16px; 179 height: 5px;
151 margin-bottom: 10px; 180 width: 186px;
152 flex-grow: 1; 181 background-color: #E5E5E5;
153 } 182 margin-top: 25px;
154
155 .video-info-likes-dislikes-bar {
156 height: 5px;
157 width: 186px;
158 background-color: #E5E5E5;
159 margin-top: 25px;
160 183
161 .likes-bar { 184 .likes-bar {
162 height: 100%; 185 height: 100%;
163 background-color: #39CC0B; 186 background-color: #39CC0B;
187 }
164 } 188 }
165 } 189 }
166 } 190 }
167 191
168 .video-info-channel {
169 font-weight: $font-semibold;
170 font-size: 15px;
171 }
172
173 .video-info-by {
174 display: flex;
175 align-items: center;
176 font-size: 13px;
177
178 img {
179 @include avatar(18px);
180
181 margin-left: 7px;
182 }
183 }
184
185 .video-info-description { 192 .video-info-description {
186 margin: 20px 0; 193 margin: 20px 0;
187 font-size: 15px; 194 font-size: 15px;
@@ -203,18 +210,16 @@
203 } 210 }
204 } 211 }
205 212
206 .video-attributes { 213 .video-attributes .video-attribute {
207 .video-attribute { 214 font-size: 13px;
208 font-size: 13px; 215 display: block;
209 display: block; 216 margin-bottom: 12px;
210 margin-bottom: 12px; 217
211 218 .video-attribute-label {
212 .video-attribute-label { 219 width: 86px;
213 width: 86px; 220 display: inline-block;
214 display: inline-block; 221 color: #585858;
215 color: #585858; 222 font-weight: $font-bold;
216 font-weight: $font-bold;
217 }
218 } 223 }
219 } 224 }
220 } 225 }
@@ -246,14 +251,21 @@
246 .video-info { 251 .video-info {
247 margin-right: 0; 252 margin-right: 0;
248 253
249 .video-info-name-actions { 254 .video-info-first-row {
250 align-items: left;
251 flex-direction: column; 255 flex-direction: column;
252 margin-bottom: 30px; 256 margin-bottom: 30px;
257
258 .video-actions-rates {
259 margin-top: 20px;
260 align-items: left;
261
262 .video-info-likes-dislikes-bar {
263 margin-top: 10px;
264 }
265 }
253 } 266 }
254 267
255 .video-info-date-views-bar { 268 .video-info-date-views {
256 align-items: left;
257 flex-direction: column; 269 flex-direction: column;
258 margin-bottom: 30px; 270 margin-bottom: 30px;
259 271
@@ -261,12 +273,27 @@
261 margin-top: 0; 273 margin-top: 0;
262 } 274 }
263 } 275 }
276
277 .video-attributes .video-attribute {
278 margin-bottom: 5px;
279 }
264 } 280 }
265 } 281 }
266} 282}
267 283
268@media screen and (max-width: 800px) { 284@media screen and (max-width: 600px) {
269 .video-bottom { 285 .video-bottom {
270 margin: 20px 0 0 0; 286 margin: 20px 0 0 0;
287
288 .video-info {
289
290 .video-info-first-row {
291
292 .video-info-name {
293 font-size: 20px;
294 height: auto;
295 }
296 }
297 }
271 } 298 }
272} 299}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-30 23:05:35 +0000