Minor styling changes

kpomm · Oct 25, 2023 · e3cf414 · e3cf414
1 parent 98ca129
commit e3cf414
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 47 deletions.
diff --git a/src/components/RecipeDetail.jsx b/src/components/RecipeDetail.jsx
@@ -44,35 +44,37 @@ function RecipeDetail({ recipe, marketsPromise }) {
 
   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 id="detail-container">
-        <div className="details">
-          <h3>Quick Facts</h3>
+      <div className="columns">
+        <div className="col-2">
           <div>
-            <h4>Ready in {recipe.readyInMinutes} minutes
-            </h4>
+            <h5 id="recipe-title">{recipe.title}</h5>
+            { recipe.dishTypes && (<div id="dish-types">{dishTypes}</div>)}
           </div>
+          <img src={recipe.image} alt="" />
+        </div>
+        <div className="col-2">
           <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>
+              <h4>Ready in {recipe.readyInMinutes} minutes
+              </h4>
+            </div>
+            <div>
+              <h4>Servings: {recipe.servings}
+              </h4>
+            </div>
+            <div>
+              <h4>Source: {' '}
+                <a href={recipe.sourceUrl}>{recipe.sourceName}</a>
+              </h4>
+            </div>
           </div>
-        </div>
-        <div className="details-right">
           {markets && (<div><h3>Shop Local!</h3><div className="markets">{displayMarkets}</div></div>)}
+
         </div>
-      </div>
 
+      </div>
     </div>
+
   );
 }
 

diff --git a/src/style.scss b/src/style.scss
@@ -192,15 +192,15 @@ body, html {
   }
 
   #recipe-list {
-    width: 40%;
+    width: 35%;
     margin-left: 2%;
     margin-right: 2%;
     margin-top: 0;
     padding: 0px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: flex-center;
+    justify-content: flex-end;
   }
 
   .flex-row {
@@ -210,6 +210,25 @@ body, html {
     height: fit-content;
   }
 
+  .columns {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 100%;
+  }
+
+  .col-2 {
+    width: 48%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .col-2 img {
+   width: 90%;
+  }
+
   .recipe-item {
     width: 75%;
     height: fit-content;
@@ -265,8 +284,8 @@ body, html {
 
   #recipe-detail {
     color: $dark-color;
-    width: 40%;
-    height: 50vh;
+    width: 53%;
+    height: 55vh;
     background-color: $accent-color;
     border: solid 2px $dark-color;
     border-bottom: solid 5px $dark-color;
@@ -275,23 +294,10 @@ body, html {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
-
-    img {
-      height: 100%;
-
-      overflow-y: hidden;
-    }
   }
 
   #recipe-title {
-    width: 45%;
-  }
-
-  .detail-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    height: 35%
+    width: 80%;
   }
 
   .ingredient-container {
@@ -330,13 +336,9 @@ body, html {
     justify-content: space-between;
     align-items: end;
   }
-  .details {
-    flex-direction: column;
-  }
 
-  .details-right {
-    flex-direction: column;
-    text-align: right;
+  #detail-container img {
+    width: 25vw;
   }
 
   #dish-types {
@@ -348,8 +350,10 @@ body, html {
   .dish-type {
     margin-right: 1%;
     padding: 1%;
-    background-color: #b9d9f7;
-    border: solid 2px #88abdb;
+    border-radius: 5px;
+    font-weight: 400;
+    background-color: #d0e6fc;
+    border: solid 2px #9ebbe3;
     color: #4d5678;
   }