Revert "fix: set expanded controlbar in small screen to fill most of …

…height" This reverts commit 50d4738.
dhis2 · Jan 21, 2021 · 9c582d7 · 9c582d7
1 parent 643d50e
commit 9c582d7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 40 deletions.
diff --git a/src/components/ControlBar/ControlBar.js b/src/components/ControlBar/ControlBar.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import cx from 'classnames'
 import classes from './styles/ControlBar.module.css'
 
-//Matches the height of .dragHandle in ControlBar.module.css
 export const DRAG_HANDLE_HEIGHT = 7
 
 class ControlBar extends React.Component {
@@ -51,9 +50,10 @@ class ControlBar extends React.Component {
     renderDragHandle = () =>
         typeof this.props.onChangeHeight === 'function' && (
             <div
+                data-testid="controlbar-drag-handle"
                 className={classes.draghandle}
+                style={{ height: DRAG_HANDLE_HEIGHT }}
                 onMouseDown={this.onStartDrag}
-                data-testid="controlbar-drag-handle"
             />
         )
 

diff --git a/src/components/ControlBar/DashboardsBar.js b/src/components/ControlBar/DashboardsBar.js
@@ -13,7 +13,6 @@ import ShowMoreButton from './ShowMoreButton'
 import {
     FIRST_ROW_PADDING_HEIGHT,
     MIN_ROW_COUNT,
-    HEADERBAR_HEIGHT,
     getRowsHeight,
     getControlBarHeight,
     getNumRowsFromHeight,
@@ -41,7 +40,7 @@ const DashboardsBar = ({
     filterText,
 }) => {
     const [rows, setRows] = useState(userRows)
-    const { width, height } = useWindowDimensions()
+    const { width } = useWindowDimensions()
     const ref = createRef()
 
     useEffect(() => {
@@ -102,29 +101,16 @@ const DashboardsBar = ({
         ]
     }
 
+    const containerClass = cx(
+        classes.container,
+        isMaxHeight() ? classes.expanded : classes.collapsed
+    )
+
     const viewableRows =
         isSmallScreen(width) && !isMaxHeight() ? MIN_ROW_COUNT : rows
 
-    const getHeight = () => {
-        if (isSmallScreen(width) && isMaxHeight()) {
-            return height - HEADERBAR_HEIGHT - DRAG_HANDLE_HEIGHT - 32
-        }
-
-        return getControlBarHeight(viewableRows)
-    }
-
-    const getContainerHeight = () => {
-        if (isSmallScreen(width) && isMaxHeight()) {
-            return height - HEADERBAR_HEIGHT - 22 - 32
-        }
-        return getRowsHeight(viewableRows) + FIRST_ROW_PADDING_HEIGHT
-    }
-
-    const getChipContainerHeight = () => {
-        if (isSmallScreen(width) && isMaxHeight()) {
-            return height - HEADERBAR_HEIGHT - 42 - 22 - 32
-        }
-        return getRowsHeight(viewableRows) + FIRST_ROW_PADDING_HEIGHT
+    const rowHeightProp = {
+        height: getRowsHeight(viewableRows) + FIRST_ROW_PADDING_HEIGHT,
     }
 
     const getDashboardChips = () => {
@@ -144,10 +130,7 @@ const DashboardsBar = ({
                 isMaxHeight() ? classes.expanded : classes.collapsed
             )
             return (
-                <div
-                    className={chipContainerClasses}
-                    style={{ height: getChipContainerHeight() }}
-                >
+                <div className={chipContainerClasses} style={rowHeightProp}>
                     {chips}
                 </div>
             )
@@ -156,23 +139,14 @@ const DashboardsBar = ({
         }
     }
 
-    const containerClass = cx(
-        classes.container,
-        isMaxHeight() ? classes.expanded : classes.collapsed
-    )
-
     return (
         <>
             <ControlBar
-                height={getHeight()}
+                height={getControlBarHeight(viewableRows)}
                 onChangeHeight={!isSmallScreen(width) ? adjustHeight : null}
                 onEndDrag={onEndDrag}
             >
-                <div
-                    className={containerClass}
-                    ref={ref}
-                    style={{ height: getContainerHeight() }}
-                >
+                <div className={containerClass} ref={ref} style={rowHeightProp}>
                     <div className={classes.controls}>
                         <Link
                             className={classes.newLink}

diff --git a/src/components/ControlBar/styles/ControlBar.module.css b/src/components/ControlBar/styles/ControlBar.module.css
@@ -28,5 +28,4 @@
     right: 0px;
     cursor: ns-resize;
     transition: all ease-out 75ms;
-    height: 7px;
 }