Open Props styling

madshoe47 · Feb 23, 2022 · a72903f · a72903f
1 parent cdce2e7
commit a72903f
Show file tree

Hide file tree

Showing 10 changed files with 195 additions and 203 deletions.
diff --git a/lesson-04/remix-site/app/db/db.json b/lesson-04/remix-site/app/db/db.json
@@ -74,6 +74,18 @@
       ],
       "author": "Magda",
       "img": "https://www.kwestiasmaku.com/sites/v123.kwestiasmaku.com/files/curry_ramen_01.jpg"
+    },
+    {
+      "id": "17f2653bdd0",
+      "title": "Sandwich",
+      "body": "This is a sandwich hihihihiihihi",
+      "seperatedIngredients": [
+        "bread",
+        " lettuce",
+        " cheese"
+      ],
+      "author": "Kasia",
+      "img": "https://assets.epicurious.com/photos/5d3770225c5cb8000935d1db/6:4/w_3272,h_2181,c_limit/crispy-green-goddess-sandwich-recipe-BA-071119.jpg"
     }
   ]
 }
diff --git a/lesson-04/remix-site/app/routes/recipes.jsx b/lesson-04/remix-site/app/routes/recipes.jsx
@@ -1,5 +1,7 @@
 import { Outlet } from "remix";
 
+
+
 export default function Recipes() {
   return (
     <>

diff --git a/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx b/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx
@@ -1,6 +1,7 @@
 import { Link, redirect } from "remix";
 import { useLoaderData } from "remix";
 import db from "~/db/db.server";
+import RecipeStylesUrl from "~/styles/Recipe.css";
 
 export const loader = async function ({ params }) {
   const recipe = db.data.recipes.find((p) => p.id === params.recipeId);
@@ -22,6 +23,15 @@ export const action = async function ({ request, params }) {
   }
 };
 
+export function links() {
+  return [
+    {
+      rel: "stylesheet",
+      href: RecipeStylesUrl,
+    },
+  ];
+}
+
 export default function Recipe() {
   const { recipe } = useLoaderData();
 
@@ -33,20 +43,24 @@ export default function Recipe() {
           Back
         </Link>
       </div>
-      <img src={recipe.img} style={{width:"100%", height:"200px", objectFit:"cover"}} ></img>
-      <h2>Description</h2>
-      <p className="page-content">{recipe.body}</p>
-      <h2>Ingredients</h2>
-      <ul className="page-content">
-        {recipe.seperatedIngredients.map((ingredient) => {
-            return (
-              <li>
-                {ingredient}
-              </li>
-          )
-        })}</ul>
-        <h2>Author</h2>
-        <p className="page-content">{recipe.author}</p>
+      <div className="recipe-content">
+        <img src={recipe.img} ></img>
+        <div className="recipe-info">
+          <h2>Description</h2>
+          <p className="page-content">{recipe.body}</p>
+          <h2>Ingredients</h2>
+          <ul className="page-content">
+            {recipe.seperatedIngredients.map((ingredient) => {
+                return (
+                  <li>
+                    {ingredient}
+                  </li>
+              )
+            })}</ul>
+            <h2>Author</h2>
+            <p className="page-content">{recipe.author}</p>
+        </div>
+        </div>
       <div className="page-footer">
         <form method="post">
           <input type="hidden" name="_method" value="delete" />

diff --git a/lesson-04/remix-site/app/routes/recipes/index.jsx b/lesson-04/remix-site/app/routes/recipes/index.jsx
@@ -1,10 +1,20 @@
 import { Link, useLoaderData } from "remix";
 import db from "~/db/db.server.js";
+import RecipesStylesUrl from "~/styles/Recipes.css";
 
 export async function loader() {
   return db.data.recipes;
 }
 
+export function links() {
+  return [
+    {
+      rel: "stylesheet",
+      href: RecipesStylesUrl,
+    },
+  ];
+}
+
 export default function PostItems() {
   const recipes = useLoaderData();
 
@@ -16,12 +26,12 @@ export default function PostItems() {
           New recipe
         </Link>
       </div>
-      <ul className="posts-list">
+      <ul className="recipe-list">
         {recipes.map((recipe) => (
-          <li key={recipe.id}>
+          <li className="recipe-item" key={recipe.id}>
             <Link to={recipe.id}>
               <h3>{recipe.title}</h3>
-              <img src={recipe.img} style={{width:"100%", height:"200px", objectFit:"cover", borderRadius:"8px"}} ></img>
+              <img className="img" src={recipe.img} style={{width:"100%", height:"200px", objectFit:"cover", borderRadius:"px"}} ></img>
               <p className="page-content">Author: {recipe.author}</p>
             </Link>
           </li>

diff --git a/lesson-04/remix-site/app/routes/recipes/new.jsx b/lesson-04/remix-site/app/routes/recipes/new.jsx
@@ -1,5 +1,15 @@
 import { Link, redirect } from "remix";
 import db from "~/db/db.server";
+import NewRecipeStylesUrl from "~/styles/NewRecipe.css";
+
+export function links() {
+  return [
+    {
+      rel: "stylesheet",
+      href: NewRecipeStylesUrl,
+    },
+  ];
+}
 
 export const action = async ({ request }) => {
   const form = await request.formData();
@@ -47,7 +57,7 @@ export default function NewRecipe() {
             <label htmlFor="img">Picture URL</label>
             <input type="text" name="img" id="img" />
           </div>
-          <button className="btn btn-block" type="submit">
+          <button className=" btn btn-block" type="submit">
             Add Recipe
           </button>
         </form>

diff --git a/lesson-04/remix-site/app/styles/Home.css b/lesson-04/remix-site/app/styles/Home.css
diff --git a/lesson-04/remix-site/app/styles/NewRecipe.css b/lesson-04/remix-site/app/styles/NewRecipe.css
@@ -0,0 +1,35 @@
+.page-header{
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+input, textarea {
+    background-color: var(--gray-8);
+    border: none;
+    border-radius: var(--radius-2);
+    padding: var(--size-2);
+    color: var(--gray-0);
+}
+
+input:focus-visible, textarea:focus-visible {
+    outline: 1px solid var(--indigo-7);
+}
+
+.form-control {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--size-4);
+    gap: 4px;
+    width: var(--size-15);
+}
+
+.btn-block {
+    background-color: var(--indigo-7);
+    text-decoration: none;
+    padding: var(--size-2) var(--size-5);
+    color: var(--gray-0);
+    border-radius: var(--radius-round);
+    text-transform: uppercase;
+    height: fit-content;
+    border: none;
+}
diff --git a/lesson-04/remix-site/app/styles/Recipe.css b/lesson-04/remix-site/app/styles/Recipe.css
@@ -0,0 +1,39 @@
+.page-header{
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+img {
+    border-radius: var(--radius-2);
+    height: 400px;
+    width: 700px;
+    object-fit: cover;
+}
+
+.recipe-info {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--gray-8);
+    margin-left: 24px;
+    width: 50%;
+    padding: var(--size-5) var(--size-8);
+    border-radius: var(--radius-2);
+}
+
+.recipe-content {
+    display: flex;
+    flex-direction: row;
+    gap: 32px;
+}
+
+.btn-delete {
+    background-color: var(--red-7);
+    text-decoration: none;
+    padding: var(--size-2) var(--size-5);
+    color: var(--gray-0);
+    border-radius: var(--radius-round);
+    text-transform: uppercase;
+    height: fit-content;
+    border: none;
+    margin: var(--size-6) 0;
+}
diff --git a/lesson-04/remix-site/app/styles/Recipes.css b/lesson-04/remix-site/app/styles/Recipes.css
@@ -0,0 +1,37 @@
+.btn {
+    background-color: var(--indigo-7);
+    text-decoration: none;
+    padding: var(--size-2) var(--size-5);
+    color: var(--gray-0);
+    border-radius: var(--radius-round);
+    text-transform: uppercase;
+    height: fit-content;
+}
+
+.page-header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.recipe-item{
+    background-color: var(--gray-8);
+    padding: var(--size-2) var(--size-5);
+    list-style-type: none; 
+    width: 28%;
+    border-radius: var(--radius-2);
+    box-shadow: var(--shadow-3);
+}
+
+.recipe-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 34px;
+    padding: 0 !important;
+}
+
+.img {
+    border-radius: var(--radius-2);
+}