rewrite
This commit is contained in:
@@ -1,52 +1,86 @@
|
||||
<template>
|
||||
<router-link
|
||||
class="event-card"
|
||||
rel="prefetch"
|
||||
:to="{ name: 'event', params: { id: props.event.id } }">
|
||||
:to="{ name: 'event', params: { id: props.event.id } }"
|
||||
class="event-card bg-white border-1 border-rounded-xl text-black decoration-none hover:shadow-md transition min-w-72">
|
||||
<div
|
||||
class="thumbnail"
|
||||
class="h-48 bg-cover bg-center rounded-t-xl relative"
|
||||
:style="{
|
||||
backgroundImage: `url('${mediaGetVariantUrl(
|
||||
props.event.hero,
|
||||
'medium'
|
||||
)}')`,
|
||||
}">
|
||||
<div :class="['banner', computedBanner(props.event)['type']]">
|
||||
<div
|
||||
:class="[
|
||||
'absolute',
|
||||
'top-2',
|
||||
'right-2',
|
||||
'text-xs',
|
||||
'font-bold',
|
||||
'uppercase',
|
||||
'px-4',
|
||||
'py-1',
|
||||
computedBanner(props.event)['bg-class'],
|
||||
computedBanner(props.event)['font-class'],
|
||||
]">
|
||||
{{ computedBanner(props.event)["banner"] }}
|
||||
</div>
|
||||
<div class="date">
|
||||
<div class="day">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center bg-white border-1 border-rounded absolute top-2 left-2 w-12 h-12 text-gray-6">
|
||||
<div class="font-bold line-height-none">
|
||||
{{ formatDateDay(props.event.start_at) }}
|
||||
</div>
|
||||
<div class="month">
|
||||
<div class="text-xs uppercase line-height-none">
|
||||
{{ formatDateMonth(props.event.start_at) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3 class="title">{{ props.event.title }}</h3>
|
||||
<SMRow class="date" no-responsive>
|
||||
<ion-icon name="calendar-outline" class="icon" />
|
||||
<div class="text">{{ computedDate(props.event) }}</div>
|
||||
</SMRow>
|
||||
<SMRow class="location" no-responsive>
|
||||
<ion-icon name="location-outline" class="icon" />
|
||||
<div class="text">
|
||||
<div class="p-4">
|
||||
<h3 class="mb-3 font-500">{{ props.event.title }}</h3>
|
||||
<div class="flex items-center mb-2 text-gray-5">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 pr-2"
|
||||
viewBox="0 -960 960 960">
|
||||
<path
|
||||
d="M180-80q-24 0-42-18t-18-42v-620q0-24 18-42t42-18h65v-60h65v60h340v-60h65v60h65q24 0 42 18t18 42v620q0 24-18 42t-42 18H180Zm0-60h600v-430H180v430Zm0-490h600v-130H180v130Zm0 0v-130 130Zm300 230q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
<span class="text-sm">{{ computedDate(props.event) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-2 text-gray-5">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 pr-2"
|
||||
viewBox="0 -960 960 960">
|
||||
<path
|
||||
d="M480.089-490Q509-490 529.5-510.589q20.5-20.588 20.5-49.5Q550-589 529.411-609.5q-20.588-20.5-49.5-20.5Q451-630 430.5-609.411q-20.5 20.588-20.5 49.5Q410-531 430.589-510.5q20.588 20.5 49.5 20.5ZM480-159q133-121 196.5-219.5T740-552q0-117.79-75.292-192.895Q589.417-820 480-820t-184.708 75.105Q220-669.79 220-552q0 75 65 173.5T480-159Zm0 79Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-472Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
<span class="text-sm">
|
||||
{{ computedLocation(props.event) }}
|
||||
</div>
|
||||
</SMRow>
|
||||
<SMRow class="ages" no-responsive>
|
||||
<ion-icon name="body-outline" class="icon" />
|
||||
<div class="text">
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-2 text-gray-5">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 pr-2"
|
||||
viewBox="0 -960 960 960">
|
||||
<path
|
||||
d="M626-533q22.5 0 38.25-15.75T680-587q0-22.5-15.75-38.25T626-641q-22.5 0-38.25 15.75T572-587q0 22.5 15.75 38.25T626-533Zm-292 0q22.5 0 38.25-15.75T388-587q0-22.5-15.75-38.25T334-641q-22.5 0-38.25 15.75T280-587q0 22.5 15.75 38.25T334-533Zm146 272q66 0 121.5-35.5T682-393H278q26 61 81 96.5T480-261Zm0 181q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 340q142.375 0 241.188-98.812Q820-337.625 820-480t-98.812-241.188Q622.375-820 480-820t-241.188 98.812Q140-622.375 140-480t98.812 241.188Q337.625-140 480-140Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
<span class="text-sm">
|
||||
{{ computedAges(props.event.ages) }}
|
||||
</div>
|
||||
</SMRow>
|
||||
<SMRow class="price" no-responsive>
|
||||
<div class="icon">$</div>
|
||||
<div class="text">
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center text-gray-5">
|
||||
<span class="block text-center w-4 mr-2">$</span>
|
||||
<span class="text-sm">
|
||||
{{ computedPrice(props.event.price) }}
|
||||
</div>
|
||||
</SMRow>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
@@ -172,7 +206,8 @@ const computedPrice = (price: string): string => {
|
||||
|
||||
type EventBanner = {
|
||||
banner: string;
|
||||
type: string;
|
||||
"bg-class": string;
|
||||
"font-class": string;
|
||||
};
|
||||
|
||||
const computedBanner = (event: Event): EventBanner => {
|
||||
@@ -188,133 +223,39 @@ const computedBanner = (event: Event): EventBanner => {
|
||||
) {
|
||||
return {
|
||||
banner: "closed",
|
||||
type: "expired",
|
||||
"bg-class": "bg-purple-800",
|
||||
"font-class": "text-white",
|
||||
};
|
||||
} else if (event.status == "open") {
|
||||
return {
|
||||
banner: "open",
|
||||
type: "success",
|
||||
"bg-class": "bg-green-700",
|
||||
"font-class": "text-white",
|
||||
};
|
||||
} else if (event.status == "cancelled") {
|
||||
return {
|
||||
banner: "cancelled",
|
||||
type: "danger",
|
||||
"bg-class": "bg-red-700",
|
||||
"font-class": "text-white",
|
||||
};
|
||||
} else if (event.status == "draft") {
|
||||
return {
|
||||
banner: "draft",
|
||||
type: "expired",
|
||||
"bg-class": "bg-purple-800",
|
||||
"font-class": "text-white",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
banner: "Open Soon",
|
||||
type: "warning",
|
||||
"bg-class": "bg-yellow-400",
|
||||
"font-class": "text-black",
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
a.event-card {
|
||||
background-color: var(--base-color-light);
|
||||
box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: var(--base-color-text);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:visited {
|
||||
color: var(--card-color-text);
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 8px 8px 0 0;
|
||||
|
||||
.banner {
|
||||
position: absolute;
|
||||
background-color: var(--banner-green-color);
|
||||
font-size: 70%;
|
||||
font-weight: 700;
|
||||
color: var(--banner-green-color-text);
|
||||
padding: 6px 18px;
|
||||
text-align: center;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.expired {
|
||||
background-color: var(--banner-purple-color);
|
||||
color: var(--banner-purple-color-text);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: var(--banner-red-color);
|
||||
color: var(--banner-red-color-text);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: var(--banner-yellow-color);
|
||||
color: var(--banner-yellow-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background-color: var(--base-color);
|
||||
box-shadow: var(--base-shadow);
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
|
||||
.day {
|
||||
font-weight: 700;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.month {
|
||||
font-size: 65%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 100%;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
font-size: 80%;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
filter: none;
|
||||
|
||||
.image {
|
||||
filter: brightness(115%);
|
||||
}
|
||||
}
|
||||
.event-card {
|
||||
color: inherit !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user