sigonasr2
/
ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

CSS revision, changing layouts here and there

Browse Source
master
dudleycu 4 years ago
parent a1ee9fb170
commit 63d682b721
2 changed files with 57 additions and 41 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 73
      src/TestPanel.js
  2. 25
      src/style.css

73
src/TestPanel.js
Unescape View File

@ -189,6 +189,7 @@ const [statPage,setStatPage] = useState(1)
const [classSelectWindowOpen,setClassSelectWindowOpen] = useState(false) const [classSelectWindowOpen,setClassSelectWindowOpen] = useState(false)
const [classSkillTreeWindowOpen,setClassSkillTreeWindowOpen] = useState(false) const [classSkillTreeWindowOpen,setClassSkillTreeWindowOpen] = useState(false)
const [treePage,setTreePage] = useState(1)
const [weaponSelectWindowOpen,setWeaponSelectWindowOpen] = useState(false) const [weaponSelectWindowOpen,setWeaponSelectWindowOpen] = useState(false)
const [armorSelectWindowOpen,setArmorSelectWindowOpen] = useState(false) const [armorSelectWindowOpen,setArmorSelectWindowOpen] = useState(false)
@ -301,10 +302,10 @@ useEffect(()=>{
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Current Effects</h1></div> <h1>Current Effects</h1></div>
<PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/> <PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/>
<h3>Effect Name</h3> {effectPage===1?<><h3>Effect Name</h3><ul className="infoBuffs"><li>Food Boost Effect
<ul className="infoBuffs">
{
effectPage===1?<><li>Food Boost Effect
<ul> <ul>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li> <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li> <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li>
@ -320,9 +321,9 @@ useEffect(()=>{
<ul> <ul>
<li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li> <li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
</ul> </ul>
</li></>:<></> </li></ul></>:<></>
}
</ul> }
</div> </div>
</div> </div>
<div className="containerB"> <div className="containerB">
@ -562,40 +563,44 @@ AUGMENT
<Modal isOpen={classSkillTreeWindowOpen} onRequestClose={()=>{setClassSkillTreeWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay"> <Modal isOpen={classSkillTreeWindowOpen} onRequestClose={() => { setClassSkillTreeWindowOpen(false) }} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
<div className="box skillTreeBox"> <div className="box skillTreeBox">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Ranger01</h1> <h1>Class Skill Tree</h1>
<div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div> <div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div>
</div> </div>
<div className="skillTreeContainer customScrollbar"> <PageControl pages={2} pageNames={[<><img alt="" src={DisplayIcon("/icons/class/ra.png")} /> Ranger</>, <><img alt="" src={DisplayIcon("/icons/class/fo.png")} /> Force</>, "Launcher", "Rod", "Talis"]} currentPage={treePage} setCurrentPage={setTreePage} />
<div style={{position:"relative"}}> {treePage === 1 ? <>
{<SkillTree style={{position:"absolute"}} strokeStyle={skillTreeLineColor} lineWidth={skillTreeLineWidth} lineDash={[]} <div className="skillTreeContainer customScrollbar">
gridDimensionsX={skillTreeDimensionX} gridDimensionsY={skillTreeDimensionY} gridSizeX={skillTreeGridSizeX} gridSizeY={skillTreeGridSizeY} gridPaddingX={skillTreeGridPaddingX} gridPaddingY={skillTreeGridPaddingY} <div style={{ position: "relative" }}>
skillLines={skillTreeData} halflineheight={halflineheight} {<SkillTree style={{ position: "absolute" }} strokeStyle={skillTreeLineColor} lineWidth={skillTreeLineWidth} lineDash={[]}
/>} gridDimensionsX={skillTreeDimensionX} gridDimensionsY={skillTreeDimensionY} gridSizeX={skillTreeGridSizeX} gridSizeY={skillTreeGridSizeY} gridPaddingX={skillTreeGridPaddingX} gridPaddingY={skillTreeGridPaddingY}
<div className="skillTreeGrid"> skillLines={skillTreeData} halflineheight={halflineheight}
<div className="skillActive" style={{ gridArea: "a1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds.png" /><span className="skillAllocated">1/5</span><em className="skillName">Blight Rounds</em></div> />}
<div className="skillMaxed" style={{ gridArea: "a2" }}><span className="skillTreeReqUnlock">&nbsp;</span><img className="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds_Reinforce.png" /><span className="skillAllocated">1/1</span><em className="skillName">Blight Rounds Reinforce</em></div> <div className="skillTreeGrid">
<div style={{ gridArea: "b1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Ward.png" /><span className="skillAllocated">0/10</span><em className="skillName">Bad Condition Ward</em></div> <div className="skillActive" style={{ gridArea: "a1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds.png" /><span className="skillAllocated">1/5</span><em className="skillName">Blight Rounds</em></div>
<div style={{ gridArea: "b2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot.png" /><span className="skillAllocated">0/1</span><em className="skillName">Spread Shot</em></div> <div className="skillMaxed" style={{ gridArea: "a2" }}><span className="skillTreeReqUnlock">&nbsp;</span><img className="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds_Reinforce.png" /><span className="skillAllocated">1/1</span><em className="skillName">Blight Rounds Reinforce</em></div>
<div className="skillLocked" style={{ gridArea: "b3" }}><span className="skillTreeReqLock">&nbsp;</span><img className="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot_Quick_Getaway.png" /><span className="skillAllocated">0/1</span><em className="skillName">Spread Shot Quick Getaway</em></div> <div style={{ gridArea: "b1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Ward.png" /><span className="skillAllocated">0/10</span><em className="skillName">Bad Condition Ward</em></div>
<div style={{ gridArea: "c1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Reduction.png" /><span className="skillAllocated">0/10</span><em className="skillName">Bad Condition Reduction</em></div> <div style={{ gridArea: "b2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot.png" /><span className="skillAllocated">0/1</span><em className="skillName">Spread Shot</em></div>
<div style={{ gridArea: "c2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Rifle_Grenadier.png" /><span className="skillAllocated">0/1</span><em className="skillName">Rifle Grenadier</em></div> <div className="skillLocked" style={{ gridArea: "b3" }}><span className="skillTreeReqLock">&nbsp;</span><img className="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot_Quick_Getaway.png" /><span className="skillAllocated">0/1</span><em className="skillName">Spread Shot Quick Getaway</em></div>
<div style={{ gridArea: "c3" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slide_Shot_Advance.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slide Shot Advance</em></div> <div style={{ gridArea: "c1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Reduction.png" /><span className="skillAllocated">0/10</span><em className="skillName">Bad Condition Reduction</em></div>
<div style={{ gridArea: "d2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Sticky_Bomb_Quick_Reload.png" /><span className="skillAllocated">0/1</span><em className="skillName">Sticky Bomb Quick Reload</em></div> <div style={{ gridArea: "c2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Rifle_Grenadier.png" /><span className="skillAllocated">0/1</span><em className="skillName">Rifle Grenadier</em></div>
<div style={{ gridArea: "d3" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Launcher_Charge_Grouping.png" /><span className="skillAllocated">0/1</span><em className="skillName">Launcher Charge Grouping</em></div> <div style={{ gridArea: "c3" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slide_Shot_Advance.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slide Shot Advance</em></div>
<div style={{ gridArea: "e1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Attack-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Attack-Ranger</em></div> <div style={{ gridArea: "d2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Sticky_Bomb_Quick_Reload.png" /><span className="skillAllocated">0/1</span><em className="skillName">Sticky Bomb Quick Reload</em></div>
<div style={{ gridArea: "f1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Charge-Ranger</em></div> <div style={{ gridArea: "d3" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Launcher_Charge_Grouping.png" /><span className="skillAllocated">0/1</span><em className="skillName">Launcher Charge Grouping</em></div>
<div style={{ gridArea: "e1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Attack-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Attack-Ranger</em></div>
<div style={{ gridArea: "f1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Charge-Ranger</em></div>
</div>
</div> </div>
</div></> : <></>}
<div className="skillPoints">
<div>Your Skill Points<span>6</span></div>
<div>SP<span></span>0</div>
</div> </div>
</div> <div className="skillConfirm"><span>Confirm</span><span>Cancel</span></div>
<div className="skillPoints">Your Skill Points&emsp;&emsp;6&emsp;&emsp;&emsp;SP&emsp;&emsp;&emsp;&emsp;0</div>
<div className="skillConfirm"><span>Confirm</span><span>Cancel</span></div>
</div> </div>
</Modal>
</Modal>
<SelectorWindow title="Weapon Selection" modalOpen={weaponSelectWindowOpen} setModalOpen={setWeaponSelectWindowOpen} GetData={p.GetData} <SelectorWindow title="Weapon Selection" modalOpen={weaponSelectWindowOpen} setModalOpen={setWeaponSelectWindowOpen} GetData={p.GetData}
pageNames={["All","Rifle","Launcher","Rod","Talis"]} pageNames={["All","Rifle","Launcher","Rod","Talis"]}

25
src/style.css
Unescape View File

@ -141,7 +141,6 @@ em {
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
margin: 0 10px; margin: 0 10px;
max-width: calc(450 * 3);
} }
.containerA{ .containerA{
} }
@ -778,7 +777,7 @@ li.treeListSub:after {
text-align: center; text-align: center;
height: 148px; height: 148px;
position: relative; position: relative;
margin: 0 10px 48px 0; margin: 0 10px 96px 0;
} }
.skillTreeGrid div:hover .skillButtons { .skillTreeGrid div:hover .skillButtons {
visibility: visible; visibility: visible;
@ -857,6 +856,18 @@ div.skillMaxed .skillAllocated {
padding: 16px 0 10px 0; padding: 16px 0 10px 0;
color: white; color: white;
font-size: 14pt; font-size: 14pt;
display: grid;
grid-template-columns: repeat(auto-fit,292px);
justify-content: center;
gap: 10px;
}
.skillPoints div:first-child {
text-align: center;
}
.skillPoints div span {
display: inline-block;
width: calc(292px / 2);
text-align: center;
} }
.skillConfirm { .skillConfirm {
justify-content: center; justify-content: center;
@ -1019,11 +1030,11 @@ button{
background: linear-gradient(45deg, rgba(47,153,193,0.66),rgba(46,94,137,0.66) 30%,rgba(46,94,137,0.66) 70%, rgba(47,153,193,1)); background: linear-gradient(45deg, rgba(47,153,193,0.66),rgba(46,94,137,0.66) 30%,rgba(46,94,137,0.66) 70%, rgba(47,153,193,1));
} }
.modalItemListContainer { .modalItemListContainer {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
margin: 10px 5px 0 0; margin: 10px 5px 0 0;
padding: 2px; padding: 2px;
max-height: calc(90vh - 115px); max-height: calc(90vh - 115px);
} }
.webicon{ .webicon{
color:maroon; color:maroon;

Write Preview
Loading…
Cancel
Save