rewrite community session layout

Author: SeanGau

src/assets/js/agenda.js

@@ -107,7 +107,7 @@ $('.agenda-session[data-id]').on('click', function (e) {
   $('.agenda-description', bodyTmplDom).html(marked.parse(session[currentLang]['description']))
   $('#modal .head-group h4').text(session[currentLang]['title'])
   let tagGroup = $('.tag-group', this)
-  $('#modal .tag-group').html(tagGroup.clone())
+  $('#modal .tag-group').html(tagGroup.clone().removeClass('hidden'))
   $('#modal .btn-group').html('')
   if (session['qa']) {
     $('#modal .btn-group').append(`<a href="${session['qa']}" class="btn btn-primary" target="_blank" data-i18n="agenda.btn.qa">線上提問</a>`)
@@ -124,10 +124,12 @@ $('.agenda-session[data-id]').on('click', function (e) {
   let startMinutes = String(start.getMinutes()).padStart(2, '0');
   let endHours = String(end.getHours()).padStart(2, '0');
   let endMinutes = String(end.getMinutes()).padStart(2, '0');
-
-  let info = `<div>${start.getMonth() + 1}/${start.getDate()}  ${startHours}:${startMinutes} ~ ${endHours}:${endMinutes} @ ${
-    session['broadcast']?session['broadcast'].join(','):session['room']
-  }</div>`;
+  let info = '';
+  if (session['start'] !== session['end']) {
+    info = `<div>${start.getMonth() + 1}/${start.getDate()}  ${startHours}:${startMinutes} ~ ${endHours}:${endMinutes} @ ${session['broadcast'] ? session['broadcast'].join(',') : session['room']}</div>`;
+  } else {
+    info = `<div>${start.getMonth() + 1}/${start.getDate()}  ${startHours}:${startMinutes} ~ @ ${session['broadcast'] ? session['broadcast'].join(',') : session['room']}</div>`;
+  }
   $('#modal .info-group').html(info)
   $('#modal .modal-body').html(bodyTmplDom)
   $('#modal .modal-body').scrollTop(0)

src/locale/en.yml

@@ -84,6 +84,7 @@ agenda.day-2.text: Sun., May 5
 agenda.btn.qa: Q&A
 agenda.btn.slide: Slides
 agenda.btn.cowrite: Collab Notes
+agenda.moderator: Moderator
 
 language.zh: Mandarin
 language.en: English

src/pcss/agenda.pcss

@@ -67,7 +67,6 @@
   }
 }
 
-
 #tag-group {
   @apply fixed right-0 bottom-0 w-full h-auto z-30 bg-slate-100 pe-12;
   transition: all 0.3s ease;

src/pug/agenda/index.pug

@@ -57,14 +57,34 @@ block main
 
     .mt-10.mb-20
       h2.mb-8#day Day 1
-
-      mixin agenda-session(session)
+      mixin agenda-session(session, current_ct_session = null)
         if session.type == 'R'
           .agenda-session.items-center.justify-center.bg-neutral-300.rounded-xl.p-4.z-10.relative
             .font-bold.text-neutral-900(data-i18n=`session.${session.id}.title`)= session.zh.title
+        else if session.type == 'E'
+          .agenda-session.items-center.justify-center.bg-neutral-100.rounded-xl.p-4.z-10.relative
+            .font-bold.text-neutral-900(data-i18n=`session.${session.id}.title`)= session.zh.title
+            - let speaker_id = session.speakers[0]
+            .text-sm.text-neutral-700(data-i18n=`speakers.${speaker_id}.name`)= speakers[speaker_id].zh.name
         else
+          if session.tags.filter((t) => t.startsWith('CT')).length > 0 && current_ct_session && session.start_t === current_ct_session.start_t
+            .agenda-session.bg-tertiary.px-4.py-3.rounded-t-xl(data-id=current_ct_session.id,
+            data-tags=([...current_ct_session.tags, current_ct_session.type, current_ct_session.language].filter((t) => !!t).join(',')))
+              .font-bold.text-neutral-800(data-i18n=`session.${current_ct_session.id}.title`)= current_ct_session.zh.title
+              .text-neutral-600.text-sm
+                span(data-i18n='agenda.moderator') 主持
+                span.mx-1 /
+                each speaker_id in current_ct_session.speakers
+                  span.text-sm.text-neutral-700(data-i18n=`speakers.${speaker_id}.name`)= speakers[speaker_id].zh.name
+              .text-xs.text-white.my-2.flex.flex-wrap.gap-1.tag-group.hidden
+                span.bg-secondary.rounded-full.px-2(data-i18n=`session_type.${session.type}`)= session_types[session.type].zh.name
+                if session.language
+                  span.bg-neutral-500.rounded-full.px-2(data-i18n=`language.${session.language}`)= session.language === 'en' ? '英語' : '華語'
+                if session.tags[0]
+                  each tag_id in session.tags
+                    span.bg-neutral-400.rounded-full.px-2(data-i18n=`tag.${tag_id}`)= tags[tag_id].zh.name
           .agenda-session.bg-neutral-100.p-4.z-10.relative.grow.shrink-0(
-            class=is_community ? 'border-l-4 border-secondary' : '',
+            class= current_ct_session ? 'border-r-4 border-tertiary' : '',
             data-id=session.id, data-tags=([...session.tags, session.type, session.language].filter((t) => !!t).join(','))
             ): .sticky(class="lg:top-40")
             .font-bold.text-neutral-800.mb-1(data-i18n=`session.${session.id}.title`)= session.zh.title
@@ -85,12 +105,17 @@ block main
           - let styles = `grid-area: ${key} / time`
           .block.agenda-timeline.z-0(style=styles, data-day=key < 1440 ? '1' : '2')
             .font-medium(class="translate-y-[-50%]")= time
-       
+        - let current_ct_session = null
         each sessions, start_t in schedule.sessions_by_t
           each session in sessions.sessions
+            if session.start_t === session.end_t || session.type === 'C'
+              - current_ct_session = session
             - let styles = `grid-area: ${session.start_t} / ${session.room} / ${session.end_t} / ${session.type == 'R' ? 'end' : (session.broadcast ? 'RH' : session.room)};`
             .flex.flex-col.p-3.session-block(style=styles, data-room=session.room, data-broadcast=(session.broadcast ? 'true' : 'false'), data-day=(session.start_t < 1440 ? '1' : '2'))
-              +agenda-session(session)
+              if session.type === 'C' || session.tags.filter((t) => t.startsWith('CT')).length > 0
+                +agenda-session(session, current_ct_session)
+              else
+                +agenda-session(session)
 
       .flex.flex-col.agenda-list(class="lg:hidden")
         each sessions, start_t in schedule.sessions_by_t