WIP Improve the legend integration with multiple series #202

SlideRuleEarth · Jan 14, 2025 · 281ba59 · 281ba59
1 parent 9a71670
commit 281ba59
Showing 1 changed file with 51 additions and 33 deletions.
diff --git a/web-client/src/components/SrAtl03ColorLegend.vue b/web-client/src/components/SrAtl03ColorLegend.vue
@@ -76,39 +76,57 @@
   </script>
 
   <style scoped>
-  .legend {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  
-  .legend-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  
-  .color-box {
-    width: 20px;
-    height: 20px;
-    border: 1px solid #000;
-  }
-  
-  .label {
-    font-size: 14px;
-  }
-  
-  .sr-restore-defaults {
-    margin-top: 1rem;
-  }
+.legend {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem; /* 4px equivalent */
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem; /* 6px equivalent */
+  white-space: nowrap; /* Keep text on a single line */
+  overflow: hidden; /* Hide overflowing text */
+  text-overflow: ellipsis; /* Add ellipsis for truncated text */
+}
+
+.color-box {
+  width: 1rem; /* 16px equivalent */
+  height: 1rem;
+  border: 0.0625rem solid #000; /* 1px equivalent */
+}
 
-  .sr-legend-box {
-    padding: 0.3125rem;
+.label {
+  font-size: 1rem; 
+  line-height: 1.2; /* Adjust line height */
+  color: white; /* Optional: Adjust color for subtle appearance */
+}
+
+.sr-legend-box {
+    padding: 0.2rem; /* 3.2px equivalent */
+    margin-top: 1rem;
     border-radius: var(--p-border-radius);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-  </style>
+    position: relative; /* Enable positioning for the legend */
+}
+
+/* Custom Fieldset legend style */
+:deep(.sr-legend-box .p-fieldset-legend) {
+    font-size: 0.75rem; /* Adjust font size */
+    font-weight: normal; /* Optional: Adjust font weight */
+    color:white; /* Adjust color */
+    padding: 0.2rem; /* Adjust padding for a smaller appearance */
+    text-align: center; /* Center text horizontally */
+    position: absolute; /* Position relative to the Fieldset */
+    top: 0.5rem; /* Align legend to the top */
+    left: 50%; /* Center horizontally */
+    transform: translate(-50%, -50%); /* Adjust position to center it over the top border */
+    background:  black; /* Match the background color */
+    z-index: 1; /* Ensure it appears above the Fieldset border */
+    padding: 0 0.5rem; /* Add spacing to prevent overlap with text */
+}
+:deep(.p-fieldset-content-container) {
+    padding-top: 1.5rem; /* Adjust padding to prevent overlap with the legend */
+}
+</style>