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

Working on class skill CSS and related

Browse Source
This commit is contained in:
dudleycu 2021-08-16 07:31:36 +00:00
parent 714b7f8e3d
commit fe920c8853
2 changed files with 63 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/TestPanel.js
View File

@ -320,7 +320,7 @@ useEffect(()=>{
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Equipped Weapon</h1></div> <h1>Equipped Weapon</h1></div>
<h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}+40</h2> <h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}+40</h2>
<PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}>Q for Details</PageControl> <PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}>Edit Details</PageControl>
{weaponPage === 1 ? {weaponPage === 1 ?
<> <>
@ -383,15 +383,12 @@ AUGMENT
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>To Do List</h1></div> <h1>To Do List</h1></div>
<ul className="toDoList">
<h3>my things to do</h3>
<ul>
<li>Finish "Item Details" for Weapons/Armor</li> <li>Finish "Item Details" for Weapons/Armor</li>
<li>Grids. Grids everywhere.</li> <li className="half">Class Skill Window</li>
<li>Class Skill Window</li>
<li>PA Select Window</li> <li>PA Select Window</li>
<li>Food/Buffs Menu</li> <li>Food/Buffs Menu</li>
<li>Get all the fckn icons</li> <li className="check">Get all the fckn icons</li>
</ul> </ul>
</div> </div>

62
src/style.css
View File

@ -49,11 +49,12 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
}*/ }*/
body { body {
background-image: url("https://i.imgur.com/3OizLd8.jpg"); background-image: url("https://pbs.twimg.com/media/E8tfm23VUAQTAAu?format=jpg&name=4096x4096");
background-color: #e8ecf4; background-color: #e8ecf4;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed;
background-size: cover;
color: black; color: black;
font-family: ngs,Arial,sans-serif; font-family: ngs,Arial,sans-serif;
font-size: 11pt; font-size: 11pt;
@ -232,6 +233,7 @@ em {
padding: 13px 13px 7px 13px; padding: 13px 13px 7px 13px;
} }
.boxTitleBar h1:before { .boxTitleBar h1:before {
font-family: "Segoe UI Symbol";
content: ' \25C6'; content: ' \25C6';
margin-right: 10px; margin-right: 10px;
} }
@ -563,9 +565,9 @@ li.r4 {
.boxmenu { .boxmenu {
font-size: 12pt; font-size: 12pt;
margin: 0 10px 0 10px; margin: 0 10px 0 10px;
justify-content: flex-start;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: flex-start;
} }
.boxmenu li { .boxmenu li {
background-color: rgba(115, 120, 125,0.66); background-color: rgba(115, 120, 125,0.66);
@ -583,6 +585,15 @@ li.r4 {
} }
.pageControlDetails { .pageControlDetails {
background-color: rgba(25, 30, 35, 0.66) !important; background-color: rgba(25, 30, 35, 0.66) !important;
margin: 10px 5px 0 auto !important;
}
.pageControlDetails:before {
content: "\270E";
padding-right: 5px;
}
.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 { .selected {
background: linear-gradient(135deg,#60461b,#b0a34e); background: linear-gradient(135deg,#60461b,#b0a34e);
@ -690,9 +701,14 @@ option {
margin: 10px 10px 0 10px; margin: 10px 10px 0 10px;
} }
.treeSelectBox { .treeSelectBox {
flex: 0 1 auto; /* flex: 0 1 auto;
margin: 0 10px 0 0;
align-self: flex-start; align-self: flex-start;
margin: 0 10px 0 0;*/
outline: 1px solid rgba(54,255,255,1);
max-width: 220px;
position: absolute;
left: -210px;
top: -10px;
} }
.treeList { .treeList {
padding: 0 2px; padding: 0 2px;
@ -717,18 +733,23 @@ li.treeListSub {
margin-right: 5px; margin-right: 5px;
} }
.skillTreeBox { .skillTreeBox {
flex: 1 3 auto; /* flex: 1 1 auto;*/
margin: 0; margin: 0;
min-width: 171px; min-width: 181px;
min-height: auto; min-height: 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);
}
.skillTreeBox .boxTitleBar, .treeSelectBox .boxTitleBar {
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));
} }
.skillTreeContainer { .skillTreeContainer {
overflow-x: auto; overflow-x: auto;
overflow-y: scroll; overflow-y: scroll;
margin: 10px 5px 0 10px; margin: 10px 5px 0 10px;
padding: 2px; padding: 2px;
-webkit-overflow-scrolling: touch;
max-height: calc(90vh - 150px); max-height: calc(90vh - 150px);
min-width: 0;
}/* }/*
@media screen and (min-width:390px) and (max-width:860px) { @media screen and (min-width:390px) and (max-width:860px) {
.skillTreeContainer { .skillTreeContainer {
@ -980,7 +1001,7 @@ button{
display: grid; display: grid;
justify-items: stretch; justify-items: stretch;
align-items: center; align-items: center;
grid-template-columns: minmax(10px, 1fr) minmax(0, auto) minmax(10px, 1fr); grid-template-columns: minmax(220px, 1fr) minmax(0, auto) minmax(10px, 1fr);
grid-template-rows: 10px minmax(0, 1fr) 10px; grid-template-rows: 10px minmax(0, 1fr) 10px;
} }
.modal { .modal {
@ -989,11 +1010,12 @@ button{
grid-row: 2; grid-row: 2;
} }
.modalSkillTree { .modalSkillTree {
position: relative;
outline: 0; outline: 0;
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
display: flex; /* display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;*/
} }
.boxModal { .boxModal {
animation: fadeIn 0.15s; animation: fadeIn 0.15s;
@ -1272,3 +1294,23 @@ p.adminNav hr {
color:red; color:red;
font-weight:bold; font-weight:bold;
} }
.toDoList {
padding: 0 10px;
}
.toDoList li {
padding-top: 10px;
}
.toDoList li:before {
content: "\2610";
padding-right: 10px;
}
.half:before {
content: "\25E7" !important;
}
.check {
opacity: 33%;
}
.check:before {
font-family: "Segoe UI Symbol";
content: "\2B1B" !important;
}