Settings: Metric Configuration: Playtesting Followups - Enable Dimens…

…ion Selection When Disaggregation is Off (4/n) (#115) * When disaggregation and dimensions are all off, checking on a dimension will turn on the disaggregation * Styling bug fixes * Implement responsiveness per design (#117) Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>
Recidiviz · Oct 25, 2022 · 8c16503 · 8c16503
1 parent d5a647b
commit 8c16503
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 33 deletions.
diff --git a/publisher/src/components/MetricConfiguration/Configuration.tsx b/publisher/src/components/MetricConfiguration/Configuration.tsx
@@ -221,22 +221,20 @@ export const Configuration: React.FC<MetricConfigurationProps> = ({
                         activeDisaggregation.enabled && dimension.enabled
                       }
                       onChange={() => {
-                        if (activeDisaggregation.enabled) {
-                          saveAndUpdateMetricSettings("DIMENSION", {
-                            key: activeMetricKey,
-                            disaggregations: [
-                              {
-                                key: activeDisaggregation.key,
-                                dimensions: [
-                                  {
-                                    key: dimension.key,
-                                    enabled: !dimension.enabled,
-                                  },
-                                ],
-                              },
-                            ],
-                          });
-                        }
+                        saveAndUpdateMetricSettings("DIMENSION", {
+                          key: activeMetricKey,
+                          disaggregations: [
+                            {
+                              key: activeDisaggregation.key,
+                              dimensions: [
+                                {
+                                  key: dimension.key,
+                                  enabled: !dimension.enabled,
+                                },
+                              ],
+                            },
+                          ],
+                        });
                       }}
                     />
                     <BlueCheckIcon

diff --git a/publisher/src/components/MetricConfiguration/MetricConfiguration.styles.tsx b/publisher/src/components/MetricConfiguration/MetricConfiguration.styles.tsx
@@ -20,12 +20,18 @@ import styled from "styled-components/macro";
 import { BinaryRadioGroupWrapper, Button } from "../Forms";
 import { palette, typography } from "../GlobalStyles";
 
+const METRICS_VIEW_CONTAINER_BREAKPOINT = 1200;
+
 export const MetricsViewContainer = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   overflow: hidden;
+
+  @media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
+    overflow: unset;
+  }
 `;
 
 export const MetricsViewControlPanel = styled.div`
@@ -35,6 +41,12 @@ export const MetricsViewControlPanel = styled.div`
   flex-wrap: wrap;
   justify-content: space-between;
   overflow-y: scroll;
+
+  @media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: unset;
+  }
 `;
 
 export const MetricsViewControlPanelOverflowHidden = styled(
@@ -63,6 +75,13 @@ export const PanelContainerRight = styled.div`
   overflow-y: scroll;
 `;
 
+export const MetricBoxBottomPaddingContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 100px;
+  overflow-y: scroll;
+`;
+
 type MetricBoxContainerProps = {
   enabled?: boolean;
 };
@@ -84,6 +103,12 @@ export const MetricBoxContainer = styled.div<MetricBoxContainerProps>`
     cursor: pointer;
     border: 1px solid ${palette.solid.blue};
   }
+
+  @media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
+    width: 100%;
+    max-width: unset;
+    flex: unset;
+  }
 `;
 
 export const MetricViewBoxContainer = styled(MetricBoxContainer)<{
@@ -169,7 +194,12 @@ export const MetricDescription = styled.div`
 export const MetricDetailsDisplay = styled.div`
   width: 100%;
   overflow-y: scroll;
-  padding: 24px 12px 24px 0;
+  padding: 24px 12px 50px 0;
+
+  @media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
+    overflow-y: unset;
+    padding: 24px 12px 10px 0;
+  }
 `;
 
 export const MetricOnOffWrapper = styled.div`
@@ -209,6 +239,8 @@ export const MetricDisaggregations = styled.div<{ enabled?: boolean }>`
         height: 100%;
         width: 100%;
         top: 0;
+        left: 0;
+        z-index: 2;
         opacity: 0.5;
       }
     `}
@@ -288,6 +320,7 @@ export const Dimension = styled.div<{ enabled?: boolean; inView?: boolean }>`
         height: 100%;
         width: 100%;
         top: 0;
+        left: 0;
         opacity: 0.5;
       }
     `}
@@ -307,6 +340,7 @@ export const DimensionTitle = styled.div<{ enabled?: boolean }>`
 export const CheckboxWrapper = styled.div`
   display: flex;
   position: relative;
+  z-index: 1;
 `;
 
 export const Checkbox = styled.input`
@@ -478,16 +512,25 @@ export const MetricConfigurationWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   overflow-y: hidden;
+
+  @media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
+    flex-direction: column;
+  }
 `;
 
 export const DefinitionsDisplayContainer = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1 1 55%;
-  padding-top: 48px;
-  padding-right: 12px;
-  padding-left: 126px;
+  padding: 48px 12px 50px 126px;
   overflow-y: scroll;
+
+  @media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
+    border-top: 1px solid ${palette.highlight.grey3};
+    padding: 30px 0 50px 0;
+    overflow-y: unset;
+    margin-right: 12px;
+  }
 `;
 
 export const DefinitionsDisplay = styled.div`

diff --git a/publisher/src/components/MetricConfiguration/MetricConfiguration.tsx b/publisher/src/components/MetricConfiguration/MetricConfiguration.tsx
@@ -40,6 +40,7 @@ import {
   Configuration,
   Metric,
   MetricBox,
+  MetricBoxBottomPaddingContainer,
   MetricConfigurationDisplay,
   MetricConfigurationWrapper,
   MetricDefinitions,
@@ -279,6 +280,7 @@ export const MetricConfiguration: React.FC<{
 
               return {
                 ...disaggregation,
+                enabled: true,
                 dimensions: disaggregation.dimensions.map((dimension) => {
                   if (
                     dimension.key ===
@@ -521,19 +523,21 @@ export const MetricConfiguration: React.FC<{
 
         <MetricsViewControlPanel>
           {/* List Of Metrics */}
-          {filteredMetricSettings &&
-            !activeMetricKey &&
-            Object.values(filteredMetricSettings).map((metric) => (
-              <MetricBox
-                key={metric.key}
-                metricKey={metric.key}
-                displayName={metric.display_name}
-                frequency={metric.frequency as ReportFrequency}
-                description={metric.description}
-                enabled={metric.enabled}
-                setActiveMetricKey={setActiveMetricKey}
-              />
-            ))}
+          {filteredMetricSettings && !activeMetricKey && (
+            <MetricBoxBottomPaddingContainer>
+              {Object.values(filteredMetricSettings).map((metric) => (
+                <MetricBox
+                  key={metric.key}
+                  metricKey={metric.key}
+                  displayName={metric.display_name}
+                  frequency={metric.frequency as ReportFrequency}
+                  description={metric.description}
+                  enabled={metric.enabled}
+                  setActiveMetricKey={setActiveMetricKey}
+                />
+              ))}
+            </MetricBoxBottomPaddingContainer>
+          )}
 
           {/* Metric Configuration */}
           {activeMetricKey && (