Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 17 Pull requests Projects Releases 12 Packages Wiki Activity Actions

change: calendar responsive vies

Browse source
This commit is contained in:
Julian Krauser 2025-02-12 18:01:51 +01:00
parent a7b8d95fa1
commit c774c62b40
5 changed files with 31 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/Modal.vue
View file

@ -6,7 +6,12 @@
@contextmenu.prevent
>
<!-- @click="closeModal" -->
<component :is="component_ref" :data="data" @click.stop class="p-4 bg-white rounded-lg" />
<component
:is="component_ref"
:data="data"
@click.stop
class="p-4 bg-white rounded-lg max-h-[95%] overflow-y-auto"
/>
</div>
</template>

4
src/components/admin/club/calendar/CreateCalendarModal.vue
View file

@ -76,7 +76,7 @@
/>
<label for="allDay">ganztägig</label>
</div>
<div v-if="!allDay" class="flex flex-row gap-2">
<div v-if="!allDay" class="flex flex-col sm:flex-row gap-2">
<div class="w-full">
<label for="starttime">Startzeit</label>
<input
@ -105,7 +105,7 @@
/>
</div>
</div>
<div v-else class="flex flex-row gap-2">
<div v-else class="flex flex-col sm:flex-row gap-2">
<div class="w-full">
<label for="startdate">Startdatum</label>
<input

4
src/components/admin/club/calendar/UpdateCalendarModal.vue
View file

@ -78,7 +78,7 @@
<input type="checkbox" id="allDay" v-model="calendar.allDay" />
<label for="allDay">ganztägig</label>
</div>
<div v-if="!calendar.allDay" class="flex flex-row gap-2">
<div v-if="!calendar.allDay" class="flex flex-col sm:flex-row gap-2">
<div class="w-full">
<label for="starttime">Startzeit</label>
<input
@ -113,7 +113,7 @@
/>
</div>
</div>
<div v-else class="flex flex-row gap-2">
<div v-else class="flex flex-col sm:flex-row gap-2">
<div class="w-full">
<label for="startdate">Startdatum</label>
<input

4
src/components/public/calendar/ShowCalendarEntryModal.vue
View file

@ -18,7 +18,7 @@
<textarea id="content" class="h-18" readonly :value="data.content"></textarea>
</div>
<div v-if="data.allDay" class="flex flex-row gap-2 items-center">Der Termin findet ganztägig statt.</div>
<div v-if="data.allDay == false" class="flex flex-row gap-2">
<div v-if="data.allDay == false" class="flex flex-col sm:flex-row gap-2">
<div class="w-full">
<label for="starttime">Startzeit</label>
<input type="datetime-local" id="starttime" readonly :value="formatForDateTimeLocalInput(data.starttime)" />
@ -34,7 +34,7 @@
/>
</div>
</div>
<div v-else class="flex flex-row gap-2">
<div v-else class="flex flex-col sm:flex-row gap-2">
<div class="w-full">
<label for="startdate">Startdatum</label>
<input type="date" id="startdate" readonly :value="formatForDateInput(data.starttime)" />

21
src/main.css
View file

@ -87,7 +87,8 @@ select {
input[readonly],
textarea[readonly],
select[readonly] {
@apply pointer-events-none;
@apply select-none;
/* pointer-events-none; */
}
input[disabled],
@ -124,7 +125,7 @@ summary::-webkit-details-marker {
}
.fc-button-primary {
@apply !bg-primary !border-primary !outline-none !ring-0 hover:!bg-red-700 hover:!border-red-700;
@apply !bg-primary !border-primary !outline-none !ring-0 hover:!bg-red-700 hover:!border-red-700 h-10 text-center;
}
.fc-button-active {
@apply !bg-red-500 !border-red-500;
@ -132,3 +133,19 @@ summary::-webkit-details-marker {
.fc-toolbar {
@apply flex-wrap;
}
/* For screens between 850px and 768px */
@media (max-width: 850px) and (min-width: 768px) {
.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
@apply !order-1;
}
/* Your styles for this range */
}
/* For screens between 525px and 0px */
@media (max-width: 525px) and (min-width: 0px) {
/* Your styles for this range */
.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
@apply !order-1;
}
}