From 5c082b03edc51a17a866e5639b06a5617196e2c4 Mon Sep 17 00:00:00 2001 From: dudleycu <dudleyc.twitch@gmail.com> Date: Mon, 30 Aug 2021 07:26:11 +0000 Subject: [PATCH] css --- src/TestPanel.js | 75 ++++++++++++++++++++++++++---------------------- src/style.css | 14 +++++++-- 2 files changed, 52 insertions(+), 37 deletions(-) diff --git a/src/TestPanel.js b/src/TestPanel.js index 33c0c68..ca45ab4 100644 --- a/src/TestPanel.js +++ b/src/TestPanel.js @@ -441,6 +441,9 @@ useEffect(()=>{ </Helmet> <div className="main"> <div className="containerA"> + + + <div className="box basicInfoBox"> <div className="boxTitleBar"> <h1>Basic Information</h1></div> @@ -475,40 +478,14 @@ useEffect(()=>{ <img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br /> </div> -<div style={{gridArea:"dmgRes"}}>Damage Resist.</div><div style={{gridArea:"dmgRes2"}}>{(p.damageResist*100).toFixed(1)}%</div> -<button onClick={()=>{SaveData()}}>Save</button> +<div style={{gridArea:"dmgRes"}}><span>Damage Resist.</span></div><div style={{gridArea:"dmgRes2"}}>{(p.damageResist*100).toFixed(1)}%</div> + + </div><section className="saveControls"> + <button onClick={()=>{SaveData()}}>Save Build</button> + </section></div> + - </div> - </div> <div className="box"> - <div className="boxTitleBar"> - <h1>Current Effects</h1></div> - <PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/> - {effectPage===1?<><h3>Effect Name</h3><ul className="infoBuffs"><li onClick={()=>{setFoodMenuWindowOpen(true)}}>Food Boost Effect - - - - <ul> - <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" /> [Meat] Potency +10.0%</li> - <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" /> [Crisp] Potency to Weak Point +5.0%</li> - </ul> - </li> - <li>Shifta / Deband - <ul> - <li><img alt="" src="https://i.imgur.com/VIYYNIm.png" /> Potency +5.0%</li> - <li><img alt="" src="https://i.imgur.com/VIYYNIm.png" /> Damage Resistance +10.0%</li> - </ul> - </li> - <li>Region Mag Boost - <ul> - <li><img alt="" src="https://i.imgur.com/N6M74Qr.png" /> Potency +5.0%</li> - </ul> - </li></ul></>:<></> - } - </div> - </div> - <div className="containerB"> - <div className="box"> <div className="boxTitleBar"> <h1>Equip</h1></div> <div className="equipPalette"> @@ -519,10 +496,15 @@ useEffect(()=>{ </div> </div> + + + + </div> + <div className="containerB"> <div className="box"> <div className="boxTitleBar"> <h1>Equipped Weapon</h1></div> - <h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}+40</h2> + <h2 className="viewedEquipName rifle">{GetSpecialWeaponName(selectedWeapon)}+40</h2> <PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}>Edit Details</PageControl> {weaponPage === 1 ? @@ -615,7 +597,32 @@ AUGMENT <div className="containerC"> - + <div className="box"> + <div className="boxTitleBar"> + <h1>Current Effects</h1></div> + <PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/> + {effectPage===1?<><h3>Effect Name</h3><ul className="infoBuffs"><li onClick={()=>{setFoodMenuWindowOpen(true)}}>Food Boost Effect + + + + <ul> + <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" /> [Meat] Potency +10.0%</li> + <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" /> [Crisp] Potency to Weak Point +5.0%</li> + </ul> + </li> + <li>Shifta / Deband + <ul> + <li><img alt="" src="https://i.imgur.com/VIYYNIm.png" /> Potency +5.0%</li> + <li><img alt="" src="https://i.imgur.com/VIYYNIm.png" /> Damage Resistance +10.0%</li> + </ul> + </li> + <li>Region Mag Boost + <ul> + <li><img alt="" src="https://i.imgur.com/N6M74Qr.png" /> Potency +5.0%</li> + </ul> + </li></ul></>:<></> + } + </div> <div className="box"> <div className="boxTitleBar"> <h1>Damage Stats</h1></div> diff --git a/src/style.css b/src/style.css index b41e9c1..7e7f38a 100644 --- a/src/style.css +++ b/src/style.css @@ -251,7 +251,10 @@ border-bottom: 1px solid rgba(128,128,128,0.5); .basicInfo > div, .statsInfo > div { border-bottom: 1px solid rgba(128,128,128,0.5); line-height: 25px; - position:relative; + position: relative; +} +.statsInfo > div:nth-last-child(1), .statsInfo > div:last-child { + border: 0; } .basicInfo > div > span, .statsInfo > div > span { color: #97e2fc; @@ -279,17 +282,22 @@ border-bottom: 1px solid rgba(128,128,128,0.5); content: " \25C6"; margin-right: 10px; } -.box h2 { +.viewedEquipName { color: white; font-weight: normal; font-size: 18px; margin: 10px 10px 0 10px; text-align: left; } -.box h2 img { +.viewedEquipName img { margin-right: 5px; vertical-align: top; } +.saveControls { + margin-top: 10px; + padding: 0 10px; + text-align: right; +} .infoBuffs { margin: 0 auto; width: 90%;