fix: hide filter modal when in small screen [DHIS2-10439, DHIS2-10138] (

#1545) Add a div surrounding the popover content, in order to target it in css without having to use !important, and set display:none in small screen
dhis2 · Feb 17, 2021 · b81a1f4 · b81a1f4
1 parent 1de7809
commit b81a1f4
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/src/components/ItemFilter/FilterSelector.js b/src/components/ItemFilter/FilterSelector.js
@@ -53,12 +53,16 @@ const FilterSelector = props => {
                     placement="bottom-start"
                     dataTest="dashboard-filter-popover"
                 >
-                    <DimensionsPanel
-                        style={{ width: '320px' }}
-                        dimensions={props.dimensions}
-                        onDimensionClick={selectDimension}
-                        selectedIds={Object.keys(props.initiallySelectedItems)}
-                    />
+                    <div className={classes.popover}>
+                        <DimensionsPanel
+                            style={{ width: '320px' }}
+                            dimensions={props.dimensions}
+                            onDimensionClick={selectDimension}
+                            selectedIds={Object.keys(
+                                props.initiallySelectedItems
+                            )}
+                        />
+                    </div>
                 </Popover>
             )}
             {!isEmpty(props.dimension) ? (

diff --git a/src/components/ItemFilter/styles/FilterSelector.module.css b/src/components/ItemFilter/styles/FilterSelector.module.css
@@ -2,4 +2,8 @@
     .buttonContainer {
         display: none;
     }
+
+    .popover {
+        display: none;
+    }
 }
diff --git a/src/components/ItemSelector/ItemSelector.js b/src/components/ItemSelector/ItemSelector.js
@@ -104,13 +104,15 @@ const ItemSelector = () => {
                     arrow={false}
                     maxWidth={700}
                 >
-                    <FlyoutMenu
-                        className={classes.menu}
-                        dataTest="item-menu"
-                        maxWidth="700px"
-                    >
-                        {getMenuGroups()}
-                    </FlyoutMenu>
+                    <div className={classes.popover}>
+                        <FlyoutMenu
+                            className={classes.menu}
+                            dataTest="item-menu"
+                            maxWidth="700px"
+                        >
+                            {getMenuGroups()}
+                        </FlyoutMenu>
+                    </div>
                 </Popover>
             )}
         </>

diff --git a/src/components/ItemSelector/styles/ItemSelector.module.css b/src/components/ItemSelector/styles/ItemSelector.module.css
@@ -4,7 +4,7 @@
 }
 
 @media only screen and (max-width: 480px) {
-    .menu {
-        display: none !important;
+    .popover {
+        display: none;
     }
 }