Almost done with food menu

src/TestPanel.js

@@ -127,10 +127,8 @@ function SelectorWindow(p) {
       </div>
     }
     <div className="modalItemListContainer customScrollbar">
-    <ul className="itemlist">
     {p.filter?itemList.filter((item)=>p.filterFunction(tabPage,item)).filter((item)=>p.searchFieldFunction(filter,item)).sort((a,b)=>p.sortOrderFunction(sortSelector,a,b)).map((item,i)=><React.Fragment key={i}>{p.displayFunction(item)}</React.Fragment>):itemList.map((item,i)=><React.Fragment key={i}>{p.displayFunction(item)}</React.Fragment>)}
     {p.children}
-    </ul>
     </div>
   </PopupWindow>
 }
@@ -709,25 +707,36 @@ AUGMENT
     }  
   }}
   displayFunction={(item)=>{
-  return <li className={"itemwep r"+item.rarity} onClick={()=>{
+  return <div className={"itemWrapper r"+item.rarity} onClick={()=>{
     switch(armorSlotSelection) {
       case 1:setSelectedArmor1(item);break;
       case 2:setSelectedArmor2(item);break;
       case 3:setSelectedArmor3(item);break;
       default:setSelectedArmor1(item)
     }
-    setArmorSelectWindowOpen(false)}}><div className="itemWeaponWrapper"><img className="itemimg" alt="" src={DisplayIcon(item?.icon)} /><em className="rifle">{item.name}</em></div><br /><span className="atk">{item.def}</span></li>}}
+    setArmorSelectWindowOpen(false)}}>
+          <div className="itemImgWrapper"><img alt="" src={DisplayIcon(item?.icon)} /></div>
+          <div className="itemNameWrapper rifle">{item.name}</div>
+          <div className="itemRarityWrapper">&nbsp;</div>
+          <div className="itemPropertiesWrapper"><span className="atk">{item.def}</span></div>
+        </div>
+      }}
   />
 
-<SelectorWindow className="itemBox" title={"Food Menu"} modalOpen={foodMenuWindowOpen} setModalOpen={setFoodMenuWindowOpen} GetData={p.GetData}>
+<SelectorWindow title={"Food Menu"} modalOpen={foodMenuWindowOpen} setModalOpen={setFoodMenuWindowOpen} GetData={p.GetData}>
-
+
-<li className="itemWrapper">
+<div className="itemWrapper r1"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div><div className="itemNameWrapper meat">XXXL Super Duper Extra Crispy Delicious Sweet Mouth-Watering Meat</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
-<div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div>
+<div className="itemWrapper r2"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_mushroom.png")} /></div><div className="itemNameWrapper meat">Potato 2</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
-<div className="itemNameWrapper meat">meet</div>
+<div className="itemWrapper r3"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/robust_aelio_lobster.png")} /></div><div className="itemNameWrapper meat">Dog with Claws</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
-<div className="itemRarityWrapper"><img alt="" src={DisplayIcon("icons/NGSUIRarity1Star.png")} /></div>
+<div className="itemWrapper r4"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_turban_shell.png")} /></div><div className="itemNameWrapper meat">If you put your ear to it you can hear the PSO2 lobby music</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
-<div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div>
+<div className="itemWrapper r1"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div><div className="itemNameWrapper meat">XXXL Super Duper Extra Crispy Delicious Sweet Mouth-Watering Meat</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
-<div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div>
+<div className="itemWrapper r2"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_mushroom.png")} /></div><div className="itemNameWrapper meat">Potato 2</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
-</li>
+<div className="itemWrapper r3"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/robust_aelio_lobster.png")} /></div><div className="itemNameWrapper meat">Dog with Claws</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
+<div className="itemWrapper r4"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_turban_shell.png")} /></div><div className="itemNameWrapper meat">If you put your ear to it you can hear the PSO2 lobby music</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
+<div className="itemWrapper r1"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div><div className="itemNameWrapper meat">XXXL Super Duper Extra Crispy Delicious Sweet Mouth-Watering Meat</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
+<div className="itemWrapper r2"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_mushroom.png")} /></div><div className="itemNameWrapper meat">Potato 2</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
+<div className="itemWrapper r3"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/robust_aelio_lobster.png")} /></div><div className="itemNameWrapper meat">Dog with Claws</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
+<div className="itemWrapper r4"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_turban_shell.png")} /></div><div className="itemNameWrapper meat">If you put your ear to it you can hear the PSO2 lobby music</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
 
 </SelectorWindow>
 

src/style.css

@@ -387,18 +387,6 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 .pr li span {
 	color:white
 }
-.itemlist {
-	margin: 0 10px;
-}
-.itemlist li {
-	background-color: rgba(128,128,128,0.33);
-	color: white;
-	margin: 0 0 5px 0;
-	padding: 10px;
-    background-repeat: no-repeat;
-    background-position: right top;
-	background-origin: content-box;
-}
 .aug:before {
 	content:url("./icons/UINGSItemSpecialAbility.png");
 	margin-right: 5px;
@@ -426,10 +414,21 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 	margin-right: 5px;
 	vertical-align: middle;
 }
+.meat:before, .vege:before, .fruit:before, .seafood:before {
+	margin-right: 5px;
+	vertical-align: bottom;
+}
 .meat:before {
     content: url("./icons/food/meat.png");
-	margin-right: 5px;
+}
-	vertical-align: middle;
+.vege:before {
+    content: url("./icons/food/vege.png");
+}
+.fruit:before {
+    content: url("./icons/food/fruit.png");
+}
+.seafood:before {
+    content: url("./icons/food/seafood.png");
 }
 .gb:before {
     content: url("./icons/NGSUIItemGunbladeMini.png");
@@ -451,6 +450,10 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 	border-style: solid;
 }
 .itemWrapper {
+	background-color: rgba(128,128,128,0.33);
+	color: white;
+	margin: 5px 10px 5px;
+	padding: 10px;
 	display: grid;
 	grid-template-columns: minmax(56px,auto) 1fr auto minmax(16px,auto);
 	grid-template-rows: auto 1fr auto;
@@ -474,12 +477,25 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 	background-color:rgba(0,0,0,0.33);
 	grid-area: itemname;
 	margin: 0 10px;
-	padding: 2px 2px 0 2px;
 	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .itemRarityWrapper {
 	grid-area: rarity;
 }
+.r1 .itemRarityWrapper {
+	content: url("./icons/NGSUIRarity1Star.png");
+}
+.r2 .itemRarityWrapper {
+	content: url("./icons/NGSUIRarity2Star.png");
+}
+.r3 .itemRarityWrapper {
+	content: url("./icons/NGSUIRarity3Star.png");
+}
+.r4 .itemRarityWrapper {
+	content: url("./icons/NGSUIRarity4Star.png");
+}
 .itemPropertiesWrapper {
 	color:white;
 	grid-area: properties;
@@ -487,6 +503,7 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 }
 .itemPropertiesWrapper > span {
 	white-space: nowrap;
+	margin-right: 10px;
 }
 .itemControlsWrapper  {
 	grid-area: controls;
@@ -510,31 +527,19 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 	text-align: center;
 	margin: 0 0 0 5px;
 }
-li.r1 {
-    background-image: url("./icons/NGSUIRarity1Star.png");
-}
 .r1 img  {
 	background: radial-gradient(rgb(64,150,183),rgb(52,123,150)) !important;
 	border-color: rgb(64,150,183) !important;
 
 }
-li.r2 {
-    background-image: url("./icons/NGSUIRarity2Star.png");
-}
 .r2 img  {
 	background: radial-gradient(rgb(64,150,183),rgb(52,123,150)) !important;
 	border-color: rgb(64,150,183) !important;
 }
-li.r3 {
-    background-image: url("./icons/NGSUIRarity3Star.png");
-}
 .r3 img  {
 	background: radial-gradient(rgb(64,150,183),rgb(52,123,150)) !important;
 	border-color: rgb(64,150,183) !important;
 }
-li.r4 {
-    background-image: url("./icons/NGSUIRarity4Star.png");
-}
 .r4 img  {
 	background: radial-gradient(rgb(101,178,77),rgb(83,146,63)) !important;
 	border-color: rgb(101,178,77) !important;
@@ -579,7 +584,7 @@ li.r4 {
 	max-height: 300px;
 }
 }*/
-.itemlist li:hover, .treeList li:hover {
+.itemWrapper:hover, .treeList li:hover {
 	background-color: rgba(113,169,189,0.33);
 	outline: 2px solid rgba(54,255,255,0.66);
 }