ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-13 17:22:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add national days header and fix layout

Browse Source
This commit is contained in:
Chris Kaczor
2024-12-23 17:43:53 +00:00
parent 86c39c252f
commit 89a428f8e7
2 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
WebDisplay/src/components/NationalDays.vue
View File

@@ -31,22 +31,23 @@
</script> </script>
<template> <template>
<span> <div
<div class="national-days"
class="national-days" v-if="nationalDaysReady">
v-if="nationalDaysReady"> <div class="national-days-header">
<ul> {{ 'National Days (' + nationalDays.length + ')' }}
<li
class="national-day"
v-for="nationalDay in nationalDays"
@click="onNationalDayClick(nationalDay)">
<span v-html="nationalDay.name"></span>
<v-icon
class="national-day-arrow"
icon="mdi-menu-right" />
</li>
</ul>
</div> </div>
<ul class="national-days-list">
<li
class="national-day"
v-for="nationalDay in nationalDays"
@click="onNationalDayClick(nationalDay)">
<span v-html="nationalDay.name"></span>
<v-icon
class="national-day-arrow"
icon="mdi-menu-right" />
</li>
</ul>
<v-dialog <v-dialog
v-model="dialog" v-model="dialog"
@@ -69,7 +70,7 @@
</template> </template>
</v-card> </v-card>
</v-dialog> </v-dialog>
</span> </div>
</template> </template>
<style> <style>
@@ -77,6 +78,20 @@
background-color: #121212; background-color: #121212;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
display: flex;
flex: 1;
flex-direction: column;
}
.national-days-header {
font-size: 1.15em;
padding-bottom: 4px;
text-align: center;
}
.national-days-list {
overflow: auto;
flex: 1;
} }
.national-day { .national-day {

2
WebDisplay/src/pages/kiosk.vue
View File

@@ -306,12 +306,10 @@
.kiosk-calendar { .kiosk-calendar {
grid-area: kiosk-calendar; grid-area: kiosk-calendar;
overflow: auto;
} }
.kiosk-national-days { .kiosk-national-days {
grid-area: kiosk-national-days; grid-area: kiosk-national-days;
overflow: auto;
scrollbar-width: thin; scrollbar-width: thin;
} }