Make filter buttons look better on mobile
Some checks failed
continuous-integration/drone/push Build is failing

This commit is contained in:
kolaente 2021-01-18 22:14:10 +01:00
parent 0b23e91f8d
commit a9e58a8e21
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
4 changed files with 42 additions and 30 deletions

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

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

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

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