Improve responsiveness

recipes/src/App.tsx

@@ -19,44 +19,38 @@ function Users() {
 
 const store = configureStore();
 
-class App extends Component<{}, {}> {
-  navbarItems: { title: string, path: string, active: boolean }[]
-
-  constructor(props: any) {
-    super(props);
-    this.navbarItems = [
-      { title: 'Recipes', path: '/recipes', active: false },
-      { title: 'Planner', path: '/planner', active: false },
-      { title: 'Shoplist', path: '/shoplist', active: false },
-    ];
-  }
-
-  render() {
-    return (
-      <Provider store={store}>
-        <Router>
-          <CBKDrawer>
-            {
-              this.navbarItems.map((item, i) => (
-                <NavLink
-                  to={item.path}
-                  activeClassName='active'
-                  key={i}
-                >{item.title}</NavLink>
-              ))
-            }
-          </CBKDrawer>
-          <div className="cbk-main">
-            {
-              Routes.map((route, i) => (
-                <RouteWithSubRoutes key={i} {...route} />
-              ))
-            }
-          </div>
-        </Router>
-      </Provider>
-    )
-  }
+const App = () => {
+  const navbarItems = [
+    { title: 'Recipes', path: '/recipes', active: false },
+    { title: 'Planner', path: '/planner', active: false },
+    { title: 'Shoplist', path: '/shoplist', active: false },
+  ];
+  return (
+    <Provider store={store}>
+      <Router>
+        <div className="cbk-app-drawer">
+        <CBKDrawer>
+          {
+            navbarItems.map((item, i) => (
+              <NavLink
+                to={item.path}
+                activeClassName='active'
+                key={i}
+              >{item.title}</NavLink>
+            ))
+          }
+        </CBKDrawer>
+        </div>
+        <div className="cbk-main">
+          {
+            Routes.map((route, i) => (
+              <RouteWithSubRoutes key={i} {...route} />
+            ))
+          }
+        </div>
+      </Router>
+    </Provider>
+  )
 }
 
 export default App;

recipes/src/components/RecipeCard/styles.scss

@@ -6,18 +6,20 @@
   
   &__primary {
     display: flex;
+    flex-wrap: wrap;
     flex-direction: row;
     justify-content: space-between;
 
     &__image.mdc-card__media {
       flex-grow: 1;
-      flex-basis: 33%;
+      flex-basis: 25%;
       border-top-left-radius: 0px;
       border-top-right-radius: 0px;
     }
   
     &__title {
-      flex-grow: 2;
+      flex-grow: 999;
+      min-width: 50%;
       padding-left: $spacing-regular;
       padding-top: $spacing-regular;
       padding-bottom: $spacing-regular;

recipes/src/containers/Recipes/List/index.tsx

@@ -83,7 +83,7 @@ class RecipeList extends Component<RecipeListProps, {phoneDisplay: boolean}> {
 
         <Grid>
           <Row>
-            <Cell columns={6}>
+            <Cell columns={6} phoneColumns={4} tabletColumns={8}>
               {
                 data.map((recipe, i) => {
                   return (

recipes/src/route.config.tsx

@@ -3,7 +3,6 @@ import { Route } from 'react-router';
 import RecipesContainer from 'containers/Recipes';
 
 const emptyRoute = (title: string) => () => {
-  debugger;
   return (<h1>{title}</h1>);
 };
 

recipes/src/styles/app.scss

@@ -37,6 +37,7 @@ h4 {
   font-family: $font-family-display;
   font-weight: $font-weight-bold;
   font-size: $font-size-xx-large;
+  line-height: 1.5rem;
 }
 
 h4:after {
@@ -44,7 +45,7 @@ h4:after {
   display: block;
   margin: 0 auto;
   width: 50px;
-  margin-top: -20px;
+  margin-top: -14px;
   border-bottom: 16px solid;
   border-bottom-color: $grey-300;
   margin-left: -4px;
@@ -57,11 +58,19 @@ code {
 
 #root {
   display: flex;
-  height: 100vh;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+
+.cbk-app-drawer {
+  flex-basis: 16rem;
+  flex-grow: 1;
 }
 
 .cbk-main {
-  width: 100%;
+  flex-basis: 0;
+  flex-grow: 9999;
+
   .mdc-layout-grid {
     display: flex;
     flex-direction: column;
@@ -106,3 +115,47 @@ textarea
 	-moz-box-sizing:content-box;
 	box-sizing:content-box;
 }
+
+/* 
+  ##Device = Low Resolution Tablets, Mobiles 
+*/
+
+@media (max-width: 840px) {
+  
+  #root {
+    flex-direction: column;
+    .cbk-app-drawer {
+      flex-basis: unset;
+
+      .cbk-drawer {
+        width: 100%;
+        flex-direction: row;
+        padding: 1rem;
+        h1.mdc-drawer__title {
+          margin: 0;
+          padding: 0;
+
+          &:after,
+          &:before {
+            display: none;
+          }
+        }
+        .mdc-drawer__header,
+        .mdc-list {
+          min-height: unset;
+          padding: 0;
+          display: flex;
+          flex-direction: row;
+          .mdc-list-item {
+            margin: 0;
+          }
+        }
+
+        .cbk-icon svg {
+          width: 45px!important;
+        }
+      }
+    }
+  }
+  
+}