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

View File

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

View File

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