aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/menu')
-rw-r--r--client/src/app/menu/menu.component.html11
-rw-r--r--client/src/app/menu/menu.component.scss38
-rw-r--r--client/src/app/menu/menu.component.ts1
-rw-r--r--client/src/app/menu/notification.component.scss2
4 files changed, 31 insertions, 21 deletions
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 16c79efc1..46dd807ec 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -3,7 +3,10 @@
3 <div class="top-menu"> 3 <div class="top-menu">
4 <div *ngIf="isLoggedIn" class="logged-in-block"> 4 <div *ngIf="isLoggedIn" class="logged-in-block">
5 <div> 5 <div>
6 <div class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left" [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"> 6 <div
7 class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
8 [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
9 >
7 <div ngbDropdownToggle> 10 <div ngbDropdownToggle>
8 <my-actor-avatar [account]="user.account" size="34"></my-actor-avatar> 11 <my-actor-avatar [account]="user.account" size="34"></my-actor-avatar>
9 <div class="logged-in-info"> 12 <div class="logged-in-info">
@@ -18,8 +21,10 @@
18 </div> 21 </div>
19 22
20 <div ngbDropdownMenu> 23 <div ngbDropdownMenu>
21 <a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/a', user.account.nameWithHost ]" 24 <a
22 #profile (click)="onActiveLinkScrollToAnchor(profile)"> 25 *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/a', user.account.nameWithHost ]"
26 #profile (click)="onActiveLinkScrollToAnchor(profile)"
27 >
23 <my-global-icon iconName="go" aria-hidden="true"></my-global-icon> <ng-container i18n>Public profile</ng-container> 28 <my-global-icon iconName="go" aria-hidden="true"></my-global-icon> <ng-container i18n>Public profile</ng-container>
24 </a> 29 </a>
25 30
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index daaed2d32..8e9c02b23 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -7,16 +7,17 @@ $footer-links-base-opacity: .8;
7 7
8.menu-link { 8.menu-link {
9 @include disable-default-a-behaviour; 9 @include disable-default-a-behaviour;
10 @include padding-left($menu-lateral-padding);
11 @include padding-right(20px);
10 12
11 display: flex; 13 display: flex;
12 align-items: center; 14 align-items: center;
13 padding-left: $menu-lateral-padding; 15
14 color: pvar(--menuForegroundColor); 16 color: pvar(--menuForegroundColor);
15 cursor: pointer; 17 cursor: pointer;
16 font-size: 16px; 18 font-size: 16px;
17 white-space: normal; 19 white-space: normal;
18 word-break: break-word; 20 word-break: break-word;
19 padding-right: 20px;
20 transition: background-color .1s ease-in-out; 21 transition: background-color .1s ease-in-out;
21 line-height: $line-height-normal; 22 line-height: $line-height-normal;
22 23
@@ -31,11 +32,11 @@ $footer-links-base-opacity: .8;
31 32
32 my-global-icon { 33 my-global-icon {
33 @include apply-svg-color(#808080); 34 @include apply-svg-color(#808080);
35 @include margin-right($menu-link-icon-margin-right);
34 36
35 display: flex; 37 display: flex;
36 width: $menu-link-icon-size; 38 width: $menu-link-icon-size;
37 height: $menu-link-icon-size; 39 height: $menu-link-icon-size;
38 margin-right: $menu-link-icon-margin-right;
39 } 40 }
40} 41}
41 42
@@ -99,8 +100,8 @@ menu {
99} 100}
100 101
101my-notification { 102my-notification {
102 margin-left: auto; 103 @include margin-left(auto);
103 margin-right: 15px; 104 @include margin-right(15px);
104} 105}
105 106
106.logged-in-more { 107.logged-in-more {
@@ -111,16 +112,18 @@ my-notification {
111 .dropdown-toggle-indicator { 112 .dropdown-toggle-indicator {
112 display: inherit !important; 113 display: inherit !important;
113 } 114 }
115
114 .dropdown-toggle:first-child { 116 .dropdown-toggle:first-child {
115 padding-right: 30px !important; 117 @include padding-left(30px !important);
116 } 118 }
117 } 119 }
118 } 120 }
119 121
120 $main-radius: 25px; 122 $main-radius: 25px;
121 123
124 @include margin-left(13px);
125
122 flex: 1; 126 flex: 1;
123 margin-left: 13px;
124 border-radius: $main-radius; 127 border-radius: $main-radius;
125 transition: all .1s ease-in-out; 128 transition: all .1s ease-in-out;
126 cursor: pointer; 129 cursor: pointer;
@@ -180,7 +183,7 @@ my-notification {
180} 183}
181 184
182my-actor-avatar { 185my-actor-avatar {
183 margin-right: 10px; 186 @include margin-right(10px);
184} 187}
185 188
186.logged-in-info { 189.logged-in-info {
@@ -224,11 +227,11 @@ my-actor-avatar {
224 min-height: 35px; 227 min-height: 35px;
225 228
226 my-global-icon { 229 my-global-icon {
230 // Keep aligned with other icons
231 @include margin-left($additional-margin);
232
227 width: $icon-size; 233 width: $icon-size;
228 height: $icon-size; 234 height: $icon-size;
229
230 // Keep aligned with other icons
231 margin-left: $additional-margin;
232 } 235 }
233 236
234 &.active, 237 &.active,
@@ -246,7 +249,7 @@ my-actor-avatar {
246 border-left: $border-left-width solid var(--mainColor); 249 border-left: $border-left-width solid var(--mainColor);
247 250
248 my-global-icon { 251 my-global-icon {
249 margin-left: $additional-margin - $border-left-width; 252 @include margin-left($additional-margin - $border-left-width);
250 } 253 }
251 } 254 }
252 } 255 }
@@ -280,13 +283,13 @@ my-actor-avatar {
280 283
281 .block-title { 284 .block-title {
282 @include ellipsis; 285 @include ellipsis;
286 @include margin-left(26px);
287 @include margin-right(30px);
283 288
284 text-transform: uppercase; 289 text-transform: uppercase;
285 font-weight: $font-bold; // Bold 290 font-weight: $font-bold; // Bold
286 font-size: 13px; 291 font-size: 13px;
287 margin-bottom: 25px; 292 margin-bottom: 25px;
288 margin-left: 26px;
289 margin-right: 30px;
290 } 293 }
291 294
292 a { 295 a {
@@ -314,6 +317,8 @@ my-actor-avatar {
314 317
315 a, 318 a,
316 span[role=button] { 319 span[role=button] {
320 @include margin-right(8px);
321
317 display: inline-block; 322 display: inline-block;
318 text-decoration: none; 323 text-decoration: none;
319 color: pvar(--menuForegroundColor); 324 color: pvar(--menuForegroundColor);
@@ -322,7 +327,6 @@ my-actor-avatar {
322 font-size: 90%; 327 font-size: 90%;
323 font-weight: 500; 328 font-weight: 500;
324 line-height: 1.4rem; 329 line-height: 1.4rem;
325 margin-right: 8px;
326 } 330 }
327} 331}
328 332
@@ -397,10 +401,10 @@ my-actor-avatar {
397 401
398my-global-icon { 402my-global-icon {
399 &[iconName=playlists] { 403 &[iconName=playlists] {
404 @include margin-right(16px);
405
400 height: 24px; 406 height: 24px;
401 width: 24px; 407 width: 24px;
402
403 margin-right: 16px;
404 } 408 }
405 409
406 &[iconName=videos] { 410 &[iconName=videos] {
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index fa104cc43..be6e8af51 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -94,6 +94,7 @@ export class MenuComponent implements OnInit {
94 this.htmlServerConfig = this.serverService.getHTMLConfig() 94 this.htmlServerConfig = this.serverService.getHTMLConfig()
95 this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage() 95 this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage()
96 96
97 this.isLoggedIn = this.authService.isLoggedIn()
97 this.updateUserState() 98 this.updateUserState()
98 this.buildMenuSections() 99 this.buildMenuSections()
99 100
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index 554c20ca9..23d7181d0 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -141,7 +141,7 @@
141 position: relative; 141 position: relative;
142 142
143 .unread-notifications { 143 .unread-notifications {
144 margin-left: 20px; 144 @include margin-left(20px);
145 } 145 }
146 146
147 .unread-notifications { 147 .unread-notifications {