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 {
|
.wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 210px;
|
height: 210px;
|
||||||
background: #dfe6e2;
|
background: #dfe6e2;
|
||||||
|
isolation: isolate;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
@@ -38,7 +42,9 @@
|
|||||||
.openBtn {
|
.openBtn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
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%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -82,7 +88,10 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
top: 33%;
|
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;
|
pointer-events: none;
|
||||||
background: linear-gradient(to bottom,
|
background: linear-gradient(to bottom,
|
||||||
rgba(255, 255, 255, 0) 0%,
|
rgba(255, 255, 255, 0) 0%,
|
||||||
|
|||||||
Reference in New Issue
Block a user