9d055f8dd8
* fix: move vue app to parent dir * test: prepare vue for cypress testing * test: add basic cypress test for vue app * test: add agenda-neue header tests * test: meeting generator for cypress tests (wip) * test: agenda-neue meeting nav + settings button * test: agenda-neue check settings button position against viewport size * test: agenda-neue fix viewport + add schedule list header tests * test: agenda-neue timezone tests + future meeting template * test: agenda-neue add test floor plan image fixtures * test: floor-plan-neue - handle floor plan images * test: floor-plan-neue room selection + pin drop tests * test: floor-plan-neue - test all viewports * test: floor-plan-neue add missing header tests * test: agenda-neue - generate areas + groups * test: agenda-neue - test filter areas + groups dialog * test: agenda-neue code cleanup + generate schedule (wip) * test: agenda-neue - generate schedule (wip) * test: agenda-neue - generate schedule + test settings dialog (wip) * test: agenda-neue - settings timezone controls * test: agenda-neue - settings toggles + agenda table headers tests * test: agenda-neue - table events + memory fixes * test - agenda-neue - table events remaining columns tests * test: agenda-neue - meeting materials dialog + future schedule list table buttons * test: agenda-neue - remove skips * test: agenda-neue - search * test: agenda-neue - remove skips * test: agenda-neue - use random seed for deterministic results * test: agenda-neue - set constant clock * test: add percy to cypress + upgrade cypress * test: agenda-neue - jump to day tests * test: agenda-neue - add to calendar tests * test: agenda-neue - add pick sessions tests * test: agenda-neue - calendar view tests * test: agenda-neue - color assignment tests * test: agenda-neue - skip test not supported in firefox/safari * test: agenda-neue - live sessions tests * test: agenda-neue - smaller screens tests * chore: update workflows to handle modern + legacy cypress tests * test: fix legacy agenda weekview test + cypress legacy config
130 lines
2.7 KiB
Vue
130 lines
2.7 KiB
Vue
<template lang="pug">
|
|
n-theme
|
|
n-message-provider
|
|
.app-error(v-if='agendaStore.criticalError')
|
|
i.bi.bi-x-octagon-fill.me-2
|
|
span {{agendaStore.criticalError}}
|
|
.app-container(ref='appContainer')
|
|
router-view.meeting
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onBeforeUnmount ,onMounted, ref } from 'vue'
|
|
import { NMessageProvider } from 'naive-ui'
|
|
|
|
import { useAgendaStore } from './agenda/store'
|
|
|
|
import NTheme from './components/n-theme.vue'
|
|
|
|
// STORES
|
|
|
|
const agendaStore = useAgendaStore()
|
|
|
|
// STATE
|
|
|
|
const appContainer = ref(null)
|
|
|
|
// INIT
|
|
|
|
agendaStore.fetch()
|
|
|
|
// --------------------------------------------------------------------
|
|
// Handle browser resize
|
|
// --------------------------------------------------------------------
|
|
|
|
const resizeObserver = new ResizeObserver(entries => {
|
|
agendaStore.$patch({ viewport: Math.round(window.innerWidth) })
|
|
// for (const entry of entries) {
|
|
// const newWidth = entry.contentBoxSize ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width
|
|
// }
|
|
})
|
|
|
|
onMounted(() => {
|
|
resizeObserver.observe(appContainer.value, { box: 'device-pixel-content-box' })
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
resizeObserver.unobserve(appContainer.value)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "bootstrap/scss/functions";
|
|
@import "bootstrap/scss/variables";
|
|
@import "./shared/breakpoints";
|
|
|
|
.app-error {
|
|
background-color: $red-500;
|
|
border-radius: 5px;
|
|
color: #FFF;
|
|
font-weight: 500;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.meeting {
|
|
> h1 {
|
|
font-weight: 500;
|
|
color: $gray-700;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
@media screen and (max-width: $bs5-break-sm) {
|
|
justify-content: center;
|
|
|
|
> span {
|
|
font-size: .95em;
|
|
}
|
|
}
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
background: linear-gradient(220deg, $blue-500 20%, $purple-500 70%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
box-decoration-break: clone;
|
|
}
|
|
}
|
|
|
|
&-h1-badges {
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
|
|
> span {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
background-color: $pink-500;
|
|
box-shadow: 0 0 5px 0 rgba($pink-500, .5);
|
|
color: #FFF;
|
|
padding: 5px 8px;
|
|
border-radius: 6px;
|
|
|
|
& + span {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-warning {
|
|
background-color: $red-500 !important;
|
|
box-shadow: 0 0 5px 0 rgba($red-500, .5) !important;
|
|
color: #FFF;
|
|
animation: warningBorderFlash 1s ease infinite;
|
|
}
|
|
|
|
> h4 {
|
|
@media screen and (max-width: $bs5-break-sm) {
|
|
text-align: center;
|
|
|
|
> span {
|
|
font-size: .8em;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|