From bb4c85f603cd94cc23c2bc3bd15d009d5c602997 Mon Sep 17 00:00:00 2001 From: 778a69cd <778a69cd@potsda.mn> Date: Tue, 14 Mar 2023 23:36:12 +0100 Subject: [PATCH] new layout for calendar icon, show weekday Co-authored-by: unkonkret (cherry picked from commit 74457ba86174470b67bc0493918307d0a0a89110) --- js/src/components/Event/DateCalendarIcon.vue | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/js/src/components/Event/DateCalendarIcon.vue b/js/src/components/Event/DateCalendarIcon.vue index 59a55e3fc..fd1e8103b 100644 --- a/js/src/components/Event/DateCalendarIcon.vue +++ b/js/src/components/Event/DateCalendarIcon.vue @@ -19,6 +19,7 @@ >
+
@@ -39,6 +40,10 @@ export default class DateCalendarIcon extends Vue { return new Date(this.$props.date); } + get wkday(): string { + return this.dateObj.toLocaleString(undefined, { weekday: "short" }); + } + get month(): string { return this.dateObj.toLocaleString(undefined, { month: "short" }); } @@ -62,17 +67,17 @@ div.datetime-container { overflow-y: hidden; overflow-x: hidden; align-items: stretch; - width: calc(40px * var(--small)); + width: calc(55px * var(--small)); box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); - height: calc(40px * var(--small)); + height: calc(55px * var(--small)); background: #fff; .datetime-container-header { - height: calc(10px * var(--small)); + height: calc(12px * var(--small)); background: #f3425f; } .datetime-container-content { - height: calc(30px * var(--small)); + height: calc(43px * var(--small)); } time { @@ -80,6 +85,13 @@ div.datetime-container { font-weight: 600; color: $violet-3; + &.wkday { + padding: 2px 0; + font-size: 12px; + line-height: 12px; + text-transform: uppercase; + } + &.month { padding: 2px 0; font-size: 12px;