Fix mobile CSS

pramodsum · Mar 31, 2020 · f6e7b96 · f6e7b96
1 parent c72fc0e
commit f6e7b96
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/src/components/ItemList/ItemList.tsx b/src/components/ItemList/ItemList.tsx
@@ -5,10 +5,10 @@ import "./RecipeList.css";
 import RecipeCard from "../RecipeCard/RecipeCard";
 import { Recipe } from "../../utils/types";
 
-const RecipeList: React.FC<{ items: Array<Recipe> }> = ({ items }) => {
+const RecipeList: React.FC<{ recipes: Array<Recipe> }> = ({ recipes }) => {
   return (
-    <List className="items-list">
-      {items.map(recipe => (
+    <List className="recipes-list">
+      {recipes.map(recipe => (
         <RecipeCard recipe={recipe} />
       ))}
     </List>

diff --git a/src/components/RecipeCard/RecipeCard.css b/src/components/RecipeCard/RecipeCard.css
@@ -3,6 +3,13 @@
   margin: 10px;
 }
 
+@media only screen and (max-width: 600px) {
+  .recipe-card {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
 .recipe-card:hover {
   background: lightgreen;
 }

diff --git a/src/components/RecipeList/RecipeList.css b/src/components/RecipeList/RecipeList.css
@@ -1,4 +1,5 @@
-.items-list {
+.recipes-list {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
 }
diff --git a/src/components/RecipeList/RecipeList.tsx b/src/components/RecipeList/RecipeList.tsx
@@ -5,10 +5,10 @@ import "./RecipeList.css";
 import RecipeCard from "../RecipeCard/RecipeCard";
 import { Recipe } from "../../utils/types";
 
-const RecipeList: React.FC<{ items: Array<Recipe> }> = ({ items }) => {
+const RecipeList: React.FC<{ recipes: Array<Recipe> }> = ({ recipes }) => {
   return (
-    <List className="items-list">
-      {items.map(recipe => (
+    <List className="recipes-list">
+      {recipes.map(recipe => (
         <RecipeCard recipe={recipe} />
       ))}
     </List>

diff --git a/src/routes/Homepage.tsx b/src/routes/Homepage.tsx
@@ -8,7 +8,7 @@ import { Recipe } from "../utils/types";
 import { TACO_API_BASE } from "../utils/globals";
 
 const Homepage: React.FC = () => {
-  const [items, setItem] = React.useState<Array<Recipe>>([]);
+  const [recipes, setItem] = React.useState<Array<Recipe>>([]);
 
   React.useEffect(() => {
     fetch(`${TACO_API_BASE}/toppings`)
@@ -18,7 +18,7 @@ const Homepage: React.FC = () => {
 
   return (
     <Layout>
-      <RecipeList items={items} />
+      <RecipeList recipes={recipes} />
     </Layout>
   );
 };