From f5c683b1d979a62d3357f84d315d2cc7fc019fc9 Mon Sep 17 00:00:00 2001
From: Josix <josixwang@gmail.com>
Date: Sat, 5 Aug 2023 02:55:32 +0800
Subject: [PATCH] feat(schedule): update 2023 schedule layout

---
 components/events/SpeechCard.vue      |  6 ---
 components/schedule/ScheduleEvent.vue |  9 ++--
 components/schedule/ScheduleRoom.vue  | 11 ++---
 components/schedule/ScheduleRooms.vue | 10 +---
 components/schedule/ScheduleTable.vue | 66 +++------------------------
 pages/conference/_eventType/_id.vue   |  6 ---
 pages/conference/schedule.vue         | 32 +++----------
 store/index.js                        |  2 +-
 8 files changed, 25 insertions(+), 117 deletions(-)

diff --git a/components/events/SpeechCard.vue b/components/events/SpeechCard.vue
index f64580bb8f..9c1d245d0a 100644
--- a/components/events/SpeechCard.vue
+++ b/components/events/SpeechCard.vue
@@ -78,14 +78,8 @@ export default {
             },
             locationMapping: {
                 '4-r0': 'R0',
-                '4-r0-1': 'R0',
-                '4-r0-2': 'R0',
                 '5-r1': 'R1',
-                '5-r1-1': 'R1',
-                '5-r1-2': 'R1',
                 '6-r2': 'R2',
-                '6-r2-1': 'R2',
-                '6-r2-2': 'R2',
                 '1-r3': 'R3',
             },
             levelBgColorMapping: {
diff --git a/components/schedule/ScheduleEvent.vue b/components/schedule/ScheduleEvent.vue
index 1eef2e0b2b..e9b933f7d3 100644
--- a/components/schedule/ScheduleEvent.vue
+++ b/components/schedule/ScheduleEvent.vue
@@ -130,7 +130,11 @@ export default {
                 event_id: eventId,
                 speakers,
             } = this.value
-            if (eventType === 'keynote' && speakers[0].en_us) {
+            if (
+                eventType === 'keynote' &&
+                speakers.length > 0 &&
+                speakers[0].en_us
+            ) {
                 const keynoteSpeakerId = speakers[0].en_us
                     .replaceAll(' ', '_')
                     .replaceAll('.', '')
@@ -163,8 +167,7 @@ export default {
 
 <style lang="postcss" scoped>
 .scheduleEvent__context {
-    @apply sticky top-28;
-    /* top: 75px; */
+    @apply sticky top-36;
 }
 
 .scheduleEvent__title {
diff --git a/components/schedule/ScheduleRoom.vue b/components/schedule/ScheduleRoom.vue
index 0312e8c8b3..3bedfb2fb5 100644
--- a/components/schedule/ScheduleRoom.vue
+++ b/components/schedule/ScheduleRoom.vue
@@ -25,14 +25,9 @@ export default {
     computed: {
         name() {
             return {
-                '4-r0': 'R0-0',
-                '4-r0-1': 'R0-1',
-                '4-r0-2': 'R0-2',
-                '5-r1': 'R1-0',
-                '5-r1-1': 'R1-1',
-                '5-r1-2': 'R1-2',
-                '6-r2': 'R2-0',
-                '6-r2-1': 'R2-1',
+                '4-r0': 'R0',
+                '5-r1': 'R1',
+                '6-r2': 'R2',
                 '1-r3': 'R3',
                 '2-all': 'All',
                 '3-r012': 'R0, R1, R2',
diff --git a/components/schedule/ScheduleRooms.vue b/components/schedule/ScheduleRooms.vue
index b2acf6e0aa..206cd84536 100644
--- a/components/schedule/ScheduleRooms.vue
+++ b/components/schedule/ScheduleRooms.vue
@@ -21,16 +21,10 @@ export default {
 
 <style lang="postcss" scoped>
 .scheduleRooms {
+    top: 64px;
     z-index: 900;
+    grid-template-columns: 1fr 2fr 2fr 2fr 2fr;
     grid-gap: 12px;
     background-color: rgba(18, 16, 35, 0.6);
 }
-.scheduleRooms.day1 {
-    grid-template-columns: 1fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
-    width: 140%;
-}
-.scheduleRooms.day2 {
-    grid-template-columns: 1fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
-    width: 110.5%;
-}
 </style>
diff --git a/components/schedule/ScheduleTable.vue b/components/schedule/ScheduleTable.vue
index bd90eb5670..906e651ad2 100644
--- a/components/schedule/ScheduleTable.vue
+++ b/components/schedule/ScheduleTable.vue
@@ -1,11 +1,5 @@
 <template>
-    <div
-        class="scheduleTable hidden w-full"
-        :class="{
-            day1: dateIndex === 0,
-            day2: dateIndex === 1,
-        }"
-    >
+    <div class="scheduleTable hidden w-full">
         <slot></slot>
     </div>
 </template>
@@ -13,43 +7,19 @@
 <script>
 export default {
     name: 'ScheduleTable',
-    props: {
-        dateIndex: { type: Number, default: null },
-    },
 }
 </script>
 
 <style lang="postcss" scoped>
 .scheduleTable {
-    grid-gap: 12px;
-}
-.scheduleTable.day1 {
     grid-template-columns:
         [timeline] 1fr
         [room-4-r0-start] 2fr
-        [room-4-r0-end room-4-r0-1-start] 2fr
-        [room-4-r0-1-end room-4-r0-2-start] 2fr
-        [room-4-r0-2-end room-5-r1-start] 2fr
-        [room-5-r1-end room-5-r1-1-start] 2fr
-        [room-5-r1-1-end room-5-r1-2-start] 2fr
-        [room-5-r1-2-end room-6-r2-start] 2fr
-        [room-6-r2-end room-6-r2-1-start] 2fr
-        [room-6-r2-1-end room-1-r3-start] 2fr
+        [room-4-r0-end room-5-r1-start] 2fr
+        [room-5-r1-end room-6-r2-start] 2fr
+        [room-6-r2-end room-1-r3-start] 2fr
         [room-1-r3-end];
-    width: 140%;
-}
-.scheduleTable.day2 {
-    grid-template-columns:
-        [timeline] 1fr
-        [room-4-r0-start] 2fr
-        [room-4-r0-end room-4-r0-1-start] 2fr
-        [room-4-r0-1-end room-5-r1-start] 2fr
-        [room-5-r1-end room-5-r1-1-start] 2fr
-        [room-5-r1-1-end room-6-r2-start] 2fr
-        [room-6-r2-end room-6-r2-1-start] 2fr
-        [room-6-r2-1-end room-1-r3-start] 2fr
-        [room-1-r3-end];
-    width: 110.5%;
+    grid-gap: 10px;
 }
 
 .scheduleTable .scheduleTick {
@@ -58,45 +28,21 @@ export default {
 }
 
 .scheduleTable .scheduleEvent.room-3-r012 {
-    grid-column: room-4-r0-start / room-6-r2-1-end;
+    grid-column: room-4-r0-start / room-6-r2-end;
 }
 
 .scheduleTable .scheduleEvent.room-4-r0 {
     grid-column: room-4-r0-start / room-4-r0-end;
 }
 
-.scheduleTable .scheduleEvent.room-4-r0-1 {
-    grid-column: room-4-r0-1-start / room-4-r0-1-end;
-}
-
-.scheduleTable .scheduleEvent.room-4-r0-2 {
-    grid-column: room-4-r0-2-start / room-4-r0-2-end;
-}
-
 .scheduleTable .scheduleEvent.room-5-r1 {
     grid-column: room-5-r1-start / room-5-r1-end;
 }
 
-.scheduleTable .scheduleEvent.room-5-r1-1 {
-    grid-column: room-5-r1-1-start / room-5-r1-1-end;
-}
-
-.scheduleTable .scheduleEvent.room-5-r1-2 {
-    grid-column: room-5-r1-2-start / room-5-r1-2-end;
-}
-
 .scheduleTable .scheduleEvent.room-6-r2 {
     grid-column: room-6-r2-start / room-6-r2-end;
 }
 
-.scheduleTable .scheduleEvent.room-6-r2-1 {
-    grid-column: room-6-r2-1-start / room-6-r2-1-end;
-}
-
-.scheduleTable .scheduleEvent.room-6-r2-2 {
-    grid-column: room-6-r2-2-start / room-6-r2-2-end;
-}
-
 .scheduleTable .scheduleEvent.room-1-r3 {
     grid-column: room-1-r3-start / room-1-r3-end;
 }
diff --git a/pages/conference/_eventType/_id.vue b/pages/conference/_eventType/_id.vue
index ecbaece0d9..eb2b15401b 100644
--- a/pages/conference/_eventType/_id.vue
+++ b/pages/conference/_eventType/_id.vue
@@ -197,14 +197,8 @@ export default {
             },
             locationMapping: {
                 '4-r0': 'R0',
-                '4-r0-1': 'R0',
-                '4-r0-2': 'R0',
                 '5-r1': 'R1',
-                '5-r1-1': 'R1',
-                '5-r1-2': 'R1',
                 '6-r2': 'R2',
-                '6-r2-1': 'R2',
-                '6-r2-2': 'R2',
                 '1-r3': 'R3',
             },
         }
diff --git a/pages/conference/schedule.vue b/pages/conference/schedule.vue
index ce1f026d8c..ced420cd15 100644
--- a/pages/conference/schedule.vue
+++ b/pages/conference/schedule.vue
@@ -12,7 +12,7 @@
             </schedule-day-tab>
         </schedule-day-tabs>
         <schedule>
-            <schedule-rooms :date-index="selectedDayIndex">
+            <schedule-rooms class="lg:grid" :date-index="selectedDayIndex">
                 <schedule-block></schedule-block>
                 <schedule-room
                     v-for="(room, i) in rooms"
@@ -168,29 +168,7 @@ export default {
             })
         },
         makeRooms() {
-            if (this.selectedDayIndex === 0) {
-                this.rooms = [
-                    '4-r0',
-                    '4-r0-1',
-                    '4-r0-2',
-                    '5-r1',
-                    '5-r1-1',
-                    '5-r1-2',
-                    '6-r2',
-                    '6-r2-1',
-                    '1-r3',
-                ]
-            } else {
-                this.rooms = [
-                    '4-r0',
-                    '4-r0-1',
-                    '5-r1',
-                    '5-r1-1',
-                    '6-r2',
-                    '6-r2-1',
-                    '1-r3',
-                ]
-            }
+            this.rooms = ['4-r0', '5-r1', '6-r2', '1-r3']
         },
         makeTables() {
             this.tables = this.schedulesData.map((schedule) => ({
@@ -286,4 +264,8 @@ export default {
 }
 </script>
 
-<style lang="postcss" scoped></style>
+<style lang="postcss" scoped>
+.pageWrapper {
+    @apply md:px-24;
+}
+</style>
diff --git a/store/index.js b/store/index.js
index 9732ad42c9..7b34ba7176 100644
--- a/store/index.js
+++ b/store/index.js
@@ -15,7 +15,7 @@ export const state = () => ({
         conferenceDate: '2023-09-02',
         showSpeakingPage: false,
         showAboutStaffPage: false,
-        showSchedulePage: false,
+        showSchedulePage: true,
         showSponsorPage: false,
         showRegistrationPage: true,
         showEventOverviewPage: false,