aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-11-06 11:46:11 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-11-06 11:46:11 +0100
commita01f107bc436250706d4bc765f45335ee15b8e80 (patch)
tree51333f833587e6581440ed59837127f03db37204 /client/src
parentc3488a484e421783eb6a3d5990174a545e6088c0 (diff)
downloadPeerTube-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.html4
-rw-r--r--client/src/app/app.component.scss1
-rw-r--r--client/src/app/app.component.ts3
-rw-r--r--client/src/app/core/menu/menu.component.scss1
-rw-r--r--client/src/app/shared/search/search.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html4
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss41
-rw-r--r--client/src/app/videos/video-list/shared/video-miniature.component.scss3
-rw-r--r--client/src/sass/application.scss18
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;