Adding Starttime to Eventcards and Header

This commit is contained in:
johndoe4 2023-05-23 01:30:53 +02:00
parent a50b9128fe
commit 08764fff72
3 changed files with 72 additions and 0 deletions

View file

@ -58,6 +58,16 @@
:date="event.beginsOn.toString()" :date="event.beginsOn.toString()"
/> />
</div> </div>
<div
class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end"
:class="{ 'sm:hidden': mode === 'row' }"
>
<start-time-icon
:small="true"
v-if="!mergedOptions.hideDate"
:date="event.beginsOn.toString()"
/>
</div>
<span <span
class="text-gray-700 dark:text-white font-semibold hidden" class="text-gray-700 dark:text-white font-semibold hidden"
:class="{ 'sm:block': mode === 'row' }" :class="{ 'sm:block': mode === 'row' }"
@ -161,6 +171,7 @@ import {
organizerAvatarUrl, organizerAvatarUrl,
} from "@/types/event.model"; } from "@/types/event.model";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue"; import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import StartTimeIcon from "@/components/Event/StartTimeIcon.vue";
import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue"; import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
import { EventStatus } from "@/types/enums"; import { EventStatus } from "@/types/enums";
import RouteName from "../../router/name"; import RouteName from "../../router/name";

View file

@ -0,0 +1,53 @@
<template>
<div
class="starttime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
:class="{ small }"
:style="`--small: ${smallStyle}`"
>
<div class="starttime-container-content font-semibold">
<Clock class="clock-icon"/><time :datetime="dateObj.toISOString()">{{
time
}}</time>
</div>
</div>
</template>
<script lang="ts" setup>
import { localeShortWeekDayNames } from "@/utils/datetime";
import { computed } from "vue";
import Clock from "vue-material-design-icons/ClockTimeTenOutline.vue";
const props = withDefaults(
defineProps<{
date: string;
small?: boolean;
}>(),
{ small: false }
);
const dateObj = computed<Date>(() => new Date(props.date));
const time = computed<string>(() =>
dateObj.value.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })
);
const smallStyle = computed<string>(() => (props.small ? "1.2" : "2"));
</script>
<style lang="scss" scoped>
div.starttime-container {
width: auto;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
height: calc(40px * var(--small));
}
.starttime-container-content {
font-size: calc(1rem * var(--small));
padding: 0 0.5rem;
}
.clock-icon {
vertical-align: middle;
padding-right: 0.2rem;
display: inline-block;
}
</style>

View file

@ -13,6 +13,13 @@
/> />
</div> </div>
<div class="start-time-icon-wrapper relative" v-if="event?.beginsOn">
<start-time-icon
:date="event.beginsOn.toString()"
class="absolute right-3 -top-16"
/>
</div>
<section class="intro px-2 pt-4" dir="auto"> <section class="intro px-2 pt-4" dir="auto">
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<div class="flex-1 min-w-[300px]"> <div class="flex-1 min-w-[300px]">
@ -235,6 +242,7 @@ import {
usernameWithDomain, usernameWithDomain,
} from "@/types/actor"; } from "@/types/actor";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue"; import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import StartTimeIcon from "@/components/Event/StartTimeIcon.vue";
import Earth from "vue-material-design-icons/Earth.vue"; import Earth from "vue-material-design-icons/Earth.vue";
import Link from "vue-material-design-icons/Link.vue"; import Link from "vue-material-design-icons/Link.vue";
import MultiCard from "@/components/Event/MultiCard.vue"; import MultiCard from "@/components/Event/MultiCard.vue";