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

Changed default title format to be "Page - NGS Planner"

Browse Source 
CSS changes under the hood for main layout and modals
This commit is contained in:
dudleycu 2021-08-17 02:38:50 +00:00
parent b347118a41
commit a1ee9fb170
7 changed files with 44 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -3,8 +3,6 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!--<link rel="stylesheet" href="%PUBLIC_URL%/bootstrap.css"/>
<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />-->
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
@ -26,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>NGS Planner</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
src/3.woff
View File

Binary file not shown.

BIN
src/4.woff
View File

Binary file not shown.

4
src/App.js
View File

@ -39,7 +39,7 @@ const PARRY_COUNTER = 4
//NOT USED YET*/ //NOT USED YET*/
const BACKENDURL=process.env.REACT_APP_GITPOD_WORKSPACE_URL||process.env.REACT_APP_BACKENDURL||'https://projectdivar.com:4504' const BACKENDURL=process.env.REACT_APP_GITPOD_WORKSPACE_URL||process.env.REACT_APP_BACKENDURL||'https://projectdivar.com:4504'
const APP_TITLE = "NGSplanner" const APP_TITLE = "NGS Planner"
function GetBackendURL(p) { function GetBackendURL(p) {
return (BACKENDURL)+(p.TESTMODE?"/test":"") return (BACKENDURL)+(p.TESTMODE?"/test":"")
@ -804,7 +804,7 @@ function App() {
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/test"}> <Route path={process.env.PUBLIC_URL+"/test"}>
<Helmet> <Helmet>
<title>{APP_TITLE+" - Test"}</title> <title>{"Test - "+APP_TITLE}</title>
</Helmet> </Helmet>
<TestHeader/> <TestHeader/>
<TestPanel <TestPanel

24
src/TestPanel.js
View File

@ -405,6 +405,7 @@ AUGMENT
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>To Do List</h1></div> <h1>To Do List</h1></div>
<ul className="toDoList"> <ul className="toDoList">
<li className="half">Grids. Grids everywhere.</li>
<li>Finish "Item Details" for Weapons/Armor</li> <li>Finish "Item Details" for Weapons/Armor</li>
<li className="half">Class Skill Window</li> <li className="half">Class Skill Window</li>
<li>PA Select Window</li> <li>PA Select Window</li>
@ -540,7 +541,7 @@ AUGMENT
</div> </div>
<Modal isOpen={classSelectWindowOpen} onRequestClose={()=>{setClassSelectWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay"> <Modal isOpen={classSelectWindowOpen} onRequestClose={()=>{setClassSelectWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
<div className="box boxModal"> <div className="box boxModalClassSelect">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Select Main Class</h1> <h1>Select Main Class</h1>
<div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div> <div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div>
@ -549,11 +550,11 @@ AUGMENT
<ul className="treeList"> <ul className="treeList">
<li><img alt="" src={DisplayIcon("/icons/class/hu.png")} />Hunter</li> <li><img alt="" src={DisplayIcon("/icons/class/hu.png")} />Hunter</li>
<li><img alt="" src={DisplayIcon("/icons/class/fi.png")} />Fighter</li> <li><img alt="" src={DisplayIcon("/icons/class/fi.png")} />Fighter</li>
<li><img alt="" src={DisplayIcon("/icons/class/ra.png")} />Ranger</li> <li className="treeListMain"><img alt="" src={DisplayIcon("/icons/class/ra.png")} />Ranger</li>
<li><img alt="" src={DisplayIcon("/icons/class/gu.png")} />Gunner</li> <li><img alt="" src={DisplayIcon("/icons/class/gu.png")} />Gunner</li>
<li><img alt="" src={DisplayIcon("/icons/class/fo.png")} />Force</li> <li className="treeListSub"><img alt="" src={DisplayIcon("/icons/class/fo.png")} />Force</li>
<li><img alt="" src={DisplayIcon("/icons/class/te.png")} />Techter</li> <li><img alt="" src={DisplayIcon("/icons/class/te.png")} />Techter</li>
<li><img alt="" src={DisplayIcon("/icons/class/hu.png")} />Braver</li> <li><img alt="" src={DisplayIcon("/icons/class/br.png")} />Braver</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -561,18 +562,7 @@ AUGMENT
<Modal isOpen={classSkillTreeWindowOpen} onRequestClose={()=>{setClassSkillTreeWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modalSkillTree" overlayClassName="modalOverlaySkillTree"> <Modal isOpen={classSkillTreeWindowOpen} onRequestClose={()=>{setClassSkillTreeWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
<div className="box treeSelectBox">
<div className="boxTitleBar">
<h1>Class Skill Tree</h1>
<div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div>
</div>
<div className="treeListContainer customScrollbar">
<ul className="treeList">
{Object.keys(p.GetData("class")).map((cl)=><li className={className===cl?"treeListMain":subclassName===cl?"treeListSub":""}><img alt="" src={p.GetData("class")[cl].icon} />{cl}</li>)}
</ul>
</div>
</div>
<div className="box skillTreeBox"> <div className="box skillTreeBox">
<div className="boxTitleBar"> <div className="boxTitleBar">
@ -598,8 +588,6 @@ AUGMENT
<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: "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: "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 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: "a5" }}><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: "a6" }}><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> </div>

BIN
src/fonts/seguisym.ttf Normal file
View File

Binary file not shown.

81
src/style.css
View File

@ -3,6 +3,10 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
} }
@font-face { @font-face {
font-family: "ngs"; font-family: "ngs";
@ -20,6 +24,10 @@
font-family: "ngs4"; font-family: "ngs4";
src: url("./fonts/1.woff") format("woff"); src: url("./fonts/1.woff") format("woff");
} }
@font-face {
font-family: "Segoe UI Symbol";
src: url("./fonts/seguisym.ttf") format("truetype");
}
a, a:visited { a, a:visited {
color: white; color: white;
text-decoration: none; text-decoration: none;
@ -77,7 +85,6 @@ em {
min-height: 50px; min-height: 50px;
padding: 20px; padding: 20px;
text-align: left; text-align: left;
margin-bottom: 20px;
} }
#header a { #header a {
color: #151f25; color: #151f25;
@ -129,23 +136,18 @@ em {
} }
} }
.main { .main {
display: flex; display: grid;
flex-flow: row wrap; grid-template-columns: repeat(auto-fit,minmax(300px,450px));
justify-content: center; justify-content: center;
gap: 10px;
margin: 0 10px;
max-width: calc(450 * 3);
} }
.containerA, .containerC { .containerA{
flex-grow: 1;
flex-shrink: 1;
flex-basis: 240px;
max-width: 360px;
margin: 0 5px;
} }
.containerB { .containerB {
flex-grow: 1; }
flex-shrink: auto; .containerC {
flex-basis: auto;
max-width: 480px;
margin: 0 5px;
} }
.box { .box {
color: #97e2fc; color: #97e2fc;
@ -155,8 +157,6 @@ em {
text-align: left; text-align: left;
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66);
padding-bottom:10px; padding-bottom:10px;
/*filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8));*/
/*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;*/
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@ -709,7 +709,7 @@ option {
top: -10px; top: -10px;
} }
.treeList { .treeList {
padding: 0 2px; padding: 0 2px 2px 2px;
} }
.treeList li { .treeList li {
background-color: rgba(128,128,128,0.33); background-color: rgba(128,128,128,0.33);
@ -719,12 +719,16 @@ option {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right center; background-position: right center;
background-origin: content-box; background-origin: content-box;
line-height: 20px;
} }
li.treeListMain { li.treeListMain:after, li.treeListSub:after {
background-image: url("./icons/class_main.png"); margin-left: 10px;
} }
li.treeListSub { li.treeListMain:after {
background-image: url("./icons/class_sub.png"); content: url("./icons/class_main.png");
}
li.treeListSub:after {
content: url("./icons/class_sub.png");
} }
.treeList li img { .treeList li img {
vertical-align: middle; vertical-align: middle;
@ -735,7 +739,6 @@ li.treeListSub {
margin: 0; margin: 0;
min-width: 181px; 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); outline: 1px solid rgba(54,255,255,1);
} }
.skillTreeBox .boxTitleBar, .treeSelectBox .boxTitleBar { .skillTreeBox .boxTitleBar, .treeSelectBox .boxTitleBar {
@ -986,35 +989,14 @@ button{
display: grid; display: grid;
justify-items: stretch; justify-items: stretch;
align-items: center; align-items: center;
grid-template-columns: minmax(10px, 1fr) minmax(200px, 580px) minmax(10px, 1fr); grid-template-columns: minmax(10px, 1fr) minmax(200px, auto) minmax(10px, 1fr);
grid-template-rows: 10px minmax(0, 1fr) 10px; grid-template-rows: 10px minmax(10px, 1fr) 10px;
}
.modalOverlaySkillTree {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.8));
display: grid;
justify-items: stretch;
align-items: center;
grid-template-columns: minmax(220px, 1fr) minmax(0, auto) minmax(10px, 1fr);
grid-template-rows: 10px minmax(0, 1fr) 10px;
} }
.modal { .modal {
outline: 0; outline: 0;
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
} }
.modalSkillTree {
position: relative;
outline: 0;
grid-column: 2;
grid-row: 2;
/* display: flex;
flex-flow: row nowrap;*/
}
.boxModal { .boxModal {
animation: fadeIn 0.15s; animation: fadeIn 0.15s;
max-width: 580px; max-width: 580px;
@ -1022,11 +1004,18 @@ button{
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important; 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); outline: 1px solid rgba(54,255,255,1);
} }
.boxModalClassSelect {
animation: fadeIn 0.15s;
width: 300px;
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);
}
@keyframes fadeIn { @keyframes fadeIn {
0% {opacity:0;margin-bottom:30px;} 0% {opacity:0;margin-bottom:30px;}
100% {opacity:1;margin-bottom:0;} 100% {opacity:1;margin-bottom:0;}
} }
.boxModal .boxTitleBar { .boxModal .boxTitleBar, .boxModalClassSelect .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)); 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 {