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

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

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