diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-11-06 11:46:11 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-11-06 11:46:11 +0100 |
commit | a01f107bc436250706d4bc765f45335ee15b8e80 (patch) | |
tree | 51333f833587e6581440ed59837127f03db37204 /client/src | |
parent | c3488a484e421783eb6a3d5990174a545e6088c0 (diff) | |
download | PeerTube-a01f107bc436250706d4bc765f45335ee15b8e80.tar.gz PeerTube-a01f107bc436250706d4bc765f45335ee15b8e80.tar.zst PeerTube-a01f107bc436250706d4bc765f45335ee15b8e80.zip |
Improve client mobile version
Diffstat (limited to 'client/src')
-rw-r--r-- | client/src/app/app.component.html | 4 | ||||
-rw-r--r-- | client/src/app/app.component.scss | 1 | ||||
-rw-r--r-- | client/src/app/app.component.ts | 3 | ||||
-rw-r--r-- | client/src/app/core/menu/menu.component.scss | 1 | ||||
-rw-r--r-- | client/src/app/shared/search/search.component.html | 2 | ||||
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.html | 4 | ||||
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.scss | 41 | ||||
-rw-r--r-- | client/src/app/videos/video-list/shared/video-miniature.component.scss | 3 | ||||
-rw-r--r-- | client/src/sass/application.scss | 18 |
9 files changed, 61 insertions, 16 deletions
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index df0ec5a5d..8a826e783 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html | |||
@@ -28,10 +28,10 @@ | |||
28 | </div> | 28 | </div> |
29 | 29 | ||
30 | <!-- Used for the fixed menu --> | 30 | <!-- Used for the fixed menu --> |
31 | <div class="col-md-2 col-sm-3 col-xs-3"> | 31 | <div class="fake-menu col-md-2 col-sm-3 col-xs-3"> |
32 | </div> | 32 | </div> |
33 | 33 | ||
34 | <div [ngClass]="getMainColClasses()"> | 34 | <div class="main-col" [ngClass]="getMainColClasses()"> |
35 | 35 | ||
36 | <div class="main-row"> | 36 | <div class="main-row"> |
37 | <router-outlet></router-outlet> | 37 | <router-outlet></router-outlet> |
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 7259006e5..a656d5c29 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss | |||
@@ -47,7 +47,6 @@ | |||
47 | } | 47 | } |
48 | 48 | ||
49 | #peertube-title { | 49 | #peertube-title { |
50 | |||
51 | a { | 50 | a { |
52 | color: inherit !important; | 51 | color: inherit !important; |
53 | display: block; | 52 | display: block; |
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index bef1599fc..9b699fafd 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts | |||
@@ -57,6 +57,7 @@ export class AppComponent implements OnInit { | |||
57 | } | 57 | } |
58 | 58 | ||
59 | toggleMenu () { | 59 | toggleMenu () { |
60 | window.scrollTo(0, 0) | ||
60 | this.isMenuDisplayed = !this.isMenuDisplayed | 61 | this.isMenuDisplayed = !this.isMenuDisplayed |
61 | } | 62 | } |
62 | 63 | ||
@@ -72,7 +73,7 @@ export class AppComponent implements OnInit { | |||
72 | Object.keys(colSizes).forEach(col => colSizes[col] = 12) | 73 | Object.keys(colSizes).forEach(col => colSizes[col] = 12) |
73 | } | 74 | } |
74 | 75 | ||
75 | const classes = [ 'main-col' ] | 76 | const classes = [] |
76 | Object.keys(colSizes).forEach(col => classes.push(`col-${col}-${colSizes[col]}`)) | 77 | Object.keys(colSizes).forEach(col => classes.push(`col-${col}-${colSizes[col]}`)) |
77 | 78 | ||
78 | return classes | 79 | return classes |
diff --git a/client/src/app/core/menu/menu.component.scss b/client/src/app/core/menu/menu.component.scss index 38a6b95b6..45679c310 100644 --- a/client/src/app/core/menu/menu.component.scss +++ b/client/src/app/core/menu/menu.component.scss | |||
@@ -6,6 +6,7 @@ menu { | |||
6 | white-space: nowrap; | 6 | white-space: nowrap; |
7 | text-overflow: ellipsis; | 7 | text-overflow: ellipsis; |
8 | overflow: hidden; | 8 | overflow: hidden; |
9 | z-index: 1000; | ||
9 | 10 | ||
10 | @media screen and (max-width: 550px) { | 11 | @media screen and (max-width: 550px) { |
11 | font-size: 90%; | 12 | font-size: 90%; |
diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html index 0302447d0..75e9dfa59 100644 --- a/client/src/app/shared/search/search.component.html +++ b/client/src/app/shared/search/search.component.html | |||
@@ -1,6 +1,6 @@ | |||
1 | <div class="input-group"> | 1 | <div class="input-group"> |
2 | 2 | ||
3 | <span class="input-group-addon icon-addon"> | 3 | <span class="hidden-xs input-group-addon icon-addon"> |
4 | <span class="glyphicon glyphicon-search"></span> | 4 | <span class="glyphicon glyphicon-search"></span> |
5 | </span> | 5 | </span> |
6 | 6 | ||
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 53648a8d8..0bab18d37 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html | |||
@@ -52,7 +52,7 @@ | |||
52 | <div class="col-xs-2 col-md-3 video-small-block video-small-block-share"> | 52 | <div class="col-xs-2 col-md-3 video-small-block video-small-block-share"> |
53 | <a class="option" (click)="showShareModal()" title="Share the video"> | 53 | <a class="option" (click)="showShareModal()" title="Share the video"> |
54 | <span class="glyphicon glyphicon-share"></span> | 54 | <span class="glyphicon glyphicon-share"></span> |
55 | <span class="video-small-block-text">Share</span> | 55 | <span class="hidden-xs video-small-block-text">Share</span> |
56 | </a> | 56 | </a> |
57 | </div> | 57 | </div> |
58 | 58 | ||
@@ -60,7 +60,7 @@ | |||
60 | <div class="video-small-block-dropdown" dropdown dropup="true" placement="right"> | 60 | <div class="video-small-block-dropdown" dropdown dropup="true" placement="right"> |
61 | <a class="option" title="Access to more options" dropdownToggle> | 61 | <a class="option" title="Access to more options" dropdownToggle> |
62 | <span class="glyphicon glyphicon-option-horizontal"></span> | 62 | <span class="glyphicon glyphicon-option-horizontal"></span> |
63 | <span class="video-small-block-text">More</span> | 63 | <span class="hidden-xs video-small-block-text">More</span> |
64 | </a> | 64 | </a> |
65 | 65 | ||
66 | <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> | 66 | <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> |
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 ab0539fa3..1a59a1bd3 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -212,12 +212,6 @@ | |||
212 | } | 212 | } |
213 | } | 213 | } |
214 | 214 | ||
215 | @media screen and (max-width: 400px) { | ||
216 | .video-name-views { | ||
217 | font-size: 16px !important; | ||
218 | } | ||
219 | } | ||
220 | |||
221 | @media screen and (max-width: 800px) { | 215 | @media screen and (max-width: 800px) { |
222 | .video-name-views { | 216 | .video-name-views { |
223 | .video-name { | 217 | .video-name { |
@@ -242,6 +236,7 @@ | |||
242 | 236 | ||
243 | .video-small-block-author { | 237 | .video-small-block-author { |
244 | padding-left: 10px; | 238 | padding-left: 10px; |
239 | padding-right: 10px; | ||
245 | } | 240 | } |
246 | } | 241 | } |
247 | 242 | ||
@@ -260,4 +255,38 @@ | |||
260 | } | 255 | } |
261 | } | 256 | } |
262 | } | 257 | } |
258 | |||
259 | @media screen and (max-width: 500px) { | ||
260 | .video-name-views { | ||
261 | font-size: 16px !important; | ||
262 | } | ||
263 | |||
264 | // Keep the same hierarchy than max-width: 800px | ||
265 | .video-small-blocks { | ||
266 | a, .video-small-block-text { | ||
267 | font-size: 10px !important; | ||
268 | } | ||
269 | |||
270 | .video-small-block-author { | ||
271 | padding-left: 5px; | ||
272 | padding-right: 5px; | ||
273 | } | ||
274 | } | ||
275 | |||
276 | .video-details { | ||
277 | .video-details-date-description { | ||
278 | margin-bottom: 30px; | ||
279 | width: 100%; | ||
280 | |||
281 | .video-details-date { | ||
282 | margin-bottom: 15px; | ||
283 | } | ||
284 | } | ||
285 | |||
286 | .video-details-attributes { | ||
287 | padding-left: 10px; | ||
288 | padding-right: 10px; | ||
289 | } | ||
290 | } | ||
291 | } | ||
263 | } | 292 | } |
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss index 066792d10..e2602d3b6 100644 --- a/client/src/app/videos/video-list/shared/video-miniature.component.scss +++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss | |||
@@ -1,9 +1,8 @@ | |||
1 | .video-miniature { | 1 | .video-miniature { |
2 | margin-top: 30px; | 2 | margin: 15px 10px; |
3 | display: inline-block; | 3 | display: inline-block; |
4 | position: relative; | 4 | position: relative; |
5 | height: 190px; | 5 | height: 190px; |
6 | width: 220px; | ||
7 | vertical-align: top; | 6 | vertical-align: top; |
8 | 7 | ||
9 | .video-miniature-thumbnail { | 8 | .video-miniature-thumbnail { |
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 8e2666944..47e1b6df0 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss | |||
@@ -25,7 +25,6 @@ input.readonly { | |||
25 | } | 25 | } |
26 | 26 | ||
27 | .main-col { | 27 | .main-col { |
28 | |||
29 | .content-padding { | 28 | .content-padding { |
30 | padding: 15px 30px; | 29 | padding: 15px 30px; |
31 | 30 | ||
@@ -47,6 +46,23 @@ input.readonly { | |||
47 | } | 46 | } |
48 | } | 47 | } |
49 | 48 | ||
49 | // On small screen, menu is absolute and displayed over the page | ||
50 | @media screen and (max-width: 500px) { | ||
51 | .title-menu-left { | ||
52 | width: 120px; | ||
53 | position: absolute !important; | ||
54 | z-index: 10000; | ||
55 | } | ||
56 | |||
57 | .main-col { | ||
58 | width: 100% !important; | ||
59 | } | ||
60 | |||
61 | .fake-menu { | ||
62 | display: none; | ||
63 | } | ||
64 | } | ||
65 | |||
50 | // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d | 66 | // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d |
51 | .glyphicon-refresh-animate { | 67 | .glyphicon-refresh-animate { |
52 | -animation: spin .7s infinite linear; | 68 | -animation: spin .7s infinite linear; |