Refactor Layout and Styling in UserMenu, AppHeader, and Product Pages
- Adjusted button margin in UserMenu.vue for better alignment. - Updated container classes in AppHeader.vue to use max-width for improved responsiveness. - Modified max-width settings in product detail page to enhance layout consistency across different states (loading, error, product display).
This commit is contained in:
@@ -116,7 +116,7 @@ const handleAddToCart = async () => {
|
||||
<NuxtLayout name="default">
|
||||
<div class="min-h-screen px-4 py-12 md:px-6 lg:px-8">
|
||||
<!-- Back Button -->
|
||||
<div class="mx-auto mb-8 max-w-container-narrow">
|
||||
<div class="mx-auto max-w-container-wide">
|
||||
<NuxtLink to="/products"
|
||||
class="inline-flex items-center gap-2 text-white/80 transition-colors hover:text-white">
|
||||
<ArrowLeft :size="20" />
|
||||
@@ -125,14 +125,14 @@ const handleAddToCart = async () => {
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="pending" class="mx-auto max-w-container-narrow text-center">
|
||||
<div v-if="pending" class="mx-auto max-w-4xl text-center">
|
||||
<div class="card-glass inline-block">
|
||||
<p class="text-white/80">Produkt wird geladen...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error State (404 or other errors) -->
|
||||
<div v-else-if="error" class="mx-auto max-w-container-narrow">
|
||||
<div v-else-if="error" class="mx-auto max-w-4xl">
|
||||
<div class="card-glass border-red/50 bg-red/10">
|
||||
<h2 class="mb-2 text-2xl font-semibold text-red">
|
||||
{{ error.statusCode === 404 ? 'Produkt nicht gefunden' : 'Fehler beim Laden' }}
|
||||
@@ -153,7 +153,7 @@ const handleAddToCart = async () => {
|
||||
</div>
|
||||
|
||||
<!-- Product Detail -->
|
||||
<div v-else-if="product" class="mx-auto max-w-container-narrow">
|
||||
<div v-else-if="product" class="mx-auto mt-12 max-w-container-wide">
|
||||
<div class="overflow-hidden rounded-2xl border border-white/20 bg-white/10 shadow-glass backdrop-blur-lg">
|
||||
<!-- Product Image (no padding, flush with top) -->
|
||||
<div class="relative aspect-[16/9] w-full overflow-hidden bg-purple-dark">
|
||||
|
||||
Reference in New Issue
Block a user