Improve Features page ordering and mobile UI consistency
- Fix module ordering with local state tracking for immediate UI updates - Add tab centering when selected (scroll to center) - Use finally block in handleApplyOrder to ensure state reset - Add cancelOrder translation key - Increase order card min-width for better readability - Normalize mobile top bar height with min-height constraint - Add display:flex to mobile title sections for proper layout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -34,10 +34,16 @@
|
||||
.admin-tabs-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.75rem var(--page-padding-x);
|
||||
padding: 0.75rem;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Ensure no extra margin from body */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Page header slider - rounded pill style (like admin panel) */
|
||||
.page-tabs-slider,
|
||||
.admin-tabs-slider {
|
||||
@@ -51,6 +57,16 @@
|
||||
box-shadow: var(--shadow-md);
|
||||
max-width: 100%;
|
||||
backdrop-filter: blur(14px) saturate(1.15);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.page-tabs-slider::-webkit-scrollbar,
|
||||
.admin-tabs-slider::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, black, white)) {
|
||||
@@ -149,7 +165,6 @@
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
@@ -291,7 +306,7 @@
|
||||
.mobile-menu-btn {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
left: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
@@ -315,30 +330,39 @@
|
||||
|
||||
.page-tabs-container,
|
||||
.admin-tabs-container {
|
||||
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.page-tabs-slider,
|
||||
.admin-tabs-slider {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.page-title-section,
|
||||
.admin-title-section {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding-left: 48px;
|
||||
padding-left: 72px;
|
||||
font-size: 1rem;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-title-section .material-symbols-outlined,
|
||||
.admin-title-section .material-symbols-outlined {
|
||||
font-size: 24px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.page-title-text,
|
||||
.admin-title-text {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Hide divider on mobile */
|
||||
@@ -349,19 +373,29 @@
|
||||
|
||||
/* Hide title section when tabs are present on mobile */
|
||||
.page-tabs-slider:has(.page-tab-btn) .page-title-section,
|
||||
.admin-tabs-slider:has(.admin-tab-btn) .admin-title-section {
|
||||
.page-tabs-slider:has(.admin-tab-btn) .page-title-section,
|
||||
.admin-tabs-slider:has(.admin-tab-btn) .admin-title-section,
|
||||
.admin-tabs-slider:has(.page-tab-btn) .admin-title-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Center title section absolutely when no tabs are present on mobile */
|
||||
.page-tabs-slider:not(:has(.page-tab-btn)),
|
||||
.admin-tabs-slider:not(:has(.admin-tab-btn)) {
|
||||
justify-content: center;
|
||||
min-height: 48px;
|
||||
/* Add padding-left when tabs are present to avoid logo overlap */
|
||||
.page-tabs-slider:has(.page-tab-btn),
|
||||
.page-tabs-slider:has(.admin-tab-btn),
|
||||
.admin-tabs-slider:has(.admin-tab-btn),
|
||||
.admin-tabs-slider:has(.page-tab-btn) {
|
||||
padding-left: 72px;
|
||||
}
|
||||
|
||||
.page-tabs-slider:not(:has(.page-tab-btn)) .page-title-section,
|
||||
.admin-tabs-slider:not(:has(.admin-tab-btn)) .admin-title-section {
|
||||
/* Center title section absolutely when no tabs are present on mobile */
|
||||
.page-tabs-slider:not(:has(.page-tab-btn)):not(:has(.admin-tab-btn)),
|
||||
.admin-tabs-slider:not(:has(.admin-tab-btn)):not(:has(.page-tab-btn)) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page-tabs-slider:not(:has(.page-tab-btn)):not(:has(.admin-tab-btn)) .page-title-section,
|
||||
.admin-tabs-slider:not(:has(.admin-tab-btn)):not(:has(.page-tab-btn)) .admin-title-section {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@@ -371,19 +405,19 @@
|
||||
}
|
||||
|
||||
/* Lighter icon color in dark theme when only title is shown */
|
||||
.page-tabs-slider:not(:has(.page-tab-btn)) .page-title-section .material-symbols-outlined,
|
||||
.admin-tabs-slider:not(:has(.admin-tab-btn)) .admin-title-section .material-symbols-outlined {
|
||||
.page-tabs-slider:not(:has(.page-tab-btn)):not(:has(.admin-tab-btn)) .page-title-section .material-symbols-outlined,
|
||||
.admin-tabs-slider:not(:has(.admin-tab-btn)):not(:has(.page-tab-btn)) .admin-title-section .material-symbols-outlined {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Tabs on second row - full width */
|
||||
/* Tabs - expand to fill, but scrollable when overflow */
|
||||
.page-tab-btn,
|
||||
.admin-tab-btn {
|
||||
flex: 1;
|
||||
flex: 1 0 auto;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
min-width: 0;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
/* Hide text on mobile, show only icons */
|
||||
@@ -492,6 +526,52 @@
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* ========== DARK THEME OVERRIDES ========== */
|
||||
|
||||
/* Top bar in dark mode: match sidebar style exactly */
|
||||
[data-theme='dark'] .page-tabs-slider,
|
||||
[data-theme='dark'] .admin-tabs-slider {
|
||||
background: var(--color-bg-sidebar);
|
||||
border: 1px solid var(--color-sidebar-border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, black, white)) {
|
||||
[data-theme='dark'] .page-tabs-slider,
|
||||
[data-theme='dark'] .admin-tabs-slider {
|
||||
background: color-mix(in srgb, var(--color-bg-sidebar) 88%, transparent);
|
||||
backdrop-filter: blur(18px) saturate(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
/* Text colors in dark top bar */
|
||||
[data-theme='dark'] .page-title-section,
|
||||
[data-theme='dark'] .admin-title-section {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .page-title-text,
|
||||
[data-theme='dark'] .admin-title-text {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .page-tab-btn,
|
||||
[data-theme='dark'] .admin-tab-btn {
|
||||
color: rgba(241, 245, 249, 0.7);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .page-tab-btn:hover:not(.active),
|
||||
[data-theme='dark'] .admin-tab-btn:hover:not(.active) {
|
||||
color: #f1f5f9;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .page-tabs-divider,
|
||||
[data-theme='dark'] .admin-tabs-divider {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
/* ========== DARK THEME + AUTO ACCENT OVERRIDES ========== */
|
||||
|
||||
/* Tab buttons with auto accent in dark mode: use off-white background with dark text */
|
||||
|
||||
Reference in New Issue
Block a user