Skip to content

Commit 7b6c4aa

Browse files
yejiyangyejiyang
committed
fix data info and legend style
1 parent 2ff4e4a commit 7b6c4aa

File tree

1 file changed

+219
-40
lines changed

1 file changed

+219
-40
lines changed

‎frontend/src/index.html‎

Lines changed: 219 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -240,24 +240,56 @@
240240
position: fixed;
241241
bottom: 40px;
242242
right: 12px;
243-
display: flex;
244-
gap: 12px;
245243
z-index: 1000;
246244
font-family: 'Roboto', 'Arial', sans-serif;
245+
display: flex;
246+
flex-direction: column;
247+
align-items: flex-end;
248+
gap: 12px;
247249
}
248250

249-
/* Dataset Info Panel - Left side */
251+
/* Dataset Info Panel - Text Button when collapsed, Card when expanded */
250252
.map-info {
251253
background: rgba(255, 255, 255, 0.95);
252-
border-radius: 8px;
254+
border-radius: 20px;
253255
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
254256
backdrop-filter: blur(8px);
257+
border: 1px solid rgba(0, 0, 0, 0.1);
258+
transition: all 0.3s ease;
259+
cursor: pointer;
260+
}
261+
262+
.map-info.expanded {
263+
border-radius: 8px;
255264
min-width: 280px;
256265
max-width: 320px;
257-
border: 1px solid rgba(0, 0, 0, 0.1);
266+
cursor: default;
258267
}
259268

269+
/* Text button when collapsed */
260270
.info-toggle {
271+
padding: 8px 16px;
272+
color: #1a73e8;
273+
font-weight: 500;
274+
font-size: 13px;
275+
display: inline-flex;
276+
align-items: center;
277+
transition: all 0.2s ease;
278+
white-space: nowrap;
279+
}
280+
281+
.map-info:not(.expanded) .info-toggle:hover {
282+
background: rgba(26, 115, 232, 0.1);
283+
transform: scale(1.02);
284+
}
285+
286+
.info-toggle-icon {
287+
font-size: 14px;
288+
margin-right: 6px;
289+
}
290+
291+
/* Card header when expanded */
292+
.info-header {
261293
padding: 12px 16px;
262294
cursor: pointer;
263295
display: flex;
@@ -272,27 +304,38 @@
272304
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
273305
}
274306

275-
.info-toggle:hover {
307+
.info-header:hover {
276308
background: rgba(26, 115, 232, 0.1);
277309
transform: translateY(-1px);
278310
box-shadow: 0 2px 4px rgba(26, 115, 232, 0.2);
279311
}
280312

281-
.info-toggle-icon {
282-
font-size: 16px;
283-
margin-right: 8px;
284-
}
285-
286313
.info-toggle-arrow {
287314
font-size: 12px;
288315
transition: transform 0.2s ease;
289316
color: #5f6368;
290317
}
291318

292-
.info-toggle.expanded .info-toggle-arrow {
319+
.map-info.expanded .info-toggle-arrow {
293320
transform: rotate(180deg);
294321
}
295322

323+
/* Show different elements based on expanded state */
324+
.map-info:not(.expanded) .info-header,
325+
.map-info:not(.expanded) .info-summary {
326+
display: none !important;
327+
}
328+
329+
.map-info.expanded .info-toggle {
330+
display: none !important;
331+
}
332+
333+
/* Compact text button when collapsed */
334+
.map-info:not(.expanded) {
335+
width: 320px;
336+
display: inline-block;
337+
}
338+
296339
.info-summary {
297340
padding: 8px 16px;
298341
font-size: 11px;
@@ -395,20 +438,36 @@
395438
text-decoration: underline;
396439
}
397440

398-
/* Risk Legend Panel - Right side */
441+
/* Risk Legend Panel - Toggleable between full and compact */
399442
.map-legend {
400443
background: rgba(255, 255, 255, 0.95);
401444
border-radius: 8px;
402445
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
403-
padding: 16px;
404446
backdrop-filter: blur(8px);
447+
border: 1px solid rgba(0, 0, 0, 0.1);
448+
transition: all 0.3s ease;
449+
cursor: pointer;
450+
}
451+
452+
.map-legend.expanded {
453+
padding: 16px;
405454
min-width: 240px;
455+
cursor: default;
456+
}
457+
458+
.map-legend:not(.expanded) {
459+
padding: 8px 12px;
460+
}
461+
462+
.legend-header {
463+
display: flex;
464+
align-items: center;
465+
justify-content: space-between;
406466
}
407467

408468
.legend-title {
409469
font-weight: 600;
410470
color: #1a73e8;
411-
margin-bottom: 12px;
412471
font-size: 14px;
413472
display: flex;
414473
align-items: center;
@@ -419,6 +478,70 @@
419478
margin-right: 8px;
420479
}
421480

481+
.legend-toggle-btn {
482+
color: #5f6368;
483+
cursor: pointer;
484+
font-size: 14px;
485+
padding: 4px;
486+
border-radius: 50%;
487+
transition: all 0.2s ease;
488+
}
489+
490+
.legend-toggle-btn:hover {
491+
background: rgba(0, 0, 0, 0.1);
492+
color: #3c4043;
493+
}
494+
495+
/* Compact color bar mode */
496+
.legend-color-bar {
497+
display: none;
498+
flex-direction: row;
499+
align-items: center;
500+
margin-top: 8px;
501+
gap: 2px;
502+
}
503+
504+
.map-legend:not(.expanded) .legend-color-bar {
505+
display: flex;
506+
}
507+
508+
.legend-color-segment {
509+
width: 20px;
510+
height: 12px;
511+
flex: 1;
512+
border-radius: 2px;
513+
border: 1px solid rgba(255, 255, 255, 0.8);
514+
}
515+
516+
.legend-range-labels {
517+
display: none;
518+
justify-content: space-between;
519+
font-size: 9px;
520+
color: #5f6368;
521+
margin-top: 4px;
522+
}
523+
524+
.map-legend:not(.expanded) .legend-range-labels {
525+
display: flex;
526+
}
527+
528+
/* Full legend mode */
529+
.legend-full-content {
530+
transition: max-height 0.3s ease, opacity 0.3s ease;
531+
overflow: hidden;
532+
}
533+
534+
.map-legend:not(.expanded) .legend-full-content {
535+
max-height: 0;
536+
opacity: 0;
537+
}
538+
539+
.map-legend.expanded .legend-full-content {
540+
max-height: 300px;
541+
opacity: 1;
542+
margin-top: 12px;
543+
}
544+
422545
.legend-item {
423546
display: flex;
424547
align-items: center;
@@ -551,17 +674,22 @@
551674
flex-direction: column-reverse;
552675
bottom: 20px;
553676
right: 8px;
554-
left: 8px;
677+
left: auto;
555678
gap: 8px;
556679
}
557680

558-
.map-info,
681+
.map-info.expanded,
559682
.map-legend {
560683
min-width: auto;
561684
max-width: none;
562685
width: 100%;
563686
}
564687

688+
.map-info:not(.expanded) {
689+
width: 320px;
690+
display: inline-block;
691+
}
692+
565693
.legend-title {
566694
font-size: 13px;
567695
}
@@ -600,14 +728,23 @@
600728
<!-- Combined Information and Legend Panel -->
601729
<div class="map-info-panel">
602730
<!-- Dataset Information Panel -->
603-
<div class="map-info">
604-
<div class="info-toggle" onclick="toggleInfo()" id="info-toggle">
731+
<div class="map-info" id="info-panel">
732+
<!-- Text button shown when collapsed -->
733+
<div class="info-toggle" onclick="toggleInfo()">
734+
<span class="info-toggle-icon">📊</span>
735+
<span>Global Tsunami Hazard Data</span>
736+
</div>
737+
738+
<!-- Card header shown when expanded -->
739+
<div class="info-header" onclick="toggleInfo()">
605740
<div>
606741
<span class="info-toggle-icon">📊</span>
607742
<span>Global Tsunami Hazard Data</span>
608743
</div>
609744
<span class="info-toggle-arrow">▼</span>
610745
</div>
746+
747+
<!-- Summary shown when expanded -->
611748
<div class="info-summary">
612749
<span class="info-summary-item">
613750
<span class="info-summary-value">200K+</span> points
@@ -619,6 +756,8 @@
619756
<span class="info-summary-value">500yr</span> ARI
620757
</span>
621758
</div>
759+
760+
<!-- Detailed content shown when expanded -->
622761
<div class="info-content" id="info-content">
623762
<div class="info-stat">
624763
<span class="info-stat-label">Total Points:</span>
@@ -666,31 +805,52 @@ <h4>How to Use:</h4>
666805
</div>
667806

668807
<!-- Risk Legend Panel -->
669-
<div class="map-legend">
670-
<div class="legend-title">Tsunami Risk Levels</div>
671-
<div class="legend-item">
672-
<div class="legend-color" style="background-color: #4CAF50;"></div>
673-
<div class="legend-label">Low Risk</div>
808+
<div class="map-legend" onclick="toggleLegend()" id="legend-panel">
809+
<div class="legend-header">
810+
<div class="legend-title">Tsunami Risk</div>
811+
<span class="legend-toggle-btn" onclick="event.stopPropagation(); toggleLegend()">⌄</span>
674812
</div>
675-
<div class="legend-description">0-5m runup height • Minimal damage</div>
676813

677-
<div class="legend-item">
678-
<div class="legend-color" style="background-color: #FFC107;"></div>
679-
<div class="legend-label">Medium Risk</div>
814+
<!-- Compact color bar mode -->
815+
<div class="legend-color-bar">
816+
<div class="legend-color-segment" style="background-color: #4CAF50;"></div>
817+
<div class="legend-color-segment" style="background-color: #FFC107;"></div>
818+
<div class="legend-color-segment" style="background-color: #FF9800;"></div>
819+
<div class="legend-color-segment" style="background-color: #F44336;"></div>
680820
</div>
681-
<div class="legend-description">5-10m runup height • Moderate impact</div>
682-
683-
<div class="legend-item">
684-
<div class="legend-color" style="background-color: #FF9800;"></div>
685-
<div class="legend-label">High Risk</div>
821+
<div class="legend-range-labels">
822+
<span>0m</span>
823+
<span>5m</span>
824+
<span>10m</span>
825+
<span>20m+</span>
686826
</div>
687-
<div class="legend-description">10-20m runup height • Significant damage</div>
688827

689-
<div class="legend-item">
690-
<div class="legend-color" style="background-color: #F44336;"></div>
691-
<div class="legend-label">Very High Risk</div>
828+
<!-- Full legend mode -->
829+
<div class="legend-full-content">
830+
<div class="legend-item">
831+
<div class="legend-color" style="background-color: #4CAF50;"></div>
832+
<div class="legend-label">Low Risk</div>
833+
</div>
834+
<div class="legend-description">0-5m runup height • Minimal damage</div>
835+
836+
<div class="legend-item">
837+
<div class="legend-color" style="background-color: #FFC107;"></div>
838+
<div class="legend-label">Medium Risk</div>
839+
</div>
840+
<div class="legend-description">5-10m runup height • Moderate impact</div>
841+
842+
<div class="legend-item">
843+
<div class="legend-color" style="background-color: #FF9800;"></div>
844+
<div class="legend-label">High Risk</div>
845+
</div>
846+
<div class="legend-description">10-20m runup height • Significant damage</div>
847+
848+
<div class="legend-item">
849+
<div class="legend-color" style="background-color: #F44336;"></div>
850+
<div class="legend-label">Very High Risk</div>
851+
</div>
852+
<div class="legend-description">>20m runup height • Catastrophic damage</div>
692853
</div>
693-
<div class="legend-description">>20m runup height • Catastrophic damage</div>
694854
</div>
695855
</div>
696856

@@ -701,11 +861,30 @@ <h4>How to Use:</h4>
701861
<script>
702862
// Toggle info panel
703863
function toggleInfo() {
864+
const panel = document.getElementById('info-panel');
704865
const content = document.getElementById('info-content');
705-
const toggle = document.getElementById('info-toggle');
706866

867+
panel.classList.toggle('expanded');
707868
content.classList.toggle('expanded');
708-
toggle.classList.toggle('expanded');
869+
870+
871+
}
872+
873+
874+
875+
// Toggle legend panel
876+
function toggleLegend() {
877+
const panel = document.getElementById('legend-panel');
878+
const toggleBtn = panel.querySelector('.legend-toggle-btn');
879+
880+
panel.classList.toggle('expanded');
881+
882+
// Update toggle button icon
883+
if (panel.classList.contains('expanded')) {
884+
toggleBtn.textContent = '⌃';
885+
} else {
886+
toggleBtn.textContent = '⌄';
887+
}
709888
}
710889

711890
// Configure API base URL

0 commit comments

Comments
 (0)