aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2023-05-22 08:10:52 +0200
committerChocobozzz <me@florianbigard.com>2023-05-22 08:22:57 +0200
commit8527f4b163c41d13820ff0ccf6427643547ab745 (patch)
treebb204a556a4405506b247b36ae119bc640a5874c /client/src/app/menu
parent9ba1faa2eec339d4b9c8acff2631bcb6d24043bc (diff)
downloadPeerTube-8527f4b163c41d13820ff0ccf6427643547ab745.tar.gz
PeerTube-8527f4b163c41d13820ff0ccf6427643547ab745.tar.zst
PeerTube-8527f4b163c41d13820ff0ccf6427643547ab745.zip
Fix menu dropdowns
Better responsive Avoid menu scrollbar displayed in notification popove
Diffstat (limited to 'client/src/app/menu')
-rw-r--r--client/src/app/menu/menu.component.html2
-rw-r--r--client/src/app/menu/menu.component.scss7
-rw-r--r--client/src/app/menu/menu.component.ts6
-rw-r--r--client/src/app/menu/notification.component.html2
4 files changed, 6 insertions, 11 deletions
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 0786b953b..8b90fb78b 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -5,7 +5,7 @@
5 <div> 5 <div>
6 <div 6 <div
7 class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto" 7 class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
8 [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside" 8 container="body" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
9 > 9 >
10 <button class="border-0 text-start" ngbDropdownToggle> 10 <button class="border-0 text-start" ngbDropdownToggle>
11 <my-actor-avatar [actor]="user.account" actorType="account" size="34"></my-actor-avatar> 11 <my-actor-avatar [actor]="user.account" actorType="account" size="34"></my-actor-avatar>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 4b1ed65ce..d88025c33 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -114,7 +114,7 @@ my-notification {
114 display: inherit !important; 114 display: inherit !important;
115 } 115 }
116 116
117 > .dropdown-toggle { 117 &.dropdown-toggle {
118 max-width: 88% !important; 118 max-width: 88% !important;
119 } 119 }
120 } 120 }
@@ -144,7 +144,7 @@ my-notification {
144 /* fill space when on mobile */ 144 /* fill space when on mobile */
145 max-width: calc(100% - 80px); 145 max-width: calc(100% - 80px);
146 146
147 .dropdown-toggle { 147 &.dropdown-toggle {
148 max-width: 100%; 148 max-width: 100%;
149 } 149 }
150 150
@@ -171,7 +171,8 @@ my-notification {
171 > .dropdown-toggle:first-child { 171 > .dropdown-toggle:first-child {
172 display: flex; 172 display: flex;
173 align-items: center; 173 align-items: center;
174 padding: 5px 7px; 174 width: 100%;
175 padding: 5px 25px 5px 7px;
175 } 176 }
176} 177}
177 178
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 896c824b8..410abe6fa 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -86,12 +86,6 @@ export class MenuComponent implements OnInit, OnDestroy {
86 return this.screenService.isInMobileView() 86 return this.screenService.isInMobileView()
87 } 87 }
88 88
89 get dropdownContainer () {
90 if (this.isInMobileView) return null
91
92 return 'body' as 'body'
93 }
94
95 get language () { 89 get language () {
96 return this.languageChooserModal.getCurrentLanguage() 90 return this.languageChooserModal.getCurrentLanguage()
97 } 91 }
diff --git a/client/src/app/menu/notification.component.html b/client/src/app/menu/notification.component.html
index 907828efb..921d7643f 100644
--- a/client/src/app/menu/notification.component.html
+++ b/client/src/app/menu/notification.component.html
@@ -4,7 +4,7 @@
4</ng-template> 4</ng-template>
5 5
6<button 6<button
7 [ngbPopover]="popContent" autoClose="outside" placement="bottom" container={this} popoverClass="popover-notifications" 7 [ngbPopover]="popContent" autoClose="outside" placement="bottom" container="body" popoverClass="popover-notifications"
8 i18n-title title="View your notifications" 8 i18n-title title="View your notifications"
9 class="border-0 text-start" [ngClass]="{ 'notification-inbox-popover': true, 'shown': opened, 'hidden': isInMobileView }" 9 class="border-0 text-start" [ngClass]="{ 'notification-inbox-popover': true, 'shown': opened, 'hidden': isInMobileView }"
10 #popover="ngbPopover" (shown)="onPopoverShown()" (hidden)="onPopoverHidden()" 10 #popover="ngbPopover" (shown)="onPopoverShown()" (hidden)="onPopoverHidden()"