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;
}
}

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

@ -3,6 +3,7 @@
:class="{ 'is-loading': listService.loading}" :class="{ 'is-loading': listService.loading}"
class="loader-container" class="loader-container"
> >
<div class="switch-view-container">
<div class="switch-view"> <div class="switch-view">
<router-link <router-link
:class="{'is-active': $route.name === 'list.list'}" :class="{'is-active': $route.name === 'list.list'}"
@ -25,6 +26,7 @@
Kanban Kanban
</router-link> </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.
It is not possible to create new or edit tasks or it. It is not possible to create new or edit tasks or it.