aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

fix(events): move My Tickets upcoming/past toggle off the hamburger

Browse source 
The toggle sat in the header's top-right corner, where it collided with
the fixed top-right hamburger menu (the Past button rendered behind it).
Move it to its own left-aligned row above the tabs — same approach the
calendar page uses to clear the hamburger.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-06-16 01:12:58 +02:00 • committed by padreug
commit c53bc525ef
1 changed files with 23 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/modules/events/views/MyTicketsPage.vue
View file

@ -167,7 +167,7 @@ onMounted(async () => {
<template>
<div class="container mx-auto py-8 px-4">
<div class="flex justify-between items-start gap-3 mb-6">
<div class="flex justify-between items-center mb-6">
<div class="space-y-1">
<h1 class="text-3xl font-bold text-foreground">My Tickets</h1>
<div v-if="isAuthenticated && userDisplay" class="flex items-center gap-2 text-sm text-muted-foreground">
@ -180,27 +180,6 @@ onMounted(async () => {
<span>Please log in to view your tickets</span>
</div>
</div>
<!-- Upcoming/Past toggle — defaults to upcoming so the list isn't
cluttered with events that already happened. -->
<div v-if="isAuthenticated && tickets.length > 0" class="inline-flex shrink-0 rounded-md border p-0.5">
<Button
:variant="!showPast ? 'default' : 'ghost'"
size="sm"
class="h-7"
@click="showPast = false"
>
Upcoming
</Button>
<Button
:variant="showPast ? 'default' : 'ghost'"
size="sm"
class="h-7"
@click="showPast = true"
>
Past
</Button>
</div>
</div>
<div v-if="!isAuthenticated" class="text-center py-12">
@ -226,6 +205,28 @@ onMounted(async () => {
</div>
<div v-else-if="tickets.length > 0">
<!-- Upcoming/Past toggle — own row, left-aligned so it clears the
fixed top-right hamburger menu. Defaults to upcoming so the
list isn't cluttered with events that already happened. -->
<div class="mb-4 inline-flex rounded-md border p-0.5">
<Button
:variant="!showPast ? 'default' : 'ghost'"
size="sm"
class="h-7"
@click="showPast = false"
>
Upcoming
</Button>
<Button
:variant="showPast ? 'default' : 'ghost'"
size="sm"
class="h-7"
@click="showPast = true"
>
Past
</Button>
</div>
<Tabs default-value="all" class="w-full">
<TabsList class="grid w-full grid-cols-4">
<TabsTrigger value="all">All ({{ visibleCounts.all }})</TabsTrigger>