Skip to content

Commit 2f3c135

Browse files
noamjgalnoamjgal
committed
feat: new legend organization
1 parent d443e1b commit 2f3c135

3 files changed

Lines changed: 359 additions & 145 deletions

File tree

‎css/styles.css‎

Lines changed: 143 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -651,12 +651,12 @@ body {
651651
display: flex;
652652
flex-direction: column;
653653
gap: var(--space-sm);
654-
padding: var(--space-md);
655-
background: rgba(255, 255, 255, 0.05);
656-
border-radius: var(--radius-md);
657-
border: 1px solid rgba(255, 255, 255, 0.1);
658-
backdrop-filter: blur(12px);
659-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
654+
padding: 0;
655+
background: none;
656+
border-radius: 0;
657+
border: none;
658+
backdrop-filter: none;
659+
box-shadow: none;
660660
}
661661

662662
.stats-grid {
@@ -729,7 +729,7 @@ body {
729729
}
730730

731731
.stat-paragraph {
732-
margin-bottom: var(--space-lg);
732+
margin-bottom: var(--space-sm);
733733
}
734734

735735
.stat-paragraph:last-child {
@@ -739,7 +739,7 @@ body {
739739
.stat-paragraph p {
740740
margin: 0;
741741
color: var(--text-secondary);
742-
font-size: 15px;
742+
font-size: 14px;
743743
line-height: 1.7;
744744
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
745745
font-weight: 400;
@@ -776,17 +776,19 @@ body {
776776
.legend-item {
777777
display: flex;
778778
align-items: center;
779-
font-size: 13px;
779+
font-size: 12px;
780780
color: var(--text-primary);
781-
padding: var(--space-xs) 0;
782-
background: none;
783-
border: none;
781+
padding: var(--space-sm) var(--space-md);
782+
background: rgba(255, 255, 255, 0.03);
783+
border: 1px solid rgba(255, 255, 255, 0.06);
784+
border-radius: var(--radius-sm);
784785
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
785786
position: relative;
786787
overflow: hidden;
787788
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
788789
font-weight: 500;
789-
margin-bottom: var(--space-xs);
790+
margin-bottom: var(--space-sm);
791+
min-height: 36px;
790792
}
791793

792794
.legend-item::before {
@@ -802,8 +804,8 @@ body {
802804
}
803805

804806
.legend-item:hover {
805-
background: rgba(255, 255, 255, 0.06);
806-
border-color: rgba(255, 255, 255, 0.12);
807+
background: rgba(255, 255, 255, 0.08);
808+
border-color: rgba(255, 255, 255, 0.15);
807809
transform: translateY(-1px);
808810
}
809811

@@ -1035,43 +1037,127 @@ body {
10351037
}
10361038

10371039
/* Custom Scale Bar - positioned under compass */
1038-
.scale-bar {
1040+
/* Combined Map Legend Panel - positioned at bottom right, grows upward */
1041+
.map-legend-panel {
10391042
position: fixed;
1040-
top: calc(100vh - 80px); /* Position below compass */
1041-
left: 50%;
1042-
transform: translateX(-50%);
1043+
bottom: 12px;
1044+
right: var(--space-xl);
10431045
background: var(--glass-bg);
10441046
backdrop-filter: blur(24px) saturate(180%);
10451047
-webkit-backdrop-filter: blur(24px) saturate(180%);
10461048
border: 1px solid var(--glass-border);
1047-
border-radius: 8px;
1048-
padding: 8px 12px;
1049+
border-radius: var(--radius-xl);
10491050
box-shadow: var(--panel-shadow);
1050-
font-size: 11px;
1051+
width: 240px; /* Made wider */
1052+
max-height: 70vh;
1053+
overflow-y: auto;
1054+
z-index: 99;
1055+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
1056+
display: flex;
1057+
flex-direction: column;
1058+
}
1059+
1060+
.legend-layers-section {
1061+
padding: var(--space-md) var(--space-sm);
1062+
}
1063+
1064+
.legend-scale-section {
1065+
display: flex;
1066+
justify-content: center;
1067+
align-items: center;
1068+
}
1069+
1070+
.legend-section-title {
1071+
font-size: 12px;
1072+
color: var(--text-muted);
1073+
font-weight: 600;
1074+
text-transform: uppercase;
1075+
letter-spacing: 0.8px;
1076+
margin-bottom: var(--space-md);
1077+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
1078+
}
1079+
1080+
.scale-bar {
1081+
background: none;
1082+
border: none;
1083+
border-radius: 0;
1084+
padding: 0;
1085+
box-shadow: none;
1086+
font-size: 12px;
10511087
font-weight: 500;
10521088
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
10531089
color: var(--text-primary);
10541090
text-align: center;
10551091
min-width: 80px;
1056-
z-index: 99;
1092+
z-index: auto;
1093+
position: relative;
1094+
top: auto;
1095+
left: auto;
1096+
transform: none;
10571097
}
10581098

10591099
.scale-line {
10601100
width: 100%;
1061-
height: 2px;
1101+
height: 2.5px;
10621102
background: var(--text-primary);
10631103
margin-bottom: 4px;
10641104
border-radius: 1px;
10651105
}
10661106

10671107
.scale-text {
1068-
font-size: 10px;
1108+
font-size: 11px;
10691109
color: var(--text-secondary);
10701110
font-weight: 600;
10711111
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
10721112
letter-spacing: 0.3px;
10731113
}
10741114

1115+
/* Legend Controls Section */
1116+
.legend-controls-section {
1117+
padding: var(--space-md) var(--space-lg);
1118+
display: flex;
1119+
justify-content: center;
1120+
align-items: center;
1121+
}
1122+
1123+
.legend-controls {
1124+
display: flex;
1125+
gap: var(--space-sm);
1126+
align-items: center;
1127+
}
1128+
1129+
.legend-control-btn {
1130+
width: 32px;
1131+
height: 32px;
1132+
border-radius: 8px;
1133+
border: 1px solid var(--glass-border);
1134+
background: var(--glass-bg);
1135+
backdrop-filter: blur(20px) saturate(180%);
1136+
-webkit-backdrop-filter: blur(20px) saturate(180%);
1137+
color: var(--text-primary);
1138+
font-size: 16px;
1139+
font-weight: 600;
1140+
cursor: pointer;
1141+
transition: all 0.2s ease;
1142+
display: flex;
1143+
align-items: center;
1144+
justify-content: center;
1145+
user-select: none;
1146+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
1147+
}
1148+
1149+
.legend-control-btn:hover {
1150+
background: rgba(255, 255, 255, 0.25);
1151+
border-color: var(--accent-blue);
1152+
transform: translateY(-1px);
1153+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1154+
}
1155+
1156+
.legend-control-btn:active {
1157+
transform: translateY(0);
1158+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1159+
}
1160+
10751161
/* Disabled state for controls */
10761162
.control-group.disabled {
10771163
opacity: 0.4;
@@ -1424,13 +1510,38 @@ body {
14241510
top: 84px !important; /* 60px mobile banner + 24px spacing */
14251511
}
14261512

1427-
/* Mobile scale bar positioning */
1428-
.scale-bar {
1429-
top: calc(100vh - 70px); /* Adjust for mobile */
1430-
padding: 6px 10px;
1431-
font-size: 10px;
1432-
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
1433-
min-width: 70px;
1513+
/* Mobile legend panel positioning */
1514+
.map-legend-panel {
1515+
bottom: var(--space-md);
1516+
right: var(--space-lg);
1517+
width: 160px; /* Even skinnier on mobile */
1518+
max-height: 60vh;
1519+
}
1520+
1521+
.legend-layers-section {
1522+
padding: var(--space-sm) var(--space-md);
1523+
}
1524+
1525+
.legend-scale-section {
1526+
padding: var(--space-xs) var(--space-md);
1527+
}
1528+
1529+
.legend-section-title {
1530+
font-size: 11px;
1531+
}
1532+
1533+
.legend-item {
1534+
font-size: 11px;
1535+
}
1536+
1537+
.legend-controls-section {
1538+
padding: var(--space-xs) var(--space-md);
1539+
}
1540+
1541+
.legend-control-btn {
1542+
width: 28px;
1543+
height: 28px;
1544+
font-size: 14px;
14341545
}
14351546

14361547
.scale-text {

‎index.html‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -141,10 +141,7 @@ <h2>Shelter Analysis</h2>
141141
</div>
142142
</div>
143143

144-
<!-- Legend Section - Moved from right panel -->
145-
<div class="control-section">
146-
<div class="legend-items" id="legend-items"></div>
147-
</div>
144+
148145

149146
<!-- About & Info Buttons - Bottom -->
150147
<div class="control-section">
@@ -160,14 +157,26 @@ <h2>Shelter Analysis</h2>
160157
</div>
161158
</div>
162159

163-
<!-- Custom Scale Bar (positioned under compass) -->
164-
<div class="scale-bar" id="scaleBar">
165-
<div class="scale-line" id="scaleLine"></div>
166-
<div class="scale-text" id="scaleText">100 m</div>
160+
<!-- Combined Legend and Scale Bar (positioned on right side) -->
161+
<div class="map-legend-panel" id="mapLegendPanel">
162+
<!-- Data Layers Legend Section -->
163+
<div class="legend-layers-section">
164+
<div class="legend-section-title">Legend</div>
165+
<div class="legend-items" id="legend-items"></div>
166+
</div>
167+
168+
<!-- Scale Bar Section -->
169+
<div class="legend-scale-section">
170+
<div class="scale-bar" id="scaleBar">
171+
<div class="scale-line" id="scaleLine"></div>
172+
<div class="scale-text" id="scaleText">100 m</div>
173+
</div>
174+
</div>
167175
</div>
168176

169177
<!-- Data Layers Modal -->
170178
<div id="layersModal" class="modal-overlay">
179+
171180
<div class="modal-content">
172181
<div class="modal-header">
173182
<h2>Data Layers</h2>

0 commit comments

Comments
 (0)