feat: add jump to now/day on mobile agenda (ietf-tools#6654)

Author: NGPixel

client/agenda/AgendaMobileBar.vue

@@ -1,12 +1,19 @@
 <template lang="pug">
 .agenda-mobile-bar(v-if='siteStore.viewport < 990')
+  n-dropdown(
+    :options='jumpToDayOptions'
+    size='huge'
+    :show-arrow='true'
+    trigger='click'
+    @select='jumpToDay'
+    )
+    button
+      i.bi.bi-arrow-down-circle
   button(@click='agendaStore.$patch({ filterShown: true })')
-    i.bi.bi-filter-square-fill.me-2
-    span Filters
+    i.bi.bi-funnel
     n-badge.ms-2(:value='agendaStore.selectedCatSubs.length', processing)
   button(@click='agendaStore.$patch({ calendarShown: true })')
-    i.bi.bi-calendar3.me-2
-    span Cal
+    i.bi.bi-calendar3
   n-dropdown(
     :options='downloadIcsOptions'
     size='huge'
@@ -15,14 +22,13 @@
     @select='downloadIcs'
     )
     button
-      i.bi.bi-calendar-check.me-2
-      span .ics
+      i.bi.bi-download
   button(@click='agendaStore.$patch({ settingsShown: !agendaStore.settingsShown })')
     i.bi.bi-gear
 </template>
 
 <script setup>
-import { h } from 'vue'
+import { computed, h } from 'vue'
 
 import {
   NBadge,
@@ -43,13 +49,34 @@ const message = useMessage()
 const agendaStore = useAgendaStore()
 const siteStore = useSiteStore()
 
+// Meeting Days
+
+const jumpToDayOptions = computed(() => {
+  const days = []
+  if (agendaStore.isMeetingLive) {
+    days.push({
+      label: 'Jump to Now',
+      key: 'now',
+      icon: () => h('i', { class: 'bi bi-arrow-down-right-square text-red' })
+    })
+  }
+  for (const day of agendaStore.meetingDays) {
+    days.push({
+      label: `Jump to ${day.label}`,
+      key: day.slug,
+      icon: () => h('i', { class: 'bi bi-arrow-down-right-square' })
+    })
+  }
+  return days
+})
+
 // Download Ics Options
 
 const downloadIcsOptions = [
   {
     label: 'Subscribe... (webcal)',
     key: 'subscribe',
-    icon: () => h('i', { class: 'bi bi-calendar-week text-blue' })
+    icon: () => h('i', { class: 'bi bi-calendar-week' })
   },
   {
     label: 'Download... (.ics)',
@@ -60,6 +87,20 @@ const downloadIcsOptions = [
 
 // METHODS
 
+function jumpToDay (dayId) {
+  if (dayId === 'now') {
+    const lastEventId = agendaStore.findCurrentEventId()
+
+    if (lastEventId) {
+      document.getElementById(`agenda-rowid-${lastEventId}`)?.scrollIntoView(true)
+    } else {
+      message.warning('There is no event happening right now.')
+    }
+  } else {
+    document.getElementById(`agenda-day-${dayId}`)?.scrollIntoView(true)
+  }
+}
+
 function downloadIcs (key) {
   message.loading('Generating calendar file... Download will begin shortly.')
   let icsUrl = ''
@@ -102,6 +143,8 @@ function downloadIcs (key) {
     color: #FFF;
     padding: 0 15px;
     transition: all .4s ease;
+    text-align: center;
+    flex: 1 1;
 
     & + button {
       margin-left: 1px;

client/agenda/AgendaScheduleList.vue

@@ -362,7 +362,7 @@ const meetingEvents = computed(() => {
         if (item.links.calendar) {
           links.push({
             id: `lnk-${item.id}-calendar`,
-            label: isMobile.value ? `Calendar (.ics) entry for this session` : `Calendar (.ics) entry for ${item.acronym} session on ${item.adjustedStart.toFormat('fff')}`,
+            label: 'Calendar (.ics) entry for this session',
             icon: 'calendar-check',
             href: item.links.calendar,
             color: 'pink'

playwright/tests/meeting/agenda.spec.js

@@ -1427,27 +1427,34 @@ test.describe('past - small screens', () => {
 
         // has a bottom mobile bar
         await expect(page.locator('.agenda-mobile-bar')).toBeVisible()
-        await expect(barBtnLocator).toHaveCount(4)
-        await expect(barBtnLocator.first()).toContainText('Filters')
-        await expect(barBtnLocator.nth(1)).toContainText('Cal')
-        await expect(barBtnLocator.nth(2)).toContainText('.ics')
-        await expect(barBtnLocator.last().locator('> *')).toHaveCount(1)
-        await expect(barBtnLocator.last().locator('> *')).toHaveClass(/bi/)
+        await expect(barBtnLocator).toHaveCount(5)
 
-        // can open the filters overlay
+        // can open the jump to day dropdown
         await barBtnLocator.first().click()
+        const jumpDayDdnLocator = page.locator('.n-dropdown-menu > .n-dropdown-option')
+        await expect(jumpDayDdnLocator).toHaveCount(7)
+        for (let idx = 0; idx < 7; idx++) {
+          const localDateTime = DateTime.fromISO(meetingData.meeting.startDate, { zone: meetingData.meeting.timezone })
+            .setLocale(BROWSER_LOCALE)
+            .plus({ days: idx })
+            .toFormat('ccc LLL d')
+          await expect(jumpDayDdnLocator.nth(idx)).toContainText(`Jump to ${localDateTime}`)
+        }
+
+        // can open the filters overlay
+        await barBtnLocator.nth(1).click()
         await expect(page.locator('.agenda-personalize')).toBeVisible()
         await page.locator('.agenda-personalize .agenda-personalize-actions > button').nth(1).click()
         await expect(page.locator('.agenda-personalize')).toBeHidden()
 
         // can open the calendar view
-        await barBtnLocator.nth(1).click()
+        await barBtnLocator.nth(2).click()
         await expect(page.locator('.agenda-calendar')).toBeVisible()
         await page.locator('.agenda-calendar .agenda-calendar-actions > button').nth(1).click()
         await expect(page.locator('.agenda-calendar')).toBeHidden()
 
         // can open the ics dropdown
-        await barBtnLocator.nth(2).click()
+        await barBtnLocator.nth(3).click()
         const calDdnLocator = page.locator('.n-dropdown-menu > .n-dropdown-option')
         await expect(calDdnLocator).toHaveCount(2)
         await expect(calDdnLocator.first()).toContainText('Subscribe')