fix: make space to left of dashboard items scrollable [DHIS2-10138] (#…

…1523) Fixes: * use padding instead of margin so that scrolling works when scrolling the empty space along the left of the items * migrate to consistent css classes language (wrapper => container) * add buttons for both small and large view and show/hide using css. This avoids the need for javascript to determine which button to show and will behave more instantaneously * remove position:fixed on the action bar as it isn't needed Co-authored-by: Martin <[email protected]>
dhis2 · Feb 12, 2021 · 3305aa3 · 3305aa3
1 parent ea2cc8d
commit 3305aa3
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 82 deletions.
diff --git a/cypress/integration/ui/view_dashboard/index.js b/cypress/integration/ui/view_dashboard/index.js
@@ -21,42 +21,6 @@ When('I press enter in the search dashboard field', () => {
     cy.get('[data-test="search-dashboard-input"]').type('{enter}')
 })
 
-When('I click to preview the print layout', () => {
-    cy.get('button').contains('More').click()
-    cy.get('[data-test="print-menu-item"]').click()
-    cy.get('[data-test="print-layout-menu-item"]').click()
-})
-
-Then('the print layout displays for {string} dashboard', title => {
-    //check the url
-    cy.location().should(loc => {
-        expect(loc.hash).to.equal(`${dashboards[title].route}/printlayout`)
-    })
-
-    //check for some elements
-    cy.get('[data-test="print-layout-page"]').should('be.visible')
-})
-
-When('I click to exit print preview', () => {
-    cy.contains('Exit print preview').click()
-})
-
-When('I click to preview the print one-item-per-page', () => {
-    cy.get('button').contains('More').click()
-    cy.get('[data-test="print-menu-item"]').click()
-    cy.get('[data-test="print-oipp-menu-item"]').click()
-})
-
-Then('the print one-item-per-page displays for {string} dashboard', title => {
-    //check the url
-    cy.location().should(loc => {
-        expect(loc.hash).to.equal(`${dashboards[title].route}/printoipp`)
-    })
-
-    //check for some elements
-    cy.get('[data-test="print-oipp-page"]').should('be.visible')
-})
-
 When('I search for dashboards containing Noexist', () => {
     cy.get('[data-test="search-dashboard-input"]').type('Noexist')
 })

diff --git a/cypress/integration/ui/view_dashboard/print.js b/cypress/integration/ui/view_dashboard/print.js
@@ -0,0 +1,38 @@
+import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { dashboards } from '../../../assets/backends/sierraLeone_236'
+
+When('I click to preview the print layout', () => {
+    cy.get('button').contains('More').click()
+    cy.get('[data-test="print-menu-item"]').click()
+    cy.get('[data-test="print-layout-menu-item"]').click()
+})
+
+Then('the print layout displays for {string} dashboard', title => {
+    //check the url
+    cy.location().should(loc => {
+        expect(loc.hash).to.equal(`${dashboards[title].route}/printlayout`)
+    })
+
+    //check for some elements
+    cy.get('[data-test="print-layout-page"]').should('be.visible')
+})
+
+When('I click to exit print preview', () => {
+    cy.get('button').not('.small').contains('Exit print preview').click()
+})
+
+When('I click to preview the print one-item-per-page', () => {
+    cy.get('button').contains('More').click()
+    cy.get('[data-test="print-menu-item"]').click()
+    cy.get('[data-test="print-oipp-menu-item"]').click()
+})
+
+Then('the print one-item-per-page displays for {string} dashboard', title => {
+    //check the url
+    cy.location().should(loc => {
+        expect(loc.hash).to.equal(`${dashboards[title].route}/printoipp`)
+    })
+
+    //check for some elements
+    cy.get('[data-test="print-oipp-page"]').should('be.visible')
+})
diff --git a/src/components/Dashboard/PrintActionsBar.js b/src/components/Dashboard/PrintActionsBar.js
@@ -4,8 +4,6 @@ import i18n from '@dhis2/d2-i18n'
 import { Button } from '@dhis2/ui'
 import { Link } from 'react-router-dom'
 import LessHorizontalIcon from '../../icons/LessHorizontal'
-import { useWindowDimensions } from '../WindowDimensionsProvider'
-import { isSmallScreen } from '../../modules/smallScreen'
 
 import classes from './styles/PrintActionsBar.module.css'
 
@@ -14,25 +12,38 @@ export const PRINT_ACTIONS_BAR_HEIGHT = 44
 export const PRINT_ACTIONS_BAR_HEIGHT_SM = 36
 
 const PrintActionsBar = ({ id }) => {
-    const { width } = useWindowDimensions()
-    const isSmall = isSmallScreen(width)
+    const getExitPrintButton = isSmall => (
+        <Button
+            className={isSmall ? classes.buttonSmall : classes.buttonLarge}
+            small={isSmall}
+        >
+            <LessHorizontalIcon />
+            {i18n.t('Exit print preview')}
+        </Button>
+    )
+
+    const getPrintButton = isSmall => (
+        <Button
+            className={isSmall ? classes.buttonSmall : classes.buttonLarge}
+            small={isSmall}
+            onClick={window.print}
+        >
+            {i18n.t('Print')}
+        </Button>
+    )
 
     return (
         <>
             <div className={classes.container}>
-                <div className={classes.inner}>
+                <div className={classes.actions}>
                     <Link className={classes.link} to={`/${id}`}>
-                        <Button small={isSmall}>
-                            <LessHorizontalIcon />
-                            {i18n.t('Exit print preview')}
-                        </Button>
+                        {getExitPrintButton(true)}
+                        {getExitPrintButton(false)}
                     </Link>
-                    <Button small={isSmall} onClick={window.print}>
-                        {i18n.t('Print')}
-                    </Button>
+                    {getPrintButton(true)}
+                    {getPrintButton(false)}
                 </div>
             </div>
-            <div className={classes.topMargin} />
         </>
     )
 }

diff --git a/src/components/Dashboard/PrintDashboard.js b/src/components/Dashboard/PrintDashboard.js
@@ -95,7 +95,7 @@ const PrintDashboard = ({
         <>
             <PrintActionsBar id={dashboard.id} />
             <div
-                className={classes.wrapper}
+                className={classes.container}
                 style={{ height: availableHeight }}
             >
                 <PrintInfo isLayout={false} />

diff --git a/src/components/Dashboard/PrintLayoutDashboard.js b/src/components/Dashboard/PrintLayoutDashboard.js
@@ -88,7 +88,7 @@ const PrintLayoutDashboard = ({
         }
     }, [dashboard, items])
 
-    const getWrapperStyle = () => {
+    const getContainerStyle = () => {
         return fromEdit
             ? {
                   paddingTop: spacers.dp24,
@@ -103,8 +103,8 @@ const PrintLayoutDashboard = ({
         <>
             {!fromEdit && <PrintActionsBar id={dashboard.id} />}
             <div
-                className={cx(classes.wrapper, 'scroll-area')}
-                style={getWrapperStyle()}
+                className={cx(classes.container, 'scroll-area')}
+                style={getContainerStyle()}
             >
                 {!fromEdit && <PrintInfo isLayout={true} />}
                 <div

diff --git a/src/components/Dashboard/styles/PrintActionsBar.module.css b/src/components/Dashboard/styles/PrintActionsBar.module.css
@@ -2,15 +2,10 @@
     background-color: var(--colors-grey600);
     width: 100%;
     padding: var(--spacers-dp4) 0;
-    position: fixed;
     z-index: 10;
 }
 
-.topMargin {
-    margin-top: 44px; /* PRINT_ACTIONS_BAR_HEIGHT */
-}
-
-.inner {
+.actions {
     margin-left: 44px;
     margin-right: 30px;
     display: flex;
@@ -25,26 +20,30 @@
     margin-right: var(--spacers-dp4);
 }
 
+.actions .buttonSmall {
+    display: none;
+}
+
 @media only screen and (max-width: 480px) {
     .container {
         padding-bottom: 3px;
     }
 
-    .inner {
+    .actions {
         margin: 0 var(--spacers-dp8);
     }
 
-    .topMargin {
-        margin-top: 36px; /* PRINT_ACTIONS_BAR_HEIGHT_SM */
+    .actions .buttonSmall {
+        display: inline-flex;
+    }
+
+    .actions .buttonLarge {
+        display: none;
     }
 }
 
 @media print {
     .container {
         display: none;
     }
-
-    .topMargin {
-        margin-top: 0px;
-    }
 }
diff --git a/src/components/Dashboard/styles/PrintDashboard.module.css b/src/components/Dashboard/styles/PrintDashboard.module.css
@@ -1,7 +1,6 @@
-.wrapper {
+.container {
     background-color: #f4f6f8;
-    margin-left: var(--spacers-dp32);
-    padding-left: var(--spacers-dp12);
+    padding-left: 44px;
     overflow-y: auto;
 }
 
@@ -14,12 +13,17 @@
     width: 1102px;
 }
 
+@media only screen and (max-width: 480px) {
+    .container {
+        padding-left: var(--spacers-dp12);
+    }
+}
+
 @media print {
-    .wrapper {
+    .container {
         background-color: white;
         height: auto !important;
         overflow: visible !important;
-        margin-left: 0px;
         padding-left: 0px;
     }
 

diff --git a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css
@@ -1,7 +1,6 @@
-.wrapper {
+.container {
     background-color: #f4f6f8;
-    margin-left: var(--spacers-dp32);
-    padding-left: var(--spacers-dp12);
+    padding-left: 44px;
     overflow-y: auto;
 }
 
@@ -14,12 +13,17 @@
     width: 1102px;
 }
 
+@media only screen and (max-width: 480px) {
+    .container {
+        padding-left: var(--spacers-dp12);
+    }
+}
+
 @media print {
-    .wrapper {
+    .container {
         background-color: white;
         height: auto !important;
         overflow: visible !important;
-        margin-left: 0px;
         padding-left: 0px;
     }
 
@@ -28,9 +32,3 @@
         border-radius: 0px;
     }
 }
-
-@media only screen and (max-width: 480px) {
-    .wrapper {
-        margin-left: 0px;
-    }
-}