Merge pull request #596 from vuejs-jp/enhance/related-events-layout

Events page

Author: jiyuujin

app/assets/locale/all.ts

@@ -131,6 +131,10 @@ export default {
       medpeer_hacomono_mntsq_event_title: 'kazuponさん登壇！Vue Fes Japan 2023 After Meetup',
       medpeer_hacomono_mntsq_event_detail:
         'Vue Fes Japan 2023 のアフターイベントとして、メドピア株式会社、MNTSQ株式会社、及び株式会社hacomonoが合同でイベントを開催します。 Vue.js 日本ユーザーグループ代表の kazupon さんを特別ゲストとして迎え、セッションやパネルディスカッションを行います。 5年ぶりのオフラインでの開催となる Vue Fes Japan 2023 の感想や思い出を語り合いましょう！',
+      line_yahoo_communications_event_title:
+        '【福岡開催】Vue Fes Japan 2023 After Meetup in Fukuoka',
+      line_yahoo_communications_event_detail:
+        'Vue Fes Japan 2023 の報告会を、LINEヤフーコミュニケーションズのカフェスペースでオフラインにて開催いたします。 この報告会では Vue Fes Japan 2023 でも取り上げられていた、今後のVueとRustの関係について、kazuponさんにお話しいただきます。 また、ブーススポンサーを務めたLINEヤフーコミュニケーションズのエンジニアの方も登壇予定です。',
       /**
        * ticket section
        */
@@ -540,6 +544,10 @@ export default {
         'kazupon will be speaking at Vue Fes Japan 2023 After Meetup!',
       medpeer_hacomono_mntsq_event_detail:
         "Medpeer, Inc., MNTSQ, LTD. and hacomono, Inc. will hold a joint event as an after event of Vue Fes Japan 2023. Vue.js Japan User Group Representative, Mr. Kazupon, will be a special guest at the event, which will include sessions and panel discussions. Let's discuss your thoughts and memories of Vue Fes Japan 2023, the first offline event in 5 years!",
+      line_yahoo_communications_event_title:
+        '[Held in Fukuoka] Vue Fes Japan 2023 After Meetup in Fukuoka',
+      line_yahoo_communications_event_detail:
+        'Vue Fes Japan 2023 debriefing will be held offline at the LINE Yahoo Communications café space. In this debriefing session, kazupon will talk about the future relationship between Vue and Rust, which was also covered at Vue Fes Japan 2023. Also, an engineer from LINE Yahoo Communications, who was a booth sponsor, will be speaking at the event.',
       /**
        * ticket section
        */

app/components/event/EventCard.vue

@@ -23,7 +23,9 @@ const props = defineProps({
 
 <template>
   <div class="event-card">
-    <img width="690" height="388" :alt="alt" :src="src" decoding="async" />
+    <div class="img-wrapper">
+      <img width="690" height="388" :alt="alt" :src="src" decoding="async" />
+    </div>
     <div class="title">
       <slot name="title" />
     </div>
@@ -43,9 +45,11 @@ css({
   '.event-card': {
     '--img-size': '475px',
     maxWidth: '475px',
-    display: 'flex',
-    flexDirection: 'column',
+    display: 'grid',
     gap: '0.6em',
+    '.img-wrapper': {
+      height: '280px',
+    },
     '.title': {
       fontWeight: 'bold',
       fontSize: '22px',
@@ -83,12 +87,12 @@ css({
     '.event-card': {
       '--img-size': '690px',
       maxWidth: '690px',
+      '.img-wrapper': {
+        height: '100%',
+      },
       '.title': {
         fontSize: '16px',
       },
-      '.description': {
-        marginTop: 'calc({space.8} * 1)',
-      },
     },
   },
 })

app/pages/events.vue

@@ -47,6 +47,19 @@ useHead({
             {{ $t('top.medpeer_hacomono_mntsq_event_detail') }}
           </template>
         </EventCard>
+        <EventCard
+          src="/event/after-event/line-yahoo-communications.png"
+          :alt="$t('top.line_yahoo_communications_event_title')"
+          register-url="https://fukuokajs.connpass.com/event/302013/"
+          :register-text="$t('words.attendee_register')"
+        >
+          <template #title>
+            {{ $t('top.line_yahoo_communications_event_title') }}
+          </template>
+          <template #description>
+            {{ $t('top.line_yahoo_communications_event_detail') }}
+          </template>
+        </EventCard>
       </div>
 
       <div class="back">
@@ -80,9 +93,6 @@ css({
     padding: 'calc({space.8} * 10) 11.53%',
     color: '{color.vue.blue}',
     background: '{color.white}',
-    '::v-deep(.title)': {
-      marginBottom: 'calc({space.8} * 10)',
-    },
     '::v-deep(p)': {
       fontWeight: 500,
       fontSize: '18px',
@@ -120,9 +130,6 @@ css({
     },
     '.events-root': {
       padding: 'calc({space.8} * 10) calc({space.8} * 3)',
-      '::v-deep(.title)': {
-        marginBottom: 'calc({space.8} * 6)',
-      },
       '::v-deep(h2)': {
         fontSize: '20px',
       },