aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-15 13:43:50 +0200
committerChocobozzz <me@florianbigard.com>2021-04-15 13:43:50 +0200
commitf1ac63488c0050fec1c4d713d74db4f4ea944395 (patch)
treefbb3a33152bef18bac501c1a4c3f46ae9b586bb6 /client/src/app/menu
parentfe88ca697d4c43b24cdc2462f5e4e83548776a51 (diff)
downloadPeerTube-f1ac63488c0050fec1c4d713d74db4f4ea944395.tar.gz
PeerTube-f1ac63488c0050fec1c4d713d74db4f4ea944395.tar.zst
PeerTube-f1ac63488c0050fec1c4d713d74db4f4ea944395.zip
Refactor menu css
Diffstat (limited to 'client/src/app/menu')
-rw-r--r--client/src/app/menu/menu.component.html39
-rw-r--r--client/src/app/menu/menu.component.scss225
2 files changed, 114 insertions, 150 deletions
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index a0777660f..df5c7971d 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -40,9 +40,10 @@
40 40
41 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings" 41 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
42 fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy 42 fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy
43 (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)"> 43 (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)"
44 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon> 44 >
45 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive" aria-hidden="true"></my-global-icon> 45 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon>
46 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon>
46 <span i18n>Sensitive:</span> 47 <span i18n>Sensitive:</span>
47 <span class="ml-auto text-muted">{{ nsfwPolicy }}</span> 48 <span class="ml-auto text-muted">{{ nsfwPolicy }}</span>
48 </a> 49 </a>
@@ -72,17 +73,17 @@
72 </div> 73 </div>
73 74
74 <div class="logged-in-menu"> 75 <div class="logged-in-menu">
75 <a routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onActiveLinkScrollToAnchor(settingsLink)"> 76 <a class="menu-link" routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onActiveLinkScrollToAnchor(settingsLink)">
76 <my-global-icon iconName="user" aria-hidden="true"></my-global-icon> 77 <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
77 <ng-container i18n>My account</ng-container> 78 <ng-container i18n>My account</ng-container>
78 </a> 79 </a>
79 80
80 <a routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onActiveLinkScrollToAnchor(libraryLink)"> 81 <a class="menu-link" routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onActiveLinkScrollToAnchor(libraryLink)">
81 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon> 82 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
82 <ng-container i18n>My library</ng-container> 83 <ng-container i18n>My library</ng-container>
83 </a> 84 </a>
84 85
85 <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active"> 86 <a class="menu-link" *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
86 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> 87 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
87 <ng-container i18n>Administration</ng-container> 88 <ng-container i18n>Administration</ng-container>
88 </a> 89 </a>
@@ -90,29 +91,29 @@
90 </div> 91 </div>
91 92
92 <div *ngIf="!isLoggedIn" class="login-buttons-block"> 93 <div *ngIf="!isLoggedIn" class="login-buttons-block">
93 <a i18n routerLink="/login" class="login-button">Login</a> 94 <a i18n routerLink="/login" class="peertube-button-link orange-button">Login</a>
94 <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a> 95 <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link">Create an account</a>
95 </div> 96 </div>
96 97
97 <div *ngIf="isLoggedIn" class="in-my-library"> 98 <div *ngIf="isLoggedIn" class="in-my-library">
98 <div i18n class="block-title">IN MY LIBRARY</div> 99 <div i18n class="block-title">IN MY LIBRARY</div>
99 100
100 <a *ngIf="user.canSeeVideosLink" routerLink="/my-library/videos" routerLinkActive="active"> 101 <a *ngIf="user.canSeeVideosLink" class="menu-link" routerLink="/my-library/videos" routerLinkActive="active">
101 <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon> 102 <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
102 <ng-container i18n>Videos</ng-container> 103 <ng-container i18n>Videos</ng-container>
103 </a> 104 </a>
104 105
105 <a routerLink="/my-library/video-playlists" routerLinkActive="active"> 106 <a class="menu-link" routerLink="/my-library/video-playlists" routerLinkActive="active">
106 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> 107 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
107 <ng-container i18n>Playlists</ng-container> 108 <ng-container i18n>Playlists</ng-container>
108 </a> 109 </a>
109 110
110 <a routerLink="/videos/subscriptions" routerLinkActive="active"> 111 <a class="menu-link" routerLink="/videos/subscriptions" routerLinkActive="active">
111 <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon> 112 <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
112 <ng-container i18n>Subscriptions</ng-container> 113 <ng-container i18n>Subscriptions</ng-container>
113 </a> 114 </a>
114 115
115 <a routerLink="/my-library/history/videos" routerLinkActive="active"> 116 <a class="menu-link" routerLink="/my-library/history/videos" routerLinkActive="active">
116 <my-global-icon iconName="history" aria-hidden="true"></my-global-icon> 117 <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
117 <ng-container i18n>History</ng-container> 118 <ng-container i18n>History</ng-container>
118 </a> 119 </a>
@@ -122,22 +123,22 @@
122 <div class="on-instance"> 123 <div class="on-instance">
123 <div i18n class="block-title">ON {{instanceName}}</div> 124 <div i18n class="block-title">ON {{instanceName}}</div>
124 125
125 <a routerLink="/videos/overview" routerLinkActive="active"> 126 <a class="menu-link" routerLink="/videos/overview" routerLinkActive="active">
126 <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon> 127 <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon>
127 <ng-container i18n>Discover</ng-container> 128 <ng-container i18n>Discover</ng-container>
128 </a> 129 </a>
129 130
130 <a routerLink="/videos/trending" routerLinkActive="active"> 131 <a class="menu-link" routerLink="/videos/trending" routerLinkActive="active">
131 <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon> 132 <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon>
132 <ng-container i18n>Trending</ng-container> 133 <ng-container i18n>Trending</ng-container>
133 </a> 134 </a>
134 135
135 <a routerLink="/videos/recently-added" routerLinkActive="active"> 136 <a class="menu-link" routerLink="/videos/recently-added" routerLinkActive="active">
136 <my-global-icon iconName="recently-added" aria-hidden="true"></my-global-icon> 137 <my-global-icon iconName="recently-added" aria-hidden="true"></my-global-icon>
137 <ng-container i18n>Recently added</ng-container> 138 <ng-container i18n>Recently added</ng-container>
138 </a> 139 </a>
139 140
140 <a routerLink="/videos/local" routerLinkActive="active"> 141 <a class="menu-link" routerLink="/videos/local" routerLinkActive="active">
141 <my-global-icon iconName="home" aria-hidden="true"></my-global-icon> 142 <my-global-icon iconName="home" aria-hidden="true"></my-global-icon>
142 <ng-container i18n>Local videos</ng-container> 143 <ng-container i18n>Local videos</ng-container>
143 </a> 144 </a>
@@ -146,18 +147,18 @@
146 147
147 <div class="footer"> 148 <div class="footer">
148 <div class="footer-block"> 149 <div class="footer-block">
149 <a *ngIf="!isLoggedIn" (click)="openQuickSettings()"> 150 <a *ngIf="!isLoggedIn" class="menu-link" (click)="openQuickSettings()">
150 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> 151 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
151 <ng-container i18n>My settings</ng-container> 152 <ng-container i18n>My settings</ng-container>
152 </a> 153 </a>
153 154
154 <a routerLink="/about" routerLinkActive="active"> 155 <a class="menu-link" routerLink="/about" routerLinkActive="active">
155 <my-global-icon iconName="help" aria-hidden="true"></my-global-icon> 156 <my-global-icon iconName="help" aria-hidden="true"></my-global-icon>
156 <ng-container i18n>About</ng-container> 157 <ng-container i18n>About</ng-container>
157 </a> 158 </a>
158 </div> 159 </div>
159 160
160 <div class="bottom-links"> 161 <div class="footer-bottom">
161 162
162 <div class="footer-links"> 163 <div class="footer-links">
163 <div *ngIf="isLoggedIn === false"> 164 <div *ngIf="isLoggedIn === false">
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 729dbc6ee..00d1a1f69 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -5,7 +5,9 @@ $menu-link-icon-size: 22px;
5$menu-link-icon-margin-right: 18px; 5$menu-link-icon-margin-right: 18px;
6$footer-links-base-opacity: .8; 6$footer-links-base-opacity: .8;
7 7
8@mixin menu-link { 8.menu-link {
9 @include disable-default-a-behaviour;
10
9 display: flex; 11 display: flex;
10 align-items: center; 12 align-items: center;
11 padding-left: $menu-lateral-padding; 13 padding-left: $menu-lateral-padding;
@@ -91,32 +93,15 @@ menu {
91 display: flex; 93 display: flex;
92 align-items: center; 94 align-items: center;
93 justify-content: left; 95 justify-content: left;
94
95 my-notification {
96 margin-left: auto;
97 margin-right: 15px;
98 }
99 } 96 }
100} 97}
101 98
102.logged-in-more { 99my-notification {
103 $main-radius: 25px; 100 margin-left: auto;
104 101 margin-right: 15px;
105 flex: 1; 102}
106 margin-left: 13px;
107 border-radius: $main-radius;
108 transition: all .1s ease-in-out;
109 cursor: pointer;
110
111 *, & {
112 line-height: 1;
113 }
114
115 &.show {
116 background-color: rgba(255, 255, 255, 0.20);
117 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
118 }
119 103
104.logged-in-more {
120 @mixin display-hints($is-mobile: false) { 105 @mixin display-hints($is-mobile: false) {
121 background-color: rgba(255, 255, 255, 0.15); 106 background-color: rgba(255, 255, 255, 0.15);
122 107
@@ -130,6 +115,20 @@ menu {
130 } 115 }
131 } 116 }
132 117
118 $main-radius: 25px;
119
120 flex: 1;
121 margin-left: 13px;
122 border-radius: $main-radius;
123 transition: all .1s ease-in-out;
124 cursor: pointer;
125 line-height: 1;
126
127 &.show {
128 background-color: rgba(255, 255, 255, 0.20);
129 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
130 }
131
133 &:hover { 132 &:hover {
134 @include display-hints; 133 @include display-hints;
135 } 134 }
@@ -140,13 +139,14 @@ menu {
140 139
141 /* fill space when on mobile */ 140 /* fill space when on mobile */
142 max-width: calc(100% - 80px); 141 max-width: calc(100% - 80px);
142
143 .dropdown-toggle { 143 .dropdown-toggle {
144 max-width: 100%; 144 max-width: 100%;
145 } 145 }
146
146 .logged-in-info { 147 .logged-in-info {
147 max-width: calc(100% - 45px) !important; 148 max-width: calc(100% - 45px) !important;
148 } 149 }
149
150 } 150 }
151 151
152 .dropdown-toggle-indicator { 152 .dropdown-toggle-indicator {
@@ -175,35 +175,35 @@ menu {
175 padding: 5px 7px; 175 padding: 5px 7px;
176 border-radius: $main-radius; 176 border-radius: $main-radius;
177 } 177 }
178}
178 179
179 my-account-avatar { 180my-account-avatar {
180 margin-right: 10px; 181 margin-right: 10px;
181 }
182} 182}
183 183
184.logged-in-info { 184.logged-in-info {
185 max-width: 105px; 185 max-width: 105px;
186 186
187 flex-grow: 1; 187 flex-grow: 1;
188}
188 189
189 .logged-in-display-name, 190.logged-in-display-name,
190 .logged-in-username { 191.logged-in-username {
191 @include ellipsis; 192 @include ellipsis;
192 } 193}
193 194
194 .logged-in-display-name { 195.logged-in-display-name {
195 font-size: 16px; 196 font-size: 16px;
196 font-weight: $font-semibold; 197 font-weight: $font-semibold;
197 color: pvar(--menuForegroundColor); 198 color: pvar(--menuForegroundColor);
198 199
199 @include disable-default-a-behaviour; 200 @include disable-default-a-behaviour;
200 } 201}
201 202
202 .logged-in-username { 203.logged-in-username {
203 font-size: 13px; 204 font-size: 13px;
204 color: #C6C6C6; 205 color: #C6C6C6;
205 margin-top: 3px; 206 margin-top: 3px;
206 }
207} 207}
208 208
209.logged-in-menu { 209.logged-in-menu {
@@ -214,9 +214,6 @@ menu {
214 line-height: $line-height-normal; 214 line-height: $line-height-normal;
215 215
216 a { 216 a {
217 @include menu-link;
218 @include disable-default-a-behaviour;
219
220 $icon-size: 13px; 217 $icon-size: 13px;
221 $additional-margin: ($menu-link-icon-size - $icon-size) / 2; 218 $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
222 219
@@ -230,10 +227,6 @@ menu {
230 227
231 // Keep aligned with other icons 228 // Keep aligned with other icons
232 margin-left: $additional-margin; 229 margin-left: $additional-margin;
233
234 &[iconName="channel"] {
235 margin-top: -2px;
236 }
237 } 230 }
238 231
239 &.active, 232 &.active,
@@ -260,27 +253,22 @@ menu {
260.login-buttons-block { 253.login-buttons-block {
261 margin: 30px 25px 35px 25px; 254 margin: 30px 25px 35px 25px;
262 255
263 .login-button { 256 > a {
264 @include peertube-button-link;
265 @include orange-button;
266
267 display: block; 257 display: block;
268 width: 100%; 258 width: 100%;
269 margin-bottom: 10px;
270 }
271 259
272 .create-account-button { 260 :not(:last-child) {
273 @include peertube-button-link; 261 margin-bottom: 10px;
274 262 }
275 display: block; 263 }
276 width: 100%; 264}
277 265
278 color: #fff; 266.create-account-button {
279 background-color: rgba(255, 255, 255, 0.25); 267 color: #fff;
268 background-color: rgba(255, 255, 255, 0.25);
280 269
281 &:hover { 270 &:hover {
282 background-color: rgba(255, 255, 255, 0.28); 271 background-color: rgba(255, 255, 255, 0.28);
283 }
284 } 272 }
285} 273}
286 274
@@ -290,48 +278,30 @@ menu {
290 margin-bottom: 15px; 278 margin-bottom: 15px;
291 279
292 .block-title { 280 .block-title {
281 @include ellipsis;
282
293 text-transform: uppercase; 283 text-transform: uppercase;
294 font-weight: $font-bold; // Bold 284 font-weight: $font-bold; // Bold
295 font-size: 13px; 285 font-size: 13px;
296 margin-bottom: 25px; 286 margin-bottom: 25px;
297 margin-left: 26px; 287 margin-left: 26px;
298
299 @include ellipsis;
300
301 margin-right: 30px; 288 margin-right: 30px;
302 } 289 }
303 290
304 a { 291 a {
305 @include menu-link;
306 @include disable-default-a-behaviour;
307
308 min-height: 40px; 292 min-height: 40px;
309
310 my-global-icon {
311 &[iconName="playlists"] {
312 height: 24px;
313 width: 24px;
314
315 margin-right: 16px;
316 }
317
318 &[iconName="videos"] {
319 position: relative;
320 right: -1px;
321 }
322 }
323 } 293 }
324} 294}
325 295
326.footer { 296.footer {
327 width: $menu-width; 297 width: $menu-width;
328 padding-bottom: 15px; 298 padding-bottom: 15px;
299}
329 300
330 .bottom-links { 301.footer-bottom {
331 display: flex; 302 display: flex;
332 flex-direction: column; 303 flex-direction: column;
333 padding: 0 $menu-lateral-padding; 304 padding: 0 $menu-lateral-padding;
334 }
335} 305}
336 306
337.footer-links { 307.footer-links {
@@ -340,7 +310,8 @@ menu {
340 flex-wrap: wrap; 310 flex-wrap: wrap;
341 } 311 }
342 312
343 a, span[role=button] { 313 a,
314 span[role=button] {
344 display: inline-block; 315 display: inline-block;
345 text-decoration: none; 316 text-decoration: none;
346 color: pvar(--menuForegroundColor); 317 color: pvar(--menuForegroundColor);
@@ -350,22 +321,6 @@ menu {
350 font-weight: 500; 321 font-weight: 500;
351 line-height: 1.4rem; 322 line-height: 1.4rem;
352 margin-right: 8px; 323 margin-right: 8px;
353
354 &.inline-global-icon {
355 display: inline-flex;
356 align-items: center;
357 white-space: nowrap;
358 height: 1.4rem;
359
360 my-global-icon {
361 @include apply-svg-color(pvar(--menuForegroundColor));
362
363 display: flex;
364 width: auto;
365 height: 90%;
366 margin-right: .2rem;
367 }
368 }
369 } 324 }
370} 325}
371 326
@@ -395,32 +350,13 @@ menu {
395 opacity: .4; 350 opacity: .4;
396 } 351 }
397 352
398 my-global-icon {
399 &[iconName="cog"],
400 &[iconName="sign-out"] {
401 position: relative;
402 right: -2px;
403 height: 20px;
404 width: 20px;
405 }
406 }
407
408 my-global-icon.not-displayed {
409 display: none;
410 }
411
412 &:hover { 353 &:hover {
413 my-global-icon.hover-display-toggle.not-displayed { 354 .hover-display-toggle {
414 display: inherit;
415 }
416 my-global-icon.hover-display-toggle {
417 display: none; 355 display: none;
418 } 356 }
419 357
420 &.settings-sensitive { 358 .hover-display-toggle[hidden] {
421 my-global-icon ::ng-deep svg { 359 display: inherit !important;
422 margin-top: 2px !important;
423 }
424 } 360 }
425 } 361 }
426} 362}
@@ -440,7 +376,8 @@ menu {
440 } 376 }
441 } 377 }
442 378
443 .top-menu, .footer { 379 .top-menu,
380 .footer {
444 width: 100% !important; 381 width: 100% !important;
445 } 382 }
446 383
@@ -448,9 +385,35 @@ menu {
448 width: calc(100vw - 30px); 385 width: calc(100vw - 30px);
449 } 386 }
450 387
451 .dropdown-item:hover, .dropdown-item:active { 388 .dropdown-item:hover,
389 .dropdown-item:active {
452 &.settings-sensitive my-global-icon ::ng-deep svg { 390 &.settings-sensitive my-global-icon ::ng-deep svg {
453 margin-top: 0px !important; 391 margin-top: 0px !important;
454 } 392 }
455 } 393 }
456} 394}
395
396my-global-icon {
397 &[iconName="playlists"] {
398 height: 24px;
399 width: 24px;
400
401 margin-right: 16px;
402 }
403
404 &[iconName="videos"] {
405 position: relative;
406 right: -1px;
407 }
408
409 &[iconName="channel"] {
410 margin-top: -2px;
411 }
412
413 &[iconName="sign-out"] {
414 position: relative;
415 right: -2px;
416 height: 20px;
417 width: 20px;
418 }
419}