hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

event icon: text contrast in light mode and add year in footer (#1822 & #1823)

Browse Source
This commit is contained in:
Laurent GAY
2025-07-30 15:42:20 +02:00
committed by setop
parent 5f3c3b2c7d
commit aeeb52aced
1 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Event/DateCalendarIcon.vue
View File

@@ -4,7 +4,7 @@
:class="{ small }" :class="{ small }"
:style="`--small: ${smallStyle}`" :style="`--small: ${smallStyle}`"
> >
<div class="datetime-container-header bg-red-500 dark:bg-red-900"> <div class="datetime-container-header bg-red-400 dark:bg-red-900">
<time :datetime="dateObj.toISOString()" class="weekday">{{ <time :datetime="dateObj.toISOString()" class="weekday">{{
weekday weekday
}}</time> }}</time>
@@ -19,6 +19,9 @@
>{{ month }}</time >{{ month }}</time
> >
</div> </div>
<div class="datetime-container-footer bg-red-400 dark:bg-red-900">
<time :datetime="dateObj.toISOString()" class="year">{{ year }}</time>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -51,6 +54,10 @@ const weekday = computed<string>(() =>
dateObj.value.toLocaleString(localeConverted.value, { weekday: "short" }) dateObj.value.toLocaleString(localeConverted.value, { weekday: "short" })
); );
const year = computed<string>(() =>
dateObj.value.toLocaleString(localeConverted.value, { year: "numeric" })
);
const smallStyle = computed<string>(() => (props.small ? "1.2" : "2")); const smallStyle = computed<string>(() => (props.small ? "1.2" : "2"));
</script> </script>
@@ -67,21 +74,30 @@ div.datetime-container {
font-size: calc(9px * var(--small)); font-size: calc(9px * var(--small));
font-weight: bold; font-weight: bold;
vertical-align: top; vertical-align: top;
line-height: calc(9px * var(--small)); line-height: calc(8px * var(--small));
} }
.datetime-container-content { .datetime-container-content {
height: calc(30px * var(--small)); height: calc(22px * var(--small));
}
.datetime-container-footer {
height: calc(8px * var(--small));
}
.datetime-container-footer .year {
font-size: calc(7px * var(--small));
font-weight: bold;
vertical-align: top;
line-height: calc(8px * var(--small));
} }
time { time {
&.month { &.month {
font-size: 12px; font-size: 10px;
line-height: 12px; line-height: 9px;
} }
&.day { &.day {
font-size: calc(1rem * var(--small)); font-size: calc(0.8rem * var(--small));
line-height: calc(1rem * var(--small)); line-height: calc(0.7rem * var(--small));
} }
} }
} }