Restore working state from f17e19f (before mobile overhaul)
Reverting all my changes that broke the desktop layout. Starting fresh for mobile improvements.
This commit is contained in:
fahed
209
src/App.css
209
src/App.css
@@ -325,37 +325,6 @@ body {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Page Title with Actions (Labels toggle) */
|
||||
.page-title-with-actions {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-title-with-actions .page-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page-title-with-actions .toggle-with-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.toggle-with-label .toggle-text {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.page-title-with-actions .toggle-switch button {
|
||||
padding: 3px 8px;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
/* Filters - now uses .controls for consistency */
|
||||
|
||||
/* Stats Grid */
|
||||
@@ -630,58 +599,6 @@ table tbody tr:hover {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Period Display Banner */
|
||||
.period-display-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
background: var(--bg);
|
||||
padding: 20px 32px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.period-display-banner .period-box {
|
||||
text-align: center;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.period-display-banner .period-box.prev {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.period-display-banner .period-box.curr {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.period-display-banner .period-label {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.period-display-banner .period-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.period-display-banner .period-dates {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.period-display-banner .period-vs {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* Comparison Metrics */
|
||||
.comparison-grid {
|
||||
display: grid;
|
||||
@@ -1895,129 +1812,3 @@ table tbody tr:hover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE UX ENHANCEMENTS
|
||||
All styles below ONLY apply to mobile
|
||||
======================================== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Better touch targets (min 44px for accessibility) */
|
||||
.mobile-nav-item {
|
||||
min-height: 44px;
|
||||
min-width: 56px;
|
||||
}
|
||||
|
||||
.carousel-dot {
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.toggle-switch button {
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.control-group select,
|
||||
.control-group input[type="date"] {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* Smoother carousel transitions */
|
||||
.carousel-track {
|
||||
transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* Touch feedback */
|
||||
.carousel-dot:active,
|
||||
.mobile-nav-item:active,
|
||||
.stat-card:active {
|
||||
transform: scale(0.96);
|
||||
transition: transform 100ms ease;
|
||||
}
|
||||
|
||||
/* Bottom nav active indicator */
|
||||
.mobile-nav-item.active {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-nav-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: var(--primary);
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
/* Ensure chart title doesn't overlap with toggle */
|
||||
.charts-carousel .chart-card h2 {
|
||||
padding-right: 85px;
|
||||
}
|
||||
|
||||
/* Period banner stacks on mobile */
|
||||
.period-display-banner {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.period-display-banner .period-box {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.period-display-banner .period-value {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Table scroll hint */
|
||||
.table-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 16px;
|
||||
background: linear-gradient(to left, var(--surface), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra small screens */
|
||||
@media (max-width: 375px) {
|
||||
.dashboard,
|
||||
.comparison {
|
||||
padding: 12px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.page-title h1 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.stats-carousel .stat-value {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.charts-carousel .chart-container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.carousel-dot .dot-label {
|
||||
font-size: 0.5625rem;
|
||||
}
|
||||
|
||||
.mobile-nav-item {
|
||||
font-size: 0.5625rem;
|
||||
}
|
||||
|
||||
.mobile-nav-item svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user