feat: more horizontal space on mobile #2722
|
@ -159,27 +159,20 @@ labelStore.loadAllLabels()
|
||||||
.app-content {
|
.app-content {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 1rem;
|
padding: 1.5rem 0.5rem 1rem;
|
||||||
|
|
||||||
@media screen {
|
|
||||||
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $tablet) {
|
@media screen and (max-width: $tablet) {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
padding-top: 1.5rem;
|
|
||||||
min-height: calc(100vh - 4rem);
|
min-height: calc(100vh - 4rem);
|
||||||
konrad marked this conversation as resolved
Outdated
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $tablet) {
|
||||||
|
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen {
|
&.is-menu-enabled {
|
||||||
&.is-menu-enabled {
|
@media screen and (min-width: $tablet) {
|
||||||
margin-left: $navbar-width;
|
margin-left: $navbar-width;
|
||||||
|
|
||||||
@media screen and (max-width: $tablet) {
|
|
||||||
min-width: 100%;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -26,7 +26,10 @@
|
||||||
|
|
||||||
.task-view {
|
.task-view {
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
margin: 0 1rem;
|
|
||||||
|
@media screen and (min-width: $tablet) {
|
||||||
|
margin-inline: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.kanban .tasks {
|
.kanban .tasks {
|
||||||
|
|
|
@ -810,8 +810,8 @@ async function setPercentDone(percentDone: number) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-view {
|
.task-view {
|
||||||
padding: 1rem;
|
padding-top: 1rem;
|
||||||
padding-bottom: 0;
|
padding-inline: .5rem;
|
||||||
background-color: var(--site-background);
|
background-color: var(--site-background);
|
||||||
|
|
||||||
@media screen and (min-width: $desktop) {
|
@media screen and (min-width: $desktop) {
|
||||||
|
@ -862,10 +862,10 @@ h3 .button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.remove {
|
.remove {
|
||||||
color: var(--danger);
|
color: var(--danger);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding-left: .5rem;
|
padding-left: .5rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.datepicker) {
|
:deep(.datepicker) {
|
||||||
|
|
Reference in New Issue
dvh
are a nice solution here but the browser support is really poor. We should at least add a fallback, maybe even not using them.We should, because support should soon be better. And this makes really sense for iPhone. But you're right! I thought that postcss-preset-env adds
vh
as fallback automatically, but probably they decided against it becausedvh
is not 100% the same asvh
, but instead, what you would actually expectvh
to be. :DAfter further thinking I removed
dvh
now. Not because it's wrong, but because it's not used anywhere else. And since some height calculations depend on each other it might break something else if I use it only here.I might add
dvh
as mobile optimization at some point. But then everywhere where it's needed at the same time.