aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
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
parent45ef55fccd120184ed5d02aaa1254a2b26162fac (diff)
downloadPeerTube-3eeeb87fe62fab3e48455f53c8a725b49878b9b3.tar.gz
PeerTube-3eeeb87fe62fab3e48455f53c8a725b49878b9b3.tar.zst
PeerTube-3eeeb87fe62fab3e48455f53c8a725b49878b9b3.zip
Client: try to be responsive
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/app.component.html6
-rw-r--r--client/src/app/app.component.scss62
-rw-r--r--client/src/app/app.component.ts5
-rw-r--r--client/src/app/core/menu/menu-admin.component.ts2
-rw-r--r--client/src/app/core/menu/menu.component.scss (renamed from client/src/app/core/menu/menu-admin.component.scss)13
-rw-r--r--client/src/app/core/menu/menu.component.ts2
-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
-rw-r--r--client/src/sass/application.scss4
9 files changed, 147 insertions, 16 deletions
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index a1e38cdb1..df0ec5a5d 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -2,11 +2,11 @@
2 <div class="row header"> 2 <div class="row header">
3 3
4 <div class="col-md-2 col-sm-3 col-xs-3 top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }"> 4 <div class="col-md-2 col-sm-3 col-xs-3 top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
5 <div class="hamburger-block"> 5 <div class="hamburger-block" (click)="toggleMenu()">
6 <span (click)="toggleMenu()" class="glyphicon glyphicon-menu-hamburger"></span> 6 <span class="glyphicon glyphicon-menu-hamburger"></span>
7 </div> 7 </div>
8 8
9 <div id="peertube-title" class="title-menu-left-block header"> 9 <div id="peertube-title">
10 <a [routerLink]="['/videos/list']" title="Homepage"></a> 10 <a [routerLink]="['/videos/list']" title="Homepage"></a>
11 </div> 11 </div>
12 </div> 12 </div>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index f5da651b2..68fadbe7c 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -29,13 +29,14 @@
29 margin-bottom: 0; 29 margin-bottom: 0;
30 display: flex; 30 display: flex;
31 position: fixed; 31 position: fixed;
32 padding: 0;
32 33
33 &.border-bottom { 34 &.border-bottom {
34 border-bottom: 1px solid $header-border-color; 35 border-bottom: 1px solid $header-border-color;
35 } 36 }
36 37
37 .hamburger-block { 38 .hamburger-block {
38 margin-right: 20px; 39 margin-right: 15px;
39 margin-left: 15px; 40 margin-left: 15px;
40 41
41 .glyphicon { 42 .glyphicon {
@@ -53,9 +54,9 @@
53 background: url(/client/assets/logo.png) no-repeat; 54 background: url(/client/assets/logo.png) no-repeat;
54 background-size: contain; 55 background-size: contain;
55 background-position: center; 56 background-position: center;
56 width: 180px;
57 height: 100%; 57 height: 100%;
58 margin: auto; 58 margin: auto;
59 width: 135px;
59 60
60 &:hover { 61 &:hover {
61 color: inherit !important; 62 color: inherit !important;
@@ -63,6 +64,63 @@
63 } 64 }
64 } 65 }
65 } 66 }
67
68 @media screen and (max-width: 500px) {
69 #peertube-title {
70 display: none;
71 }
72
73 .hamburger-block {
74 width: 100%;
75 text-align: center;
76 }
77 }
78
79 @media screen and (min-width: 500px) and (max-width: 600px) {
80 #peertube-title a {
81 width: 80px;
82 }
83 }
84
85 @media screen and (min-width: 600px) and (max-width: 700px) {
86 #peertube-title a {
87 width: 100px;
88 }
89 }
90
91 @media screen and (min-width: 1000px) {
92 #peertube-title a {
93 width: 120px;
94 }
95 }
96
97 @media screen and (min-width: 1000px) {
98 #peertube-title a {
99 width: 120px;
100 }
101 }
102
103 @media screen and (min-width: 1200px) {
104 padding-left: 15px;
105
106 .hamburger-block {
107 margin-right: 15px;
108 }
109
110 #peertube-title a {
111 width: 135px;
112 }
113 }
114
115 @media screen and (min-width: 1600px) {
116 .hamburger-block {
117 margin-right: 20px;
118 }
119
120 #peertube-title a {
121 width: 180px;
122 }
123 }
66 } 124 }
67 125
68 my-search { 126 my-search {
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index a6eb4cd2e..b8b732169 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -45,6 +45,11 @@ export class AppComponent implements OnInit {
45 this.videoService.loadVideoCategories(); 45 this.videoService.loadVideoCategories();
46 this.videoService.loadVideoLicences(); 46 this.videoService.loadVideoLicences();
47 this.videoService.loadVideoLanguages(); 47 this.videoService.loadVideoLanguages();
48
49 // Do not display menu on small screens
50 if (window.innerWidth < 600) {
51 this.isMenuDisplayed = false;
52 }
48 } 53 }
49 54
50 isInAdmin() { 55 isInAdmin() {
diff --git a/client/src/app/core/menu/menu-admin.component.ts b/client/src/app/core/menu/menu-admin.component.ts
index a3d920fdd..236161fce 100644
--- a/client/src/app/core/menu/menu-admin.component.ts
+++ b/client/src/app/core/menu/menu-admin.component.ts
@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
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 styleUrls: [ './menu.component.scss' ]
7}) 7})
8export class MenuAdminComponent { } 8export class MenuAdminComponent { }
diff --git a/client/src/app/core/menu/menu-admin.component.scss b/client/src/app/core/menu/menu.component.scss
index 5881475f1..38a6b95b6 100644
--- a/client/src/app/core/menu/menu-admin.component.scss
+++ b/client/src/app/core/menu/menu.component.scss
@@ -1,8 +1,19 @@
1menu { 1menu {
2 background-color: $black-background; 2 background-color: $black-background;
3 padding: 25px; 3 padding: 15px;
4 margin: 0; 4 margin: 0;
5 height: 100%; 5 height: 100%;
6 white-space: nowrap;
7 text-overflow: ellipsis;
8 overflow: hidden;
9
10 @media screen and (max-width: 550px) {
11 font-size: 90%;
12 }
13
14 @media screen and (min-width: 1200px) {
15 padding: 25px;
16 }
6 17
7 .panel-block { 18 .panel-block {
8 margin-bottom: 15px; 19 margin-bottom: 15px;
diff --git a/client/src/app/core/menu/menu.component.ts b/client/src/app/core/menu/menu.component.ts
index e2b998747..5ab8bf464 100644
--- a/client/src/app/core/menu/menu.component.ts
+++ b/client/src/app/core/menu/menu.component.ts
@@ -7,7 +7,7 @@ import { ConfigService } from '../config';
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 styleUrls: [ './menu.component.scss' ]
11}) 11})
12export class MenuComponent implements OnInit { 12export class MenuComponent implements OnInit {
13 isLoggedIn: boolean; 13 isLoggedIn: boolean;
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}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index db23afd0d..fa5b564b7 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -26,6 +26,10 @@ input.readonly {
26 .content-padding { 26 .content-padding {
27 padding: 15px 30px; 27 padding: 15px 30px;
28 28
29 @media screen and (max-width: 800px) {
30 padding: 15px 10px;
31 }
32
29 @media screen and (min-width: 1400px) { 33 @media screen and (min-width: 1400px) {
30 padding: 15px 40px; 34 padding: 15px 40px;
31 } 35 }