OEKZident.de/ovdashboard
2
0
Fork 0
Code Releases 1 Packages Activity

responsivity: small screens

Browse source
This commit is contained in:
Jörn-Michael Miehe 2022-09-15 20:30:25 +00:00
parent 8efc40eb95
commit 89a7ffe977
3 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ui/src/App.vue
View file

@ -8,7 +8,7 @@
/> />
<Dashboard> <Dashboard>
<template slot="message"> <template slot="message">
<div class="d-flex flex-column fill-height pb-12"> <div class="d-flex flex-column fill-height pb-sm-12">
<Message :html="message_html" /> <Message :html="message_html" />
<ImageCarousel <ImageCarousel
class="mt-auto" class="mt-auto"
@ -23,6 +23,7 @@
<template slot="calendars"> <template slot="calendars">
<CalendarCarousel :speed="calendar_speed" :data="calendar_data" /> <CalendarCarousel :speed="calendar_speed" :data="calendar_data" />
<DashboardInfo <DashboardInfo
class="pb-12 pb-sm-0"
:server_host="server_host" :server_host="server_host"
:server_name="server_name" :server_name="server_name"
:version="dashboard_version" :version="dashboard_version"

6
ui/src/components/Dashboard.vue
View file

@ -1,10 +1,10 @@
<template> <template>
<v-container fill-height class="pa-0"> <v-container fill-height class="pa-0">
<v-layout> <v-layout class="flex-wrap">
<v-col cols="4"> <v-col cols="12" sm="4">
<slot name="message">MESSAGE</slot> <slot name="message">MESSAGE</slot>
</v-col> </v-col>
<v-col cols="8"> <v-col cols="12" sm="8">
<slot name="calendars">CALENDARS</slot> <slot name="calendars">CALENDARS</slot>
</v-col> </v-col>
</v-layout> </v-layout>

6
ui/src/components/calendar/CalendarCarousel.vue
View file

@ -76,8 +76,14 @@ export default class CalendarCarousel extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~vuetify/src/styles/settings/_variables";
.v-carousel:deep() > div { .v-carousel:deep() > div {
max-height: 500px; max-height: 500px;
@media #{map-get($display-breakpoints, "sm-and-down")} {
min-height: 500px;
}
} }
.v-window { .v-window {