boban
/
CluPilotCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): fixed sidebars (admin + portal) + storage banner shimmer 

App-shell layout: sidebar is a full-height fixed column on lg, only main
scrolls. Re-added the left->right shimmer sweep on the dashboard storage
banner (reduced-motion safe, token colours).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
feat/portal-design
nexxo 2026-07-25 13:28:05 +02:00
parent bc278c8fa1
commit 7c1a153446
4 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/views/layouts/admin.blade.php
View File

@ -10,9 +10,9 @@
</head>
{{-- theme-admin swaps every design token to the dark Tactical-Terminal set. --}}
<body class="theme-admin min-h-full bg-bg text-body antialiased" x-data="{ nav: false }">
<div class="flex min-h-screen">
<div class="flex min-h-screen lg:h-screen lg:overflow-hidden">
<aside
class="fixed inset-y-0 left-0 z-40 w-60 border-r border-line bg-surface px-3 py-4 transition-transform lg:static lg:translate-x-0"
class="fixed inset-y-0 left-0 z-40 flex w-60 flex-col overflow-y-auto border-r border-line bg-surface px-3 py-4 transition-transform lg:static lg:h-screen lg:translate-x-0"
:class="nav ? 'translate-x-0' : '-translate-x-full'"
>
<div class="flex items-center justify-between px-3 pb-4">
@ -49,8 +49,8 @@
<div x-show="nav" x-cloak @click="nav = false" class="fixed inset-0 z-30 bg-black/40 lg:hidden"></div>
<div class="flex min-w-0 flex-1 flex-col">
<header class="flex h-14 items-center justify-between border-b border-line bg-surface px-4">
<div class="flex min-w-0 flex-1 flex-col lg:h-screen lg:overflow-hidden">
<header class="flex h-14 shrink-0 items-center justify-between border-b border-line bg-surface px-4">
<button type="button" class="lg:hidden inline-flex min-h-11 min-w-11 items-center justify-center rounded text-muted hover:bg-surface-hover" @click="nav = true" aria-label="{{ __('dashboard.open_nav') }}">
<x-ui.icon name="menu" />
</button>
@ -76,7 +76,7 @@
@endauth
</header>
<main class="mx-auto w-full max-w-[1240px] flex-1 p-6 lg:p-8">
<main class="mx-auto w-full max-w-[1240px] flex-1 p-6 lg:overflow-y-auto lg:p-8">
{{ $slot }}
</main>
</div>

12
resources/views/layouts/portal-app.blade.php
View File

@ -9,10 +9,10 @@
@livewireStyles
</head>
<body class="min-h-full bg-bg text-body antialiased" x-data="{ nav: false }">
<div class="flex min-h-screen">
{{-- Sidebar: fixed drawer on small screens, static on large (R7). --}}
<div class="flex min-h-screen lg:h-screen lg:overflow-hidden">
{{-- Sidebar: fixed drawer on small screens, fixed full-height column on large (R7). --}}
<aside
class="fixed inset-y-0 left-0 z-40 w-60 border-r border-line bg-surface px-3 py-4 transition-transform lg:static lg:translate-x-0"
class="fixed inset-y-0 left-0 z-40 flex w-60 flex-col overflow-y-auto border-r border-line bg-surface px-3 py-4 transition-transform lg:static lg:h-screen lg:translate-x-0"
:class="nav ? 'translate-x-0' : '-translate-x-full'"
>
<div class="flex items-center justify-between px-3 pb-4">
@ -41,8 +41,8 @@
{{-- Mobile backdrop --}}
<div x-show="nav" x-cloak @click="nav = false" class="fixed inset-0 z-30 bg-ink/20 lg:hidden"></div>
<div class="flex min-w-0 flex-1 flex-col">
<header class="flex h-14 items-center justify-between border-b border-line bg-surface px-4">
<div class="flex min-w-0 flex-1 flex-col lg:h-screen lg:overflow-hidden">
<header class="flex h-14 shrink-0 items-center justify-between border-b border-line bg-surface px-4">
<button type="button" class="lg:hidden inline-flex min-h-11 min-w-11 items-center justify-center rounded text-muted hover:bg-surface-hover" @click="nav = true" aria-label="{{ __('dashboard.open_nav') }}">
<x-ui.icon name="menu" />
</button>
@ -68,7 +68,7 @@
@endauth
</header>
<main class="mx-auto w-full max-w-[1200px] flex-1 p-6 lg:p-8">
<main class="mx-auto w-full max-w-[1200px] flex-1 p-6 lg:overflow-y-auto lg:p-8">
{{ $slot }}
</main>
</div>

12
resources/views/livewire/dashboard.blade.php
View File

@ -58,13 +58,17 @@
</div>
{{-- Upsell --}}
<div class="flex flex-wrap items-center gap-4 rounded-xl border border-accent-border bg-accent-subtle px-5 py-4 animate-rise [animation-delay:300ms]">
<x-ui.icon name="alert-triangle" class="size-6 shrink-0 text-accent-active" />
<div class="min-w-0">
<div class="relative flex flex-wrap items-center gap-4 overflow-hidden rounded-xl border border-accent-border bg-accent-subtle px-5 py-4 animate-rise [animation-delay:300ms]">
{{-- Shimmer sweep (left → right), disabled for reduced motion --}}
<span aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden motion-reduce:hidden">
<span class="absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-transparent via-surface/60 to-transparent animate-shimmer"></span>
</span>
<x-ui.icon name="alert-triangle" class="relative size-6 shrink-0 text-accent-active" />
<div class="relative min-w-0">
<p class="text-sm font-semibold text-ink">{{ __('dashboard.upsell.title', ['percent' => $storagePercent]) }}</p>
<p class="text-sm text-muted">{{ __('dashboard.upsell.body') }}</p>
</div>
<x-ui.button variant="secondary" size="sm" class="ml-auto" @click="$dispatch('notify', { message: msgs.addon })">
<x-ui.button variant="secondary" size="sm" class="relative ml-auto" @click="$dispatch('notify', { message: msgs.addon })">
{{ __('dashboard.upsell.cta') }}
</x-ui.button>
</div>

5
tailwind.config.js
View File

@ -59,9 +59,14 @@ export default {
'0%': { opacity: '0', transform: 'translateY(16px)' },
'100%': { opacity: '1', transform: 'none' },
},
shimmer: {
'0%': { transform: 'translateX(-160%) skewX(-12deg)' },
'100%': { transform: 'translateX(320%) skewX(-12deg)' },
},
},
animation: {
rise: 'rise 0.6s cubic-bezier(.2,.7,.2,1) both',
shimmer: 'shimmer 3s ease-in-out infinite',
},
},
},