terrylee/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[STYLE] 銷售中心與 admin header 手機版響應式調整

Browse Source 
1. 銷售中心三個 Tab 容器圓角與內距改為行動優先（rounded-2xl sm:rounded-3xl、p-4 sm:p-6 lg:p-8）。
2. 訂單/發票/出貨三個列表的搜尋欄寬度改為手機滿版、桌面才套 min-w-[280px]（w-full min-w-0 lg:min-w-[280px]）。
3. admin layout：body 加 overflow-x-clip 防止水平溢出；行動版品牌字在窄螢幕隱藏、自動刷新與 logo 區塊調整間距與 shrink-0 避免擠壓。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
sky121113 2026-06-18 11:41:37 +08:00
parent 69a1d02fc7
commit 840052dd5a
5 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/views/admin/sales/index.blade.php
View File

@ -21,7 +21,7 @@
<div x-show="activeTab === 'orders'" class="relative" <div x-show="activeTab === 'orders'" class="relative"
x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"> x-transition:enter-end="opacity-100 translate-y-0">
<div class="luxury-card rounded-3xl p-8 relative overflow-hidden"> <div class="luxury-card rounded-2xl sm:rounded-3xl p-4 sm:p-6 lg:p-8 relative overflow-hidden">
<x-luxury-spinner show="tabLoading === 'orders'" /> <x-luxury-spinner show="tabLoading === 'orders'" />
<div id="tab-orders-container" :class="{ 'opacity-30 pointer-events-none transition-opacity duration-300': tabLoading === 'orders' }"> <div id="tab-orders-container" :class="{ 'opacity-30 pointer-events-none transition-opacity duration-300': tabLoading === 'orders' }">
@include('admin.sales.partials.tab-orders') @include('admin.sales.partials.tab-orders')
@ -33,7 +33,7 @@
<div x-show="activeTab === 'invoices'" class="relative" <div x-show="activeTab === 'invoices'" class="relative"
x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0" x-cloak> x-transition:enter-end="opacity-100 translate-y-0" x-cloak>
<div class="luxury-card rounded-3xl p-8 relative overflow-hidden"> <div class="luxury-card rounded-2xl sm:rounded-3xl p-4 sm:p-6 lg:p-8 relative overflow-hidden">
<x-luxury-spinner show="tabLoading === 'invoices'" /> <x-luxury-spinner show="tabLoading === 'invoices'" />
<div id="tab-invoices-container" :class="{ 'opacity-30 pointer-events-none transition-opacity duration-300': tabLoading === 'invoices' }"> <div id="tab-invoices-container" :class="{ 'opacity-30 pointer-events-none transition-opacity duration-300': tabLoading === 'invoices' }">
@include('admin.sales.partials.tab-invoices') @include('admin.sales.partials.tab-invoices')
@ -45,7 +45,7 @@
<div x-show="activeTab === 'dispense'" class="relative" <div x-show="activeTab === 'dispense'" class="relative"
x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0" x-cloak> x-transition:enter-end="opacity-100 translate-y-0" x-cloak>
<div class="luxury-card rounded-3xl p-8 relative overflow-hidden"> <div class="luxury-card rounded-2xl sm:rounded-3xl p-4 sm:p-6 lg:p-8 relative overflow-hidden">
<x-luxury-spinner show="tabLoading === 'dispense'" /> <x-luxury-spinner show="tabLoading === 'dispense'" />
<div id="tab-dispense-container" :class="{ 'opacity-30 pointer-events-none transition-opacity duration-300': tabLoading === 'dispense' }"> <div id="tab-dispense-container" :class="{ 'opacity-30 pointer-events-none transition-opacity duration-300': tabLoading === 'dispense' }">
@include('admin.sales.partials.tab-dispense') @include('admin.sales.partials.tab-dispense')

2
resources/views/admin/sales/partials/tab-dispense.blade.php
View File

@ -4,7 +4,7 @@
<input type="hidden" name="tab" value="dispense"> <input type="hidden" name="tab" value="dispense">
<div class="relative group flex-1 min-w-[280px]"> <div class="relative group flex-1 w-full min-w-0 lg:min-w-[280px]">
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10"> <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
<svg class="w-4 h-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors stroke-[2.5]" <svg class="w-4 h-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors stroke-[2.5]"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"> viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">

2
resources/views/admin/sales/partials/tab-invoices.blade.php
View File

@ -4,7 +4,7 @@
<input type="hidden" name="tab" value="invoices"> <input type="hidden" name="tab" value="invoices">
<div class="relative group flex-1 min-w-[280px]"> <div class="relative group flex-1 w-full min-w-0 lg:min-w-[280px]">
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10"> <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
<svg class="w-4 h-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors stroke-[2.5]" <svg class="w-4 h-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors stroke-[2.5]"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"> viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">

2
resources/views/admin/sales/partials/tab-orders.blade.php
View File

@ -4,7 +4,7 @@
<input type="hidden" name="tab" value="orders"> <input type="hidden" name="tab" value="orders">
<div class="relative group flex-1 min-w-[280px]"> <div class="relative group flex-1 w-full min-w-0 lg:min-w-[280px]">
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10"> <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
<svg class="w-4 h-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors stroke-[2.5]" <svg class="w-4 h-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors stroke-[2.5]"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"> viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">

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

@ -44,7 +44,7 @@
</head> </head>
<body <body
class="bg-gray-50 dark:bg-[#0f172a] antialiased font-sans h-full selection:bg-indigo-100 dark:selection:bg-indigo-900/40" class="bg-gray-50 dark:bg-[#0f172a] antialiased font-sans h-full overflow-x-clip selection:bg-indigo-100 dark:selection:bg-indigo-900/40"
x-data="{ x-data="{
sidebarOpen: false, sidebarOpen: false,
sidebarCollapsed: localStorage.getItem('sidebarCollapsed') === 'true', sidebarCollapsed: localStorage.getItem('sidebarCollapsed') === 'true',
@ -128,18 +128,18 @@
<header <header
class="sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-[48] w-full bg-white/80 backdrop-blur-md border-b border-slate-200/50 text-sm py-2.5 sm:py-4 lg:pl-[var(--admin-sidebar-offset)] dark:bg-[#0f172a]/80 dark:border-slate-800/50 shadow-sm transition-all duration-300"> class="sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-[48] w-full bg-white/80 backdrop-blur-md border-b border-slate-200/50 text-sm py-2.5 sm:py-4 lg:pl-[var(--admin-sidebar-offset)] dark:bg-[#0f172a]/80 dark:border-slate-800/50 shadow-sm transition-all duration-300">
<nav class="flex basis-full items-center w-full mx-auto pl-4 lg:pl-0 pr-4 sm:pr-6 md:pr-8" aria-label="Global"> <nav class="flex basis-full items-center w-full mx-auto pl-4 lg:pl-0 pr-4 sm:pr-6 md:pr-8" aria-label="Global">
<div class="mr-5 lg:mr-0 lg:hidden text-center"> <div class="mr-2 lg:mr-0 lg:hidden text-center shrink-0">
<a class="flex items-center gap-x-2 flex-none text-xl font-bold dark:text-white font-display tracking-tight" <a class="flex items-center gap-x-2 flex-none text-xl font-bold dark:text-white font-display tracking-tight"
href="{{ route('admin.dashboard') }}" aria-label="Brand"> href="{{ route('admin.dashboard') }}" aria-label="Brand">
<img src="{{ auth()->user()->company && auth()->user()->company->hasCustomBrandingEnabled() && auth()->user()->company->logo_url ? auth()->user()->company->logo_url : asset('starcloud_icon.png') }}" <img src="{{ auth()->user()->company && auth()->user()->company->hasCustomBrandingEnabled() && auth()->user()->company->logo_url ? auth()->user()->company->logo_url : asset('starcloud_icon.png') }}"
alt="{{ auth()->user()->company ? auth()->user()->company->name : config('app.name') }} Logo" alt="{{ auth()->user()->company ? auth()->user()->company->name : config('app.name') }} Logo"
class="w-7 h-7 max-h-7 max-w-[28px] object-contain shrink-0"> class="w-7 h-7 max-h-7 max-w-[28px] object-contain shrink-0">
<span>Star<span class="text-cyan-500">Cloud</span></span> <span class="hidden min-[400px]:inline">Star<span class="text-cyan-500">Cloud</span></span>
</a> </a>
</div> </div>
<!-- Auto Refresh --> <!-- Auto Refresh -->
<div class="relative inline-flex ml-4 sm:ml-10 lg:ml-0" x-data="{ <div class="relative inline-flex shrink-0 ml-2 sm:ml-10 lg:ml-0" x-data="{
refreshOpen: false, refreshOpen: false,
interval: localStorage.getItem('autoRefreshInterval') || 'Off', interval: localStorage.getItem('autoRefreshInterval') || 'Off',
timeLeft: 0, timeLeft: 0,