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

UI Changes

Browse Source
master
dudleycu 3 years ago
parent 6df1cfde7e
commit f689dfa9a2
4 changed files with 79 additions and 53 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. 10
      src/App.js
  2. 18
      src/TestPanel.js
  3. BIN
      src/spinner.gif
  4. 102
      src/style.css

10
src/App.js
Unescape View File

@ -382,9 +382,9 @@ function AdminPanel(p) {
{!verified? {!verified?
<div className="modalOverlay"> <div className="modalOverlay">
<div className="modal"> <div className="modal">
<div className="box boxModal" style={{textAlign:"center"}}> <div className="box boxAdmin">
<div className="boxTitleBar"><h1>Admin</h1></div> <div className="boxTitleBar"><h1>Admin</h1></div>
<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/> <img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><p></p>
<input type="password" value={password} onChange={(f)=>{setPassword(f.currentTarget.value)}} onKeyDown={(e)=>{ <input type="password" value={password} onChange={(f)=>{setPassword(f.currentTarget.value)}} onKeyDown={(e)=>{
if (e.key==="Enter") { if (e.key==="Enter") {
axios.post(GetBackendURL(p)+"/passwordcheck",{ axios.post(GetBackendURL(p)+"/passwordcheck",{
@ -885,9 +885,9 @@ function App() {
</Helmet> </Helmet>
<div className="modalOverlay"> <div className="modalOverlay">
<div className="modal"> <div className="modal">
<div className="box boxModal" style={{textAlign:"center"}}> <div className="box boxMisc">
<div className="boxTitleBar"><h1>Under Construction</h1></div><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/> <div className="boxTitleBar"><h1>Under Construction</h1></div><p><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
{GetData("site_data")[0]?.data??""} {GetData("site_data")[0]?.data??""}</p>
</div> </div>
</div> </div>
</div> </div>

18
src/TestPanel.js
Unescape View File

@ -511,14 +511,16 @@ 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"> <dl className="toDoList">
<li className="half">Grids. Grids everywhere.</li> <dt>UI</dt>
<li>Finish "Item Details" for Weapons/Armor</li> <dd className="half">Grids. Grids everywhere.</dd>
<li className="half">Class Skill Window</li> <dd>Finish "Item Details" for Weapons/Armor</dd>
<li>PA Select Window</li> <dd className="half">Class Skill Window</dd>
<li>Food/Buffs Menu</li> <dd>PA Select Window</dd>
<li className="check">Get all the fckn icons</li> <dd>Food/Buffs Menu</dd>
</ul> <dd className="check">Get all the fckn icons</dd>
<dt>test</dt>
</dl>
</div> </div>

BIN
src/spinner.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

102
src/style.css
Unescape View File

@ -3,6 +3,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
cursor: default;
} }
@font-face { @font-face {
font-family: "ngs"; font-family: "ngs";
@ -119,7 +120,13 @@ em {
padding-bottom:10px; padding-bottom:10px;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
.box h3, dt {
font-size: 12pt;
font-weight: normal;
padding: 0 5px;
margin: 5px;
border-bottom: 1px solid rgba(128,128,128,0.5);
}
.box table { .box table {
border-spacing: 0; border-spacing: 0;
color: white; color: white;
@ -187,12 +194,6 @@ em {
margin-right: 10px; margin-right: 10px;
padding: 13px 13px 7px 13px; padding: 13px 13px 7px 13px;
} }
.boxTitleBar img {
float: left;
}
.boxTitleBar p:after {
clear: both;
}
.boxTitleBar h1:before { .boxTitleBar h1:before {
font-family: "Segoe UI Symbol"; font-family: "Segoe UI Symbol";
content: ' \25C6'; content: ' \25C6';
@ -259,15 +260,9 @@ em {
} }
.box p { .box p {
padding: 10px 10px 0 10px; padding: 10px 10px 0 10px;
color: white;
}
.box h3 {
font-size: 12pt;
font-weight: normal;
padding: 0 5px;
margin: 5px;
border-bottom: 1px solid rgba(128,128,128,0.5);
} }
.equipPalette { .equipPalette {
margin: 10px 10px 0 10px; margin: 10px 10px 0 10px;
display: flex; display: flex;
@ -278,7 +273,7 @@ em {
} }
.equipPaletteSlotWrapper { .equipPaletteSlotWrapper {
background-color: rgba(128,128,128,0.50); background-color: rgba(128,128,128,0.50);
cursor:pointer; cursor:pointer !important;
padding: 10px; padding: 10px;
} }
.equipPaletteSlotWrapper span { .equipPaletteSlotWrapper span {
@ -327,7 +322,7 @@ em {
color: white; color: white;
margin: 0 0 5px 10px; margin: 0 0 5px 10px;
padding: 12px 10px 7px 10px; padding: 12px 10px 7px 10px;
cursor: pointer; cursor:pointer !important;
} }
.equipAugs li:hover { .equipAugs li:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
@ -531,7 +526,7 @@ li.r4 {
text-align: center; text-align: center;
flex-basis: 27px; flex-basis: 27px;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor:pointer !important;
} }
.boxmenu img { .boxmenu img {
vertical-align: middle; vertical-align: middle;
@ -809,7 +804,7 @@ width: 171px;
height: 148px; height: 148px;
left: 0; left: 0;
top: 0; top: 0;
cursor: pointer; cursor:pointer !important;
} }
.skillButtons > span:hover { .skillButtons > span:hover {
background-image: url("./icons/skilltree_div_overlay.png"); background-image: url("./icons/skilltree_div_overlay.png");
@ -866,7 +861,7 @@ cursor: pointer;
} }
.editBox:hover{ .editBox:hover{
background-color:rgba(0,0,0,0.5); background-color:rgba(0,0,0,0.5);
cursor:pointer; cursor:pointer !important;
outline: 2px solid #30cdef; outline: 2px solid #30cdef;
} }
.editBoxActive { .editBoxActive {
@ -874,7 +869,7 @@ cursor: pointer;
width: 100%; width: 100%;
} }
.editBoxActive:hover { .editBoxActive:hover {
cursor:pointer; cursor:pointer !important;
} }
input#editBoxInput { input#editBoxInput {
position: absolute; position: absolute;
@ -882,7 +877,7 @@ input#editBoxInput {
text-align: right; text-align: right;
background-color: #101317; background-color: #101317;
color: white; color: white;
cursor:pointer; cursor:pointer !important;
font-family: ngs,sans-serif; font-family: ngs,sans-serif;
font-size: 11pt; font-size: 11pt;
height: 28px; height: 28px;
@ -898,7 +893,7 @@ input#editBoxInput {
} }
.editClass:hover{ .editClass:hover{
background-color:rgba(0,0,0,0.5); background-color:rgba(0,0,0,0.5);
cursor:pointer; cursor:pointer !important;
outline: 2px solid #30cdef; outline: 2px solid #30cdef;
} }
.popup{ .popup{
@ -988,20 +983,43 @@ button{
100% {opacity:1;margin-bottom:0;} 100% {opacity:1;margin-bottom:0;}
} }
.boxAdmin { .boxAdmin {
height: 200px; animation: fadeIn 0.15s;
width: 580px;
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);
width: 450px;
text-align:center; text-align:center;
} }
.boxMisc img { .boxAdmin img {
margin: 20px;
background: linear-gradient(white,#bca9f5); background: linear-gradient(white,#bca9f5);
margin-Top: 10px;
} }
.boxAdmin input {
.boxMisc input {
outline: 1px solid silver; outline: 1px solid silver;
font-size: 36px;
height: 72px;
background-image: url("spinner.gif");
} }
.boxModal .boxTitleBar, .boxModalClassSelect .boxTitleBar, .boxMisc .boxTitleBar { .boxMisc {
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);
text-align:center;
}
.boxMisc img {
background: linear-gradient(white,#bca9f5);
vertical-align: top;
margin-right: 10px;
}
.boxMisc {
margin-top: 10px;
}
.boxMisc p:after {
clear: both;
}
.boxModal .boxTitleBar, .boxModalClassSelect .boxTitleBar, .boxMisc .boxTitleBar, .boxAdmin .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 {
@ -1016,10 +1034,10 @@ button{
} }
.webicon:hover{ .webicon:hover{
color:rgba(200,0,0,1); color:rgba(200,0,0,1);
cursor:pointer; cursor:pointer !important;
} }
.basichover:hover{ .basichover:hover{
cursor:pointer; cursor:pointer !important;
} }
.modalCloseButton{ .modalCloseButton{
float:right; float:right;
@ -1027,7 +1045,7 @@ button{
} }
.modalCloseButton:hover{ .modalCloseButton:hover{
color:rgba(200,0,0,1); color:rgba(200,0,0,1);
cursor:pointer; cursor:pointer !important;
} }
.failedInput{ .failedInput{
border: 1px solid rgba(200,0,0,1); border: 1px solid rgba(200,0,0,1);
@ -1054,7 +1072,7 @@ button{
} }
.submitbutton:hover{ .submitbutton:hover{
color:rgba(0,200,0,1); color:rgba(0,200,0,1);
cursor:pointer; cursor:pointer !important;
} }
/* Admin Panel */ /* Admin Panel */
@ -1115,7 +1133,7 @@ p.adminNav hr {
display: inline-block; display: inline-block;
position: relative; position: relative;
cursor: pointer; cursor:pointer !important;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
padding: 0; padding: 0;
@ -1308,10 +1326,13 @@ p.adminNav hr {
.toDoList { .toDoList {
padding: 0 10px; padding: 0 10px;
} }
.toDoList li { dt {
padding-top: 10px; margin: 10px 0 0 0;
} }
.toDoList li:before { dd, dl {
padding: 10px 0 0 15px;
}
dd:before {
content: "\2610"; content: "\2610";
padding-right: 10px; padding-right: 10px;
} }
@ -1319,7 +1340,10 @@ p.adminNav hr {
content: "\25E7" !important; content: "\25E7" !important;
} }
.check { .check {
opacity: 33%; opacity: 25%;
}
.check:hover {
opacity: 100%;
} }
.check:before { .check:before {
font-family: "Segoe UI Symbol"; font-family: "Segoe UI Symbol";

Write Preview
Loading…
Cancel
Save