padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix EventsPage button layout for mobile view

Browse source 
- Updated the layout of the EventsPage component to improve responsiveness, including adjustments to flex properties and spacing.
- Modified heading sizes for better visibility on different screen sizes.
- Improved user feedback for authentication status with dynamic text based on screen size.
- Ensured button labels adapt to screen size for a more streamlined user experience.

These changes enhance the overall usability and accessibility of the EventsPage component.
This commit is contained in:
padreug 2025-09-14 19:13:13 +02:00
parent f7ac12bf76
commit 963aa42662
1 changed files with 15 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/modules/events/views/EventsPage.vue
View file

@ -127,27 +127,31 @@ function handleEventCreated() {
<!-- Events Content - Only render when module is ready -->
<div v-else class="container mx-auto py-8 px-4">
<div class="flex justify-between items-center mb-6">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
<div class="space-y-1">
<h1 class="text-3xl font-bold text-foreground">Events</h1>
<h1 class="text-2xl sm:text-3xl font-bold text-foreground">Events</h1>
<div v-if="isAuthenticated && userDisplay" class="flex items-center gap-2 text-sm text-muted-foreground">
<User class="w-4 h-4" />
<span>Logged in as {{ userDisplay.name }}</span>
<span class="hidden xs:inline">Logged in as {{ userDisplay.name }}</span>
<span class="xs:hidden">{{ userDisplay.name }}</span>
<Badge variant="outline" class="text-xs">{{ userDisplay.shortId }}</Badge>
</div>
<div v-else class="flex items-center gap-2 text-sm text-muted-foreground">
<LogIn class="w-4 h-4" />
<span>Please log in to purchase tickets</span>
<span class="hidden xs:inline">Please log in to purchase tickets</span>
<span class="xs:hidden">Login required</span>
</div>
</div>
<div class="flex gap-2">
<Button v-if="isAuthenticated" variant="default" size="sm" @click="showCreateDialog = true">
<Plus class="w-4 h-4 mr-2" />
Create Event
<div class="flex gap-2 sm:flex-shrink-0">
<Button v-if="isAuthenticated" variant="default" size="sm" @click="showCreateDialog = true" class="flex-1 sm:flex-none">
<Plus class="w-4 h-4" />
<span class="ml-2 hidden xs:inline">Create Event</span>
<span class="ml-2 xs:hidden">Create</span>
</Button>
<Button variant="secondary" size="sm" @click="refresh" :disabled="isLoading">
<RefreshCw class="w-4 h-4 mr-2" :class="{ 'animate-spin': isLoading }" />
Refresh
<Button variant="secondary" size="sm" @click="refresh" :disabled="isLoading" class="flex-1 sm:flex-none">
<RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
<span class="ml-2 hidden xs:inline">Refresh</span>
<span class="ml-2 xs:hidden">Refresh</span>
</Button>
</div>
</div>