FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix styling app and user menu on mobile device
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma 2021-01-27 10:33:01 +01:00
parent a7402438a0
commit 669c724e3a
3 changed files with 56 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
projects/common/src/fm/components/app-menu/app-menu.component.scss
View File

@ -14,16 +14,22 @@ div.menu-button > span {
} }
.menu { .menu {
max-height: 100vh; max-height: calc( 100vh - 4rem);
//transition: max-height 0.2s; //transition: max-height 0.2s;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,.3); box-shadow: 0 0 20px rgba(0,0,0,.3);
position: absolute; position: fixed;
top: 3rem; top: 3.4rem;
right:0; right:0.5rem;
left:0.5rem;
background-color: #fff; background-color: #fff;
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 0.5rem; padding: 0.5rem;
z-index: 3;
}
:host-context(.fullscreen) .menu {
top:4em;
} }
.card { .card {
@ -46,3 +52,18 @@ div.menu-button > span {
.menu-button.hidden { .menu-button.hidden {
overflow: hidden; overflow: hidden;
} }
@media screen and (min-width: 44rem) {
.menu {
position: absolute;
top: 3rem;
right:0;
left: unset;
max-width: 30em;
}
:host-context(.fullscreen) .menu {
top: 3rem;
}
}

27
projects/common/src/fm/components/user-menu/user-menu.component.scss
View File

@ -18,14 +18,21 @@ div.menu-button > span {
//transition: max-height 0.2s; //transition: max-height 0.2s;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,.3); box-shadow: 0 0 20px rgba(0,0,0,.3);
position: absolute; position: fixed;
top: 3rem; top: 3.4rem;
right:0; right:0.5rem;
left:0.5rem;
background-color: #fff; background-color: #fff;
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 0.5rem; padding: 0.5rem;
z-index: 3;
} }
:host-context(.fullscreen) .menu {
top:4em;
}
.card { .card {
padding:0.5rem; padding:0.5rem;
min-width: 10rem; min-width: 10rem;
@ -53,3 +60,17 @@ div.menu-button > span {
.menu-button.hidden { .menu-button.hidden {
overflow: hidden; overflow: hidden;
} }
@media screen and (min-width: 44rem) {
.menu {
position: absolute;
top: 3rem;
right:0;
left: unset;
max-width: 30em;
}
:host-context(.fullscreen) .menu {
top: 3rem;
}
}

5
src/app/app-routing.module.ts
View File

@ -28,6 +28,11 @@ const routes = [
component: LogoComponent, component: LogoComponent,
outlet: 'header-logo' outlet: 'header-logo'
}, },
{
path: '',
component: TestComponent,
outlet: 'app-menu'
},
{ {
path: '', path: '',
component: LogoComponent, component: LogoComponent,