Merge pull request #215 from vuejs-jp/enhance/event-page-section

update EventPageSection

Author: jiyuujin

apps/web/app/components/EventPageSection.vue

@@ -1,3 +1,111 @@
+<script setup lang="ts">
+import type { PanelerInfo, SpeakerCategory } from '@vuejs-jp/model'
+import EventCard from '~/components/event/EventCard.vue'
+import EventAsset from '~/components/event/EventAsset.vue'
+import EventMultipleAssets from '~/components/event/EventMultipleAssets.vue'
+import PanelerList from '~/components/event/PanelerList.vue'
+
+type _PanelerCategory = Extract<SpeakerCategory, 'panelEventPanelers'>
+type Panelers = Record<_PanelerCategory, PanelerInfo>
+
+const data = await $fetch('/api/speakers')
+const { panelEventPanelers } = data as Panelers
+</script>
+
 <template>
-  Event
+  <div class="event">
+    <div class="event-body">
+      <VFTitle id="event" color="white" class="title">
+        {{ $t('event.title') }}
+      </VFTitle>
+      <EventCard title="nextgen-frontend-crosstalk">
+        <PanelerList :panelers="panelEventPanelers.list['nextgen-frontend-crosstalk']" />
+      </EventCard>
+      <EventCard title="welcome-vuejs-community">
+        <PanelerList :panelers="panelEventPanelers.list['welcome-vuejs-community']" />
+      </EventCard>
+      <EventCard title="vuejs-handson">
+        <EventMultipleAssets />
+      </EventCard>
+      <div class="event-body-column column-2">
+        <EventCard title="creative-wall" font-class="title-2" padding-class="content-2">
+          <EventAsset title="creative-wall" />
+        </EventCard>
+        <EventCard title="free-drinks-and-snacks" font-class="title-2" padding-class="content-2">
+          <EventAsset title="free-drinks-and-snacks" />
+        </EventCard>
+        <EventCard title="tattoo-booth" font-class="title-2" padding-class="content-2">
+          <EventAsset title="tattoo-booth" :margin-top="16" />
+        </EventCard>
+        <EventCard title="cocktail-bash" font-class="title-2" padding-class="content-2" />
+        <EventCard title="sponsor-booth-fotolary" font-class="title-2" padding-class="content-2" />
+      </div>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+@import url('~/assets/media.css');
+
+.event {
+  --event-padding: calc(var(--unit) * 5.25) 0;
+  --event-body-padding: calc(var(--unit) * 6) calc(var(--unit) * 7.5);
+
+  display: flex;
+  justify-content: center;
+  background-image: url('/sponsor/sponsor-bg-grid.png'),
+    linear-gradient(to bottom, #35495e, #353b5e);
+  background-position: top -1px left -1px;
+  background-size: 30px;
+  background-blend-mode: overlay;
+  padding: var(--event-padding);
+  color: var(--color-vue-blue);
+}
+
+.event-body {
+  margin: 0 auto;
+  padding: var(--event-body-padding);
+  margin: 0 1.5%;
+  max-width: 960px;
+  display: grid;
+  gap: calc(var(--unit) * 3.75);
+}
+
+.event-body-column {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: calc(var(--unit) * 5);
+  column-gap: calc(var(--unit) * 5);
+}
+
+.column-2 div {
+  width: calc(50% - 20px);
+}
+
+.title {
+  text-align: center;
+  line-height: 1.2;
+}
+
+@media (--tablet) {
+  .event-root {
+    --event-padding: calc(var(--unit) * 2) 0;
+  }
+
+  .event-body {
+    --event-body-padding: calc(var(--unit) * 4) 4.5% calc(var(--unit) * 6);
+  }
+}
+
+@media (--mobile) {
+  .event-body-column {
+    flex-direction: column;
+    gap: calc(var(--unit) * 3.75);
+  }
+
+  .column-2 > div {
+    width: 100%;
+  }
+}
+</style>

apps/web/app/components/event/EventAsset.vue

@@ -3,27 +3,22 @@ import type { Event } from '@vuejs-jp/model'
 
 interface EventAssetProps {
   title: Extract<Event, 'creative-wall' | 'free-drinks-and-snacks' | 'tattoo-booth'>
+  marginTop?: number
 }
 
 const props = defineProps<EventAssetProps>()
 </script>
 
 <template>
-  <div class="eventcard-image">
-    <img :src="`/event/${title}.png`" alt="" />
-  </div>
+  <img :src="`/event/${title}-old.png`" alt="" class="eventcard-image" :style="{ marginTop: `${marginTop}px` }" />
 </template>
 
 <style scoped>
 .eventcard-image {
-  --head-img-width: 292px;
-}
-
-.eventcard-image ::v-deep(img) {
-  width: var(--head-img-width);
+  --head-img-height: 192px;
 
-  @media (--mobile) {
-    --head-img-width: 100%;
-  }
+  width: 100%;
+  height: var(--head-img-height);
+  object-fit: cover;
 }
 </style>

apps/web/app/components/event/EventCard.vue

@@ -3,25 +3,31 @@ import type { Event } from '@vuejs-jp/model'
 
 interface EventCardProps {
   title: Event
+  fontClass?: string
+  paddingClass?: string
 }
 
 const props = defineProps<EventCardProps>()
 </script>
 
 <template>
-  <VFEventFrame :title="$t(`event.${title.replaceAll('-', '_')}`)">
+  <VFEventFrame :title="$t(`event.${title.replaceAll('-', '_')}`)" :font-class :padding-class>
     <template #content>
       <div class="eventcard-content">
         <MarkDownText :path="title.replaceAll('-', '_')" />
       </div>
     </template>
     <template #default>
-      <slot />
+      <div class="eventcard-default">
+        <slot />
+      </div>
     </template>
   </VFEventFrame>
 </template>
 
 <style scoped>
+@import url('~/assets/media.css');
+
 .eventcard-content {
   font-size: 16px;
   font-weight: 500;
@@ -39,4 +45,12 @@ const props = defineProps<EventCardProps>()
   transition: .2s;
 }
 
+.eventcard-default {
+  border-radius: 0 0 calc(var(--unit) * 3) calc(var(--unit) * 3);
+  overflow: hidden;
+
+  @media (--mobile) {
+    border-radius: 0 0 calc(var(--unit) * 1.5) calc(var(--unit) * 1.5);
+  }
+}
 </style>

apps/web/app/components/event/EventMultipleAssets.vue

@@ -23,6 +23,7 @@ const props = withDefaults(defineProps<EventMultipleAssetsProps>(), {
 .eventcard-images {
   display: flex;
   gap: calc(var(--unit) * 1.5);
+  padding: 0 calc(var(--unit) * 2);
 
   @media (--mobile) {
     flex-direction: column;
@@ -32,6 +33,7 @@ const props = withDefaults(defineProps<EventMultipleAssetsProps>(), {
 .eventcard-images ::v-deep(img) {
   --head-img-height: 192px;
 
+  padding: 0;
   height: var(--head-img-height);
 }
 </style>

apps/web/app/components/event/PanelerList.vue

@@ -12,7 +12,6 @@ const currentLocale = useLocaleCurrent().locale
 </script>
 
 <template>
-  <h4>{{ $t('event.scheduled_speakers') }}</h4>
   <div class="eventcard-persons">
     <VFSpeaker
       v-for="paneler in panelers"
@@ -33,6 +32,7 @@ const currentLocale = useLocaleCurrent().locale
 
   display: flex;
   gap: calc(var(--unit) * 2);
+  padding: 0 calc(var(--unit) * 2);
 }
 
 .eventcard-persons ::v-deep(img) {