From e08fa9fb786090476c5891db61392e6869bdb481 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Fri, 3 Feb 2017 12:35:33 +0000 Subject: [PATCH] adding in columns for responsive layout --- frontend/src/components/breadcrumb/index.js | 24 ++++++++++------- frontend/src/components/empty/services.js | 26 +++++++++--------- frontend/src/components/section/index.js | 30 ++++++++++++++++++--- frontend/src/containers/services/index.js | 12 ++++++--- ui/src/components/button/index.js | 4 +-- ui/src/components/row/index.js | 1 + ui/src/shared/constants/breakpoints.js | 2 +- 7 files changed, 66 insertions(+), 33 deletions(-) diff --git a/frontend/src/components/breadcrumb/index.js b/frontend/src/components/breadcrumb/index.js index d02ea708..08d488b7 100644 --- a/frontend/src/components/breadcrumb/index.js +++ b/frontend/src/components/breadcrumb/index.js @@ -1,4 +1,6 @@ const Container = require('@ui/components/container'); +const Row = require('@ui/components/row'); +const Column = require('@ui/components/column'); const PropTypes = require('@root/prop-types'); const React = require('react'); const ReactRouter = require('react-router'); @@ -78,15 +80,19 @@ const Breadcrumb = ({ }) => { return ( - -

- {getNameLink(name)} -

-
+ + + +

+ {getNameLink(name)} +

+
+
+
); }; diff --git a/frontend/src/components/empty/services.js b/frontend/src/components/empty/services.js index 0c210aa5..f09ee66f 100644 --- a/frontend/src/components/empty/services.js +++ b/frontend/src/components/empty/services.js @@ -28,21 +28,21 @@ module.exports = () => ( - - - -

- -

-
- - - + + - + + + +

+ +

+ + +
diff --git a/frontend/src/components/section/index.js b/frontend/src/components/section/index.js index 848aa4be..6c7dc88c 100644 --- a/frontend/src/components/section/index.js +++ b/frontend/src/components/section/index.js @@ -1,12 +1,18 @@ const React = require('react'); const ReactIntl = require('react-intl'); const ReactRouter = require('react-router'); +const Styled = require('styled-components'); const Li = require('@ui/components/horizontal-list/li'); +const constants = require('@ui/shared/constants'); const PropTypes = require('@root/prop-types'); const Ul = require('@ui/components/horizontal-list/ul'); const Breadcrumb = require('@components/breadcrumb'); +const { + default: styled +} = Styled; + const { FormattedMessage } = ReactIntl; @@ -15,6 +21,22 @@ const { Link } = ReactRouter; +const { + breakpoints, +} = constants; + +const StyledHorizontalList = styled(Ul)` + ${breakpoints.smallOnly` + padding: 0 + `} +`; + +const StyledHorizontalListItem = styled(Li)` + ${breakpoints.smallOnly` + display: block; + `} +`; + const Section = (props) => { const { children, @@ -22,19 +44,19 @@ const Section = (props) => { } = props; const navLinks = links.map((link) => ( -
  • + -
  • + )); return (
    -
      + {navLinks} -
    + {children}
    ); diff --git a/frontend/src/containers/services/index.js b/frontend/src/containers/services/index.js index cc0c1c78..8eb3bdeb 100644 --- a/frontend/src/containers/services/index.js +++ b/frontend/src/containers/services/index.js @@ -6,6 +6,8 @@ const PropTypes = require('@root/prop-types'); const ServiceItem = require('@components/service-item'); const selectors = require('@state/selectors'); +const Row = require('@ui/components/row'); +const Column = require('@ui/components/column'); const { connect } = ReactRedux; @@ -35,10 +37,12 @@ const Services = ({ )); return ( -
    - {empty} - {serviceList} -
    + + + {empty} + {serviceList} + + ); }; diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js index ba027867..5f0d2611 100644 --- a/ui/src/components/button/index.js +++ b/ui/src/components/button/index.js @@ -65,7 +65,7 @@ const borderRadius = match({ // based on bootstrap 4 const style = css` box-sizing: border-box; - display: flex; + display: inline-block; justify-content: center; align-items: center; @@ -95,7 +95,7 @@ const style = css` border: solid ${remcalc(1)} ${border}; box-shadow: ${boxes.bottomShaddow}; - + &:focus { outline: 0; text-decoration: none; diff --git a/ui/src/components/row/index.js b/ui/src/components/row/index.js index 1d2bbc09..e3abecf0 100644 --- a/ui/src/components/row/index.js +++ b/ui/src/components/row/index.js @@ -59,6 +59,7 @@ module.exports = styled.div` margin-left: ${margin}; margin-right: ${margin}; + min-width: 100%; flex-direction: ${direction('xs')}; justify-content: ${justify('xs')}; diff --git a/ui/src/shared/constants/breakpoints.js b/ui/src/shared/constants/breakpoints.js index 2a899bd7..4c8de37d 100644 --- a/ui/src/shared/constants/breakpoints.js +++ b/ui/src/shared/constants/breakpoints.js @@ -23,7 +23,7 @@ const screen = 'only screen'; const screens = { // >= 768px - 'small-only': `${screen} and (max-width: ${small.upper})`, + 'smallOnly': `${screen} and (max-width: ${small.upper})`, 'small': `${screen} and (min-width: ${small.upper}})`, // >= 1024px 'medium-only': `${screen} and (min-width: ${medium.lower})