chore: timetable improvement (#977)

* chore: reception time

* chore: props name

* save

* save

Author: ubugeeei

app/layouts/default.vue

@@ -85,11 +85,19 @@ const cta = computed(() =>
 
 const { y } = useScroll(window);
 const isShowedSpMenu = computed(() => {
-  const targetBp: Breakpoint[] = isWidenContent.value ? ["mobile-wide", "mobile"] : ["mobile"];
+  const targetBp: Breakpoint[]
+    = isTimetable.value
+      ? ["pc", "mobile-wide", "mobile"]
+      : isWidenContent.value
+        ? ["mobile-wide", "mobile"]
+        : ["mobile"];
   return targetBp.includes(bp.value) && (!isRoot.value || y.value > 450);
 });
 const isShowedSpCta = computed(() => {
-  const targetBp: Breakpoint[] = isWidenContent.value ? ["pc", "mobile-wide", "mobile"] : ["mobile-wide", "mobile"];
+  const targetBp: Breakpoint[]
+    = isTimetable.value || isWidenContent.value
+      ? ["pc", "mobile-wide", "mobile"]
+      : ["mobile-wide", "mobile"];
   return targetBp.includes(bp.value) && (!isRoot.value || y.value > 450);
 });
 
@@ -102,7 +110,6 @@ const WIDE_ROUTE_NAMES: RoutesNamesList[] = [
   "sponsors",
   "sponsors-sponsorId",
   "event",
-  "timetable",
   "related-events",
   "store",
 ];
@@ -114,6 +121,8 @@ const isWidenContent = computed(() =>
     .includes(route.name?.toString() ?? ""),
 );
 
+const isTimetable = computed(() => localeRoute("timetable" as string).name === route.name?.toString());
+
 // scroll behavior
 watch(() => route.hash, async (hash) => {
   if (hash === "") {
@@ -150,7 +159,7 @@ watch(() => route.hash, async (hash) => {
           <VFMenu :items="menuItems" />
         </div>
       </div>
-      <div class="content" :class="{ 'widen-content': isWidenContent }">
+      <div class="content" :class="{ 'widen-content': isWidenContent, 'timetable': isTimetable }">
         <VFHeader :is-root class="header" />
 
         <main class="main">
@@ -230,6 +239,16 @@ watch(() => route.hash, async (hash) => {
     flex-basis: auto;
   }
 
+  &.timetable {
+    width: 90%;
+    max-width: 1400px;
+
+    @media (--mobile) {
+      min-width: 0;
+      width: 100%;
+    }
+  }
+
   &.widen-content {
     min-width: 960px;
     transition: unset;

app/pages/timetable/_components/TimetableCard.vue

@@ -7,8 +7,8 @@ import SliderIcon from "~icons/icons/timetable-slider.svg";
 const {
   type,
   title,
-  sessionStart,
-  sessionEnd,
+  startTime,
+  endTime,
   speakers,
   slide,
   track,
@@ -47,9 +47,9 @@ const hoverColor = computed(() => `var(--color-${accentColorName.value}-accent-h
           {{ t(`timetable.track.${track}`) }}
         </div>
       </template>
-      <div v-if="sessionStart" class="time">
+      <div v-if="startTime" class="time">
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-        {{ sessionStart }} - {{ sessionEnd }}
+        {{ startTime }} - {{ endTime }}
       </div>
       <template v-if="type === 'schedule'">
         <div class="schedule-title">
@@ -152,6 +152,7 @@ const hoverColor = computed(() => `var(--color-${accentColorName.value}-accent-h
   font-family: IBMPlexSansJP-Bold;
   font-size: 16px;
   text-align: left;
+  white-space: pre-wrap;
 
   a {
     font-family: IBMPlexSansJP-Bold;

app/pages/timetable/_components/TimetableCell.vue

@@ -7,8 +7,8 @@ import SliderIcon from "~icons/icons/timetable-slider.svg";
 const {
   type,
   title,
-  sessionStart,
-  sessionEnd,
+  startTime,
+  endTime,
   speakers,
   slide,
   colspan,
@@ -44,16 +44,16 @@ const hoverColor = `var(--color-${accentColorName.value}-accent-hover)`;
 <template>
   <td class="cell" :colspan="colspan" :rowspan="rowspan" :class="{ 'cell--schedule': type === 'schedule' }">
     <div class="cell-inner">
-      <div v-if="sessionStart && type !== 'schedule'" class="time">
+      <div v-if="startTime && type !== 'schedule'" class="time">
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-        {{ sessionStart }} - {{ sessionEnd }}
+        {{ startTime }} - {{ endTime }}
       </div>
 
       <template v-if="type === 'schedule'">
         <div class="schedule-content">
-          <div v-if="sessionStart" class="time">
+          <div v-if="startTime" class="time">
             <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-            {{ sessionStart }} - {{ sessionEnd }}
+            {{ startTime }} - {{ endTime }}
           </div>
           <div class="schedule-title">
             {{ title }}
@@ -160,6 +160,7 @@ const hoverColor = `var(--color-${accentColorName.value}-accent-hover)`;
   font-family: IBMPlexSansJP-Bold;
   font-size: 16px;
   text-align: left;
+  white-space: pre-wrap;
   a {
     all: inherit;
     cursor: pointer;

i18n/en/index.yaml

@@ -304,6 +304,7 @@ timetable:
   platinumSponsorSession: "Platinum Sponsor Session"
   lunchTime: "Lunch Time"
   studentSupportProgram: "Student Support Program"
+  studentSupportProgramSessionTitle: "Student Support Program\nTalents discovered by kazupon ── Developer discovery techniques that change Vue.js and the OSS ecosystem"
   break: "Break"
   beginnerHandsOn: "Beginner Hands-on"
   intermediateHandsOn: "Intermediate Hands-on"

i18n/ja/index.yaml

@@ -303,6 +303,7 @@ timetable:
   platinumSponsorSession: "プラチナスポンサーセッション"
   lunchTime: "ランチタイム"
   studentSupportProgram: "学生支援プログラム"
+  studentSupportProgramSessionTitle: "学生支援プログラム\nkazuponが見つけた才能たち ── Vue.jsそしてOSSエコシステムを変える開発者発掘術"
   break: "休憩"
   beginnerHandsOn: "初級者向けハンズオン"
   intermediateHandsOn: "中級者向けハンズオン"

i18n/timetable.ts

@@ -5,8 +5,8 @@ export interface TimetableCell {
   id: string;
   type?: "session" | "lightningTalk" | "schedule" | "event";
   title?: string;
-  sessionStart?: string;
-  sessionEnd?: string;
+  startTime?: string;
+  endTime?: string;
   speakers?: Speaker[];
   slide?: string;
   colspan?: number;