local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fixed menu not being visible on mobile

Browse source
This commit is contained in:
kolaente 2019-05-19 18:19:22 +02:00
parent dd23804ea2
commit c0a8ec7bec
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
3 changed files with 28 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.vue
View file

@ -12,7 +12,7 @@
<div class="dropdown is-right is-active"> <div class="dropdown is-right is-active">
<div class="dropdown-trigger"> <div class="dropdown-trigger">
<button class="button noshadow" @click="userMenuActive = !userMenuActive"> <button class="button noshadow" @click="userMenuActive = !userMenuActive">
<span>{{user.infos.username}}</span> <span class="username">{{user.infos.username}}</span>
<span class="icon is-small"> <span class="icon is-small">
<icon icon="chevron-down"/> <icon icon="chevron-down"/>
</span> </span>

11
src/styles/general.scss
View file

@ -36,7 +36,7 @@
.namespace-container{ .namespace-container{
background: $vikunja-nav-background; background: $vikunja-nav-background;
z-index: 3; z-index: 6;
color: $vikunja-nav-color; color: $vikunja-nav-color;
padding: 0; padding: 0;
transition: all $transition; transition: all $transition;
@ -52,7 +52,6 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 70vw; width: 70vw;
z-index: 5;
&.is-active { &.is-active {
left: 0; left: 0;
@ -215,12 +214,12 @@
.mobilemenu-hide-button,.mobilemenu-show-button{ .mobilemenu-hide-button,.mobilemenu-show-button{
display: none; display: none;
position: fixed; position: fixed;
z-index: 5; z-index: 31;
font-weight: bold; font-weight: bold;
font-size: 2em; font-size: 2em;
color: $light; color: $dark;
&:hover, &:focus{ &:hover, &:focus{
color: $light; color: darken($dark, 20);
} }
} }
@ -239,7 +238,7 @@
left: 0; left: 0;
right: 0; right: 0;
background: rgba(250,250,250,0.8); background: rgba(250,250,250,0.8);
z-index: 4; z-index: 5;
opacity: 0; opacity: 0;
transition: all $transition; transition: all $transition;
} }

23
src/styles/theme.scss
View file

@ -240,7 +240,28 @@ h1,h2,h3,h4,h5,h6{
.navbar.main-theme { .navbar.main-theme {
background: $light-background; background: $light-background;
z-index: 30 !important; z-index: 5 !important;
@media screen and (max-width: $desktop) {
display: flex;
justify-content: space-between;
@media screen and (max-width: $tablet) {
.navbar-brand {
margin-left: 3em;
}
}
@media screen and (max-width: 640px) { // Magic number to hide the username if it would take too much space otherwise
.user {
width: 7em;
.username {
display: none;
}
}
}
}
} }
.switch-view { .switch-view {