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

fix: namespace new buttons on mobile

Browse source
This commit is contained in:
kolaente 2021-12-29 21:27:24 +01:00 committed by Dominik Pschenitschni
parent 9d3ef30be6
commit 964fdeb2e8
No known key found for this signature in database
GPG key ID: B257AC0149F43A77
4 changed files with 66 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -555,4 +555,8 @@ $vikunja-nav-selected-width: 0.4rem;
width: 32px; width: 32px;
flex-shrink: 0; flex-shrink: 0;
} }
.namespaces-list.loader-container.is-loading {
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
}
</style> </style>

1
src/styles/components/_index.scss
View file

@ -3,4 +3,3 @@
@import "list"; @import "list";
@import "task"; @import "task";
@import "tasks"; @import "tasks";
@import "namespaces";

4
src/styles/components/namespaces.scss
View file

@ -1,4 +0,0 @@
// FIXME: used in navigation.vue and in ListNamespaces.vue
.namespaces-list.loader-container.is-loading {
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
}

107
src/views/namespaces/ListNamespaces.vue
View file

@ -1,15 +1,19 @@
<template> <template>
<div class="content namespaces-list loader-container" :class="{'is-loading': loading}"> <div class="content loader-container" :class="{'is-loading': loading}">
<x-button :to="{name: 'namespace.create'}" class="new-namespace" icon="plus"> <div class="create-buttons">
{{ $t('namespace.create.title') }} <fancycheckbox v-model="showArchived" @change="saveShowArchivedState">
</x-button> {{ $t('namespace.showArchived') }}
<x-button :to="{name: 'filters.create'}" class="new-namespace" icon="filter"> </fancycheckbox>
{{ $t('filters.create.title') }}
</x-button>
<fancycheckbox class="show-archived-check" v-model="showArchived" @change="saveShowArchivedState"> <div>
{{ $t('namespace.showArchived') }} <x-button :to="{name: 'filters.create'}" class="new-namespace" icon="filter">
</fancycheckbox> {{ $t('filters.create.title') }}
</x-button>
<x-button :to="{name: 'namespace.create'}" class="new-namespace" icon="plus">
{{ $t('namespace.create.title') }}
</x-button>
</div>
</div>
<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="namespaces.length === 0"> <p class="has-text-centered has-text-grey mt-4 is-italic" v-if="namespaces.length === 0">
{{ $t('namespace.noneAvailable') }} {{ $t('namespace.noneAvailable') }}
@ -103,47 +107,58 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.namespaces-list { .namespace {
.button.new-namespace { &:not(:last-child) {
float: right; margin-bottom: 1rem;
margin-left: 1rem; }
@media screen and (max-width: $mobile) { h1 {
float: none; display: flex;
width: 100%; align-items: center;
margin-bottom: 1rem; }
}
}
.show-archived-check { .is-archived {
margin-bottom: 1rem; font-size: 0.75rem;
} border: 1px solid var(--grey-500);
color: $grey !important;
padding: 2px 4px;
border-radius: 3px;
font-family: $vikunja-font;
background: var(--white-translucent);
margin-left: .5rem;
}
.namespace { .lists {
&:not(:last-child) { display: flex;
margin-bottom: 1rem; flex-flow: row wrap;
} }
}
h1 { .create-buttons {
display: flex; display: flex;
align-items: center; justify-content: space-between;
} align-items: center;
margin-bottom: .5rem;
.is-archived { @media screen and (max-width: $tablet) {
font-size: 0.75rem; width: 100%;
border: 1px solid var(--grey-500); flex-direction: column;
color: $grey !important; }
padding: 2px 4px;
border-radius: 3px;
font-family: $vikunja-font;
background: var(--white-translucent);
margin-left: .5rem;
}
.lists { > * {
display: flex; @media screen and (max-width: $tablet) {
flex-flow: row wrap; margin-bottom: .5rem;
} }
} }
.new-namespace {
margin-left: 1rem;
@media screen and (max-width: $tablet) {
width: 100%;
margin-left: 0;
margin-bottom: .5rem;
}
}
} }
</style> </style>