jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: standardize z-index values with CSS variables

Browse source 
- Create _z-index.scss with systematic z-index constants
- Replace 60+ hardcoded z-index values across 19 components
- Establish consistent layering hierarchy:
  - Base layers (1-3)
  - Interactive elements (10-200)
  - Overlays and modals (1000-1100)
  - Top-level elements (1200-10000)

This improves maintainability and prevents z-index conflicts.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Justin Edmund 2025-06-25 21:18:20 -04:00
parent 95ab6d6f84
commit 5875a52b47
21 changed files with 76 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
prd/PRD-codebase-cleanup-refactoring.md
View file

@ -74,9 +74,9 @@ Focus on low-risk, high-impact changes that don't require architectural modifica
### Phase 2: CSS Variable Standardization (Week 2)
Create a consistent design system by extracting hardcoded values.
- [ ] **Create z-index system**
- [ ] Create `src/assets/styles/_z-index.scss` with constants
- [ ] Replace 60+ hardcoded z-index values
- [x] **Create z-index system**
- [x] Create `src/assets/styles/_z-index.scss` with constants
- [x] Replace 60+ hardcoded z-index values
- [ ] **Extract color variables**
- [ ] Add missing color variables for frequently used colors

39
src/assets/styles/_z-index.scss Normal file
View file

@ -0,0 +1,39 @@
/* Z-Index System
* --------------------------------------------------------------------------
* A systematic approach to z-index values to maintain consistent layering
* throughout the application.
* -------------------------------------------------------------------------- */
// Base layers
$z-index-base: 1;
$z-index-above: 2;
$z-index-hover: 3;
// Interactive elements
$z-index-dropdown: 10;
$z-index-sticky: 100;
$z-index-fixed: 200;
// Overlays and modals
$z-index-overlay: 1000;
$z-index-modal-backdrop: 1000;
$z-index-modal: 1050;
$z-index-modal-content: 1100;
// Top-level elements
$z-index-popover: 1200;
$z-index-tooltip: 1400;
$z-index-notification: 10000;
// Component-specific z-indexes
$z-index-header: 100;
$z-index-navigation: 150;
$z-index-sidebar: 200;
$z-index-media-modal: 1050;
$z-index-lightbox: 1100;
$z-index-toast: 10000;
// Admin-specific z-indexes
$z-index-admin-nav: 100;
$z-index-admin-sidebar: 200;
$z-index-admin-modal: 1050;

1
src/assets/styles/imports.scss
View file

@ -2,5 +2,6 @@
// It should NOT contain any actual CSS rules to avoid duplication
@import './variables.scss';
@import './z-index.scss';
@import './fonts.scss';
@import './themes.scss';

2
src/lib/components/AvatarHeadphones.svelte
View file

@ -80,7 +80,7 @@
left: 65%;
top: 30.6%;
pointer-events: none;
z-index: 10;
z-index: $z-index-dropdown;
svg {
width: 100%;

2
src/lib/components/Header.svelte
View file

@ -53,7 +53,7 @@
.site-header {
position: sticky;
top: 0;
z-index: 100;
z-index: $z-index-header;
display: flex;
justify-content: center;
// Smooth padding transition based on scroll

8
src/lib/components/Lightbox.svelte
View file

@ -131,7 +131,7 @@
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 1400;
z-index: $z-index-lightbox;
display: flex;
align-items: center;
justify-content: center;
@ -208,7 +208,7 @@
inset: 0;
border-radius: $unit-2x;
border: 2px solid transparent;
z-index: 2;
z-index: $z-index-above;
pointer-events: none;
transition: border-color 0.2s ease;
}
@ -219,7 +219,7 @@
inset: 2px;
border-radius: calc($unit-2x - 2px);
border: 2px solid transparent;
z-index: 3;
z-index: $z-index-hover;
pointer-events: none;
transition: border-color 0.2s ease;
}
@ -246,7 +246,7 @@
height: 100%;
object-fit: cover;
position: relative;
z-index: 1;
z-index: $z-index-base;
user-select: none;
-webkit-user-drag: none;
}

2
src/lib/components/NavDropdown.svelte
View file

@ -232,7 +232,7 @@
border-radius: $unit-2x;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: $unit;
z-index: 1000;
z-index: $z-index-overlay;
animation: dropdownOpen 0.2s ease;
}

2
src/lib/components/NowPlaying.svelte
View file

@ -54,7 +54,7 @@
border-radius: $unit * 2;
font-size: $font-size-small;
backdrop-filter: blur(10px);
z-index: 10;
z-index: $z-index-dropdown;
animation: fadeIn 0.3s ease-out;
width: fit-content;
}

14
src/lib/components/PhotoItem.svelte
View file

@ -119,7 +119,7 @@
opacity: 0;
transition: opacity 0.4s ease;
position: relative;
z-index: 2;
z-index: $z-index-above;
&.loaded {
opacity: 1;
@ -142,7 +142,7 @@
right: -6px;
height: 100%;
background: rgba(0, 0, 0, 0.1);
z-index: 1;
z-index: $z-index-base;
transform: rotate(2deg);
}
@ -153,13 +153,13 @@
right: -3px;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 2;
z-index: $z-index-above;
transform: rotate(-1deg);
}
&.stack-front {
position: relative;
z-index: 3;
z-index: $z-index-hover;
img {
width: 100%;
@ -169,7 +169,7 @@
opacity: 0;
transition: opacity 0.4s ease;
position: relative;
z-index: 2;
z-index: $z-index-above;
&.loaded {
opacity: 1;
@ -186,7 +186,7 @@
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
color: white;
padding: $unit-2x;
z-index: 4;
z-index: calc($z-index-hover + 1);
border-radius: 0 0 $corner-radius $corner-radius;
}
@ -229,7 +229,7 @@
border-radius: $corner-radius;
opacity: 1;
transition: opacity 0.4s ease;
z-index: 1;
z-index: $z-index-base;
overflow: hidden;
&.loaded {

4
src/lib/components/SegmentedController.svelte
View file

@ -147,7 +147,7 @@
height: calc(100% - #{$unit * 2});
border-radius: 100px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
z-index: $z-index-base;
}
.nav-item {
@ -160,7 +160,7 @@
font-size: 1rem;
font-weight: 400;
position: relative;
z-index: 2;
z-index: $z-index-above;
transition:
color 0.2s ease,
background-color 0.2s ease;

8
src/lib/components/Slideshow.svelte
View file

@ -248,7 +248,7 @@
inset: 0;
border-radius: $image-corner-radius;
border: 4px solid transparent;
z-index: 2;
z-index: $z-index-above;
pointer-events: none;
transition: border-color 0.2s ease;
}
@ -259,7 +259,7 @@
inset: 4px;
border-radius: calc($image-corner-radius - 4px);
border: 4px solid transparent;
z-index: 3;
z-index: $z-index-hover;
pointer-events: none;
transition: border-color 0.2s ease;
}
@ -320,7 +320,7 @@
font-size: 1.2rem;
font-weight: 600;
border-radius: $image-corner-radius;
z-index: 2;
z-index: $z-index-above;
}
&:hover {
@ -347,7 +347,7 @@
height: 100%;
object-fit: cover;
position: relative;
z-index: 1;
z-index: $z-index-base;
}
}
</style>

2
src/lib/components/StreamStatus.svelte
View file

@ -30,7 +30,7 @@
color: white;
border-radius: $unit * 2;
font-size: $font-size-small;
z-index: 1000;
z-index: $z-index-overlay;
animation: fadeIn 0.3s ease-out;
&.connected {

2
src/lib/components/ThreeColumnPhotoGrid.svelte
View file

@ -195,7 +195,7 @@
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
color: white;
padding: $unit-2x;
z-index: 1;
z-index: $z-index-base;
}
.album-info {

2
src/lib/components/admin/AdminNavBar.svelte
View file

@ -84,7 +84,7 @@
.admin-nav-bar {
position: sticky;
top: 0;
z-index: 100;
z-index: $z-index-admin-nav;
width: 100%;
background: $bg-color;
border-bottom: 1px solid transparent;

2
src/lib/components/admin/DeleteConfirmationModal.svelte
View file

@ -64,7 +64,7 @@
display: flex;
align-items: center;
justify-content: center;
z-index: 1050;
z-index: $z-index-modal;
}
.modal {

2
src/lib/components/admin/DropdownMenu.svelte
View file

@ -217,7 +217,7 @@
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
min-width: 180px;
z-index: 1050;
z-index: $z-index-modal;
max-height: 400px;
overflow-y: auto;
}

2
src/lib/components/admin/DropdownMenuContainer.svelte
View file

@ -23,6 +23,6 @@
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
min-width: 180px;
z-index: 1050;
z-index: $z-index-modal;
}
</style>

2
src/lib/components/admin/InlineComposerModal.svelte
View file

@ -744,7 +744,7 @@
position: absolute !important;
top: $unit-2x;
right: $unit-2x;
z-index: 10;
z-index: $z-index-dropdown;
background-color: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(8px);
border: 1px solid $grey-80 !important;

4
src/lib/components/admin/Modal.svelte
View file

@ -123,7 +123,7 @@
display: flex;
justify-content: center;
align-items: center;
z-index: 1400;
z-index: $z-index-modal-backdrop;
padding: $unit-2x;
}
@ -169,7 +169,7 @@
position: absolute !important;
top: $unit-2x;
right: $unit-2x;
z-index: 1;
z-index: $z-index-base;
}
.modal-content {

2
src/lib/components/admin/PostDropdown.svelte
View file

@ -146,7 +146,7 @@
border-radius: $unit-2x;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
min-width: 140px;
z-index: 1050;
z-index: $z-index-modal;
overflow: hidden;
margin: 0;
padding: 0;

4
src/lib/components/admin/UnifiedMediaModal.svelte
View file

@ -569,7 +569,7 @@
gap: $unit;
top: 0;
background: white;
z-index: 10;
z-index: $z-index-dropdown;
padding: $unit-3x $unit-3x 0 $unit-3x;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
@ -791,7 +791,7 @@
padding: $unit-3x $unit-4x $unit-4x;
border-top: 1px solid $grey-85;
background: white;
z-index: 10;
z-index: $z-index-dropdown;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}