some more last touches

kpomm · Oct 25, 2023 · 1050d03 · 1050d03
1 parent 10f82bd
commit 1050d03
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 24 deletions.
diff --git a/src/components/RecipeDetail.jsx b/src/components/RecipeDetail.jsx
@@ -37,38 +37,41 @@ function RecipeDetail({ recipe, marketsPromise }) {
   if (markets) {
     displayMarkets = markets.map((mkt) => {
       return (
-        <h4 className="dish-type">{mkt}</h4>
+        <h4 className="farmers-market">{mkt.market_name}</h4>
       );
     });
   }
 
   return (
     <div id="recipe-detail" className="fixed-element">
       <div className="detail-header"><h5 id="recipe-title">{recipe.title}</h5><img src={recipe.image} alt="" /></div>
-      <div className="details">
-        <h3>Quick Facts</h3>
-        <div>
-          <h4>Ready in {recipe.readyInMinutes} minutes
-          </h4>
+      <div id="detail-container">
+        <div className="details">
+          <h3>Quick Facts</h3>
+          <div>
+            <h4>Ready in {recipe.readyInMinutes} minutes
+            </h4>
+          </div>
+          <div>
+            <h4>Is is affordable? {recipe.cheap}
+            </h4>
+          </div>
+          <div>
+            <h4>Servings: {recipe.servings}
+            </h4>
+          </div>
+          { recipe.dishTypes && (<div><h4>Dish Types: <div id="dish-types">{dishTypes}</div></h4></div>)}
+          <div>
+            <h4>Source: {' '}
+              <a href={recipe.sourceUrl}>{recipe.sourceName}</a>
+            </h4>
+          </div>
         </div>
-        <div>
-          <h4>Is is affordable? {recipe.cheap}
-          </h4>
-        </div>
-        <div>
-          <h4>Servings: {recipe.servings}
-          </h4>
-        </div>
-        { recipe.dishTypes && (<div><h4>Dish Types: <div id="dish-types">{dishTypes}</div></h4></div>)}
-        <div>
-          <h4>Source: {' '}
-            <a href={recipe.sourceUrl}>{recipe.sourceName}</a>
-          </h4>
+        <div className="details-right">
+          {markets && (<div><h4>Shop Local!</h4><div className="markets">{displayMarkets}</div></div>)}
         </div>
       </div>
-      <div className="details-right">
-        {markets && (<div><h4>Shop Local!</h4><div className="markets">{displayMarkets}</div></div>)}
-      </div>
+
     </div>
   );
 }

diff --git a/src/style.scss b/src/style.scss
@@ -45,6 +45,7 @@ body, html {
 
   h4 {
     margin-bottom: 0px;
+    margin-top: 10px;
   }
 
   h5 {
@@ -287,7 +288,7 @@ body, html {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    height: 30%
+    height: 35%
   }
 
   .ingredient-container {
@@ -320,8 +321,19 @@ body, html {
     color: #78774d;
   }
 
-  #details {
+  #detail-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: end;
+  }
+  .details {
+    flex-direction: column;
+  }
+
+  .details-right {
     flex-direction: column;
+    text-align: right;
   }
 
   #dish-types {