Legend Plugin Style Bug Fix (#618)

GeoNode · Nov 25, 2021 · 070a626 · 070a626
1 parent 5f030c3
commit 070a626
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/geonode_mapstore_client/client/js/plugins/Legend.jsx b/geonode_mapstore_client/client/js/plugins/Legend.jsx
@@ -25,11 +25,11 @@ function Legend({
     };
 
     return layers.length > 0 && <div className="shadow gn-legend-wrapper" style={{width: expandLegend ? 'auto' : '80px'}}>
-        <div onClick={expand}>
+        <div onClick={expand} className="gn-legend-head">
             <span role="button" className={`identify-icon glyphicon glyphicon-chevron-${expandLegend ? 'down' : 'right'}`} title="Expand layer legend" />
             <span className="gn-legend-list-item">Legend</span>
         </div>
-        <ul className="gn-legend-list" style={{height: expandLegend ? 'fit-content' : 0, overflowY: expandLegend ? 'auto' : 'hidden'}}>
+        <ul className="gn-legend-list" style={{display: expandLegend ? 'inline-block' : 'none'}}>
             {layers.map((layer, ind) => <Fragment key={ind}>
                 {!hideLayerTitle &&
                     <li className="gn-legend-list-item"><p>{layer.title}</p></li>

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_legend.less b/geonode_mapstore_client/client/themes/geonode/less/_legend.less
@@ -18,21 +18,29 @@
     left: 10px;
     top: 10px;
     z-index: 9999;
-    padding: .5rem;
+    display: flex;
+    flex-direction: column;
     min-width: 120px;
-    max-height: 180px;
     border-radius: 2px;
+    max-height: 50%;
+
+    .gn-legend-head {
+        padding: 0.5rem;
+    }
 
     .gn-legend-list {
         list-style: none;
         padding: 0;
+        flex: 1;
         margin: 0;
+        padding: 0.5rem;
+        padding-top: 0;
+        overflow-y: auto;
     }
 
     .gn-legend-list-item {
             margin: 0;
-            margin-bottom: .5rem;
-            font-weight: bold;
+
         p {
             margin: 0;
             font-weight: normal;
@@ -44,7 +52,9 @@
     }
 
     span.gn-legend-list-item {
-                margin-left: .5rem;
+        margin-left: .5rem;
+        font-size: @font-size-small;
+
     }
 
     .identify-icon {