KayFaraday
/
Zaimki
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[calendar] better spacing of labels view, allow labels view also without basic layout

This commit is contained in:
Avris 2021-12-03 15:04:44 +01:00
parent 0e0e4a0930
commit 22afacefc9
1 changed files with 43 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
routes/calendar.vue
View File

@ -17,19 +17,34 @@
<CalendarBanner v-if="!basic && year.isCurrent()"/>
<section v-if="basic" class="row pb-4">
<div v-for="i in 12" class="col-12 col-lg-3 py-3">
<h3 class="text-center"><T>calendar.months.{{i}}</T></h3>
<CalendarMonthEvents v-if="labels" :year="year" :month="i" class="small my-3"/>
<Calendar v-else :year="year" :month="i"/>
</div>
</section>
<section v-else class="row">
<div v-for="i in 12" class="col-12 col-sm-6 col-lg-4 py-3">
<h3 class="text-center"><T>calendar.months.{{i}}</T></h3>
<Calendar :year="year" :month="i" :mark="today" tooltips/>
</div>
</section>
<template v-if="basic">
<section v-if="labels" class="columns-4 pb-4">
<div v-for="i in 12" class="py-3">
<h3 class="text-center"><T>calendar.months.{{i}}</T></h3>
<CalendarMonthEvents :year="year" :month="i" class="small my-3"/>
</div>
</section>
<section v-else class="row pb-4">
<div v-for="i in 12" class="col-12 col-lg-3 py-3">
<h3 class="text-center"><T>calendar.months.{{i}}</T></h3>
<Calendar :year="year" :month="i"/>
</div>
</section>
</template>
<template v-else>
<section v-if="labels" class="columns-3">
<div v-for="i in 12" class="py-3">
<h3 class="text-center"><T>calendar.months.{{i}}</T></h3>
<CalendarMonthEvents :year="year" :month="i" class="small my-3"/>
</div>
</section>
<section v-else class="row">
<div v-for="i in 12" class="col-12 col-sm-6 col-lg-4 py-3">
<h3 class="text-center"><T>calendar.months.{{i}}</T></h3>
<Calendar :year="year" :month="i" :mark="today" tooltips/>
</div>
</section>
</template>
<template v-if="!basic">
<CalendarExtra :year="year"/>
@ -74,3 +89,18 @@
},
};
</script>
<style lang="scss" scoped>
@import "assets/style";
@for $i from 3 to 5 {
@include media-breakpoint-up('lg', $grid-breakpoints) {
.columns-#{$i} {
column-count: $i;
> * {
break-inside: avoid-column;
}
}
}
}
</style>