updated front page layout
This commit is contained in:
79
resources/js/components/SMArticleCard.vue
Normal file
79
resources/js/components/SMArticleCard.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<router-link
|
||||
:to="{ name: 'article', params: { slug: props.article.slug } }"
|
||||
class="article-card">
|
||||
<div
|
||||
class="thumbnail"
|
||||
:style="{
|
||||
backgroundImage: `url(${mediaGetVariantUrl(
|
||||
props.article.hero,
|
||||
'medium'
|
||||
)})`,
|
||||
}"></div>
|
||||
<div class="info">
|
||||
{{ props.article.user.display_name }} -
|
||||
{{ computedDate(props.article.publish_at) }}
|
||||
</div>
|
||||
<h3 class="title">{{ props.article.title }}</h3>
|
||||
<p class="content">
|
||||
{{ excerpt(props.article.content) }}
|
||||
</p>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Article } from "../helpers/api.types";
|
||||
import { SMDate } from "../helpers/datetime";
|
||||
import { mediaGetVariantUrl } from "../helpers/media";
|
||||
import { excerpt } from "../helpers/string";
|
||||
|
||||
const props = defineProps({
|
||||
article: {
|
||||
type: Object as () => Article,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const computedDate = (date) => {
|
||||
return new SMDate(date, { format: "yMd" }).format("d MMMM yyyy");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
a.article-card {
|
||||
text-decoration: none;
|
||||
color: var(--card-color-text);
|
||||
margin-bottom: 48px;
|
||||
|
||||
&:hover {
|
||||
filter: none;
|
||||
|
||||
.thumbnail {
|
||||
filter: brightness(115%);
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 7px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-color: var(--card-color);
|
||||
box-shadow: var(--base-shadow);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 16px 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
309
resources/js/components/SMEventCard.vue
Normal file
309
resources/js/components/SMEventCard.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<router-link
|
||||
class="event-card"
|
||||
:to="{ name: 'event', params: { id: props.event.id } }">
|
||||
<div
|
||||
class="thumbnail"
|
||||
:style="{
|
||||
backgroundImage: `url('${mediaGetVariantUrl(
|
||||
props.event.hero,
|
||||
'medium'
|
||||
)}')`,
|
||||
}">
|
||||
<div :class="['banner', computedBanner(props.event)['type']]">
|
||||
{{ computedBanner(props.event)["banner"] }}
|
||||
</div>
|
||||
<div class="date">
|
||||
<div class="day">
|
||||
{{ formatDateDay(props.event.start_at) }}
|
||||
</div>
|
||||
<div class="month">
|
||||
{{ 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">
|
||||
{{ computedLocation(props.event) }}
|
||||
</div>
|
||||
</SMRow>
|
||||
<SMRow class="ages" no-responsive>
|
||||
<ion-icon name="body-outline" class="icon" />
|
||||
<div class="text">
|
||||
{{ computedAges(props.event.ages) }}
|
||||
</div>
|
||||
</SMRow>
|
||||
<SMRow class="price" no-responsive>
|
||||
<div class="icon">$</div>
|
||||
<div class="text">
|
||||
{{ computedPrice(props.event.price) }}
|
||||
</div>
|
||||
</SMRow>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Event } from "../helpers/api.types";
|
||||
import { SMDate } from "../helpers/datetime";
|
||||
import { mediaGetVariantUrl } from "../helpers/media";
|
||||
|
||||
const props = defineProps({
|
||||
event: {
|
||||
type: Object as () => Event,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Return a human readable Date string.
|
||||
*
|
||||
* @param {Event} event The event to convert.
|
||||
* @returns The converted string.
|
||||
*/
|
||||
const computedDate = (event: Event) => {
|
||||
let str = "";
|
||||
|
||||
if (event.start_at.length > 0) {
|
||||
if (
|
||||
event.end_at.length > 0 &&
|
||||
event.start_at.substring(0, event.start_at.indexOf(" ")) !=
|
||||
event.end_at.substring(0, event.end_at.indexOf(" "))
|
||||
) {
|
||||
str = new SMDate(event.start_at, { format: "yMd" }).format(
|
||||
"dd/MM/yyyy"
|
||||
);
|
||||
if (event.end_at.length > 0) {
|
||||
str =
|
||||
str +
|
||||
" - " +
|
||||
new SMDate(event.end_at, { format: "yMd" }).format(
|
||||
"dd/MM/yyyy"
|
||||
);
|
||||
}
|
||||
} else {
|
||||
str = new SMDate(event.start_at, { format: "yMd" }).format(
|
||||
"dd/MM/yyyy @ h:mm aa"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return str;
|
||||
};
|
||||
|
||||
/**
|
||||
* Return a the event starting month day number.
|
||||
*
|
||||
* @param {string} date The date to format.
|
||||
* @returns The converted string.
|
||||
*/
|
||||
const formatDateDay = (date: string) => {
|
||||
return new SMDate(date, { format: "yMd" }).format("dd");
|
||||
};
|
||||
|
||||
/**
|
||||
* Return a the event starting month name.
|
||||
*
|
||||
* @param {string} date The date to format.
|
||||
* @returns The converted string.
|
||||
*/
|
||||
const formatDateMonth = (date: string) => {
|
||||
return new SMDate(date, { format: "yMd" }).format("MMM");
|
||||
};
|
||||
|
||||
/**
|
||||
* Return a human readable Location string.
|
||||
*
|
||||
* @param {Event} event The event to convert.
|
||||
* @returns The converted string.
|
||||
*/
|
||||
const computedLocation = (event: Event): string => {
|
||||
if (event.location == "online") {
|
||||
return "Online";
|
||||
}
|
||||
|
||||
return event.address;
|
||||
};
|
||||
|
||||
/**
|
||||
* Return a human readable Ages string.
|
||||
*
|
||||
* @param {string} ages The string to convert.
|
||||
* @returns The converted string.
|
||||
*/
|
||||
const computedAges = (ages: string): string => {
|
||||
const trimmed = ages.trim();
|
||||
const regex = /^(\d+)(\s*\+?\s*|\s*-\s*\d+\s*)?$/;
|
||||
|
||||
if (trimmed.length === 0) {
|
||||
return "All ages";
|
||||
}
|
||||
|
||||
if (regex.test(trimmed)) {
|
||||
return `Ages ${trimmed}`;
|
||||
}
|
||||
|
||||
return ages;
|
||||
};
|
||||
|
||||
/**
|
||||
* Return a human readable Price string.
|
||||
*
|
||||
* @param {string} price The string to convert.
|
||||
* @returns The converted string.
|
||||
*/
|
||||
const computedPrice = (price: string): string => {
|
||||
const trimmed = parseInt(price.trim());
|
||||
if (isNaN(trimmed) || trimmed == 0) {
|
||||
return "Free";
|
||||
}
|
||||
|
||||
return trimmed.toString();
|
||||
};
|
||||
|
||||
type EventBanner = {
|
||||
banner: string;
|
||||
type: string;
|
||||
};
|
||||
|
||||
const computedBanner = (event: Event): EventBanner => {
|
||||
const parsedEndAt = new SMDate(event.end_at, {
|
||||
format: "yyyy-MM-dd HH:mm:ss",
|
||||
utc: true,
|
||||
});
|
||||
|
||||
if (
|
||||
(parsedEndAt.isBefore(new SMDate("now")) &&
|
||||
(event.status == "open" || event.status == "soon")) ||
|
||||
event.status == "closed"
|
||||
) {
|
||||
return {
|
||||
banner: "closed",
|
||||
type: "expired",
|
||||
};
|
||||
} else if (event.status == "open") {
|
||||
return {
|
||||
banner: "open",
|
||||
type: "success",
|
||||
};
|
||||
} else if (event.status == "cancelled") {
|
||||
return {
|
||||
banner: "cancelled",
|
||||
type: "danger",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
banner: "Open Soon",
|
||||
type: "warning",
|
||||
};
|
||||
};
|
||||
</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;
|
||||
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,33 +5,28 @@
|
||||
<div class="hero-background" :style="heroStyles"></div>
|
||||
<SMContainer class="align-items-start">
|
||||
<div class="hero-content">
|
||||
<h1>{{ heroTitle }}</h1>
|
||||
<p>{{ heroExcerpt }}</p>
|
||||
<h1>{{ props.title }}</h1>
|
||||
<p>{{ props.excerpt }}</p>
|
||||
<div class="hero-buttons">
|
||||
<SMButton
|
||||
v-if="loaded"
|
||||
type="primary"
|
||||
:to="{
|
||||
name: 'article',
|
||||
params: { slug: heroSlug },
|
||||
}"
|
||||
label="Read More" />
|
||||
:to="props.to"
|
||||
:label="props.more" />
|
||||
</div>
|
||||
</div>
|
||||
</SMContainer>
|
||||
<div class="hero-caption">
|
||||
<router-link
|
||||
v-if="loaded"
|
||||
:to="{ name: 'article', params: { slug: heroSlug } }"
|
||||
>{{ heroImageTitle }}</router-link
|
||||
>
|
||||
<router-link v-if="loaded" :to="props.to">{{
|
||||
props.imageTitle
|
||||
}}</router-link>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
|
||||
import { api, getApiResultData } from "../helpers/api";
|
||||
import { ArticleCollection } from "../helpers/api.types";
|
||||
import { mediaGetVariantUrl } from "../helpers/media";
|
||||
@@ -39,12 +34,35 @@ import { excerpt } from "../helpers/string";
|
||||
import SMButton from "./SMButton.vue";
|
||||
import SMLoading from "./SMLoading.vue";
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
excerpt: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
imageUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
imageTitle: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
to: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
more: {
|
||||
type: String,
|
||||
default: "Read More",
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const loaded = ref(false);
|
||||
let heroTitle = ref("");
|
||||
let heroExcerpt = ref("");
|
||||
let heroImageUrl = ref("");
|
||||
let heroImageTitle = "";
|
||||
let heroSlug = ref("");
|
||||
const translateY = ref(0);
|
||||
const heroStyles = ref({
|
||||
backgroundImage: "none",
|
||||
@@ -60,6 +78,18 @@ watch(translateY, () => {
|
||||
heroStyles.value.transform = `translateY(${translateY.value}px)`;
|
||||
});
|
||||
|
||||
const updateImageUrl = (url: string) => {
|
||||
heroStyles.value.backgroundImage = `linear-gradient(to right, rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)),url('${url}')`;
|
||||
loaded.value = true;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.imageUrl,
|
||||
() => {
|
||||
updateImageUrl(props.imageUrl);
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
@@ -68,44 +98,9 @@ onBeforeUnmount(() => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
const handleLoad = async () => {
|
||||
try {
|
||||
let articlesResult = await api.get({
|
||||
url: "/articles",
|
||||
params: {
|
||||
limit: 3,
|
||||
},
|
||||
});
|
||||
|
||||
const articlesData =
|
||||
getApiResultData<ArticleCollection>(articlesResult);
|
||||
|
||||
if (articlesData && articlesData.articles) {
|
||||
const randomIndex = Math.floor(
|
||||
Math.random() * articlesData.articles.length
|
||||
);
|
||||
heroTitle.value = articlesData.articles[randomIndex].title;
|
||||
heroExcerpt.value = excerpt(
|
||||
articlesData.articles[randomIndex].content,
|
||||
200
|
||||
);
|
||||
heroImageUrl.value = mediaGetVariantUrl(
|
||||
articlesData.articles[randomIndex].hero,
|
||||
"large"
|
||||
);
|
||||
heroImageTitle = articlesData.articles[randomIndex].hero.title;
|
||||
heroSlug.value = articlesData.articles[randomIndex].slug;
|
||||
|
||||
heroStyles.value.backgroundImage = `linear-gradient(to right, rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)),url('${heroImageUrl.value}')`;
|
||||
|
||||
loaded.value = true;
|
||||
}
|
||||
} catch {
|
||||
// empty
|
||||
}
|
||||
};
|
||||
|
||||
handleLoad();
|
||||
if (props.imageUrl && props.imageUrl !== "") {
|
||||
updateImageUrl(props.imageUrl);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -24,28 +24,10 @@
|
||||
:total="articlesTotal"
|
||||
:per-page="articlesPerPage" />
|
||||
<div class="articles">
|
||||
<router-link
|
||||
:to="{ name: 'article', params: { slug: article.slug } }"
|
||||
class="article-card"
|
||||
v-for="(article, idx) in articles"
|
||||
:key="idx">
|
||||
<div
|
||||
class="thumbnail"
|
||||
:style="{
|
||||
backgroundImage: `url(${mediaGetVariantUrl(
|
||||
article.hero,
|
||||
'medium'
|
||||
)})`,
|
||||
}"></div>
|
||||
<div class="info">
|
||||
{{ article.user.display_name }} -
|
||||
{{ computedDate(article.publish_at) }}
|
||||
</div>
|
||||
<h3 class="title">{{ article.title }}</h3>
|
||||
<p class="content">
|
||||
{{ excerpt(article.content) }}
|
||||
</p>
|
||||
</router-link>
|
||||
<SMArticleCard
|
||||
v-for="(article, index) in articles"
|
||||
:key="index"
|
||||
:article="article" />
|
||||
</div>
|
||||
</template>
|
||||
</SMContainer>
|
||||
@@ -57,13 +39,12 @@ import SMPagination from "../components/SMPagination.vue";
|
||||
import { api } from "../helpers/api";
|
||||
import { Article, ArticleCollection } from "../helpers/api.types";
|
||||
import { SMDate } from "../helpers/datetime";
|
||||
import { mediaGetVariantUrl } from "../helpers/media";
|
||||
import SMMastHead from "../components/SMMastHead.vue";
|
||||
import SMInput from "../components/SMInput.vue";
|
||||
import SMButton from "../components/SMButton.vue";
|
||||
import { excerpt } from "../helpers/string";
|
||||
import SMLoading from "../components/SMLoading.vue";
|
||||
import SMNoItems from "../components/SMNoItems.vue";
|
||||
import SMArticleCard from "../components/SMArticleCard.vue";
|
||||
|
||||
const message = ref("");
|
||||
const pageLoading = ref(true);
|
||||
@@ -127,10 +108,6 @@ const handleLoad = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const computedDate = (date) => {
|
||||
return new SMDate(date, { format: "yMd" }).format("d MMMM yyyy");
|
||||
};
|
||||
|
||||
watch(
|
||||
() => articlesPage.value,
|
||||
() => {
|
||||
@@ -147,43 +124,6 @@ handleLoad();
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
|
||||
.article-card {
|
||||
text-decoration: none;
|
||||
color: var(--card-color-text);
|
||||
margin-bottom: 48px;
|
||||
|
||||
&:hover {
|
||||
filter: none;
|
||||
|
||||
.thumbnail {
|
||||
filter: brightness(115%);
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 7px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-color: var(--card-color);
|
||||
box-shadow: var(--base-shadow);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 16px 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<SMHero class="hero-offset" />
|
||||
<SMHero
|
||||
class="hero-offset"
|
||||
:title="heroTitle"
|
||||
:excerpt="heroExcerpt"
|
||||
:image-url="heroImageUrl"
|
||||
:image-title="heroImageTitle"
|
||||
:to="heroTo" />
|
||||
|
||||
<SMContainer class="about align-items-center">
|
||||
<template #inner>
|
||||
@@ -23,11 +29,25 @@
|
||||
</p>
|
||||
</template>
|
||||
</SMContainer>
|
||||
<SMContainer class="upcoming align-items-center">
|
||||
<h2>Upcoming Workshops</h2>
|
||||
<div class="events">
|
||||
<SMEventCard
|
||||
v-for="event in events"
|
||||
:event="event"
|
||||
:key="event.id" />
|
||||
</div>
|
||||
</SMContainer>
|
||||
<SMContainer class="workshops align-items-center">
|
||||
<template #inner>
|
||||
<SMRow>
|
||||
<SMColumn class="align-items-center flex-basis-55">
|
||||
<h2>Build skills while having a great time</h2>
|
||||
<SMColumn
|
||||
><h2>Build skills while having a great time</h2></SMColumn
|
||||
>
|
||||
</SMRow>
|
||||
<SMRow class="align-items-stretch">
|
||||
<SMColumn
|
||||
class="align-items-center justify-content-center flex-basis-55">
|
||||
<p>
|
||||
Our online and in-person workshops are filled with
|
||||
engaging and exciting activities that kids will love.
|
||||
@@ -45,6 +65,15 @@
|
||||
</SMRow>
|
||||
</template>
|
||||
</SMContainer>
|
||||
<SMContainer class="latest-articles align-items-center">
|
||||
<h2>Latest Posts</h2>
|
||||
<div class="articles">
|
||||
<SMArticleCard
|
||||
v-for="(article, index) in articles"
|
||||
:key="index"
|
||||
:article="article" />
|
||||
</div>
|
||||
</SMContainer>
|
||||
<SMContainer full class="minecraft">
|
||||
<SMContainer>
|
||||
<h2>Play Minecraft with us</h2>
|
||||
@@ -110,8 +139,101 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import SMButton from "../components/SMButton.vue";
|
||||
import SMHero from "../components/SMHero.vue";
|
||||
import { api, getApiResultData } from "../helpers/api";
|
||||
import { ArticleCollection, EventCollection } from "../helpers/api.types";
|
||||
import { excerpt } from "../helpers/string";
|
||||
import { mediaGetVariantUrl } from "../helpers/media";
|
||||
import { SMDate } from "../helpers/datetime";
|
||||
import SMEventCard from "../components/SMEventCard.vue";
|
||||
import SMArticleCard from "../components/SMArticleCard.vue";
|
||||
|
||||
const articles = ref([]);
|
||||
const events = ref([]);
|
||||
|
||||
const heroTitle = ref("");
|
||||
const heroExcerpt = ref("");
|
||||
const heroImageUrl = ref("");
|
||||
const heroImageTitle = ref("");
|
||||
const heroTo = ref({});
|
||||
|
||||
const computedDate = (date) => {
|
||||
return new SMDate(date, { format: "yMd" }).format("d MMMM yyyy");
|
||||
};
|
||||
|
||||
const handleLoad = async () => {
|
||||
try {
|
||||
await Promise.all([
|
||||
api
|
||||
.get({
|
||||
url: "/articles",
|
||||
params: {
|
||||
limit: 5,
|
||||
},
|
||||
})
|
||||
.then((articlesResult) => {
|
||||
const articlesData =
|
||||
getApiResultData<ArticleCollection>(articlesResult);
|
||||
|
||||
if (articlesData && articlesData.articles) {
|
||||
const randomIndex = 1;
|
||||
// Math.floor(
|
||||
// Math.random() * articlesData.articles.length
|
||||
// );
|
||||
|
||||
heroTitle.value =
|
||||
articlesData.articles[randomIndex].title;
|
||||
heroExcerpt.value = excerpt(
|
||||
articlesData.articles[randomIndex].content,
|
||||
200
|
||||
);
|
||||
heroImageUrl.value = mediaGetVariantUrl(
|
||||
articlesData.articles[randomIndex].hero,
|
||||
"large"
|
||||
);
|
||||
heroImageTitle.value =
|
||||
articlesData.articles[randomIndex].hero.title;
|
||||
heroTo.value = {
|
||||
name: "article",
|
||||
params: {
|
||||
slug: articlesData.articles[randomIndex].slug,
|
||||
},
|
||||
};
|
||||
|
||||
articles.value = articlesData.articles.filter(
|
||||
(article, index) => index !== randomIndex
|
||||
);
|
||||
}
|
||||
}),
|
||||
api
|
||||
.get({
|
||||
url: "/events",
|
||||
params: {
|
||||
limit: 4,
|
||||
status: "open,soon",
|
||||
sort: "start_at",
|
||||
start_at:
|
||||
">" +
|
||||
new SMDate("now").format("yyyy-MM-dd hh:mm:ss"),
|
||||
},
|
||||
})
|
||||
.then((eventsResult) => {
|
||||
const eventsData =
|
||||
getApiResultData<EventCollection>(eventsResult);
|
||||
|
||||
if (eventsData && eventsData.events) {
|
||||
events.value = eventsData.events;
|
||||
}
|
||||
}),
|
||||
]);
|
||||
} catch {
|
||||
// Handle error
|
||||
}
|
||||
};
|
||||
|
||||
handleLoad();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -139,13 +261,35 @@ import SMHero from "../components/SMHero.vue";
|
||||
}
|
||||
}
|
||||
|
||||
.upcoming,
|
||||
.latest-articles {
|
||||
h2 {
|
||||
font-size: 250%;
|
||||
margin-bottom: #{calc(var(--header-font-size-2))};
|
||||
}
|
||||
|
||||
.events,
|
||||
.articles {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
.workshops .container-inner {
|
||||
margin: 64px 24px;
|
||||
margin: 64px 32px 32px;
|
||||
padding: 0 90px 64px 90px;
|
||||
background-color: var(--accent-3-color);
|
||||
color: var(--accent-3-color-text);
|
||||
border-radius: 24px;
|
||||
max-width: 960px;
|
||||
|
||||
h2 {
|
||||
font-size: 300%;
|
||||
text-align: center;
|
||||
color: var(--accent-3-color-text);
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -299,4 +443,35 @@ import SMHero from "../components/SMHero.vue";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 512px) {
|
||||
.page-home {
|
||||
.upcoming,
|
||||
.latest-articles {
|
||||
.events,
|
||||
.articles {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 832px) {
|
||||
.page-home {
|
||||
.upcoming,
|
||||
.latest-articles {
|
||||
.events,
|
||||
.articles {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
.event-card,
|
||||
.article-card {
|
||||
&:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<SMPage :error="pageError">
|
||||
<SMPage :page-error="pageError">
|
||||
<SMMastHead title="Workshops" />
|
||||
<SMContainer class="flex-grow-1">
|
||||
<SMToolbar class="align-items-start">
|
||||
@@ -31,57 +31,10 @@
|
||||
v-else-if="events.length == 0"
|
||||
text="No Workshops Found" />
|
||||
<div v-else class="events">
|
||||
<router-link
|
||||
class="event-card"
|
||||
<SMEventCard
|
||||
v-for="event in events"
|
||||
:key="event.id"
|
||||
:to="{ name: 'event', params: { id: event.id } }">
|
||||
<div
|
||||
class="thumbnail"
|
||||
:style="{
|
||||
backgroundImage: `url('${mediaGetVariantUrl(
|
||||
event.hero,
|
||||
'medium'
|
||||
)}')`,
|
||||
}">
|
||||
<div :class="['banner', event['bannerType']]">
|
||||
{{ event["banner"] }}
|
||||
</div>
|
||||
<div class="date">
|
||||
<div class="day">
|
||||
{{ formatDateDay(event.start_at) }}
|
||||
</div>
|
||||
<div class="month">
|
||||
{{ formatDateMonth(event.start_at) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3 class="title">{{ event.title }}</h3>
|
||||
<SMRow class="date" no-responsive>
|
||||
<ion-icon name="calendar-outline" class="icon" />
|
||||
<div class="text">{{ computedDate(event) }}</div>
|
||||
</SMRow>
|
||||
<SMRow class="location" no-responsive>
|
||||
<ion-icon name="location-outline" class="icon" />
|
||||
<div class="text">
|
||||
{{ computedLocation(event) }}
|
||||
</div>
|
||||
</SMRow>
|
||||
<SMRow class="ages" no-responsive>
|
||||
<ion-icon name="body-outline" class="icon" />
|
||||
<div class="text">
|
||||
{{ computedAges(event.ages) }}
|
||||
</div>
|
||||
</SMRow>
|
||||
<SMRow class="price" no-responsive>
|
||||
<div class="icon">$</div>
|
||||
<div class="text">
|
||||
{{ computedPrice(event.price) }}
|
||||
</div>
|
||||
</SMRow>
|
||||
</div>
|
||||
</router-link>
|
||||
:event="event"
|
||||
:key="event.id" />
|
||||
</div>
|
||||
</SMContainer>
|
||||
</SMPage>
|
||||
@@ -96,11 +49,11 @@ import SMPage from "../components/SMPage.vue";
|
||||
import { api } from "../helpers/api";
|
||||
import { Event, EventCollection } from "../helpers/api.types";
|
||||
import { SMDate } from "../helpers/datetime";
|
||||
import { mediaGetVariantUrl } from "../helpers/media";
|
||||
import SMMastHead from "../components/SMMastHead.vue";
|
||||
import SMContainer from "../components/SMContainer.vue";
|
||||
import SMNoItems from "../components/SMNoItems.vue";
|
||||
import SMLoading from "../components/SMLoading.vue";
|
||||
import SMEventCard from "../components/SMEventCard.vue";
|
||||
|
||||
const pageLoading = ref(true);
|
||||
let events: Event[] = reactive([]);
|
||||
@@ -261,112 +214,6 @@ const handleFilter = async () => {
|
||||
handleLoad();
|
||||
};
|
||||
|
||||
/**
|
||||
* Return a human readable Date string.
|
||||
*
|
||||
* @param {Event} event The event to convert.
|
||||
* @returns The converted string.
|
||||
*/
|
||||
const computedDate = (event: Event) => {
|
||||
let str = "";
|
||||
|
||||
if (event.start_at.length > 0) {
|
||||
if (
|
||||
event.end_at.length > 0 &&
|
||||
event.start_at.substring(0, event.start_at.indexOf(" ")) !=
|
||||
event.end_at.substring(0, event.end_at.indexOf(" "))
|
||||
) {
|
||||
str = new SMDate(event.start_at, { format: "yMd" }).format(
|
||||
"dd/MM/yyyy"
|
||||
);
|
||||
if (event.end_at.length > 0) {
|
||||
str =
|
||||
str +
|
||||
" - " +
|
||||
new SMDate(event.end_at, { format: "yMd" }).format(
|
||||
"dd/MM/yyyy"
|
||||
);
|
||||
}
|
||||
} else {
|
||||
str = new SMDate(event.start_at, { format: "yMd" }).format(
|
||||
"dd/MM/yyyy @ h:mm aa"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return str;
|
||||
};
|
||||
|
||||
/**
|
||||
* Return a the event starting month day number.
|
||||
*
|
||||
* @param {string} date The date to format.
|
||||
* @returns The converted string.
|
||||
*/
|
||||
const formatDateDay = (date: string) => {
|
||||
return new SMDate(date, { format: "yMd" }).format("dd");
|
||||
};
|
||||
|
||||
/**
|
||||
* Return a the event starting month name.
|
||||
*
|
||||
* @param {string} date The date to format.
|
||||
* @returns The converted string.
|
||||
*/
|
||||
const formatDateMonth = (date: string) => {
|
||||
return new SMDate(date, { format: "yMd" }).format("MMM");
|
||||
};
|
||||
|
||||
/**
|
||||
* Return a human readable Location string.
|
||||
*
|
||||
* @param {Event} event The event to convert.
|
||||
* @returns The converted string.
|
||||
*/
|
||||
const computedLocation = (event: Event): string => {
|
||||
if (event.location == "online") {
|
||||
return "Online";
|
||||
}
|
||||
|
||||
return event.address;
|
||||
};
|
||||
|
||||
/**
|
||||
* Return a human readable Ages string.
|
||||
*
|
||||
* @param {string} ages The string to convert.
|
||||
* @returns The converted string.
|
||||
*/
|
||||
const computedAges = (ages: string): string => {
|
||||
const trimmed = ages.trim();
|
||||
const regex = /^(\d+)(\s*\+?\s*|\s*-\s*\d+\s*)?$/;
|
||||
|
||||
if (trimmed.length === 0) {
|
||||
return "All ages";
|
||||
}
|
||||
|
||||
if (regex.test(trimmed)) {
|
||||
return `Ages ${trimmed}`;
|
||||
}
|
||||
|
||||
return ages;
|
||||
};
|
||||
|
||||
/**
|
||||
* Return a human readable Price string.
|
||||
*
|
||||
* @param {string} price The string to convert.
|
||||
* @returns The converted string.
|
||||
*/
|
||||
const computedPrice = (price: string): string => {
|
||||
const trimmed = parseInt(price.trim());
|
||||
if (isNaN(trimmed) || trimmed == 0) {
|
||||
return "Free";
|
||||
}
|
||||
|
||||
return trimmed.toString();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => postsPage.value,
|
||||
() => {
|
||||
@@ -384,105 +231,6 @@ handleLoad();
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
|
||||
.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;
|
||||
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user