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>
<meta charset="utf-8" />
<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="theme-color" content="#000000" />
<meta
@ -26,7 +24,7 @@
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`.
-->
<title>React App</title>
<title>NGS Planner</title>
</head>
<body>
<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*/
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) {
return (BACKENDURL)+(p.TESTMODE?"/test":"")
@ -804,7 +804,7 @@ function App() {
</Route>
<Route path={process.env.PUBLIC_URL+"/test"}>
<Helmet>
<title>{APP_TITLE+" - Test"}</title>
<title>{"Test - "+APP_TITLE}</title>
</Helmet>
<TestHeader/>
<TestPanel

24
src/TestPanel.js
Unescape View File

@ -405,6 +405,7 @@ AUGMENT
<div className="boxTitleBar">
<h1>To Do List</h1></div>
<ul className="toDoList">
<li className="half">Grids. Grids everywhere.</li>
<li>Finish "Item Details" for Weapons/Armor</li>
<li className="half">Class Skill Window</li>
<li>PA Select Window</li>
@ -540,7 +541,7 @@ AUGMENT
</div>
<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">
<h1>Select Main Class</h1>
<div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div>
@ -549,11 +550,11 @@ AUGMENT
<ul className="treeList">
<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/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/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/hu.png")} />Braver</li>
<li><img alt="" src={DisplayIcon("/icons/class/br.png")} />Braver</li>
</ul>
</div>
</div>
@ -561,18 +562,7 @@ AUGMENT
<Modal isOpen={classSkillTreeWindowOpen} onRequestClose={()=>{setClassSkillTreeWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modalSkillTree" overlayClassName="modalOverlaySkillTree">
<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>
<Modal isOpen={classSkillTreeWindowOpen} onRequestClose={()=>{setClassSkillTreeWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
<div className="box skillTreeBox">
<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: "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: "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>

BIN
src/fonts/seguisym.ttf
View File

Binary file not shown.

81
src/style.css
Unescape View File

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

Write Preview
Loading…
Cancel
Save