FIXUP fully calculate sidebar results size

opensupplyhub · Jul 31, 2019 · abdafcf · abdafcf
1 parent 2952bdf
commit abdafcf
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 15 deletions.
diff --git a/src/app/src/components/FilterSidebar.jsx b/src/app/src/components/FilterSidebar.jsx
@@ -83,7 +83,7 @@ class FilterSidebar extends Component {
         } = this.props;
 
         const header = (
-            <div className="panel-header">
+            <div className="panel-header results-height-subtract">
                 <h3 className="panel-header__title">
                     Open Apparel Registry
                 </h3>
@@ -106,7 +106,7 @@ class FilterSidebar extends Component {
         };
 
         const tabBar = (
-            <AppBar position="static">
+            <AppBar position="static" className="results-height-subtract">
                 <Tabs
                     value={activeTabIndex}
                     onChange={handleTabChange}

diff --git a/src/app/src/components/FilterSidebarFacilitiesTab.jsx b/src/app/src/components/FilterSidebarFacilitiesTab.jsx
@@ -14,7 +14,6 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
 import get from 'lodash/get';
-import sum from 'lodash/sum';
 import { toast } from 'react-toastify';
 import InfiniteAnyHeight from 'react-infinite-any-height';
 
@@ -215,7 +214,7 @@ function FilterSidebarFacilitiesTab({
     const RegisterLink = props => <Link to={authRegisterFormRoute} {...props} />;
 
     const listHeaderInsetComponent = (
-        <div style={facilitiesTabStyles.listHeaderStyles}>
+        <div style={facilitiesTabStyles.listHeaderStyles} className="results-height-subtract">
             <Typography
                 variant="subheading"
                 align="center"
@@ -259,16 +258,12 @@ function FilterSidebarFacilitiesTab({
         </div>
     );
 
-    const componentSizes = [
-        64, // Navbar
-        107, // Sidebar heading
-        48, // Sidebar tabs
-        138, // Sidebar controls
-        51, // Footer
-        8, // Additional padding
-    ];
+    const nonResultListComponentHeight = (
+        Array.from(document.getElementsByClassName('results-height-subtract'))
+            .reduce((sum, x) => sum + x.offsetHeight, 0)
+    );
 
-    const resultListHeight = windowHeight - sum(componentSizes);
+    const resultListHeight = windowHeight - nonResultListComponentHeight;
 
     return (
         <Fragment>

diff --git a/src/app/src/components/Footer.jsx b/src/app/src/components/Footer.jsx
@@ -25,7 +25,7 @@ const links = [
 ];
 
 export default () => (
-    <footer className="footerContainer" xs={12}>
+    <footer className="footerContainer results-height-subtract" xs={12}>
         <div className="links">
             {links.map((l) => {
                 if (l.external && 'prefix' in l) {

diff --git a/src/app/src/components/Navbar.jsx b/src/app/src/components/Navbar.jsx
@@ -41,7 +41,7 @@ export default function Navbar() {
     ];
 
     return (
-        <AppBar position="static" className="App-header">
+        <AppBar position="static" className="App-header results-height-subtract">
             <Toolbar style={{ padding: 0 }}>
                 <div style={{ display: 'flex', justifyContent: 'middle' }}>
                     <Link