refactor: improve mobile layout for plan changer
- Stack title and controls vertically on mobile - Separate admin actions into own row below - No more absolute positioning or fragile layout - Show date labels on prev/next buttons only on desktop - Cleaner responsive breakpoint at 800px
This commit is contained in:
@@ -133,31 +133,33 @@ function dateToValueString(time) {
|
||||
|
||||
<template>
|
||||
<div class="bar">
|
||||
<div class="controls">
|
||||
<button class="flat left" v-if="prev != null && prev <= groups.length - 1" @click="back">
|
||||
<div class="top-row">
|
||||
<button class="flat arrow" v-if="prev != null && prev <= groups.length - 1" @click="back">
|
||||
<i>arrow_left_alt</i>
|
||||
<span class="hide-mobile">{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}</span>
|
||||
<span class="date-label">{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}</span>
|
||||
</button>
|
||||
<div class="width: 100%"/>
|
||||
<button class="flat right" v-if="next != null && next > 0" @click="forward">
|
||||
<span class="hide-mobile">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
|
||||
|
||||
<div class="title">
|
||||
<template v-if="groups.length > 0">
|
||||
<span class="prefix">Miniplan vom</span>
|
||||
{{ formatDate(get(cur).from) }} – {{ formatDate(get(cur).to) }}
|
||||
</template>
|
||||
<span v-else>Keine Gottesdienstgruppen vorhanden</span>
|
||||
</div>
|
||||
|
||||
<button class="flat arrow" v-if="next != null && next > 0" @click="forward">
|
||||
<span class="date-label">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
|
||||
<i>arrow_right_alt</i>
|
||||
</button>
|
||||
<button class="flat right" v-if="(next == null || next <= 0) && admin" style="margin-right: 20px"
|
||||
@click="$emit('new')">
|
||||
<i>add</i> Neuer plan
|
||||
</button>
|
||||
|
||||
<div class="spacer" v-if="next == null || next <= 0"></div>
|
||||
</div>
|
||||
|
||||
<div class="admin-row" v-if="admin && groups.length > 0">
|
||||
<button class="flat" @click="$emit('new')"><i>add</i> Neuer Plan</button>
|
||||
<button class="flat icon" @click="$emit('delete', get(cur).id)"><i>delete</i></button>
|
||||
<button class="flat icon" @click="$emit('edit', get(cur).id)"><i>edit</i></button>
|
||||
</div>
|
||||
<template v-if="groups.length > 0">
|
||||
<span style="z-index: 1"><span class="hide-mobile">Miniplan vom </span> {{ formatDate(get(cur).from) }} bis {{ formatDate(get(cur).to) }}</span>
|
||||
<span v-if="admin" style="display: flex; align-items: center; z-index: 1">
|
||||
<button class="icon flat" @click="$emit('delete', get(cur).id)"><i>delete</i></button>
|
||||
<button class="icon flat" @click="$emit('edit', get(cur).id)"><i>edit</i></button>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else>
|
||||
Keine Gottesdienstgruppen vorhanden
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -165,56 +167,127 @@ function dateToValueString(time) {
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
width: calc(100% - 30px);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid #d7d5d5;
|
||||
z-index: 10;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
padding: 8px 12px;
|
||||
gap: 6px;
|
||||
|
||||
.controls {
|
||||
.top-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 10px);
|
||||
padding: 5px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.left, .right{
|
||||
.arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
padding: 6px 8px 6px 6px;
|
||||
|
||||
i {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
width: 42px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.left {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.right {
|
||||
i {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
|
||||
button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin: 0 10px
|
||||
}
|
||||
|
||||
@media(max-width: 800px) {
|
||||
.hide-mobile {
|
||||
.prefix {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
padding-top: 4px;
|
||||
border-top: 1px solid #eee;
|
||||
|
||||
button {
|
||||
font-size: 13px;
|
||||
padding: 4px 10px 4px 6px;
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
padding: 4px 8px;
|
||||
|
||||
i {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 800px) {
|
||||
flex-direction: row;
|
||||
padding: 10px 16px;
|
||||
gap: 0;
|
||||
|
||||
.top-row {
|
||||
flex: 1;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
padding: 6px 14px 6px 10px;
|
||||
|
||||
.date-label {
|
||||
display: inline;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
white-space: normal;
|
||||
|
||||
.prefix {
|
||||
display: inline;
|
||||
font-weight: 400;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-row {
|
||||
width: auto;
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user