vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: more horizontal space on mobile #2722

Merged
konrad merged 1 commits from dpschen/frontend:feature/more-horizontal-space-on-mobile into main 2022-11-17 16:17:20 +00:00
Conversation 1 Commits 1 Files Changed 3 +16 -20
3 changed files with 16 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/home/contentAuth.vue
View File

@ -159,27 +159,20 @@ labelStore.loadAllLabels()
.app-content {
z-index: 10;
position: relative;
padding-top: 1rem;
@media screen {
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
}
padding: 1.5rem 0.5rem 1rem;
@media screen and (max-width: $tablet) {
margin-left: 0;
padding-top: 1.5rem;
min-height: calc(100vh - 4rem);
konrad marked this conversation as resolved Outdated
konrad commented 2022-11-17 15:38:26 +00:00
Outdated
Review
Copy Link

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.

`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.
dpschen commented 2022-11-17 16:01:31 +00:00
Outdated
Review
Copy Link

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 because dvh is not 100% the same as vh, but instead, what you would actually expect vh to be. :D

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 because `dvh` is not 100% the same as `vh`, but instead, what you would actually expect `vh` to be. :D
dpschen commented 2022-11-17 16:09:09 +00:00
Outdated
Review
Copy Link

After 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.

After 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.
👍 1
}
@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;
@media screen and (max-width: $tablet) {
min-width: 100%;
margin-left: 0;
}
}
}

5
src/styles/theme/background.scss
View File

@ -26,7 +26,10 @@
.task-view {
border-radius: $radius;
margin: 0 1rem;
@media screen and (min-width: $tablet) {
margin-inline: 1rem;
}
}
.kanban .tasks {

12
src/views/tasks/TaskDetailView.vue
View File

@ -810,8 +810,8 @@ async function setPercentDone(percentDone: number) {
}
.task-view {
padding: 1rem;
padding-bottom: 0;
padding-top: 1rem;
padding-inline: .5rem;
background-color: var(--site-background);
@media screen and (min-width: $desktop) {
@ -862,10 +862,10 @@ h3 .button {
}
.remove {
color: var(--danger);
vertical-align: middle;
padding-left: .5rem;
line-height: 1;
color: var(--danger);
vertical-align: middle;
padding-left: .5rem;
line-height: 1;
}
:deep(.datepicker) {