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

Refactor MarketDashboard component for improved layout and responsiveness

Browse source 
- Adjust padding and margins for better spacing and visual hierarchy.
- Enhance tab navigation with improved overflow handling and responsive design.
- Update button styles for better accessibility and consistency across different screen sizes.

These changes enhance the user experience on the Market Dashboard, making it more intuitive and visually appealing.
This commit is contained in:
padreug 2025-09-08 23:45:21 +02:00
parent a5764621c2
commit 6c06a2075a
1 changed files with 24 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/modules/market/views/MarketDashboard.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="container mx-auto px-4 py-8">
<div class="container mx-auto px-2 sm:px-4 py-4 sm:py-8">
<!-- Page Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-foreground">Market Dashboard</h1>
@ -9,27 +9,29 @@
</div>
<!-- Dashboard Tabs -->
<div class="mb-6">
<nav class="flex space-x-8 border-b border-border">
<button
v-for="tab in tabs"
:key="tab.id"
@click="activeTab = tab.id"
:class="[
'py-2 px-1 border-b-2 font-medium text-sm transition-colors',
activeTab === tab.id
? 'border-primary text-primary'
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
]"
>
<div class="flex items-center space-x-2">
<component :is="tab.icon" class="w-4 h-4" />
<span>{{ tab.name }}</span>
<Badge v-if="tab.badge" variant="secondary" class="text-xs">
{{ tab.badge }}
</Badge>
</div>
</button>
<div class="mb-6 relative">
<nav class="border-b border-border overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
<div class="flex space-x-4 sm:space-x-8 min-w-max">
<button
v-for="tab in tabs"
:key="tab.id"
@click="activeTab = tab.id"
:class="[
'py-2 px-1 sm:px-2 border-b-2 font-medium text-xs sm:text-sm transition-colors whitespace-nowrap',
activeTab === tab.id
? 'border-primary text-primary'
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
]"
>
<div class="flex items-center space-x-1.5 sm:space-x-2">
<component :is="tab.icon" class="w-4 h-4 flex-shrink-0" />
<span>{{ tab.name }}</span>
<Badge v-if="tab.badge" variant="secondary" class="text-xs ml-1">
{{ tab.badge }}
</Badge>
</div>
</button>
</div>
</nav>
</div>