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

fix: navigation show and hide animation (#927)

Browse source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/927
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
This commit is contained in:
dpschen 2021-11-02 18:20:14 +00:00 committed by konrad
parent 108e7af578
commit d3c303ba2a
1 changed files with 10 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/home/navigation.vue
View file

@ -74,9 +74,9 @@
<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/> <namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
</div> </div>
<div <div
v-if="listsVisible[n.id] ?? true"
:key="n.id + 'child'" :key="n.id + 'child'"
class="more-container" class="more-container"
v-if="typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true"
> >
<!-- <!--
NOTE: a v-model / computed setter is not possible, since the updateActiveLists function NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
@ -134,8 +134,7 @@
:class="{'is-favorite': l.isFavorite}" :class="{'is-favorite': l.isFavorite}"
@click.prevent.stop="toggleFavoriteList(l)" @click.prevent.stop="toggleFavoriteList(l)"
class="favorite"> class="favorite">
<icon icon="star" v-if="l.isFavorite"/> <icon :icon="l.isFavorite ? 'star' : ['far', 'star']" />
<icon :icon="['far', 'star']" v-else/>
</span> </span>
</a> </a>
</router-link> </router-link>
@ -283,22 +282,20 @@ $vikunja-nav-background: $light-background;
$vikunja-nav-color: $grey-700; $vikunja-nav-color: $grey-700;
$vikunja-nav-selected-width: 0.4rem; $vikunja-nav-selected-width: 0.4rem;
.namespace-container { .namespace-container {
background: $vikunja-nav-background;
z-index: 6; z-index: 6;
background: $vikunja-nav-background;
color: $vikunja-nav-color; color: $vikunja-nav-color;
padding: 0; padding: 0 0 1rem;
transition: all $transition; transition: transform $transition-duration ease-in;
position: fixed; position: fixed;
bottom: 0;
top: $navbar-height; top: $navbar-height;
bottom: 0;
left: 0;
transform: translateX(-100%);
overflow-x: auto; overflow-x: auto;
width: $navbar-width; width: $navbar-width;
padding: 0 0 1rem;
left: -147vw;
bottom: 0;
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
top: 0; top: 0;
@ -306,7 +303,8 @@ $vikunja-nav-selected-width: 0.4rem;
} }
&.is-active { &.is-active {
left: 0; transform: translateX(0);
transition: transform $transition-duration ease-out;
} }
.menu { .menu {