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

Fix Gantt layout overflowsing on mobile

Browse source
This commit is contained in:
kolaente 2021-07-26 11:25:55 +02:00
parent fd5d331eca
commit 34849d80b7
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 200 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -203,26 +203,45 @@ $gantt-vertical-border-color: $grey-100;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@media screen and (max-width: $tablet) {
flex-direction: column;
}
.range-picker { .range-picker {
display: flex; display: flex;
margin-bottom: 1rem; margin-bottom: 1rem;
width: 50%;
@media screen and (max-width: $tablet) {
flex-direction: column;
width: 100%;
}
.field { .field {
margin: 0 0 0 .5rem; margin-bottom: 0;
max-width: 100px; width: 33%;
&:not(:last-child) {
padding-right: .5rem;
}
@media screen and (max-width: $tablet) {
width: 100%;
max-width: 100%;
margin-top: .5rem;
padding-right: 0 !important;
}
&, .input { &, .input {
font-size: .8rem; font-size: .8rem;
} }
.select { .select, .select select {
height: auto; height: auto;
width: 100%;
font-size: .8rem;
} }
select {
height: auto;
font-size: 0.75rem;
}
.label { .label {
font-size: .9rem; font-size: .9rem;