From 666cc8e24800686a2e0bbd84161e5c453718a0ae Mon Sep 17 00:00:00 2001
From: Hangzhi Yu <hangzhi@protonmail.com>
Date: Wed, 27 Mar 2024 02:51:11 +0100
Subject: [PATCH] Use footer instead of bottom sheet for date select
---
.../coursebook/CoursebookDateSelect.vue | 53 ++++++++-----------
1 file changed, 23 insertions(+), 30 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDateSelect.vue b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDateSelect.vue
index 5d8736d9e..f342d3990 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDateSelect.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDateSelect.vue
@@ -7,14 +7,6 @@ export default {
components: {
DateField,
},
- mounted() {
- // Vuetify uses the hideScroll method to disable scrolling by setting an event listener
- // to the window. As event listeners can only be removed by referencing the listener
- // method and because vuetify this method is called on every state change of the dialog,
- // we simply replace the method in this component instance
- // https://edugit.org/AlekSIS/official/AlekSIS-Core/-/commit/c6048ba9ad8345e98d896801424f5292bb307e2e
- this.$refs.sheet.hideScroll = this.$refs.sheet.showScroll;
- },
props: {
value: {
type: String,
@@ -57,43 +49,44 @@ export default {
</script>
<template>
- <v-bottom-sheet
- :value="true"
- persistent
- hide-overlay
- no-click-animation
- :retain-focus="false"
- ref="sheet"
- class="rounded-t-xl rounded-b-0"
+ <v-footer
+ app
+ inset
+ padless
+ id="date-select-footer"
>
- <v-card>
+ <v-card tile class="full-width">
<v-card-title id="content">
- <div class="d-flex align-center justify-space-between full-width">
+ <div class="d-flex align-center justify-center full-width">
<v-btn icon large class="me-4" @click="handleClick(PREV)">
<v-icon>$prev</v-icon>
</v-btn>
- <date-field
- solo-inverted
- flat
- hide-details
- :value="value"
- @input="$emit('input', $event)"
- :label="$t('alsijil.coursebook.date_select.label')"
- :disabled="loading"
- readonly
- />
+ <div class="flex-grow-0">
+ <date-field
+ solo-inverted
+ flat
+ hide-details
+ :value="value"
+ @input="$emit('input', $event)"
+ :label="$t('alsijil.coursebook.date_select.label')"
+ :disabled="loading"
+ readonly
+ />
+ </div>
<v-btn icon large class="ms-4" @click="handleClick(NEXT)">
<v-icon>$next</v-icon>
</v-btn>
</div>
</v-card-title>
</v-card>
- </v-bottom-sheet>
+ </v-footer>
</template>
<style scoped>
#content {
margin: auto;
- max-width: 500px;
+}
+#date-select-footer {
+ z-index: 10;
}
</style>
--
GitLab