fix:#5 styling for time inputs

This commit is contained in:
Elmar Kresse
2024-01-25 20:53:25 +01:00
parent 167a0432bf
commit dee2603702
3 changed files with 292 additions and 351 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -18,30 +18,30 @@
"@fullcalendar/interaction": "^6.1.10", "@fullcalendar/interaction": "^6.1.10",
"@fullcalendar/timegrid": "^6.1.10", "@fullcalendar/timegrid": "^6.1.10",
"@fullcalendar/vue3": "^6.1.10", "@fullcalendar/vue3": "^6.1.10",
"@vueuse/core": "^10.7.2", "@vueuse/core": "^10.7.1",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"primeflex": "^3.3.1", "primeflex": "^3.3.1",
"primeicons": "^6.0.1", "primeicons": "^6.0.1",
"primevue": "^3.47.2", "primevue": "^3.46.0",
"source-sans": "^3.46.0", "source-sans": "^3.46.0",
"vue": "^3.4.11", "vue": "^3.4.11",
"vue-i18n": "^9.9.0", "vue-i18n": "^9.9.0",
"vue-router": "^4.2.5" "vue-router": "^4.2.5"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20.11.6", "@types/node": "^20.11.0",
"@vitejs/plugin-vue": "^5.0.3", "@vitejs/plugin-vue": "^5.0.3",
"@vue/eslint-config-typescript": "^12.0.0", "@vue/eslint-config-typescript": "^12.0.0",
"eslint": "^8.56.0", "eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-vue": "^9.20.1", "eslint-plugin-vue": "^9.20.0",
"moment-timezone": "^0.5.44", "moment-timezone": "^0.5.44",
"prettier": "3.2.1", "prettier": "3.2.1",
"sass": "^1.70.0", "sass": "^1.69.7",
"sass-loader": "^13.3.3", "sass-loader": "^13.3.3",
"typescript": "^5.3.3", "typescript": "^5.3.3",
"vite": "^5.0.12", "vite": "^5.0.11",
"vitest": "^1.2.1", "vitest": "^1.2.0",
"vue-tsc": "^1.8.27" "vue-tsc": "^1.8.27"
} }
} }

View File

@@ -17,28 +17,36 @@
:class="flexSpecs" :class="flexSpecs"
:placeholder="$t('roomFinderPage.dropDownSelect')" :placeholder="$t('roomFinderPage.dropDownSelect')"
:empty-message="$t('roomFinderPage.noRoomsAvailable')" :empty-message="$t('roomFinderPage.noRoomsAvailable')"
:auto-filter-focus="true"
date-format="dd.mm.yy" date-format="dd.mm.yy"
panel-class="min-w-min"
touchUI
/> />
<div class="break"/> <div class="break"/>
<Calendar <Calendar
v-model="start" v-model="start"
type="time"
placeholder="start" placeholder="start"
time-only time-only
hourFormat="24"
date-format="HH:mm" date-format="HH:mm"
:class="[{'p-invalid':isLater}, flexSpecs]" :class="[{'p-invalid':isLater}, flexSpecs]"
panel-class="min-w-min"
touchUI
/> />
<Calendar <Calendar
v-model="end" v-model="end"
type="time"
time-only time-only
hourFormat="24"
placeholder="end" placeholder="end"
date-format="HH:mm" date-format="HH:mm"
:class="[{'p-invalid':isLater}, flexSpecs]" :class="[{'p-invalid':isLater}, flexSpecs]"
panel-class="min-w-min"
touchUI
/> />
</template> </template>
<template #content> <template #content>
<DataTable v-model:filters="filters" :value="availableRooms" data-key="id" filter-display="row" paginator :rows="10" :global-filter-fields="['room']" > <DataTable v-model:filters="filters" :value="availableRooms" data-key="id" filter-display="row" paginator :rows="10" :global-filter-fields="['room']" >
<Column field="id" header="ID"></Column>
<Column field="room" sortable header="Room"> <Column field="room" sortable header="Room">
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by Room" @input="filterCallback()" /> <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by Room" @input="filterCallback()" />