Skip to content

Commit 5ad70e3

Browse files
jalyn-leejalyn-lee
authored
Feat/style (#115)
* fix: findout more sponsor link * style: update alignment * enhance: page scrollToTop on reroute * chore: remove unused pkgs * style: add font-family property * chore: migrate css import from main.ts to vuetify * style: minor adjustment * style: modify fonts * style: fix card-desc-box font family
1 parent db9c0b1 commit 5ad70e3

File tree

16 files changed

+4665
-10694
lines changed

16 files changed

+4665
-10694
lines changed

‎package-lock.json‎

Lines changed: 4484 additions & 10545 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,6 @@
4242
"@typescript-eslint/eslint-plugin": "^8.3.0",
4343
"@typescript-eslint/parser": "^8.3.0",
4444
"@vitejs/plugin-vue": "^5.1.2",
45-
"@vue/cli-plugin-babel": "~5.0.8",
46-
"@vue/cli-plugin-eslint": "~5.0.8",
47-
"@vue/cli-plugin-router": "~5.0.8",
48-
"@vue/cli-plugin-typescript": "~5.0.8",
49-
"@vue/cli-service": "~5.0.8",
5045
"@vue/eslint-config-typescript": "^13.0.0",
5146
"@vueuse/head": "^2.0.0",
5247
"assert": "^2.1.0",

‎src/assets/css/index.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ html[dir="rtl"] * {
88

99
#app {
1010
max-width: 100%;
11-
font-family: Arial, Helvetica, sans-serif;
11+
font-family: var(--v-font-body);
1212
}
1313

1414
body:not(.accessible) * {
@@ -42,4 +42,12 @@ a {
4242
font-size: 30px;
4343
word-spacing: -12px;
4444
margin-bottom: 10px;
45+
}
46+
47+
.jumbo-btn {
48+
width: 100%;
49+
50+
@media (min-width: 960px){
51+
width: 80%;
52+
}
4553
}

‎src/assets/css/typography/heading.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,9 @@ h5,
1010

1111
.rbcn-font {
1212
font-family: var(--v-font-rbcn);
13+
}
14+
15+
.courier-font {
16+
font-family: var(--v-font-body);
17+
1318
}

‎src/components/cards/EventCard.vue‎

Lines changed: 45 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
11
<template>
22
<h3 v-if="props.title" class="event-title text-secondary mb-5">{{ props.title }}</h3>
33

4-
<div v-if="props.datasets" class="card-wrapper">
5-
<v-card v-for="(event) in props.datasets.data" color="surface-bright" class="py-1 card-border" elevation="0"
6-
:to="props.href ?? ''">
7-
<v-card-item>
8-
<div class="d-flex justify-between align-baseline">
9-
<h4 class="w-100 text-capitalize"> {{ event.name }}</h4>
10-
<h5 v-if="event?.date" class="date-time"> {{ event.date }}</h5>
11-
</div>
12-
</v-card-item>
13-
14-
<v-card-text class="pt-4 card-text-base">
15-
<div class="d-flex flex-column ga-3">
16-
<p v-if="event?.title || event?.sub_title" :class="event?.sub_title ? 'card-subtitle' : 'card-title'">
17-
{{ event?.title || event?.sub_title }}
18-
</p>
19-
<p class="text-grey-90">
20-
{{ event.description }}
21-
</p>
22-
23-
<v-list v-if="event.key_points" lines="one" bgColor="transparent">
24-
<v-list-item class="text-grey-90 pa-0" v-for="(keyPoint) in event?.key_points" slim density="compact">
25-
{{ keyPoint }}
26-
</v-list-item>
27-
</v-list>
28-
</div>
29-
</v-card-text>
30-
</v-card>
4+
<div v-if="props.datasets">
5+
<div :class="[props.isEventPage ? 'card-wrapper' : 'card-slider']">
6+
<v-card v-for="(event) in props.datasets.data" color="surface-bright"
7+
:class="['py-1 card-border', props.isEventPage ? '' : 'fixed-width']" elevation="0" :to="props.href ?? ''">
8+
<v-card-item>
9+
<div class="d-flex justify-between align-baseline">
10+
<h4 class="w-100 text-capitalize"> {{ event.name }}</h4>
11+
<h5 v-if="event?.date" class="date-time"> {{ event.date }}</h5>
12+
</div>
13+
</v-card-item>
14+
15+
<v-card-text class="pt-4 card-text-base">
16+
<div class="d-flex flex-column ga-3">
17+
<p v-if="event?.title || event?.sub_title" :class="event?.sub_title ? 'card-subtitle' : 'card-title'">
18+
{{ event?.title || event?.sub_title }}
19+
</p>
20+
<p class="text-grey-90">
21+
{{ event.description }}
22+
</p>
23+
24+
<v-list v-if="event.key_points" lines="one" bgColor="transparent">
25+
<v-list-item class="text-grey-90 pa-0" v-for="(keyPoint) in event?.key_points" slim density="compact">
26+
{{ keyPoint }}
27+
</v-list-item>
28+
</v-list>
29+
</div>
30+
</v-card-text>
31+
</v-card>
32+
</div>
3133
</div>
3234
</template>
3335

@@ -50,6 +52,15 @@ const props = defineProps({
5052
</script>
5153

5254
<style scoped>
55+
.card-slider {
56+
display: flex;
57+
overflow-x: auto;
58+
59+
@media (max-width: 800px) {
60+
flex-wrap: wrap;
61+
}
62+
}
63+
5364
.card-wrapper {
5465
display: grid;
5566
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
@@ -62,6 +73,10 @@ const props = defineProps({
6273
6374
.card-border {
6475
border: 1px solid rgb(var(--v-theme-surface-dark)) !important;
76+
77+
&.fixed-width {
78+
width: 450px;
79+
}
6580
}
6681
6782
.date-time {
@@ -84,18 +99,18 @@ const props = defineProps({
8499
}
85100
86101
.card-title {
87-
font-size: 20px;
102+
font-size: 15px;
88103
font-weight: 600;
89104
font-family: var(--v-font-body);
90105
color: rgb(var(--v-theme-grey-70));
91106
92107
@media screen and (max-width: 600px) {
93-
font-size: 18px;
108+
font-size: 16px;
94109
}
95110
}
96111
97112
.card-subtitle {
98-
font-size: 16px;
113+
font-size: 14px;
99114
font-weight: 600;
100115
line-height: 1.1;
101116
font-family: var(--v-font-body);

‎src/components/cards/SponsorCard.vue‎

Lines changed: 1 addition & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<v-card flat color="grey" variant="outlined" class="px-7 py-5 bg-white">
3-
<h4 class="title text-h6 mb-4 text-grey-90 font-weight-bold">{{ props.title }}</h4>
3+
<h4 class="title title-font text-h6 mb-4 text-grey-90 font-weight-bold">{{ props.title }}</h4>
44
<template v-if="computedData?.data?.target?.fields?.cardBody">
55
<template v-for="content in computedData.data.target.fields.cardBody?.content">
66
<template v-if="content.data.target?.fields">
@@ -29,56 +29,6 @@ const props = defineProps({
2929
});
3030
3131
const computedData = computed(() => props.cardBody.content?.[0]?.content?.filter((_content) => _content?.nodeType === 'embedded-entry-inline')?.[0])
32-
33-
// const fullWidth = { class: "w-100" }
34-
35-
// function getCardBorderColor(key) {
36-
// if (key.match(/gold/gi)) {
37-
// return 'gold'
38-
// } else if (key.match(/silver/gi)) {
39-
// return 'grey'
40-
// } else if (key.match(/platinum/gi)) {
41-
// return 'gold'
42-
// }
43-
// }
44-
45-
// function renderNodes(node) {
46-
47-
// const wrapperWidth = props.numOfCards ? { style: `display: grid; grid-template-columns: repeat(${props.numOfCards}, 1fr); gap: 12px;` } : { class: 'w-100 mb-2' }
48-
49-
// return {
50-
// [BLOCKS.PARAGRAPH]: (node, key, next) => h("div", wrapperWidth, next(node.content, key, next)),
51-
// [BLOCKS.UL_LIST]: (node, key, next) => h("div", { class: "list" }, next(node.content, key, next)),
52-
// [BLOCKS.LIST_ITEM]: (node, key, next) => h("div", { class: "listItem" }, next(node.content, key, next)),
53-
// [BLOCKS.HEADING_2]: (node, key, next) =>
54-
// h("h2", fullWidth, next(node.content, key, next)),
55-
// [BLOCKS.HEADING_3]: (node, key, next) =>
56-
// h("h3", { class: "text-secondary", style: "font-size: 22px; word-spacing: -10px;" }, next(node.content, key, next)),
57-
// [BLOCKS.HEADING_4]: (node, key, next) =>
58-
// h("h4", fullWidth, next(node.content, key, next)),
59-
// [BLOCKS.HEADING_5]: (node, key, next) =>
60-
// h("h5", { class: 'w-100 text-h6 font-weight-bold text-secondary' }, next(node.content, key, next)),
61-
// [BLOCKS.HEADING_6]: (node, key, next) =>
62-
// h("h6", { class: "text-subtitle-1 ont-weight-bold mt-2" }, next(node.content, key, next)),
63-
// [BLOCKS.EMBEDDED_ASSET]: (node) => {
64-
// const target = node.data.target;
65-
// const file = target.fields.file
66-
67-
// return file.contentType.includes("image")
68-
// ? h("img", { src: file.url, ...(get(file, "details.image") ?? {}) })
69-
// : undefined;
70-
// },
71-
// "embedded-asset-block": (node) => {
72-
// const target = node.data.target;
73-
// const file = target.fields.file
74-
75-
76-
// return file.contentType.includes("image")
77-
// ? h("img", { src: file.url, ...(get(file, "details.image") ?? {}) })
78-
// : undefined;
79-
// },
80-
// };
81-
// }
8232
</script>
8333
8434

‎src/components/footer/PageFooter.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<v-col v-for="(footer) in store.getFooter" class="col-sm-6 col-md-3 ga-3">
77
<div :class="[index > 0 ? 'mt-2' : '', 'd-flex flex-column']" v-for="(item, index) in footer">
88
<template v-if="item?.address">
9-
<div class="address">
9+
<div class="address courier-font">
1010
{{ item.address }}
1111
</div>
1212
</template>

‎src/components/sections/PageSection.vue‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<template>
2-
<template v-if="computedData.data?.target?.fields">
3-
<v-responsive :class="['content-wrapper', props.hasHeaderMargin ? '' : 'py-4']">
2+
<template v-if="computedData.data.target.fields">
3+
<v-responsive
4+
:class="['content-wrapper', props.hasDescription ? 'compact-wrapper' : '', props.hasHeaderMargin ? '' : 'py-4']">
45
<div v-if="props.isResponsiveContainer"
56
:class="[props.hasHeaderMargin ? 'mb-3' : '', 'd-flex ga-3 align-baseline']">
6-
<h1 v-if="computedData.data.target.fields?.showTitle"
7-
:class="[props.offsetColor ? 'text-white' : 'text-secondary', 'section-title']">
7+
<h1 v-if="computedData.data.target.fields?.showTitle" :class="[
8+
props.offsetColor ? 'text-white' : 'text-secondary',
9+
'section-title']">
810
{{ computedData.data.target.fields.shownTitle }}
911
</h1>
1012
<slot name="subTitle" />
@@ -164,6 +166,8 @@ function getParagraphStyle(sectionKey) {
164166
return { class: sectionKey?.startsWith('ticket_section_2025') ? 'slider-group' : 'auto-fit-grid' }
165167
} else if (sectionKey.startsWith("event_page_intro")) {
166168
return { class: 'mt-5 mb-3' }
169+
} else if (sectionKey.startsWith("event_section_2025")) {
170+
return { class: 'slider-event-card-group' }
167171
}
168172
169173
return props.numOfCards ? { style: `display: grid; grid-template-columns: repeat(${props.numOfCards}, 1fr); gap: ${isEventSection ? 0 : 12}px;` } : { class: 'w-100' };
@@ -224,22 +228,37 @@ function renderNodes() {
224228
</script>
225229
226230
<style lang="scss">
231+
.compact-wrapper {
232+
margin: 0 auto;
233+
max-width: 780px;
234+
235+
236+
@media (max-width: 599.9px) {
237+
max-width: 400px;
238+
}
239+
}
240+
241+
242+
.slider-event-card-group,
227243
.slider-group {
228244
display: flex;
229245
flex-wrap: nowrap;
230246
overflow-x: auto;
231247
overflow-y: hidden;
232248
gap: 12px;
233249
align-items: center;
234-
height: 280px;
235250
justify-content: space-around;
251+
}
252+
253+
.slider-group {
254+
height: 260px;
236255
237256
@media (max-width: 800px) and (min-width: 600px) {
238-
height: 220px;
257+
height: 230px;
239258
}
240259
241260
@media (max-width: 599.9px) {
242-
height: 170px;
261+
height: 190px;
243262
}
244263
}
245264

0 commit comments

Comments
 (0)