feat: responsive nav

src/App.js

@@ -18,32 +18,33 @@ export class App extends Component {
       PropTypes.func,
       PropTypes.element
     ]).isRequired,
-    routeInfo: PropTypes.object.isRequired
+    routeInfo: PropTypes.object.isRequired,
+    navbarIsOpen: PropTypes.bool.isRequired
   }
 
   componentWillMount () {
     this.props.doInitIpfs()
   }
 
   render () {
-    const { route: Page, ipfsReady, routeInfo: { url }, navbarWidth } = this.props
+    const { route: Page, ipfsReady, routeInfo: { url }, navbarIsOpen } = this.props
 
     return (
       <div className='sans-serif' onClick={navHelper(this.props.doUpdateUrl)}>
-        <div className='flex' style={{ minHeight: '100vh' }}>
-          <div className='flex-none bg-navy' style={{ width: navbarWidth }}>
+        <div className='flex-l' style={{ minHeight: '100vh' }}>
+          <div className={`flex-none-l bg-navy ${navbarIsOpen ? 'w5-l' : 'w4-l'}`}>
             <NavBar />
           </div>
-          <div className='flex-auto'>
-            <div className='flex items-center' style={{ background: '#F0F6FA', padding: '20px 40px 15px' }}>
-              <div className='' style={{ width: 560, maxWidth: '80%' }}>
+          <div className='flex-auto-l'>
+            <div className='flex items-center ph3 ph4-l' style={{ height: 75, background: '#F0F6FA', paddingTop: '20px', paddingBottom: '15px' }}>
+              <div style={{ width: 560 }}>
                 <IpldExploreForm />
               </div>
-              <div className='flex-auto tr'>
+              <div className='dn db-ns flex-auto tr'>
                 <Connected />
               </div>
             </div>
-            <main className='bg-white' style={{ padding: '40px' }}>
+            <main className='bg-white pv3 pa3-ns pa4-l'>
               { (ipfsReady || url === '/welcome')
                 ? <Page />
                 : <ComponentLoader pastDelay />
@@ -59,7 +60,7 @@ export class App extends Component {
 
 export default connect(
   'selectRoute',
-  'selectNavbarWidth',
+  'selectNavbarIsOpen',
   'selectRouteInfo',
   'doUpdateUrl',
   'doInitIpfs',

src/bundles/navbar.js

@@ -17,5 +17,5 @@ export default {
 
   selectNavbarIsOpen: state => state.navbar.isOpen,
 
-  selectNavbarWidth: state => state.navbar.isOpen ? 250 : 100
+  selectNavbarWidth: state => state.navbar.isOpen ? 256 : 128
 }

src/files/FilesPage.js

@@ -47,7 +47,6 @@ class FilesPage extends React.Component {
     filesSorting: PropTypes.object.isRequired,
     writeFilesProgress: PropTypes.number,
     gatewayUrl: PropTypes.string.isRequired,
-    navbarWidth: PropTypes.number.isRequired,
     doUpdateHash: PropTypes.func.isRequired,
     doFilesDelete: PropTypes.func.isRequired,
     doFilesMove: PropTypes.func.isRequired,
@@ -184,7 +183,6 @@ class FilesPage extends React.Component {
       ipfsProvider,
       files,
       writeFilesProgress,
-      navbarWidth,
       doFilesMove,
       doFilesNavigateTo,
       doFilesUpdateSorting,
@@ -231,7 +229,6 @@ class FilesPage extends React.Component {
 
             { files.type === 'directory' ? (
               <FilesList
-                maxWidth={`calc(100% - ${navbarWidth}px)`}
                 key={window.encodeURIComponent(files.path)}
                 root={files.path}
                 sort={sort}
@@ -350,7 +347,6 @@ export default connect(
   'selectFiles',
   'selectGatewayUrl',
   'selectWriteFilesProgress',
-  'selectNavbarWidth',
   'selectFilesPathFromHash',
   'selectFilesSorting',
   translate('files')(FilesPage)

src/files/files-list/FilesList.js

@@ -1,5 +1,8 @@
+/* global getComputedStyle */
+
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { connect } from 'redux-bundler-react'
 import PropTypes from 'prop-types'
 import Checkbox from '../../components/checkbox/Checkbox'
 import SelectedActions from '../selected-actions/SelectedActions'
@@ -22,7 +25,6 @@ class FileList extends React.Component {
     updateSorting: PropTypes.func.isRequired,
     root: PropTypes.string.isRequired,
     downloadProgress: PropTypes.number,
-    maxWidth: PropTypes.string.isRequired,
     // React Drag'n'Drop
     isOver: PropTypes.bool.isRequired,
     canDrop: PropTypes.bool.isRequired,
@@ -42,8 +44,7 @@ class FileList extends React.Component {
   }
 
   static defaultProps = {
-    className: '',
-    maxWidth: '100%'
+    className: ''
   }
 
   state = {
@@ -79,11 +80,14 @@ class FileList extends React.Component {
     }, 0)
     const show = this.state.selected.length !== 0
 
+    // We need this to get the width in ems
+    const innerWidthEm = window.innerWidth / parseFloat(getComputedStyle(document.querySelector('body'))['font-size'])
+
     return (
       <SelectedActions
         className={`fixed transition-all bottom-0 right-0`}
         style={{
-          maxWidth: this.props.maxWidth,
+          maxWidth: innerWidthEm < 60 ? '100%' : `calc(100% - ${this.props.navbarWidth}px)`,
           transform: `translateY(${show ? '0' : '100%'})`
         }}
         unselect={unselectAll}
@@ -346,4 +350,7 @@ const dropCollect = (connect, monitor) => ({
   canDrop: monitor.canDrop()
 })
 
-export default DropTarget(NativeTypes.FILE, dropTarget, dropCollect)(translate('files')(FileList))
+export default connect(
+  'selectNavbarWidth',
+  DropTarget(NativeTypes.FILE, dropTarget, dropCollect)(translate('files')(FileList))
+)

src/navigation/NavBar.js

@@ -30,19 +30,21 @@ const NavLink = ({
   const anchorClass = classnames({
     'bg-white-10': active,
     'o-50 no-pointer-events': disabled
-  }, ['dt dt--fixed pv3 mb2 white no-underline focus-outline f5 hover-bg-white-10'])
+  }, ['dib db-l pv3 white no-underline focus-outline f5 hover-bg-white-10 tc'])
   const svgClass = classnames({
     'o-100': active,
     'o-50': !active
   }, ['fill-current-color'])
 
   return (
     <a href={disabled ? null : href} className={anchorClass} role='menuitem' title={children}>
-      <span className={`dtc v-mid ${open ? 'tr' : 'tc'}`} style={{ width: 100 }}>
-        <Svg width='50' className={svgClass} />
-      </span>
-      <span className='dtc v-mid pl3'>
-        {open ? children : null}
+      <span className={`dib ${open ? 'dt-l' : ''}`}>
+        <span className={`dib dtc-l v-mid ${open ? 'pl3 pl5-l' : 'ph3'}`} style={{ width: 50 }}>
+          <Svg width='50' className={svgClass} />
+        </span>
+        <span className={`${open ? 'dib dtc-l' : 'dn'} pl2 pl3-l pr3 tl-l v-mid `}>
+          {children}
+        </span>
       </span>
     </a>
   )
@@ -53,15 +55,14 @@ export const NavBar = ({ t, isSettingsEnabled, width, open, onToggle }) => {
   const bugsUrl = `${codeUrl}/issues`
   const gitRevision = process.env.REACT_APP_GIT_REV
   const revisionUrl = `${codeUrl}/commit/${gitRevision}`
-
   return (
-    <div className='h-100 fixed flex flex-column justify-between' style={{ width }}>
+    <div className='h-100 fixed-l flex flex-column justify-between' style={{ width: 'inherit' }}>
       <div className='flex flex-column'>
-        <div className='pointer' style={{ paddingTop: 35 }} onClick={onToggle}>
+        <div className='pointer pv3 pv4-l' onClick={onToggle}>
           <img className='center' style={{ height: 70, display: open ? 'block' : 'none' }} src={ipfsLogoText} alt='IPFS' title='Toggle navbar' />
           <img className='center' style={{ height: 70, display: open ? 'none' : 'block' }} src={ipfsLogo} alt='IPFS' title='Toggle navbar' />
         </div>
-        <nav className='db pt4' role='menubar'>
+        <nav className='db overflow-x-scroll overflow-x-hidden-l nowrap tc' role='menubar'>
           <NavLink to='/' exact icon={StrokeMarketing} open={open}>{t('status:title')}</NavLink>
           <NavLink to='/files/' icon={StrokeWeb} open={open}>{t('files:title')}</NavLink>
           <NavLink to='/explore' icon={StrokeIpld} open={open}>{t('explore:tabName')}</NavLink>
@@ -70,7 +71,7 @@ export const NavBar = ({ t, isSettingsEnabled, width, open, onToggle }) => {
         </nav>
       </div>
       { open &&
-        <div className='navbar-footer mb3 center'>
+        <div className='dn db-l navbar-footer mb3 center'>
           { gitRevision && <div className='tc mb1'>
             <a className='link white f7 o-80 glow' href={revisionUrl} target='_blank'>{t('status:revision')} {gitRevision}</a>
           </div> }