Merge pull request #101 from filips123/frontend-fixes

Implement a new frontend fixes

Author: filips123

website/src/App.vue

@@ -83,7 +83,7 @@ const navigation: { title: string; link: string; icon: string }[] = [
 
 <template>
   <v-app>
-    <v-app-bar class="pr-2">
+    <v-app-bar class="app-bar pr-2">
       <v-app-bar-title>
         <h1 class="app-title">{{ routerTitle }}</h1>
         <div v-if="showEntityName" class="app-subtitle">{{ currentEntityList.join(', ') }}</div>
@@ -119,15 +119,24 @@ const navigation: { title: string; link: string; icon: string }[] = [
 <style>
 /* Set styles for app title and subtitle */
 
+.app-bar {
+  user-select: none;
+}
+
 .app-title {
   font-size: 1.25rem;
   font-weight: 500;
   letter-spacing: 0.0125em;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
 }
 
 .app-subtitle {
   font-size: 0.9rem;
   color: rgba(var(--v-theme-on-primary), var(--v-app-subtitle-opacity));
+  text-overflow: ellipsis;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
 /* Fix pull to refresh colors in dark theme */

website/src/assets/main.css

@@ -25,7 +25,7 @@ td {
 }
 
 a {
-  color: rgb(var(--v-theme-primary-variant));
+  color: rgb(var(--v-theme-secondary));
   text-decoration: none;
 }
 
@@ -81,6 +81,22 @@ li {
   background: rgb(var(--v-overlay-color)) !important;
 }
 
+/* Fix bottom navigation not being centered */
+
+.v-bottom-navigation__content > .v-btn {
+  width: 0 !important;
+}
+
+/* Fix transition on window item swiping */
+
+.v-window__container {
+  margin: 0 -8px;
+}
+
+.v-window-item {
+  padding: 0 8px;
+}
+
 /* Disable unnecessary Vuetify transitions */
 
 .v-card,

website/src/components/AppSnackbar.vue

@@ -9,7 +9,7 @@ const { buttonAction, buttonText, show, text, timeout } = storeToRefs(useSnackba
 <template>
   <v-snackbar v-model="show" :text :timeout color="surface-medium">
     <template v-if="buttonText" #actions>
-      <v-btn :text="buttonText" color="primary-variant" @click="buttonAction" />
+      <v-btn :text="buttonText" color="secondary" @click="buttonAction" />
     </template>
   </v-snackbar>
 </template>

website/src/components/SettingsBaseAction.vue

@@ -57,9 +57,6 @@ function doAction() {
 }
 
 .settings-base-action:focus-visible {
-  outline-color: rgba(
-    var(--v-theme-primary-variant),
-    calc(0.25 * var(--v-theme-overlay-multiplier))
-  );
+  outline-color: rgba(var(--v-theme-secondary), calc(0.25 * var(--v-theme-overlay-multiplier)));
 }
 </style>

website/src/components/SettingsSelectEntity.vue

@@ -88,21 +88,28 @@ onMounted(() => {
   )
 })
 
+function pushState(entityTypeDialog: boolean, entityListDialog: boolean) {
+  history.pushState(
+    {
+      ...history.state,
+      position: history.state.position + 1,
+      replaced: false,
+      scroll: null,
+      entityTypeDialog,
+      entityListDialog,
+    },
+    '',
+  )
+}
+
 watch(displayed, value => {
   if (value) {
     // Show the type selection dialog
     entityTypeDialog.value = true
     entityListDialog.value = false
 
     // Push a new history state where the type dialog is displayed
-    history.pushState(
-      {
-        ...history.state,
-        entityTypeDialog: true,
-        entityListDialog: false,
-      },
-      '',
-    )
+    pushState(true, false)
   }
 
   if (!value) {
@@ -121,7 +128,7 @@ watch(displayed, value => {
     )
 
     // Ensure the history stack is consistent
-    history.pushState(history.state, '')
+    pushState(false, false)
     history.back()
   }
 })
@@ -162,14 +169,7 @@ function handleSelectEntityType(selectedEntity: EntityType) {
   entityListDialog.value = true
 
   // Push a new history state where the list dialog is displayed
-  history.pushState(
-    {
-      ...history.state,
-      entityTypeDialog: false,
-      entityListDialog: true,
-    },
-    '',
-  )
+  pushState(false, true)
 }
 
 function handleViewEntityList() {

website/src/components/TimetableDisplay.vue

@@ -86,16 +86,15 @@ function filterForTargetDay(lessonsTime: MergedLesson[][]) {
     </thead>
 
     <tbody>
-      <tr
-        v-for="(lessonsTime, timeIndex) in lessons"
-        :key="timeIndex"
-        class="timetable-row"
-        :class="daySpecific ? lessonStyles(targetDay!, timeIndex) : undefined"
-        :tabindex="daySpecific ? 0 : undefined"
-        @click="daySpecific ? handleDetails(targetDay!, timeIndex, $event) : undefined"
-        @keydown.enter="daySpecific ? handleDetails(targetDay!, timeIndex, $event) : undefined"
-      >
-        <template v-if="timeIndex >= timeInterval[0] && timeIndex <= timeInterval[1]">
+      <template v-for="(lessonsTime, timeIndex) in lessons" :key="timeIndex">
+        <tr
+          v-if="timeIndex >= timeInterval[0] && timeIndex <= timeInterval[1]"
+          class="timetable-row"
+          :class="daySpecific ? lessonStyles(targetDay!, timeIndex) : undefined"
+          :tabindex="daySpecific ? 0 : undefined"
+          @click="daySpecific ? handleDetails(targetDay!, timeIndex, $event) : undefined"
+          @keydown.enter="daySpecific ? handleDetails(targetDay!, timeIndex, $event) : undefined"
+        >
           <td class="time-number" v-text="timeIndex === 0 ? 'PU' : timeIndex + '.'" />
           <td
             v-if="!daySpecific && showHoursInTimetable"
@@ -124,8 +123,8 @@ function filterForTargetDay(lessonsTime: MergedLesson[][]) {
             </table>
             <TimetableEmptyClassrooms v-else :lessons="lessonsTimeDay" />
           </td>
-        </template>
-      </tr>
+        </tr>
+      </template>
     </tbody>
   </v-table-main>
 </template>

website/src/plugins/vuetify.ts

@@ -10,7 +10,7 @@ const lightTheme: ThemeDefinition = {
   dark: false,
   colors: {
     primary: '#008800',
-    'primary-variant': '#007700',
+    secondary: '#007700',
     'surface-subtle': '#f6f6f6',
     'surface-medium': '#e6e6e6',
     'surface-highlighted': '#efefef',
@@ -29,7 +29,7 @@ const darkTheme: ThemeDefinition = {
   dark: true,
   colors: {
     primary: '#008800',
-    'primary-variant': '#369d36',
+    secondary: '#369d36',
     'surface-subtle': '#1c1c1c',
     'surface-medium': '#262626',
     'surface-highlighted': '#2c2c2c',
@@ -94,7 +94,7 @@ const vuetify = createVuetify({
       variant: 'text',
     },
     VBtnSubscribe: {
-      color: 'primary-variant',
+      color: 'secondary',
       class: 'px-1 ms-n1 me-2',
       variant: 'text',
     },
@@ -115,16 +115,16 @@ const vuetify = createVuetify({
       color: 'primary',
     },
     VSwitch: {
-      color: 'primary-variant',
+      color: 'secondary',
     },
     VCheckbox: {
-      color: 'primary-variant',
+      color: 'secondary',
     },
     VRadioGroup: {
-      color: 'primary-variant',
+      color: 'secondary',
     },
     VTextField: {
-      color: 'primary-variant',
+      color: 'secondary',
     },
     VDialog: {
       width: '50rem',
@@ -155,7 +155,7 @@ const vuetify = createVuetify({
         class: 'pa-0',
       },
       VBtn: {
-        color: 'primary-variant',
+        color: 'secondary',
         variant: 'text',
       },
     },

website/src/registerSentry.ts

@@ -8,7 +8,6 @@ import {
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
   SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
   setHttpStatus,
-  spanToJSON,
   startBrowserTracingNavigationSpan,
 } from '@sentry/browser'
 import type { Integration, Span, SpanAttributes, TransactionSource } from '@sentry/types'
@@ -202,7 +201,6 @@ function browserTracingIntegration(router: Router): Integration {
 
       router.beforeEach((to, from) => {
         const attributes: SpanAttributes = {
-          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.vue',
           'route.name': to.name as string,
           'route.path': to.path as string,
           'route.hash': to.hash as string,
@@ -250,17 +248,14 @@ function browserTracingIntegration(router: Router): Integration {
         if (instrumentPageLoad && isPageLoadNavigation) {
           const activeRootSpan = getActiveRootSpan()
           if (activeRootSpan) {
-            // Replace the name of the existing root span if it was not custom set
-            const existingAttributes = spanToJSON(activeRootSpan).data || {}
-            if (existingAttributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] !== 'custom') {
-              activeRootSpan.updateName(transactionName)
-              activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, transactionSource)
-            }
+            // Replace the name of the existing root span
+            activeRootSpan.updateName(transactionName)
 
             // Set router attributes on the existing pageload transaction
-            // This will override the origin and add params & query attributes
+            // This will override the source and origin and add params & query attributes
             activeRootSpan.setAttributes({
               ...attributes,
+              [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: transactionSource,
               [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.vue',
             })
 
@@ -294,14 +289,5 @@ function browserTracingIntegration(router: Router): Integration {
 
 function getActiveRootSpan(): Span | undefined {
   const span = getActiveSpan()
-  const rootSpan = span && getRootSpan(span)
-
-  if (!rootSpan) {
-    return undefined
-  }
-
-  const op = spanToJSON(rootSpan).op
-
-  // Only use this root span if it is a pageload or navigation span
-  return op === 'navigation' || op === 'pageload' ? rootSpan : undefined
+  if (span) return getRootSpan(span)
 }

website/src/router/guards.ts

@@ -10,15 +10,15 @@ export function homeGuard(): NavigationGuardReturn {
   const { entityType } = useSettingsStore()
 
   // Redirect the user either to the timetable or welcome page
-  if (entityType === EntityType.None) return { name: 'welcome', replace: true }
-  else return { name: 'timetable', replace: true }
+  if (entityType === EntityType.None) return { name: 'welcome', replace: true, force: true }
+  else return { name: 'timetable', replace: true, force: true }
 }
 
 export function welcomeGuard(): NavigationGuardReturn {
   const { entityType } = useSettingsStore()
 
   // Redirect the user to the timetable page if it has the entity set
-  if (entityType !== EntityType.None) return { name: 'timetable', replace: true }
+  if (entityType !== EntityType.None) return { name: 'timetable', replace: true, force: true }
 }
 
 export async function timetableGuard(