From 22ef3eb196f8f88683e9bba5a108594828f10a2b Mon Sep 17 00:00:00 2001
From: Byron G <byrongbp@gmail.com>
Date: Tue, 20 Dec 2022 00:24:00 +0100
Subject: [PATCH] styles update

---
 src/App.css | 45 ++++++++++++++++++++++++++++++++++++++++--
 src/App.js  | 56 +++++++++++++++++++++++++++++++++++------------------
 2 files changed, 80 insertions(+), 21 deletions(-)

diff --git a/src/App.css b/src/App.css
index 0913544..a9ab26e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -92,7 +92,7 @@
 }
 
 .power-decrease {
-  background-color: rgba(255, 95, 95, 0.8) ;
+  background-color: rgba(255, 95, 95, 0.8);
 }
 
 .filling-bkg {
@@ -146,7 +146,7 @@
   margin-top: 10px;
 }
 
-.complex-search-panel > * {
+.complex-search-panel>* {
   margin-bottom: 4px;
 }
 
@@ -178,6 +178,21 @@
   position: relative;
 }
 
+.card .sandwich-image {
+  width: 100px;
+  object-fit: cover;
+}
+
+@media (max-width: 600px) {
+  .card .sandwich-image {
+    width: 120px;
+  }
+}
+
+.card .sandwich-info {
+  padding: 7px;
+}
+
 #players-icon {
   position: absolute;
   top: 2px;
@@ -252,6 +267,7 @@
   border-top-right-radius: 0px;
   margin-right: 0px;
 }
+
 .chain-b {
   border-bottom-left-radius: 0px;
   border-top-left-radius: 0px;
@@ -260,6 +276,7 @@
   margin-right: 0px;
   margin-left: 0px;
 }
+
 .chain-c {
   border-bottom-left-radius: 0px;
   border-top-left-radius: 0px;
@@ -293,6 +310,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -321,3 +339,26 @@ small {
   text-decoration: underline;
 }
 
+.ingredients-results {
+  padding: 20px 0px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+}
+
+.advanced-mode .card {
+  max-width: 90%;
+  padding: 7px;
+}
+
+@media (max-width: 600px) {
+  .advanced-mode .card {
+    max-width: 70%;
+  }
+}
+
+.flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 6092769..f551bd4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,7 @@ import FLAVORS from './data/flavors.json';
 import { useEffect, useState } from 'react';
 import { getCondiments, getFillings, getRecipeFromIngredients, ts, LANGUAGE_NAMES, getNumberOfPlayers,
   ALIAS_TO_FULL, FULL_TO_ALIAS, COLORS, oneTwoFirst, getIngredientsSums, craftSandwich, checkPresetSandwich,
-  copyTextToClipboard, hasRelevance, getCategory, getIngredientsFromRecipe } from './util';
+  copyTextToClipboard, hasRelevance, getCategory, getIngredientsFromRecipe, isFilling } from './util';
 import { runTests } from './test/tests';
 import Card from './components/Card';
 import './App.css';
@@ -306,12 +306,11 @@ function App() {
 
     return (
       <div className='card' style={{ display: "flex" }}>
-        <img alt={ts(sandwich.name)}
+        <img className='sandwich-image' alt={ts(sandwich.name)}
           src={sandwich.imageUrl}
-          style={{ width: "100px" }}
         />
         {megaSandwichMode && <div id="players-icon">{numberOfPlayers}P</div>}
-        <div>
+        <div className='sandwich-info'>
           <div className="bubble bubble-header" onClick={() => {
             if(window.event.ctrlKey) { runTests(); }
           }}
@@ -355,28 +354,47 @@ function App() {
     // with only condiments.
     const showResults = activeFillings.length > 0 && activeCondiments.length > 0;
 
+    const fillings = []
+    const flavours = []
+    ingredients.forEach((item) => isFilling(item) ? fillings.push(item) : flavours.push(item))
+
+    const renderCard = (isFlavour) => (x, i) => (<Card 
+      ingredient={x} 
+      number={isFlavour ? fillings.length + i : i} 
+      fillings={activeFillings}
+      simpleMode={simpleMode}
+      key={i}
+      updatePieces={() => pulse()}
+      onClickBubble={key => toggleActiveKey(key)}
+      activeKey={activeKey}
+      onClick={() => {
+        if (!simpleMode) {
+          setAdvancedIngredients(!advancedIngredients);
+        }
+      }}
+      condiments={activeCondiments} detail={!simpleMode && advancedIngredients} />
+    )
+
     return (
       <div>
-        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center" }}>
-          {ingredients.map((x, i) => <Card ingredient={x} number={i} fillings={activeFillings}
-            simpleMode={simpleMode}
-            updatePieces={() => pulse()}
-            onClickBubble={key => toggleActiveKey(key)}
-            activeKey={activeKey}
-            onClick={() => {
-              if (!simpleMode) {
-                setAdvancedIngredients(!advancedIngredients);
-              }
-            }}
-            condiments={activeCondiments} detail={!simpleMode && advancedIngredients} />)}
-          {!advancedIngredients && <br className='page-break' />}
+        <div className='ingredients-results'>
+          <div className='flex-wrap fillings'>
+            {fillings.map(renderCard(false))}
+          </div>
+          <div className='flex-wrap flavours'>
+            {flavours.map(renderCard(true))}
+          </div>
           {showResults && !simpleMode
-            && <Card sums={sums} activeSandwich={activeSandwich}
+            && 
+            <div className='flex-wrap advanced-mode'>
+              <Card sums={sums} activeSandwich={activeSandwich}
                 fillings={activeFillings} condiments={activeCondiments} 
                 detail={!simpleMode && advancedIngredients}
                 onClickBubble={key => toggleActiveKey(key)}
                 activeKey={activeKey}
-              />}
+              />
+            </div>
+          }
         </div>
         <div className="bubble-row" style={{ justifyContent: "center" }}>
           {renderSandwich(foundSandwich)}