Make filter buttons look better on mobile
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
0b23e91f8d
commit
a9e58a8e21
@ -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.
|
||||
|
Reference in New Issue
Block a user