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
robotframework · Sep 5, 2024 · 5ad70e3 · 5ad70e3
1 parent db9c0b1
commit 5ad70e3
Show file tree

Hide file tree

Showing 16 changed files with 4,665 additions and 10,694 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,11 +42,6 @@
     "@typescript-eslint/eslint-plugin": "^8.3.0",
     "@typescript-eslint/parser": "^8.3.0",
     "@vitejs/plugin-vue": "^5.1.2",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-router": "~5.0.8",
-    "@vue/cli-plugin-typescript": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vueuse/head": "^2.0.0",
     "assert": "^2.1.0",

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
@@ -8,7 +8,7 @@ html[dir="rtl"] * {
 
 #app {
   max-width: 100%;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--v-font-body);
 }
 
 body:not(.accessible) * {
@@ -42,4 +42,12 @@ a {
   font-size: 30px;
   word-spacing: -12px;
   margin-bottom: 10px;
+}
+
+.jumbo-btn {
+  width: 100%;
+
+  @media (min-width: 960px){
+    width: 80%;
+  }
 }
diff --git a/src/assets/css/typography/heading.css b/src/assets/css/typography/heading.css
@@ -10,4 +10,9 @@ h5,
 
 .rbcn-font {
   font-family: var(--v-font-rbcn);
+}
+
+.courier-font {
+  font-family: var(--v-font-body);
+
 }
diff --git a/src/components/cards/EventCard.vue b/src/components/cards/EventCard.vue
@@ -1,33 +1,35 @@
 <template>
   <h3 v-if="props.title" class="event-title text-secondary mb-5">{{ props.title }}</h3>
 
-  <div v-if="props.datasets" class="card-wrapper">
-    <v-card v-for="(event) in props.datasets.data" color="surface-bright" class="py-1 card-border" elevation="0"
-      :to="props.href ?? ''">
-      <v-card-item>
-        <div class="d-flex justify-between align-baseline">
-          <h4 class="w-100 text-capitalize"> {{ event.name }}</h4>
-          <h5 v-if="event?.date" class="date-time"> {{ event.date }}</h5>
-        </div>
-      </v-card-item>
-
-      <v-card-text class="pt-4 card-text-base">
-        <div class="d-flex flex-column ga-3">
-          <p v-if="event?.title || event?.sub_title" :class="event?.sub_title ? 'card-subtitle' : 'card-title'">
-            {{ event?.title || event?.sub_title }}
-          </p>
-          <p class="text-grey-90">
-            {{ event.description }}
-          </p>
-
-          <v-list v-if="event.key_points" lines="one" bgColor="transparent">
-            <v-list-item class="text-grey-90 pa-0" v-for="(keyPoint) in event?.key_points" slim density="compact">
-              {{ keyPoint }}
-            </v-list-item>
-          </v-list>
-        </div>
-      </v-card-text>
-    </v-card>
+  <div v-if="props.datasets">
+    <div :class="[props.isEventPage ? 'card-wrapper' : 'card-slider']">
+      <v-card v-for="(event) in props.datasets.data" color="surface-bright"
+        :class="['py-1 card-border', props.isEventPage ? '' : 'fixed-width']" elevation="0" :to="props.href ?? ''">
+        <v-card-item>
+          <div class="d-flex justify-between align-baseline">
+            <h4 class="w-100 text-capitalize"> {{ event.name }}</h4>
+            <h5 v-if="event?.date" class="date-time"> {{ event.date }}</h5>
+          </div>
+        </v-card-item>
+
+        <v-card-text class="pt-4 card-text-base">
+          <div class="d-flex flex-column ga-3">
+            <p v-if="event?.title || event?.sub_title" :class="event?.sub_title ? 'card-subtitle' : 'card-title'">
+              {{ event?.title || event?.sub_title }}
+            </p>
+            <p class="text-grey-90">
+              {{ event.description }}
+            </p>
+
+            <v-list v-if="event.key_points" lines="one" bgColor="transparent">
+              <v-list-item class="text-grey-90 pa-0" v-for="(keyPoint) in event?.key_points" slim density="compact">
+                {{ keyPoint }}
+              </v-list-item>
+            </v-list>
+          </div>
+        </v-card-text>
+      </v-card>
+    </div>
   </div>
 </template>
 
@@ -50,6 +52,15 @@ const props = defineProps({
 </script>
 
 <style scoped>
+.card-slider {
+  display: flex;
+  overflow-x: auto;
+
+  @media (max-width: 800px) {
+    flex-wrap: wrap;
+  }
+}
+
 .card-wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
@@ -62,6 +73,10 @@ const props = defineProps({
 
 .card-border {
   border: 1px solid rgb(var(--v-theme-surface-dark)) !important;
+
+  &.fixed-width {
+    width: 450px;
+  }
 }
 
 .date-time {
@@ -84,18 +99,18 @@ const props = defineProps({
 }
 
 .card-title {
-  font-size: 20px;
+  font-size: 15px;
   font-weight: 600;
   font-family: var(--v-font-body);
   color: rgb(var(--v-theme-grey-70));
 
   @media screen and (max-width: 600px) {
-    font-size: 18px;
+    font-size: 16px;
   }
 }
 
 .card-subtitle {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
   line-height: 1.1;
   font-family: var(--v-font-body);

diff --git a/src/components/cards/SponsorCard.vue b/src/components/cards/SponsorCard.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card flat color="grey" variant="outlined" class="px-7 py-5 bg-white">
-    <h4 class="title text-h6 mb-4 text-grey-90 font-weight-bold">{{ props.title }}</h4>
+    <h4 class="title title-font text-h6 mb-4 text-grey-90 font-weight-bold">{{ props.title }}</h4>
     <template v-if="computedData?.data?.target?.fields?.cardBody">
       <template v-for="content in computedData.data.target.fields.cardBody?.content">
         <template v-if="content.data.target?.fields">
@@ -29,56 +29,6 @@ const props = defineProps({
 });
 
 const computedData = computed(() => props.cardBody.content?.[0]?.content?.filter((_content) => _content?.nodeType === 'embedded-entry-inline')?.[0])
-
-// const fullWidth = { class: "w-100" }
-
-// function getCardBorderColor(key) {
-//   if (key.match(/gold/gi)) {
-//     return 'gold'
-//   } else if (key.match(/silver/gi)) {
-//     return 'grey'
-//   } else if (key.match(/platinum/gi)) {
-//     return 'gold'
-//   }
-// }
-
-// function renderNodes(node) {
-
-//   const wrapperWidth = props.numOfCards ? { style: `display: grid; grid-template-columns: repeat(${props.numOfCards}, 1fr); gap: 12px;` } : { class: 'w-100 mb-2' }
-
-//   return {
-//     [BLOCKS.PARAGRAPH]: (node, key, next) => h("div", wrapperWidth, next(node.content, key, next)),
-//     [BLOCKS.UL_LIST]: (node, key, next) => h("div", { class: "list" }, next(node.content, key, next)),
-//     [BLOCKS.LIST_ITEM]: (node, key, next) => h("div", { class: "listItem" }, next(node.content, key, next)),
-//     [BLOCKS.HEADING_2]: (node, key, next) =>
-//       h("h2", fullWidth, next(node.content, key, next)),
-//     [BLOCKS.HEADING_3]: (node, key, next) =>
-//       h("h3", { class: "text-secondary", style: "font-size: 22px; word-spacing: -10px;" }, next(node.content, key, next)),
-//     [BLOCKS.HEADING_4]: (node, key, next) =>
-//       h("h4", fullWidth, next(node.content, key, next)),
-//     [BLOCKS.HEADING_5]: (node, key, next) =>
-//       h("h5", { class: 'w-100 text-h6 font-weight-bold text-secondary' }, next(node.content, key, next)),
-//     [BLOCKS.HEADING_6]: (node, key, next) =>
-//       h("h6", { class: "text-subtitle-1 ont-weight-bold mt-2" }, next(node.content, key, next)),
-//     [BLOCKS.EMBEDDED_ASSET]: (node) => {
-//       const target = node.data.target;
-//       const file = target.fields.file
-
-//       return file.contentType.includes("image")
-//         ? h("img", { src: file.url, ...(get(file, "details.image") ?? {}) })
-//         : undefined;
-//     },
-//     "embedded-asset-block": (node) => {
-//       const target = node.data.target;
-//       const file = target.fields.file
-
-
-//       return file.contentType.includes("image")
-//         ? h("img", { src: file.url, ...(get(file, "details.image") ?? {}) })
-//         : undefined;
-//     },
-//   };
-// }
 </script>
 
 

diff --git a/src/components/footer/PageFooter.vue b/src/components/footer/PageFooter.vue
@@ -6,7 +6,7 @@
           <v-col v-for="(footer) in store.getFooter" class="col-sm-6 col-md-3 ga-3">
             <div :class="[index > 0 ? 'mt-2' : '', 'd-flex flex-column']" v-for="(item, index) in footer">
               <template v-if="item?.address">
-                <div class="address">
+                <div class="address courier-font">
                   {{ item.address }}
                 </div>
               </template>

diff --git a/src/components/sections/PageSection.vue b/src/components/sections/PageSection.vue
@@ -1,10 +1,12 @@
 <template>
-  <template v-if="computedData.data?.target?.fields">
-    <v-responsive :class="['content-wrapper', props.hasHeaderMargin ? '' : 'py-4']">
+  <template v-if="computedData.data.target.fields">
+    <v-responsive
+      :class="['content-wrapper', props.hasDescription ? 'compact-wrapper' : '', props.hasHeaderMargin ? '' : 'py-4']">
       <div v-if="props.isResponsiveContainer"
         :class="[props.hasHeaderMargin ? 'mb-3' : '', 'd-flex ga-3 align-baseline']">
-        <h1 v-if="computedData.data.target.fields?.showTitle"
-          :class="[props.offsetColor ? 'text-white' : 'text-secondary', 'section-title']">
+        <h1 v-if="computedData.data.target.fields?.showTitle" :class="[
+          props.offsetColor ? 'text-white' : 'text-secondary',
+          'section-title']">
           {{ computedData.data.target.fields.shownTitle }}
         </h1>
         <slot name="subTitle" />
@@ -164,6 +166,8 @@ function getParagraphStyle(sectionKey) {
     return { class: sectionKey?.startsWith('ticket_section_2025') ? 'slider-group' : 'auto-fit-grid' }
   } else if (sectionKey.startsWith("event_page_intro")) {
     return { class: 'mt-5 mb-3' }
+  } else if (sectionKey.startsWith("event_section_2025")) {
+    return { class: 'slider-event-card-group' }
   }
 
   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() {
 </script>
 
 <style lang="scss">
+.compact-wrapper {
+  margin: 0 auto;
+  max-width: 780px;
+
+
+  @media (max-width: 599.9px) {
+    max-width: 400px;
+  }
+}
+
+
+.slider-event-card-group,
 .slider-group {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
   gap: 12px;
   align-items: center;
-  height: 280px;
   justify-content: space-around;
+}
+
+.slider-group {
+  height: 260px;
 
   @media (max-width: 800px) and (min-width: 600px) {
-    height: 220px;
+    height: 230px;
   }
 
   @media (max-width: 599.9px) {
-    height: 170px;
+    height: 190px;
   }
 }