Add petition map to medical cannabis petition page
Add anonymous SVG icon for anonymous signers Add Norway fylker GeoJSON for map boundaries Add CSS styles for petition map Add JavaScript for interactive petition map Add .htaccess to block direct access to data files Add petition-map plugin to process and display map data Add documentation for the petition-map plugin Add mock petition data generator tool
This commit is contained in:
parent
1ee0e0f0a0
commit
a7829982d0
10 changed files with 1134 additions and 1 deletions
115
custom/assets/petition-map.css
Normal file
115
custom/assets/petition-map.css
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
/* Petition map page styles */
|
||||
|
||||
.petition-map-section {
|
||||
margin-top: 2rem;
|
||||
|
||||
.petition-map-header {
|
||||
background: var(--color-green-light);
|
||||
padding-block: 1.5rem 1rem;
|
||||
margin-bottom: 0;
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
font-size: clamp(1.4rem, 4vw, 2rem);
|
||||
}
|
||||
|
||||
.petition-map-subtitle {
|
||||
color: oklch(0.45 0.05 173.93);
|
||||
font-size: 0.95rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
#petition-map {
|
||||
position: relative;
|
||||
height: clamp(420px, 70vh, 800px);
|
||||
background: oklch(0.96 0.005 220);
|
||||
|
||||
.map-loading {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: oklch(0.55 0.03 220);
|
||||
font-size: 0.9rem;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Leaflet overrides for muted style */
|
||||
.leaflet-container {
|
||||
background: oklch(0.96 0.005 220);
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.leaflet-control-attribution {
|
||||
font-size: 0.65rem;
|
||||
background: oklch(1 0 0 / 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.petition-map-footer {
|
||||
padding-block: 1rem 2rem;
|
||||
|
||||
.back-link {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Fylke polygon styles (set via Leaflet path options, these are fallbacks) */
|
||||
.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Signer name tooltip */
|
||||
.signer-tip {
|
||||
background: oklch(0.618 0.1176 173.93);
|
||||
color: oklch(0.97 0 0);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
padding: 1px 5px;
|
||||
border-radius: 8px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
|
||||
&::before { display: none; } /* hide tooltip arrow */
|
||||
}
|
||||
|
||||
/* Anonymous tooltip */
|
||||
.signer-tip--anon {
|
||||
background: oklch(0.618 0.1176 173.93);
|
||||
padding: 2px 5px 2px 4px;
|
||||
|
||||
.anon-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fylke popup / info panel */
|
||||
.fylke-popup {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.85rem;
|
||||
max-width: 220px;
|
||||
|
||||
.fylke-popup-title {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
.fylke-popup-count {
|
||||
font-size: 0.8rem;
|
||||
color: oklch(0.5 0.03 173.93);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue