Skip to content

Commit

Permalink
Merge pull request #101 from filips123/frontend-fixes
Browse files Browse the repository at this point in the history
Implement a new frontend fixes
  • Loading branch information
filips123 authored Aug 30, 2024
2 parents da93d07 + 0c6f2aa commit 76d5baf
Show file tree
Hide file tree
Showing 9 changed files with 73 additions and 66 deletions.
11 changes: 10 additions & 1 deletion website/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 */
Expand Down
18 changes: 17 additions & 1 deletion website/src/assets/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ td {
}

a {
color: rgb(var(--v-theme-primary-variant));
color: rgb(var(--v-theme-secondary));
text-decoration: none;
}

Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/AppSnackbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 1 addition & 4 deletions website/src/components/SettingsBaseAction.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
34 changes: 17 additions & 17 deletions website/src/components/SettingsSelectEntity.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -121,7 +128,7 @@ watch(displayed, value => {
)
// Ensure the history stack is consistent
history.pushState(history.state, '')
pushState(false, false)
history.back()
}
})
Expand Down Expand Up @@ -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() {
Expand Down
23 changes: 11 additions & 12 deletions website/src/components/TimetableDisplay.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -124,8 +123,8 @@ function filterForTargetDay(lessonsTime: MergedLesson[][]) {
</table>
<TimetableEmptyClassrooms v-else :lessons="lessonsTimeDay" />
</td>
</template>
</tr>
</tr>
</template>
</tbody>
</v-table-main>
</template>
Expand Down
16 changes: 8 additions & 8 deletions website/src/plugins/vuetify.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -94,7 +94,7 @@ const vuetify = createVuetify({
variant: 'text',
},
VBtnSubscribe: {
color: 'primary-variant',
color: 'secondary',
class: 'px-1 ms-n1 me-2',
variant: 'text',
},
Expand All @@ -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',
Expand Down Expand Up @@ -155,7 +155,7 @@ const vuetify = createVuetify({
class: 'pa-0',
},
VBtn: {
color: 'primary-variant',
color: 'secondary',
variant: 'text',
},
},
Expand Down
24 changes: 5 additions & 19 deletions website/src/registerSentry.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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',
})

Expand Down Expand Up @@ -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)
}
6 changes: 3 additions & 3 deletions website/src/router/guards.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down

0 comments on commit 76d5baf

Please sign in to comment.