Make filter buttons look better on mobile
This commit is contained in:
parent
0b23e91f8d
commit
a9e58a8e21
4 changed files with 42 additions and 30 deletions
|
@ -198,7 +198,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-container {
|
.filter-container {
|
||||||
margin-top: -133px;
|
margin-top: -136px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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.
|
||||||
|
|
Loading…
Reference in a new issue