Fixup: Address reviewer comments

NCEAS · Jun 17, 2024 · a990776 · a990776
1 parent fc6c370
commit a990776
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/src/css/map-view.css b/src/css/map-view.css
@@ -1707,17 +1707,17 @@ other class: .ui-slider-range */
     }
 
     .legend-container__header-icon {
-      color: var(--portal-col-primary-6);
+      color: var(--portal-col-primary-6, var(--map-col-text__deprecate));
     }
 
     .legend-container__header-expand {
-      color: var(--portal-col-primary-5);
+      color: var(--portal-col-primary-5, var(--map-col-text__deprecate));
       display: none;
     }
 
     .legend-container__header-name {
       flex-grow: 1;
-      color: var(--portal-col-primary-8);
+      color: var(--portal-col-primary-8, var(--map-col-text__deprecate));
       font-size: 0.8rem;
       font-weight: 500;
     }
@@ -1734,20 +1734,20 @@ other class: .ui-slider-range */
 
       .layer-legend__layer-name {
         padding: 0.25rem 0;
-        color: var(--portal-col-neutral-6);
+        color: var(--portal-col-neutral-6, var(--map-col-text__deprecate));
         font-size: 0.8rem;
         font-weight: 500;
       }
 
       .layer-legend__palette {
-        color: var(--portal-col-neutral-8);
+        color: var(--portal-col-neutral-8, var(--map-col-text__deprecate));
         font-size: 0.8rem;
         font-weight: 500;
       }
     }
   }
 
-  &.expanded {
+  &.legend-container--expanded {
     width: 12.5rem;
 
     .legend-container__content,
@@ -1761,3 +1761,13 @@ other class: .ui-slider-range */
     }
   }
 }
+
+/* TODO: Remove when the new mobile layout is ready. */
+@media only screen and (max-width: 768px) {
+  .legend-container {
+    /* 41px is the height of the bottom nav bar. */
+    bottom: 41px;
+    /* TODO: Update when we deprecate toolbar links. */
+    max-height: calc(100% - 1rem - 41px - var(--max-map-toolbar-link-height) - 2 * var(--map-size-toolbar-link-margin));
+  }
+}
diff --git a/src/js/views/maps/MapWidgetContainerView.js b/src/js/views/maps/MapWidgetContainerView.js
@@ -34,8 +34,8 @@ define([
 
       /** @inheritdoc */
       render() {
-        this.renderMapWidget(this.el, this.model);
-        this.renderLegendContainer(this.el, this.model);
+        this.renderMapWidget();
+        this.renderLegendContainer();
       },
 
       /** Renders Cesium map. Currently, this uses the MapWidgetContainerView, but this function could be modified to use an alternative map widget in the future. */

diff --git a/src/js/views/maps/legend/LegendContainerView.js b/src/js/views/maps/legend/LegendContainerView.js
@@ -12,6 +12,7 @@ define([
     content: `${BASE_CLASS}__content`,
     header: `${BASE_CLASS}__header`,
     expandIcon: `${BASE_CLASS}__header-expand`,
+    expanded: `${BASE_CLASS}--expanded`,
   };
 
   /**
@@ -67,7 +68,7 @@ define([
        * Toggles the expanded state of the legend container.
        */
       toggleExpanded() {
-        this.$el.toggleClass("expanded");
+        this.$el.toggleClass(CLASS_NAMES.expanded);
       },
 
       /**