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
master
dudleycu 3 years ago
parent b347118a41
commit a1ee9fb170
7 changed files with 44 additions and 69 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. 4
      public/index.html
  2. BIN
      src/3.woff
  3. BIN
      src/4.woff
  4. 4
      src/App.js
  5. 24
      src/TestPanel.js
  6. BIN
      src/fonts/seguisym.ttf
  7. 81
      src/style.css

4
public/index.html
Unescape 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
Unescape 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
Unescape 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
View File

Binary file not shown.

81
src/style.css
Unescape 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:after, li.treeListSub:after {
margin-left: 10px;
} }
li.treeListMain { li.treeListMain:after {
background-image: url("./icons/class_main.png"); content: url("./icons/class_main.png");
} }
li.treeListSub { li.treeListSub:after {
background-image: url("./icons/class_sub.png"); 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 {

Write Preview
Loading…
Cancel
Save