aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-01-31 10:08:05 +0100
committerChocobozzz <me@florianbigard.com>2018-01-31 10:08:05 +0100
commitc8cf5952f3be2dd64016c10dfe1825a6de1ec39b (patch)
treef8e8041b28bfeda4f642e975aa8db9bb924942d1
parent8892e8cc63fcef1ce4952b6a8e2946d730c5e8bb (diff)
downloadPeerTube-c8cf5952f3be2dd64016c10dfe1825a6de1ec39b.tar.gz
PeerTube-c8cf5952f3be2dd64016c10dfe1825a6de1ec39b.tar.zst
PeerTube-c8cf5952f3be2dd64016c10dfe1825a6de1ec39b.zip
Mobile version: menu full width and autoclosed
-rw-r--r--client/src/app/app.component.ts11
-rw-r--r--client/src/app/menu/menu.component.scss56
-rw-r--r--client/src/sass/application.scss8
3 files changed, 16 insertions, 59 deletions
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index ef8597203..ba52c2102 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,5 +1,5 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { Router } from '@angular/router' 2import { NavigationEnd, Router } from '@angular/router'
3import { AuthService, ServerService } from '@app/core' 3import { AuthService, ServerService } from '@app/core'
4 4
5@Component({ 5@Component({
@@ -48,6 +48,15 @@ export class AppComponent implements OnInit {
48 if (window.innerWidth < 600) { 48 if (window.innerWidth < 600) {
49 this.isMenuDisplayed = false 49 this.isMenuDisplayed = false
50 } 50 }
51
52 this.router.events.subscribe(
53 e => {
54 // User clicked on a link in the menu, change the page
55 if (e instanceof NavigationEnd && window.innerWidth < 600) {
56 this.isMenuDisplayed = false
57 }
58 }
59 )
51 } 60 }
52 61
53 toggleMenu () { 62 toggleMenu () {
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 297fda84d..4714a9e87 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -136,59 +136,3 @@ menu {
136 } 136 }
137 } 137 }
138} 138}
139
140@media screen and (max-width: 800px) {
141 menu {
142 .logged-in-block {
143 padding-left: 10px;
144
145 img {
146 display: none;
147 }
148
149 .logged-in-info {
150 .logged-in-username {
151 font-size: 14px;
152 }
153
154 .logged-in-email {
155 font-size: 11px;
156 max-width: 120px;
157 }
158 }
159
160 .logged-in-more {
161 margin-right: 5px;
162
163 .login-button, .create-account-button {
164 font-weight: $font-semibold;
165 font-size: 15px;
166 height: $button-height;
167 line-height: $button-height;
168 width: 190px;
169 }
170 }
171 }
172
173 .button-block {
174 margin: 20px 10px 25px 10px;
175
176 .login-button, .create-account-button {
177 font-size: 13px;
178 }
179 }
180
181 .panel-block {
182 margin-bottom: 30px;
183 margin-left: 10px;
184
185 a {
186 font-size: 14px;
187
188 .icon {
189 margin-right: 10px;
190 }
191 }
192 }
193 }
194}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 33d7ce0a5..82c4bca74 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -361,9 +361,9 @@ table {
361} 361}
362 362
363// On small screen, menu is absolute 363// On small screen, menu is absolute
364@media screen and (max-width: 800px) { 364@media screen and (max-width: 600px) {
365 .title-menu-left { 365 .title-menu-left {
366 width: 150px !important; 366 width: 100% !important;
367 position: absolute !important; 367 position: absolute !important;
368 z-index: 10000; 368 z-index: 10000;
369 } 369 }
@@ -387,4 +387,8 @@ table {
387 } 387 }
388 } 388 }
389 } 389 }
390
391 bs-dropdown-container {
392 z-index: 10000;
393 }
390} 394}