From 2e881210204a8800c5fe88c6125aa5bdb7ff7e48 Mon Sep 17 00:00:00 2001
From: Abhas Bhattacharya <abhasbhattacharya2@gmail.com>
Date: Sun, 18 Nov 2018 21:51:50 +0530
Subject: [PATCH] Fix tags - Make them scrollable

---
 src/components/Categories/categories.css | 10 ---------
 src/components/Categories/categories.js  |  4 ++--
 src/components/RecipeCard/recipecard.css | 16 ++++++++------
 src/components/RecipeCard/recipecard.js  | 27 ++++++++++++------------
 src/index.css                            | 11 ++++++++++
 src/index.js                             |  2 +-
 6 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/components/Categories/categories.css b/src/components/Categories/categories.css
index 6077f98..e69de29 100644
--- a/src/components/Categories/categories.css
+++ b/src/components/Categories/categories.css
@@ -1,10 +0,0 @@
-.categories-wrapper {
-    width: 100%;
-    overflow: auto;
-}
-
-.categories-inner {
-    /* width: auto; */
-    display: inline-flex;
-    flex-direction: row;
-}
\ No newline at end of file
diff --git a/src/components/Categories/categories.js b/src/components/Categories/categories.js
index e281589..7707569 100644
--- a/src/components/Categories/categories.js
+++ b/src/components/Categories/categories.js
@@ -5,8 +5,8 @@ import './categories.css';
 function Categories(props) {
     return (
         `
-        <div class="categories-wrapper">
-            <div class="categories-inner">
+        <div class="swipable-outer">
+            <div class="swipable-inner">
             ${
                 props.categories.map((category) => (
                     CategoryCard({
diff --git a/src/components/RecipeCard/recipecard.css b/src/components/RecipeCard/recipecard.css
index f6b319e..9b7e66c 100644
--- a/src/components/RecipeCard/recipecard.css
+++ b/src/components/RecipeCard/recipecard.css
@@ -14,9 +14,10 @@
 }
 
 .recipe-card-bottom {
-    padding: 8px;
-    padding-right: 16px;
-    height: 120px;
+    margin: 8px;
+    padding-right: 8px;
+    height: calc(120px - 16px);
+    width: calc(100% - 16px);
 }
 
 .recipe-card-image {
@@ -39,7 +40,7 @@
 }
 
 .recipe-card-logo-wrapper {
-    width: 25%;
+    width: 60px;
     height: 100%;
 }
 
@@ -77,15 +78,16 @@
 }
 
 .recipe-card-tags {
+    width: 100%;
     display: inline-flex;
     flex-direction: row;
-    height: 40px;
+    height: 40%;
 }
 
 .recipe-card-tag {
-    margin: 0 16px;
-    margin-top: 4px;
+    margin: 4px;
     padding: 4px 8px;
+    width: max-content;
     border-radius: 4px;
     background-color: darkgray;
 }
\ No newline at end of file
diff --git a/src/components/RecipeCard/recipecard.js b/src/components/RecipeCard/recipecard.js
index bd247c8..e4f4653 100644
--- a/src/components/RecipeCard/recipecard.js
+++ b/src/components/RecipeCard/recipecard.js
@@ -48,19 +48,20 @@ export default function RecipeCard(props) {
                         </div>
                     </div>
                 </div>
-                <div class="recipe-card-tags">
-                    ${
-                        props.recipe.tags.map(tag => (
-                            `
-                            <div class="recipe-card-tag">
-                                ${
-                                    toTitleCase(tag)
-                                }
-                            </div>
-                            `
-                        )).join('')
-                    }
-
+                <div class="recipe-card-tags swipable-outer">
+                    <div class="swipable-inner">
+                        ${
+                            props.recipe.tags.map(tag => (
+                                `
+                                <div class="recipe-card-tag">
+                                    ${
+                                        toTitleCase(tag)
+                                    }
+                                </div>
+                                `
+                            )).join('')
+                        }
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/index.css b/src/index.css
index cee5f34..3203122 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,3 +12,14 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.swipable-outer {
+  width: 100%;
+  overflow: auto;
+}
+
+.swipable-inner {
+  /* width: auto; */
+  display: inline-flex;
+  flex-direction: row;
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e6f8b88..52a4a56 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,5 @@
-import './index.css';
 import App from './App';
+import './index.css';
 
 window.addEventListener("load", function () {
     const app = new App();