[style] Fix style on extra small devices

* Show only one day in the agenda view if devices has a very low width.
* Fix very tiny font on small devices
This commit is contained in:
Ferdinand Thiessen 2021-11-16 23:30:21 +01:00
parent a0192418e2
commit 511014d043
3 changed files with 19 additions and 26 deletions

View File

@ -49,6 +49,7 @@
</div>
<div class="col-xs-12 col-sm-3 text-center">
<q-btn-toggle
v-if="$q.screen.gt.xs"
v-model="calendarView"
flat
stretch
@ -80,7 +81,7 @@
</template>
<template #day="{ scope: { timestamp } }">
<div itemref="" class="q-pb-sm" style="min-height: 200px">
<eventslot
<event-slot
v-for="(agenda, index) in events[timestamp.weekday]"
:key="index"
v-model="events[timestamp.weekday][index]"
@ -98,27 +99,27 @@
<script lang="ts">
import { ComponentPublicInstance, computed, defineComponent, onBeforeMount, ref } from 'vue';
import { useScheduleStore } from '../../store';
import Eventslot from './slots/EventSlot.vue';
import { date } from 'quasar';
import EventSlot from './slots/EventSlot.vue';
import { date, useQuasar } from 'quasar';
import { startOfWeek } from '@flaschengeist/api';
import EditEvent from '../management/EditEvent.vue';
import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar';
export default defineComponent({
name: 'AgendaView',
components: { Eventslot, EditEvent, QCalendarAgenda: <ComponentPublicInstance>QCalendarAgenda },
components: { EventSlot, EditEvent, QCalendarAgenda: <ComponentPublicInstance>QCalendarAgenda },
setup() {
const store = useScheduleStore();
const windowWidth = ref(window.innerWidth);
const quasar = useQuasar();
const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
const proxyDate = ref('');
const calendarView = ref('week');
const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
const calendarDays = computed(() =>
// <= 1023 is the breakpoint for sm to md
calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 3 : 7
(calendarView.value == 'day' || quasar.screen.xs) ? 1 : quasar.screen.sm ? 3 : 7
);
const events = ref<Agendas>({});
const editor = ref<FG.Event | undefined>(undefined);
@ -128,10 +129,6 @@ export default defineComponent({
}
onBeforeMount(async () => {
window.addEventListener('resize', () => {
windowWidth.value = window.innerWidth;
});
await loadAgendas();
});

View File

@ -4,13 +4,13 @@
bordered
>
<q-card-section class="text-primary q-pa-xs">
<div class="text-weight-bolder text-center" style="font-size: 1.5vw">
<div class="text-weight-bolder text-center">
{{ event.type.name }}
<template v-if="event.name"
>: <span style="font-size: 1.2vw">{{ event.name }}</span>
>: <span>{{ event.name }}</span>
</template>
</div>
<div v-if="event.description" class="text-weight-medium" style="font-size: 1vw">
<div v-if="event.description" class="text-weight-medium">
{{ event.description }}
</div>
</q-card-section>
@ -53,7 +53,7 @@ import { PERMISSIONS } from '../../../permissions';
import JobSlot from './JobSlot.vue';
export default defineComponent({
name: 'Eventslot',
name: 'EventSlot',
components: { JobSlot },
props: {
modelValue: {

View File

@ -34,7 +34,7 @@
<q-tab-panel name="agendaView">
<AgendaView />
</q-tab-panel>
<q-tab-panel name="eventtypes">
<q-tab-panel name="listView">
</q-tab-panel>
</q-tab-panels>
</q-page>
@ -44,27 +44,23 @@
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import AgendaView from '../components/overview/AgendaView.vue';
import { Screen } from 'quasar';
import { useQuasar } from 'quasar';
export default defineComponent({
name: 'EventOverview',
components: { AgendaView },
setup() {
interface Tab {
name: string;
label: string;
}
const quasar = useQuasar();
const tabs: Tab[] = [
const tabs = computed(() => ([
{ name: 'listView', label: 'Liste' },
{ name: 'agendaView', label: 'Kalendar' }
];
]));
const drawer = ref<boolean>(false);
const showDrawer = computed({
get: () => {
return !Screen.gt.sm && drawer.value;
},
get: () => !quasar.screen.gt.sm && drawer.value,
set: (val: boolean) => {
drawer.value = val;
},