fix(agenda-neue): responsive UI fixes + no materials warning icon (ietf-tools#4229)

* fix: agenda-neue - go to current meeting in URL if not provided

* fix: agenda neue - various responsive UI fixes + no materials icon

Author: NGPixel

.devcontainer/devcontainer.json

@@ -88,13 +88,17 @@
     "forwardPorts": [8000, 3306],
 
     "portsAttributes": {
-        "8000": {
-            "label": "Datatracker",
-            "onAutoForward": "notify"
+        "3000": {
+            "label": "Vite",
+            "onAutoForward": "silent"
         },
         "3306": {
             "label": "MariaDB",
             "onAutoForward": "silent"
+        },
+        "8000": {
+            "label": "Datatracker",
+            "onAutoForward": "notify"
         }
     },
 

client/agenda/Agenda.vue

@@ -140,6 +140,7 @@
 
 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { DateTime } from 'luxon'
 import debounce from 'lodash/debounce'
 
@@ -172,6 +173,11 @@ const message = useMessage()
 
 const agendaStore = useAgendaStore()
 
+// ROUTER
+
+const router = useRouter()
+const route = useRoute()
+
 // DATA
 
 const state = reactive({
@@ -335,6 +341,12 @@ onBeforeUnmount(() => {
 // MOUNTED
 
 onMounted(() => {
+  // -> Go to current meeting if not provided
+  if (!route.params.meetingNumber && agendaStore.meeting.number) {
+    router.replace({ params: { meetingNumber: agendaStore.meeting.number } })
+  }
+
+  // -> Hide Loading Screen
   agendaStore.hideLoadingScreen()
 })
 

client/agenda/AgendaScheduleList.vue

@@ -121,6 +121,13 @@
                         template(#trigger)
                           i.bi.bi-collection(@click='showMaterials(item.key)')
                         span Show meeting materials
+                    template(v-else-if='item.type === `regular`')
+                      n-popover
+                        template(#trigger)
+                          i.no-meeting-materials
+                            i.bi.bi-clipboard-x
+                            i.bi.bi-exclamation-triangle-fill.ms-1
+                        span No meeting materials yet.
                     n-popover(v-for='lnk of item.links', :key='lnk.id')
                       template(#trigger)
                         a(
@@ -219,7 +226,7 @@ const meetingEvents = computed(() => {
 
   return reduce(sortBy(agendaStore.scheduleAdjusted, 'adjustedStartDate'), (acc, item) => {
     const isLive = current >= item.adjustedStart && current < item.adjustedEnd
-    const itemTimeSlot = agendaStore.viewport > 600 ?
+    const itemTimeSlot = agendaStore.viewport > 576 ?
       `${item.adjustedStart.toFormat('HH:mm')} - ${item.adjustedEnd.toFormat('HH:mm')}` :
       `${item.adjustedStart.toFormat('HH:mm')} ${item.adjustedEnd.toFormat('HH:mm')}`
 
@@ -656,7 +663,7 @@ onBeforeUnmount(() => {
     font-weight: 600;
     border-right: 1px solid #FFF;
 
-    @media screen and (max-width: $bs5-break-sm) {
+    @media screen and (max-width: $bs5-break-md) {
       font-size: .8em;
       padding: 0 6px;
     }
@@ -675,14 +682,14 @@ onBeforeUnmount(() => {
         width: 100px;
       }
 
-      @media screen and (max-width: $bs5-break-sm) {
+      @media screen and (max-width: $bs5-break-md) {
         width: 30px;
       }
     }
     &.agenda-table-head-location {
       width: 250px;
 
-      @media screen and (max-width: $bs5-break-sm) {
+      @media screen and (max-width: $bs5-break-md) {
         width: auto;
       }
     }
@@ -730,7 +737,7 @@ onBeforeUnmount(() => {
     font-weight: 600;
     scroll-margin-top: 25px;
 
-    @media screen and (max-width: $bs5-break-sm) {
+    @media screen and (max-width: $bs5-break-md) {
       font-size: .9em;
     }
   }
@@ -742,7 +749,7 @@ onBeforeUnmount(() => {
     padding: 0 12px;
     color: #333;
 
-    @media screen and (max-width: $bs5-break-sm) {
+    @media screen and (max-width: $bs5-break-md) {
       padding: 0 6px;
     }
 
@@ -755,7 +762,7 @@ onBeforeUnmount(() => {
       color: $blue-700;
       font-weight: 600;
 
-      @media screen and (max-width: $bs5-break-sm) {
+      @media screen and (max-width: $bs5-break-md) {
         font-size: .9em;
       }
     }
@@ -766,7 +773,7 @@ onBeforeUnmount(() => {
     padding: 0 12px;
     color: #333;
 
-    @media screen and (max-width: $bs5-break-sm) {
+    @media screen and (max-width: $bs5-break-md) {
       padding: 2px 6px;
     }
 
@@ -794,7 +801,7 @@ onBeforeUnmount(() => {
         font-size: .85rem;
       }
 
-      @media screen and (max-width: $bs5-break-sm) {
+      @media screen and (max-width: $bs5-break-md) {
         white-space: initial;
         word-wrap: break-word;
         max-width: 70px;
@@ -822,7 +829,7 @@ onBeforeUnmount(() => {
         border-bottom-left-radius: 0;
         margin-right: 6px;
 
-        @media screen and (max-width: $bs5-break-sm) {
+        @media screen and (max-width: $bs5-break-md) {
           display: none;
         }
       }
@@ -833,7 +840,7 @@ onBeforeUnmount(() => {
       border-right: 1px solid $gray-300 !important;
       white-space: nowrap;
 
-      @media screen and (max-width: $bs5-break-sm) {
+      @media screen and (max-width: $bs5-break-md) {
         font-size: .7rem;
         word-break: break-all;
       }
@@ -863,17 +870,25 @@ onBeforeUnmount(() => {
     }
 
     &.agenda-table-cell-name {
-      @media screen and (max-width: $bs5-break-sm) {
+      @media screen and (max-width: $bs5-break-md) {
         font-size: .7rem;
+        word-break: break-word;
+        word-wrap: break-word;
       }
 
       .badge.is-bof {
         background-color: $teal-500;
         margin: 0 8px;
+
+        @media screen and (max-width: $bs5-break-md) {
+          width: 30px;
+          display: block;
+          margin: 2px 0 0 0;
+        }
       }
 
       > .bi {
-        @media screen and (max-width: $bs5-break-sm) {
+        @media screen and (max-width: $bs5-break-md) {
           display: none;
         }
 
@@ -991,6 +1006,14 @@ onBeforeUnmount(() => {
               background-color: rgba($teal-400, .3);
             }
           }
+          &.no-meeting-materials {
+            background-color: $red-400;
+            color: #FFF;
+
+            > i:nth-child(2) {
+              color: $red-100;
+            }
+          }
         }
       }
     }
@@ -1009,6 +1032,10 @@ onBeforeUnmount(() => {
       font-size: .9rem;
     }
 
+    @media screen and (max-width: $bs5-break-md) {
+      font-size: .8rem;
+    }
+
     @media screen and (max-width: $bs5-break-sm) {
       white-space: initial;
       font-size: .7rem;
@@ -1271,4 +1298,13 @@ onBeforeUnmount(() => {
   }
 }
 
+@keyframes fadeInAnim {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 </style>

client/agenda/FloorPlan.vue

@@ -57,7 +57,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch }
 import find from 'lodash/find'
 import xslugify from '../shared/xslugify'
 import { DateTime } from 'luxon'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useAgendaStore } from './store' 
 
 import MeetingNavigation from './MeetingNavigation.vue'
@@ -68,6 +68,7 @@ const agendaStore = useAgendaStore()
 
 // ROUTER
 
+const router = useRouter()
 const route = useRoute()
 
 // STATE
@@ -205,10 +206,20 @@ onBeforeUnmount(() => {
 // MOUNTED
 
 onMounted(() => {
+  // -> Go to current meeting if not provided
+  if (!route.params.meetingNumber && agendaStore.meeting.number) {
+    router.replace({ params: { meetingNumber: agendaStore.meeting.number } })
+  }
+
+  // -> Hide Loading Screen
   agendaStore.hideLoadingScreen()
+
+  // -> Set Current Floor
   if (agendaStore.floors?.length > 0) {
     state.currentFloor = agendaStore.floors[0].id
   }
+
+  // -> Go to requested room
   if (route.query.room) {
     state.desiredRoom = route.query.room
     handleDesiredRoom()