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

css stuff

Browse Source
master
dudleycu 3 years ago
parent d181449b63
commit 097a1a0d16
2 changed files with 85 additions and 76 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. 69
      src/TestPanel.js
  2. 90
      src/style.css

69
src/TestPanel.js
Unescape View File

@ -1,4 +1,4 @@
import {PencilFill} from 'react-bootstrap-icons'
import {PencilFill,Save} from 'react-bootstrap-icons'
import React, { useEffect,useState } from 'react';
import Modal from 'react-modal'
import { DisplayIcon } from './DEFAULTS';
@ -167,7 +167,7 @@ function ClassSelectorWindow(p) {
}
}
displayFunction={(key) => {
return <li className={p.class===key?"treeListMain":p.subClass===key?"treeListSub":""} onClick={() => {if (p.editClass===0){p.setClassName(key);p.setSubClassName(p.subClass===key?p.class:p.subClass)}else{p.setSubClassName(key);p.setClassName(p.class===key?p.subClass:p.class)}; p.setModalOpen(false) }}><img alt="" src={DisplayIcon(p.GetData("class", key, "icon"))} /> {p.GetData("class", key, "name")}</li>
return <div className={"classSelector "+(p.class===key?"treeListMain":p.subClass===key?"treeListSub":"")} onClick={() => {if (p.editClass===0){p.setClassName(key);p.setSubClassName(p.subClass===key?p.class:p.subClass)}else{p.setSubClassName(key);p.setClassName(p.class===key?p.subClass:p.class)}; p.setModalOpen(false) }}><img alt="" src={DisplayIcon(p.GetData("class", key, "icon"))} /> {p.GetData("class", key, "name")}</div>
}}
/>
}
@ -637,15 +637,17 @@ function deepCopySkills(skillData) {
<div className="containerA">
<div className="box basicInfoBox">
<div className="boxTitleBar">
<h1>Basic Information</h1></div>
<ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={12}>
<ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={5}>
<div className="basicInfo">
<div style={{gridArea:"author"}}>Author</div>
<div style={{gridArea:"build"}}>Build Name</div>
<div style={{gridArea:"class"}} onClick={()=>{setClassSelectWindowOpen(true)}}>Class</div>
<div style={{gridArea:"subclass"}} onClick={()=>{setPrevPoints([...points]);setPrevSkillPointData(deepCopySkills(skillPointData));setClassSkillTreeWindowOpen(true)}}>Sub-Class</div>
<div style={{gridArea:"class"}}>Class</div>
<div style={{gridArea:"subclass"}}>Sub-Class</div>
<div style={{gridArea:"skilltree",border:"0"}}><button onClick={()=>{setPrevPoints([...points]);setPrevSkillPointData(deepCopySkills(skillPointData));setClassSkillTreeWindowOpen(true)}}><PencilFill /> Skill Tree</button></div>
<div style={{gridArea:"class2"}}><EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div>
<div style={{gridArea:"subclass2"}}><EditableClass editClass={1} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setSubClassName} name={subclassName} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div>
@ -654,7 +656,15 @@ function deepCopySkills(skillData) {
<div style={{gridArea:"character",textAlign:"right"}}><EditBoxInput setData={setbuildName} data={buildName}/></div>
<div style={{gridArea:"classlv",textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></div>
<div style={{gridArea:"subclasslv",textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/></div>
</div>
<div style={{gridArea:"controls",textAlign:"right",border:"0"}}><button onClick={()=>{SaveData()}}><Save /> Save Build</button></div>
</div> </ReactPlaceholder>
</div>
<div className="box basicInfoBox">
<div className="boxTitleBar">
<h1>Basic Stats</h1></div> <ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={8}>
<div className="statsInfo">
<div style={{gridArea:"bp"}}>Battle Power</div>
<div style={{gridArea:"hp"}}>HP</div>
@ -663,7 +673,7 @@ function deepCopySkills(skillData) {
<div style={{gridArea:"def"}}>Defense</div>
<div style={{gridArea:"wepUp"}}>Weapon Up</div>
<div style={{gridArea:"res"}}>Ailment Resist.</div>
<div style={{gridArea:"dmgRes",border:"0"}}>Damage Resist.</div>
<div style={{gridArea:"dmgRes"}}>Damage Resist.</div>
<div style={{gridArea:"bp2"}}>{p.bp}</div>
<div style={{gridArea:"hp2"}}>{p.hp}</div>
@ -672,7 +682,7 @@ function deepCopySkills(skillData) {
<div style={{gridArea:"def2"}}>{p.def}</div>
<div style={{gridArea:"wepUp2",color:"#ffb74c"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /> +{(p.weaponUp1*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /> +{(p.weaponUp3*100).toFixed(1)}%</div>
<div style={{gridArea:"res2"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/status/burn.png"} /> {(p.burnResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/shock.png"} /> {(p.shockResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/panic.png"} /> {(p.panicResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/stun.png"} /> {(p.stunResist*100).toFixed(1)}%<br /></div>
<div style={{gridArea:"dmgRes2",border:"0"}}>{(p.damageResist*100).toFixed(1)}%</div>
<div style={{gridArea:"dmgRes2"}}>{(p.damageResist*100).toFixed(1)}%</div>
<div style={{gridArea:"bpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.bp/bpGraphMax)*100)+"%,black "+((p.bp/bpGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"hpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.hp/hpGraphMax)*100)+"%,black "+((p.hp/hpGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
@ -682,12 +692,10 @@ function deepCopySkills(skillData) {
<div style={{gridArea:"wepUp3",color:"#ffb74c"}} ><div><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /> +{(p.weaponUp2*100).toFixed(1)}%</div></div>
<div style={{gridArea:"res3"}}><div><img alt="" src={process.env.PUBLIC_URL+"/icons/status/freeze.png"} /> {(p.freezeResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/blind.png"} /> {(p.blindResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br /></div></div>
</div><section className="saveControls">
<button onClick={()=>{SaveData()}}>Save Build</button>
</section>
</div></ReactPlaceholder>
</ReactPlaceholder>
</div>
@ -707,17 +715,18 @@ function deepCopySkills(skillData) {
</div>
<div className="containerB">
<div className="box equipWindow">
<div className="boxTitleBar">
<h1>Equipped Weapon</h1></div>
<ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"&&buildLoad} type="media" rows={12}>
<h1>Equipped Weapon</h1></div> <ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"&&buildLoad} type="media" rows={12}>
<div className="equipNameWrapper">
<div className="equipName"><h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}</h2></div>
<div className="equipEnhancement editOverlayWrapper">
<div className="editOverlay"><p><PencilFill /> Edit</p></div>
+40</div>
</div>
<PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}><PencilFill /> Edit Details</PageControl>
<PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}><div onClick={()=>{setAugmentSelectWindowOpen(true)}}><PencilFill /> Edit Details</div></PageControl>
{weaponPage === 1 ?
<>
@ -743,7 +752,7 @@ function deepCopySkills(skillData) {
</div></div>
</div>
<div className="itemDetailsGridBottom editOverlayWrapper">
<div className="editOverlay" onClick={()=>{setAugmentSelectWindowOpen(true)}}><p><PencilFill /> Edit</p></div>
<div className="editOverlay" onClick={()=>{setAugmentSelectWindowOpen(true)}}><p><PencilFill /> Edit</p></div>
<div className="itemPotential"><span className="pot">Soulspring Unit Lv.3</span></div>
<div className="itemFixa"><span className="fixa">Fixa Attack Lv.3</span></div>
<div className="itemDetailsAugment">
@ -833,6 +842,7 @@ function deepCopySkills(skillData) {
</div>
<div className="containerC">
@ -1031,13 +1041,30 @@ function deepCopySkills(skillData) {
<Modal ariaHideApp={false} isOpen={augmentSelectWindowOpen} onRequestClose={()=>{setAugmentSelectWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlayAugment">
<div className="augmentSelectorPopup">
<div className="box">
<div className="box boxModal">
<div className="boxTitleBar">
<h1>hi</h1></div>
<h1>Select Augments</h1></div>
<div className="augmentSelectorList customScrollbar noSelect">
<ul>
<li className="pot">Dynamo Unit Lv.1</li>
<li className="pot">Dynamo Unit Lv.2</li>
<li className="pot">Dynamo Unit Lv.3</li>
<li className="pot">Dynamo Unit Lv.4</li>
<li className="fixa">Fixa Attack Lv.1</li>
<li className="fixa">Fixa Attack Lv.2</li>
<li className="fixa">Fixa Attack Lv.3</li>
<li className="fixa">Fixa Attack Lv.4</li>
<li className="aug">Melee I</li>
<li className="aug">Melee II</li>
<li className="aug">Melee III</li>
<li className="aug">Precision I</li>
<li className="aug">Precision II</li>
<li className="aug">Precision III</li>
</ul>
</div>
</div>
<div className="box equipWindow">
<div className="box boxModal">
<div className="boxTitleBar">
<h1>Equipped Weapon</h1></div>
<div className="equipNameWrapper">

90
src/style.css
Unescape View File

@ -67,6 +67,9 @@ body {
/* mobile viewport bug fix */
min-height: -webkit-fill-available;
}
.media-block {
margin-top: 10px;
}
table {
border-spacing: 0;
width: 100%;
@ -233,12 +236,13 @@ header a {
"author author player"
"build build character"
"class class2 classlv"
"subclass subclass2 subclasslv";
"subclass subclass2 subclasslv"
"skilltree controls controls";
margin: 10px 10px 0;
padding: 0 5px;
}
.statsInfo {
background-color:rgba(0,0,0,0.33);
/*background-color:rgba(0,0,0,0.33);*/
margin: 5px 10px 0;
padding: 0 5px 5px;
display: grid;
@ -315,10 +319,6 @@ header a {
overflow: hidden;
cursor: pointer;
}
.equipName:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%);
}
.equipName h2 {
color: white;
font-weight: normal;
@ -328,10 +328,11 @@ header a {
.equipEnhancement .editOverlay {
text-align: left;
}
.saveControls {
margin-top: 10px;
padding: 0 10px;
text-align: right;
.basicInfo button {
background-color:rgba(0,0,0,0.33);
margin: 10px 0 0 0;
padding: 5px 10px;
border: 0;
}
.infoBuffs {
margin: 0 auto;
@ -461,25 +462,28 @@ header a {
.augmentDetailsStatsHeader {
grid-area: header2;
}
.augmentSelectorList {
overflow-y: scroll;
overflow-x: hidden;
margin: 5px 5px 0 5px;
padding: 2px;
max-height: 380px;
}
.augmentDetailsList {
grid-area: ability;
overflow-y: scroll;
max-height: 280px;
}
.augmentSelectorPopup .augmentDetailsList {
max-height: initial;
overflow-y: initial;
}
.augmentDetailsList li {
.augmentDetailsList li, .augmentSelectorList li {
background-color: rgba(128,128,128,0.25);
color: white;
margin: 2px 5px 5px 2px;
padding: 10px;
}
.augmentDetailsList li:hover {
.augmentDetailsList li:hover, .augmentSelectorList li:hover,.basicInfo button:hover, .equipName:hover,.equipAugs li:hover, .itemControlsWrapper > span:nth-child(odd):hover, .pageControlDetails:hover, .unselected:hover, .foodConfirm > div:hover, .skillConfirm > div:hover, .editBox:hover, .editClass:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%);
cursor: pointer;
}
.augmentDetailsStats {
grid-area: stats;
@ -498,16 +502,11 @@ overflow-y: initial;
padding: 12px 10px 7px 10px;
cursor:pointer !important;
}
.equipAugs li:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%);
}
.equipAugsExpand {
margin: 0 10px 0 0;
display: inline;
}
.tooltip {
cursor: help;
color: white;
font-size:10pt;
width: 200px;
@ -522,7 +521,6 @@ overflow-y: initial;
.xTooltip {
margin: 0 10px 0 0;
display: inline;
cursor: help !important;
color: white;
font-size:10pt;
text-align: left;
@ -657,8 +655,6 @@ overflow-y: initial;
.itemControlsWrapper > span:nth-child(odd):hover {
background-color: rgba(113,169,189,0.33);
cursor: pointer;
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%);
}
.itemControlsWrapper > span:nth-child(2) {
background-color:rgba(0,0,0,0.33);
@ -771,7 +767,7 @@ overflow-y: initial;
margin: 10px 5px 0 0;
padding: 2px;
}
.itemWrapper:hover, .treeList li:hover {
.itemWrapper:hover, .classSelector:hover {
background-color: rgba(113,169,189,0.33);
outline: 2px solid rgba(54,255,255,0.66);
}
@ -803,22 +799,17 @@ overflow-y: initial;
max-height: 16px;
}
.pageControlDetails {
background-color: rgba(25, 30, 35, 0.66) !important;
/*background-color: rgba(25, 30, 35, 0.5) !important;*/
background-color:rgba(0,0,0,0.33) !important;
margin: 10px 5px 0 auto !important;
}
.pageControlDetails:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%);
}
.selected {
background: linear-gradient(135deg,#60461b,#b0a34e);
border-bottom: 4px solid #ffd602;
}
.unselected:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
border-bottom: 0;
padding-bottom: 9px;
outline: 2px solid hsl(180, 78%, 50%);
}
li.selected:hover {
background: linear-gradient(135deg,#60461b,#b0a34e);
@ -933,23 +924,23 @@ adminScrollbar::-webkit-scrollbar-button {
.treeList {
padding: 0 2px 2px 2px;
}
.treeList li {
.classSelector{
background-color: rgba(128,128,128,0.33);
color: white;
margin: 5px 0 0 0;
margin: 0 0 5px 5px;
padding: 10px;
background-repeat: no-repeat;
background-position: right center;
background-origin: content-box;
line-height: 20px;
}
li.treeListMain:after, li.treeListSub:after {
.treeListMain:after, .treeListSub:after {
margin-left: 10px;
}
li.treeListMain:after {
.treeListMain:after {
content: url("./icons/class_main.png");
}
li.treeListSub:after {
.treeListSub:after {
content: url("./icons/class_sub.png");
}
.treeList li img {
@ -1114,11 +1105,6 @@ cursor:pointer !important;
font-size: 17px;
padding: 0 10px;
}
.foodConfirm > div:hover, .skillConfirm > div:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
cursor:pointer;
outline: 2px solid #30cdef;
}
.foodConfirm > div:first-child, .skillConfirm > div:first-child {
grid-column: 2;
}
@ -1126,11 +1112,6 @@ cursor:pointer !important;
grid-column: 3;
}
/* Sig's Amazing CSS (cuz Dudley edited it) */
.editBox:hover, .editClass:hover{
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
cursor:pointer;
outline: 2px solid #30cdef;
}
.editBoxActive:hover {
cursor:pointer
}
@ -1230,7 +1211,7 @@ button {
display: grid;
justify-items: stretch;
align-items: center;
grid-template-columns: minmax(10px,1fr) minmax(auto,950px) minmax(10px,1fr);
grid-template-columns: minmax(10px,1fr) minmax(auto,910px) minmax(10px,1fr);
grid-template-rows: 10px minmax(10px, 1fr) 10px;
min-height: 100vh;
/* mobile viewport bug fix */
@ -1243,9 +1224,10 @@ button {
gap: 10px;
}
.augmentSelectorPopup > div {
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;
outline: 1px solid rgba(54,255,255,1);
max-height: 440px;
}
.augmentSelectorPopup > .augmentDetailsList {
max-height: 280px;
}
.modalOverlaySplash {
position: fixed;
@ -1297,7 +1279,6 @@ span.twitter:before {
.boxModal {
animation: fadeIn 0.15s;
max-width: 580px;
margin: 0 auto;
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;
outline: 1px solid rgba(54,255,255,1);
}
@ -1817,7 +1798,7 @@ dd:before {
display:inline;
}
.buildAvatar{
display: initial;
}
.buildData{
float:right;
@ -1826,6 +1807,7 @@ dd:before {
float:right;
}
.buildImage{
display: initial;
}
.buildPalette{
width:360px;

Write Preview
Loading…
Cancel
Save