feat(poster-session): add poster-session UI

assets/css/tailwind.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+    .line-clamp-5 {
+        overflow: hidden;
+        display: -webkit-box;
+        line-clamp: 5;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 5;
+    }
+}

components/core/header/nav-bar/NavBar.i18n.js

@@ -33,7 +33,8 @@ export default genI18nMessages({
         accommodation: 'Accommodation',
         proposalSystemUrl: 'Proposal System',
         codeOfConduct: 'Code of Conduct',
-        posterSession: 'Call for Poster',
+        cfpPoster: 'Propose a Poster',
+        posterSession: 'Poster Session',
     },
     'zh-hant': {
         about: '關於',
@@ -67,6 +68,7 @@ export default genI18nMessages({
         accommodation: '住宿資訊',
         proposalSystemUrl: '投稿系統',
         codeOfConduct: '行為準則',
-        posterSession: 'Poster 募集',
+        cfpPoster: '如何投稿海報',
+        posterSession: '海報環節',
     },
 })

components/core/header/nav-bar/nav-bar-items.js

@@ -8,7 +8,7 @@ export default Object.freeze({
     ],
     speaking: [
         { i18nKey: 'cfp', value: '/speaking/cfp' },
-        { i18nKey: 'posterSession', value: '/speaking/poster-session' },
+        { i18nKey: 'cfpPoster', value: '/speaking/cfp-poster' },
         { i18nKey: 'talk', value: '/speaking/talk' },
         { i18nKey: 'tutorial', value: '/speaking/tutorial' },
         { i18nKey: 'recording', value: '/speaking/recording' },
@@ -18,6 +18,7 @@ export default Object.freeze({
         { i18nKey: 'talks', value: '/conference/talks' },
         { i18nKey: 'tutorials', value: '/conference/tutorials' },
         { i18nKey: 'panelDiscussion', value: '/conference/panel-discussion' },
+        { i18nKey: 'posterSession', value: '/conference/poster-session' },
     ],
     events: [
         { i18nKey: 'sprints', value: '/events/sprints' },

i18n/about/history.i18n.js

@@ -133,7 +133,7 @@ export default genI18nMessages({
                 'Last year, PyCon Taiwan guided attendees back to physical conferences from the virtual world. ' +
                 'In PyCon Taiwan 2024, we’re taking attendees to Kaohsiung! ' +
                 'Drawing inspiration from other Python Conferences worldwide, this year’s program ' +
-                'introduces Poster Sessions to bridge the gap between speakers and attendees. ' +
+                'introduces Poster Session to bridge the gap between speakers and attendees. ' +
                 'We aim to foster closer connections through face-to-face discussions, sparking creativity and exchanging ideas.',
         },
         terms: {

i18n/about/index.i18n.js

@@ -33,7 +33,7 @@ export default genI18nMessages({
             'and at the same time to meet many friends from various parties in the exchange activities.',
         activityDetails: [
             'Speeches include: keynote speeches, general speeches, professional courses',
-            'Activities include: sprint, open space, lightning talk, JobFair, Poster Sessions, PyNight',
+            'Activities include: sprint, open space, lightning talk, JobFair, Poster Session, PyNight',
         ],
         moreInfo:
             'If you want to learn more about each event or want to register for the above events, ' +
@@ -69,7 +69,7 @@ export default genI18nMessages({
             '可以說是非常多元有趣，讓你可以從演講中吸取知識的同時，還能在交流活動中結識許多各方好友。',
         activityDetails: [
             '演講包括：主題演講、一般演講、專業課程',
-            '交流活動包括：衝刺開發、開放空間、閃電秀、Poster Sessions、JobFair、PyNight',
+            '交流活動包括：衝刺開發、開放空間、閃電秀、海報環節、JobFair、PyNight',
         ],
         moreInfo:
             '若想要深入了解各活動或是想要報名以上活動，歡迎到議程總覽頁面觀看。',

i18n/speaking/poster-session.i18n.js → i18n/speaking/cfp-poster.i18n.js

@@ -61,17 +61,17 @@ export default genI18nMessages({
         },
     },
     'zh-hant': {
-        title: 'Poster Session 稿件募集',
+        title: '如何投稿海報',
         intro: [
-            'Poster Session 是一個讓投稿者可以透過海報展示其分享內容，並與個別與會者直接互動的一種展示形式。在 PyCon Taiwan 2024 我們初次嘗試 Poster Session 的活動，希望可以讓更多人介紹自己的成果或是關注的議題。您可以投稿任何跟 Python 有關的主題，屆時將以海報形式展出，然後與會者可與您直接互動。',
+            '海報環節是一個讓投稿者可以透過海報展示其分享內容，並與個別與會者直接互動的一種展示形式。在 PyCon Taiwan 2024 我們初次嘗試海報募集的活動，希望可以讓更多人介紹自己的成果或是關注的議題。您可以投稿任何跟 Python 有關的主題，屆時將以海報形式展出，然後與會者可與您直接互動。',
         ],
         info: {
             importantDates: {
                 title: '重要日期',
                 description: [
                     '大會日期： 9/21 - 9/22',
-                    'Poster 開放徵稿：2024 年 05 月 01 日',
-                    'Poster 徵稿截止：2024 年 06 月 30 日 23:59:59 ({aoe})',
+                    '海報開放徵稿：2024 年 05 月 01 日',
+                    '海報徵稿截止：2024 年 06 月 30 日 23:59:59 ({aoe})',
                     '稿件錄取通知：2024 年 07 月 13 日',
                 ],
                 steps: [],
@@ -80,7 +80,7 @@ export default genI18nMessages({
             howToSubmit: {
                 title: '提交稿件',
                 description: [
-                    '請您前往 {posterForm} 進行投稿，提供 Poster 的主題、摘要、內容說明，以及填妥您的個人資訊。',
+                    '請您前往 {posterForm} 進行投稿，提供海報的主題、摘要、內容說明，以及填妥您的個人資訊。',
                     '背板尺寸 900mm x 1800mm，在上述尺寸內允許多張海報',
                 ],
                 steps: [],
@@ -111,12 +111,12 @@ export default genI18nMessages({
         terms: {
             aoe: 'AoE',
             coc: '行為準則',
-            posterForm: 'Poster Session 投稿表單',
+            posterForm: '海報投稿表單',
         },
 
         og: {
-            title: 'Poster Session 稿件募集',
-            description: '首先，謝謝您考慮投稿 Poster 至 PyCon Taiwan 2024。',
+            title: '海報稿件募集',
+            description: '首先，謝謝您考慮投稿海報至 PyCon Taiwan 2024。',
         },
     },
 })

pages/conference/_components/modal/Modal.vue

@@ -0,0 +1,44 @@
+<template>
+    <div
+        v-show="shouldShowModal"
+        class="fixed left-0 top-0 z-[9998] flex h-screen w-full items-center justify-center bg-[rgba(18,16,35,0.6)] backdrop-blur-[5px]"
+    >
+        <div class="absolute z-[9999] h-full w-full" @click="close"></div>
+        <div
+            class="relative z-[10000] flex w-11/12 flex-col rounded-3xl border-3 border-pink-500 bg-black-900 px-4 py-5 md:w-4/5 md:max-w-2xl md:border-2 md:px-12 md:pb-6 md:pt-14"
+        >
+            <div
+                class="absolute right-[17px] top-[17px] ml-auto flex cursor-pointer text-pink-500 md:right-[38.5px] md:top-[39.25px]"
+                @click="close"
+            >
+                <fa icon="times" class="h-5 w-5" />
+            </div>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Modal',
+    props: {
+        value: { type: Boolean, default: false },
+    },
+    data() {
+        return {
+            shouldShowModal: this.value,
+        }
+    },
+    watch: {
+        value(newVal) {
+            this.shouldShowModal = newVal
+        },
+    },
+    methods: {
+        close() {
+            this.shouldShowModal = false
+            this.$emit('input', false)
+        },
+    },
+}
+</script>

pages/conference/_eventType/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="lg:py24 py-10 md:py-24">
+    <div class="py-10 md:py-24">
         <banner>
             <core-h1 :title="title"></core-h1>
             <p class="leading-6">

pages/conference/poster-session.vue

@@ -0,0 +1,161 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+    <div class="poster-session">
+        <banner>
+            <core-h1 :title="$t('title')"></core-h1>
+            <i18n path="intro" tag="p" class="intro">
+                <template #br><br /></template>
+            </i18n>
+        </banner>
+        <i18n-page-wrapper class="px-2 sm:px-8 md:px-16 lg:px-32" custom-x>
+            <div class="poster-session__container">
+                <article
+                    v-for="poster in $t('posters')"
+                    :id="poster.id"
+                    :key="poster.id"
+                    class="poster-session__card"
+                    @click="showModal(poster)"
+                >
+                    <div class="mb-6 text-right text-xs">
+                        {{ poster.type }}
+                    </div>
+                    <div
+                        class="line-clamp-5 five-line-height mb-6 text-[#CDCBFF]"
+                    >
+                        {{ poster.title }}
+                    </div>
+                    <div
+                        class="mb-2 flex flex-wrap gap-x-1 text-xs text-[#BB75BC]"
+                    >
+                        <span>
+                            {{ poster.name }}
+                        </span>
+                        <span>
+                            {{
+                                `${poster.community && '|'} ${poster.community}`
+                            }}
+                        </span>
+                    </div>
+                    <div
+                        class="flex flex-1 flex-col items-start justify-end gap-y-1 text-center text-[10px]"
+                    >
+                        <span
+                            v-for="topic in poster.topics"
+                            :id="topic"
+                            :key="topic"
+                            class="rounded-md bg-[#BB75BC] p-1 text-[#000]"
+                        >
+                            {{ topic }}
+                        </span>
+                    </div>
+                </article>
+            </div>
+        </i18n-page-wrapper>
+        <transition name="fade">
+            <modal v-if="isOpened" v-model="isOpened">
+                <div class="flex flex-col items-center space-y-3 p-2">
+                    <div class="text-xl text-[#CDCBFF]">
+                        {{ selectedPoster.title }}
+                    </div>
+                    <div class="text-center text-sm">
+                        <div class="text-[#BB75BC]">
+                            {{ selectedPoster.name }}
+                        </div>
+                        <div class="text-[#BB75BC]">
+                            {{ selectedPoster.community }}
+                        </div>
+                    </div>
+
+                    <div
+                        v-html="$md.render(selectedPoster.summary.trim())"
+                    ></div>
+                </div>
+            </modal>
+        </transition>
+    </div>
+</template>
+<script>
+import I18nPageWrapper from '@/components/core/i18n/PageWrapper'
+import i18n from '@/i18n/conference/poster-session.i18n'
+import Banner from '@/components/core/layout/Banner'
+import CoreH1 from '@/components/core/titles/H1'
+import Modal from './_components/modal/Modal'
+
+export default {
+    i18n,
+    name: 'PageConferencePosterSession',
+    components: {
+        Banner,
+        CoreH1,
+        I18nPageWrapper,
+        Modal,
+    },
+    data() {
+        return {
+            isOpened: false,
+            selectedPoster: {
+                id: '1',
+                name: 'KK',
+                type: '社群講',
+                community: '台灣數位遊牧者社群',
+                topics: ['社群經營', '人際溝通', '經驗分享'],
+                title: '第一次當總召的我，竟然想在第一屆就辦三百人的年會',
+                summary:
+                    '分享如何舉辦第一屆的三百人年會，包含志工招募、遇到問題與解決方式、大變動等等',
+            },
+        }
+    },
+    methods: {
+        showModal(poster) {
+            this.isOpened = true
+            this.selectedPoster = poster
+        },
+    },
+}
+</script>
+
+<style lang="postcss">
+p.description {
+    text-align: unset;
+}
+
+.poster-session__container {
+    display: grid;
+    justify-content: center;
+    gap: 8px;
+    grid-template-columns: repeat(auto-fit, 239px);
+}
+
+.poster-session {
+    @apply py-10 md:py-24;
+
+    .five-line-height {
+        line-height: 1.5em;
+        height: calc(5 * 1.5em);
+        overflow: hidden;
+    }
+}
+
+.poster-session__card {
+    @apply flex cursor-pointer flex-col rounded-3xl bg-[#1f1c3b] p-6;
+    border: 1px solid transparent;
+
+    &:hover {
+        @apply bg-primary-800;
+        border: 1px solid #746bb8;
+        box-shadow: 0px 0px 10px 10px #352d66;
+
+        & .title {
+            @apply text-pink-700;
+        }
+        & .cardTxt {
+            @apply text-primary-100;
+        }
+    }
+}
+
+.poster-session .summary-link {
+    text-decoration: underline;
+    color: #da8bdc;
+}
+</style>

pages/speaking/poster-session.vue → pages/speaking/cfp-poster.vue

@@ -67,7 +67,7 @@ import CoreH1 from '@/components/core/titles/H1'
 import TwoColWrapper from '@/components/core/layout/TwoColWrapper'
 import LocaleLink from '@/components/core/links/LocaleLink.vue'
 import ExtLink from '@/components/core/links/ExtLink.vue'
-import i18n from '@/i18n/speaking/poster-session.i18n'
+import i18n from '@/i18n/speaking/cfp-poster.i18n'
 
 export default {
     i18n,