fix(school-detail): make the hero map fade visible
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 13s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 53s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 13s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 53s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
The blend gradient sat at z-index 2 — below Leaflet's tile pane (200) — so it was painted behind the map and the band ended in a hard edge with no diffusion. Raise the fade above the tile/overlay panes (450, still below the marker pane so the pin stays crisp) and the whole-band open button above the marker pane (800), and isolate the wrapper's stacking context so those raised z-indexes don't leak out and outrank the header's Compare button. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,13 @@
|
||||
/* Preview band that blends into the hero title; expands to fullscreen. */
|
||||
/* Preview band that blends into the hero title; expands to fullscreen.
|
||||
isolation:isolate contains the map + fade + open-button z-indices (which
|
||||
must beat Leaflet's internal panes) so they don't leak out and outrank the
|
||||
header's Compare button. */
|
||||
.wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 210px;
|
||||
background: #dfe6e2;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@@ -38,7 +42,9 @@
|
||||
.openBtn {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 3;
|
||||
/* Above Leaflet's marker pane (600) so the whole band — pin included — is
|
||||
one click target. Transparent, so map + pin still show through. */
|
||||
z-index: 800;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
@@ -82,7 +88,10 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 33%;
|
||||
z-index: 2;
|
||||
/* Above Leaflet's tile (200) and overlay (400) panes so the gradient is
|
||||
actually visible, but below the marker pane (600) so the pin stays crisp
|
||||
on top of the blend. */
|
||||
z-index: 450;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
|
||||
Reference in New Issue
Block a user