aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-watch
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-05-01 18:05:28 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-05-01 18:16:50 +0200
commit3eeeb87fe62fab3e48455f53c8a725b49878b9b3 (patch)
tree6b759da1dccd43509eef4546cb43166d1e3e0371 /client/src/app/videos/video-watch
parent45ef55fccd120184ed5d02aaa1254a2b26162fac (diff)
downloadPeerTube-3eeeb87fe62fab3e48455f53c8a725b49878b9b3.tar.gz
PeerTube-3eeeb87fe62fab3e48455f53c8a725b49878b9b3.tar.zst
PeerTube-3eeeb87fe62fab3e48455f53c8a725b49878b9b3.zip
Client: try to be responsive
Diffstat (limited to 'client/src/app/videos/video-watch')
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.html16
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.scss53
2 files changed, 61 insertions, 8 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 5e758401e..13f6719bb 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -30,30 +30,30 @@
30 30
31<div *ngIf="video !== null" id="video-info"> 31<div *ngIf="video !== null" id="video-info">
32 <div class="row video-name-views"> 32 <div class="row video-name-views">
33 <div class="col-md-8 video-name"> 33 <div class="col-xs-8 col-md-8 video-name">
34 {{ video.name }} 34 {{ video.name }}
35 </div> 35 </div>
36 36
37 <div class="col-md-4 pull-right video-views"> 37 <div class="col-xs-4 col-md-4 pull-right video-views">
38 {{ video.views}} views 38 {{ video.views}} views
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 <div class="row video-small-blocks"> 42 <div class="row video-small-blocks">
43 <div class="col-md-3 video-small-block video-small-block-author"> 43 <div class="col-xs-5 col-xs-3 col-md-3 video-small-block video-small-block-author">
44 <a title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'author', search: video.author }]"> 44 <a title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'author', search: video.author }]">
45 {{ video.by }} 45 {{ video.by }}
46 </a> 46 </a>
47 </div> 47 </div>
48 48
49 <div class="col-md-3 video-small-block video-small-block-share"> 49 <div class="col-xs-2 col-md-3 video-small-block video-small-block-share">
50 <a class="option" (click)="showShareModal()" title="Share the video"> 50 <a class="option" (click)="showShareModal()" title="Share the video">
51 <span class="glyphicon glyphicon-share"></span> 51 <span class="glyphicon glyphicon-share"></span>
52 <span class="video-small-block-text">Share</span> 52 <span class="video-small-block-text">Share</span>
53 </a> 53 </a>
54 </div> 54 </div>
55 55
56 <div class="col-md-3 video-small-block video-small-block-more"> 56 <div class="col-xs-2 col-md-3 video-small-block video-small-block-more">
57 <div class="video-small-block-dropdown" dropdown dropup="true" placement="right"> 57 <div class="video-small-block-dropdown" dropdown dropup="true" placement="right">
58 <a class="option" title="Access to more options" dropdownToggle> 58 <a class="option" title="Access to more options" dropdownToggle>
59 <span class="glyphicon glyphicon-option-horizontal"></span> 59 <span class="glyphicon glyphicon-option-horizontal"></span>
@@ -94,7 +94,7 @@
94 </div> 94 </div>
95 </div> 95 </div>
96 96
97 <div class="col-md-3 video-small-block video-small-block-rating"> 97 <div class="col-xs-3 col-md-3 video-small-block video-small-block-rating">
98 <div class="video-small-block-like"> 98 <div class="video-small-block-like">
99 <span 99 <span
100 class="glyphicon glyphicon-thumbs-up" title="Like this video" 100 class="glyphicon glyphicon-thumbs-up" title="Like this video"
@@ -120,7 +120,7 @@
120 </div> 120 </div>
121 121
122 <div class="row video-details"> 122 <div class="row video-details">
123 <div class="video-details-date-description col-md-9"> 123 <div class="video-details-date-description col-xs-8 col-md-9">
124 <div class="video-details-date"> 124 <div class="video-details-date">
125 Published on {{ video.createdAt | date:'short' }} 125 Published on {{ video.createdAt | date:'short' }}
126 </div> 126 </div>
@@ -130,7 +130,7 @@
130 </div> 130 </div>
131 </div> 131 </div>
132 132
133 <div class="video-details-attributes col-md-3"> 133 <div class="video-details-attributes col-xs-4 col-md-3">
134 <div class="video-details-attribute"> 134 <div class="video-details-attribute">
135 <span class="video-details-attribute-label"> 135 <span class="video-details-attribute-label">
136 Category: 136 Category:
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 8d8454cfd..767a3ed4e 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -47,6 +47,7 @@
47 // Keep a symmetry with the video name 47 // Keep a symmetry with the video name
48 padding-right: $video-watch-info-padding-left 48 padding-right: $video-watch-info-padding-left
49 } 49 }
50
50 } 51 }
51 52
52 .video-small-blocks { 53 .video-small-blocks {
@@ -66,6 +67,9 @@
66 a { 67 a {
67 cursor: pointer; 68 cursor: pointer;
68 transition: color 0.3s; 69 transition: color 0.3s;
70 white-space: nowrap;
71 overflow: hidden;
72 text-overflow: ellipsis;
69 73
70 &, &:hover { 74 &, &:hover {
71 color: inherit; 75 color: inherit;
@@ -181,4 +185,53 @@
181 } 185 }
182 } 186 }
183 } 187 }
188
189 @media screen and (max-width: 400px) {
190 .video-name-views {
191 font-size: 16px !important;
192 }
193 }
194
195 @media screen and (max-width: 800px) {
196 .video-name-views {
197 .video-name {
198 padding-left: 5px;
199 padding-right: 0px;
200 }
201
202 .video-views {
203 padding-left: 0px;
204 padding-right: 5px;
205 }
206 }
207
208 .video-small-blocks {
209 a, .video-small-block-text {
210 font-size: 13px !important;
211 }
212
213 .glyphicon {
214 font-size: 18px !important;
215 }
216
217 .video-small-block-author {
218 padding-left: 10px;
219 }
220 }
221
222 .video-details {
223 .video-details-date-description {
224 padding-left: 10px;
225 font-size: 13px !important;
226 }
227
228 .video-details-attributes {
229 font-size: 11px !important;
230
231 .video-details-attribute-label {
232 width: 50px;
233 }
234 }
235 }
236 }
184} 237}