feat: mobile layout

adekbadek · Sep 25, 2021 · f6360e2 · f6360e2
1 parent 67d9c74
commit f6360e2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 28 deletions.
diff --git a/client/src/components/Filters.jsx b/client/src/components/Filters.jsx
@@ -26,14 +26,14 @@ const Filters = () => {
   }
 
   return (
-    <div className='mt2 flex items-center justify-between'>
-      <div className='dib'>
+    <div className='mt2 flex items-center justify-between flex-wrap'>
+      <div className='dib mb1'>
         {FILTER_NAMES.map((type, i) => {
           const howManyFiltered = filterWithType(type, books).length
           return (
             <Button
               isActive={filterType === type}
-              className='mr3'
+              className='mr3 mb3'
               key={i}
               onClick={() => dispatch(setFilterType(type))}
             >

diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx
@@ -20,11 +20,8 @@ const Header = () => {
   }, [])
 
   return (
-    <div className='flex justify-between items-start mb5'>
-      <RouteLink url='/'>
-        <h1 className='f1 dib ma0'>books</h1>
-      </RouteLink>
-      <div className='flex items-center'>
+    <div className='flex justify-between items-start mb3 mb5-ns flex-wrap'>
+      <div className='flex items-center justify-between w-100 mb2'>
         <RouteLink url={USER_SETTINGS_VIEW_URL} className='mr3'>
           {user.email}
         </RouteLink>
@@ -38,6 +35,9 @@ const Header = () => {
           </RouteLink>
         )}
       </div>
+      <RouteLink url='/'>
+        <h1 className='f1 dib ma0'>books</h1>
+      </RouteLink>
     </div>
   )
 }

diff --git a/client/src/components/TimeViewer/index.js b/client/src/components/TimeViewer/index.js
@@ -74,27 +74,29 @@ const TimeViewer = ({ className }) => {
 
   return (
     <div className={cx(className, 'pb4 time-viewer')}>
-      <div className='pb2 mb4 tc posr'>
-        <Button onClick={changeDate(false)}>
-          <Icon name='arrow-left' />
-        </Button>
-        <span className='ph4 time-viewer__dates unselect'>
-          {startDate.format("MMM 'YY")} -{' '}
-          {moment(endDate).subtract(1, 'month').format("MMM 'YY")}
-          &nbsp;
-          <span
-            className='unselect'
-            title={`${readInCurrentYear} books read in ${moment(
-              startDate
-            ).format('YYYY')}`}
-          >
-            ({readInCurrentYear})
+      <div className='mb4 flex justify-end justify-between-ns flex-wrap '>
+        <div className='pb2 tc flex-auto flex justify-between justify-center-ns items-center'>
+          <Button onClick={changeDate(false)}>
+            <Icon name='arrow-left' />
+          </Button>
+          <span className='ph4 time-viewer__dates unselect'>
+            {startDate.format("MMM 'YY")} -{' '}
+            {moment(endDate).subtract(1, 'month').format("MMM 'YY")}
+            &nbsp;
+            <span
+              className='unselect'
+              title={`${readInCurrentYear} books read in ${moment(
+                startDate
+              ).format('YYYY')}`}
+            >
+              ({readInCurrentYear})
+            </span>
           </span>
-        </span>
-        <Button onClick={changeDate(true)}>
-          <Icon name='arrow-right' />
-        </Button>
-        <div className='posa' style={{ top: 0, right: 0 }}>
+          <Button onClick={changeDate(true)}>
+            <Icon name='arrow-right' />
+          </Button>
+        </div>
+        <div className=''>
           {MODES.map((v, i) => (
             <Button
               className='ml2'