PlutoDev/Doppelkopf-Stats-Frontend
3
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix dropdown menu location (mobile menu).

Browse Source
This commit is contained in:
Julian Brunner 2022-09-09 03:28:23 +02:00
parent b300fe1b7b
commit 9c3547f712
2 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/app/components/header/header.component.scss
View File

@ -50,6 +50,7 @@
} }
#menu-mobile { #menu-mobile {
display: inherit; display: inherit;
width: 10em;
} }
} }
@ -59,11 +60,13 @@
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;
align-items: center; align-items: center;
} }
#menu div div { #menu div#menu-desktop div {
padding-left: 2em; padding-left: 2em;
padding-right: 2em; padding-right: 2em;
text-align: center;
} }
#menu-desktop div:hover { #menu-desktop div:hover {
@ -75,13 +78,23 @@
#menu-mobile-dropdown-content { #menu-mobile-dropdown-content {
display: none; display: none;
z-index: 1; z-index: 2;
position: absolute; position: absolute;
min-width: 160px; top: $header_height + 0.3em;
padding-left: 2em;
} }
#menu-mobile-dropdown-content div { #menu-mobile-dropdown-content div {
padding: 12px 16px; color: #F2F1E8;
border: solid 1px;
text-align: center;
padding: 0.3em;
} }
#menu-mobile-dropdown-button{
padding: 10px;
width: 100%;
text-align: center;
}

1
src/app/components/header/header.component.ts
View File

@ -40,7 +40,6 @@ export class HeaderComponent implements OnInit {
toggleMobileDropdown(): void { toggleMobileDropdown(): void {
const dropdownContentStyle = document.getElementById('menu-mobile-dropdown-content')!.style; const dropdownContentStyle = document.getElementById('menu-mobile-dropdown-content')!.style;
if (dropdownContentStyle.display == 'block') { if (dropdownContentStyle.display == 'block') {
//FIXME: Currently doesn't work because content overlaps button
dropdownContentStyle.display = 'none'; dropdownContentStyle.display = 'none';
} else { } else {
dropdownContentStyle.display = 'block'; dropdownContentStyle.display = 'block';