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

Make filter buttons look better on mobile

Browse source
This commit is contained in:
kolaente 2021-01-18 22:14:10 +01:00
parent 0b23e91f8d
commit a9e58a8e21
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
4 changed files with 42 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/styles/components/gantt.scss
View file

@ -198,7 +198,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
} }
.filter-container { .filter-container {
margin-top: -133px; margin-top: -136px;
} }
} }

15
src/styles/components/list.scss
View file

@ -66,7 +66,7 @@
max-width: 180px; max-width: 180px;
position: absolute; position: absolute;
right: 1.5em; right: 1.5em;
margin-top: -56px; margin-top: -59px;
z-index: 4; z-index: 4;
.items { .items {
@ -85,7 +85,6 @@
.card { .card {
text-align: left; text-align: left;
margin-top: calc(1rem - 1px); margin-top: calc(1rem - 1px);
float: right;
} }
.fancycheckbox { .fancycheckbox {
@ -125,10 +124,14 @@
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
position: static; position: static;
margin: 1rem 0; margin: 0 0 1rem 0;
max-width: 100%; max-width: 100%;
min-width: auto; min-width: auto;
.items {
justify-content: center;
}
.search { .search {
width: 100%; width: 100%;
@ -141,16 +144,16 @@
.link-share-container .gantt-chart-container .filter-container, .link-share-container .gantt-chart-container .filter-container,
.gantt-chart-container .filter-container { .gantt-chart-container .filter-container {
margin-top: -133px; margin-top: -136px;
} }
.link-share-container .list-view .filter-container { .link-share-container .list-view .filter-container {
margin-top: -44px; margin-top: -47px;
} }
.link-share-container .filter-container { .link-share-container .filter-container {
right: 9rem; right: 9rem;
margin-top: -56px; margin-top: -59px;
} }
.list-namespace-title { .list-namespace-title {

9
src/styles/components/switch-view.scss
View file

@ -5,7 +5,7 @@
font-size: .8em; font-size: .8em;
box-shadow: 0.3em 0.3em 0.8em darken($light, 6); box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
height: $switch-view-height; height: $switch-view-height;
margin-bottom: 1em; margin-bottom: 1rem;
a { a {
padding: .5em; padding: .5em;
@ -38,3 +38,10 @@
} }
} }
} }
@media screen and (max-width: $tablet) {
.switch-view-container {
display: flex;
justify-content: center;
}
}

44
src/views/list/ShowList.vue
View file

@ -3,27 +3,29 @@
:class="{ 'is-loading': listService.loading}" :class="{ 'is-loading': listService.loading}"
class="loader-container" class="loader-container"
> >
<div class="switch-view"> <div class="switch-view-container">
<router-link <div class="switch-view">
:class="{'is-active': $route.name === 'list.list'}" <router-link
:to="{ name: 'list.list', params: { listId: listId } }"> :class="{'is-active': $route.name === 'list.list'}"
List :to="{ name: 'list.list', params: { listId: listId } }">
</router-link> List
<router-link </router-link>
:class="{'is-active': $route.name === 'list.gantt'}" <router-link
:to="{ name: 'list.gantt', params: { listId: listId } }"> :class="{'is-active': $route.name === 'list.gantt'}"
Gantt :to="{ name: 'list.gantt', params: { listId: listId } }">
</router-link> Gantt
<router-link </router-link>
:class="{'is-active': $route.name === 'list.table'}" <router-link
:to="{ name: 'list.table', params: { listId: listId } }"> :class="{'is-active': $route.name === 'list.table'}"
Table :to="{ name: 'list.table', params: { listId: listId } }">
</router-link> Table
<router-link </router-link>
:class="{'is-active': $route.name === 'list.kanban'}" <router-link
:to="{ name: 'list.kanban', params: { listId: listId } }"> :class="{'is-active': $route.name === 'list.kanban'}"
Kanban :to="{ name: 'list.kanban', params: { listId: listId } }">
</router-link> Kanban
</router-link>
</div>
</div> </div>
<div class="notification is-warning" v-if="list.isArchived"> <div class="notification is-warning" v-if="list.isArchived">
This list is archived. This list is archived.