From f689dfa9a202fd6feea85a93a704eac5c0254cf6 Mon Sep 17 00:00:00 2001 From: dudleycu Date: Fri, 20 Aug 2021 06:01:18 +0000 Subject: [PATCH 1/2] UI Changes --- src/App.js | 10 ++--- src/TestPanel.js | 18 ++++---- src/spinner.gif | Bin 0 -> 7790 bytes src/style.css | 104 +++++++++++++++++++++++++++++------------------ 4 files changed, 79 insertions(+), 53 deletions(-) create mode 100644 src/spinner.gif diff --git a/src/App.js b/src/App.js index 89944bc..2273402 100644 --- a/src/App.js +++ b/src/App.js @@ -382,9 +382,9 @@ function AdminPanel(p) { {!verified?
-
+

Admin

- +

{setPassword(f.currentTarget.value)}} onKeyDown={(e)=>{ if (e.key==="Enter") { axios.post(GetBackendURL(p)+"/passwordcheck",{ @@ -885,9 +885,9 @@ function App() {
-
-

Under Construction

- {GetData("site_data")[0]?.data??""} +
+

Under Construction

+ {GetData("site_data")[0]?.data??""}

diff --git a/src/TestPanel.js b/src/TestPanel.js index 85e48a0..855b814 100644 --- a/src/TestPanel.js +++ b/src/TestPanel.js @@ -511,14 +511,16 @@ AUGMENT

To Do List

-
    -
  • Grids. Grids everywhere.
    • -
  • Finish "Item Details" for Weapons/Armor
    • -
  • Class Skill Window
    • -
  • PA Select Window
    • -
  • Food/Buffs Menu
    • -
  • Get all the fckn icons
    • -
+
+
UI
+
Grids. Grids everywhere.
+
Finish "Item Details" for Weapons/Armor
+
Class Skill Window
+
PA Select Window
+
Food/Buffs Menu
+
Get all the fckn icons
+
test
+
diff --git a/src/spinner.gif b/src/spinner.gif new file mode 100644 index 0000000000000000000000000000000000000000..e82a969165f5b068ddf0052f3191c05d43b8ba02 GIT binary patch literal 7790 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 literal 0 HcmV?d00001 diff --git a/src/style.css b/src/style.css index 7f49933..4a27066 100644 --- a/src/style.css +++ b/src/style.css @@ -3,6 +3,7 @@ margin: 0; padding: 0; box-sizing: border-box; + cursor: default; } @font-face { font-family: "ngs"; @@ -119,7 +120,13 @@ em { padding-bottom: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 { border-spacing: 0; color: white; @@ -187,12 +194,6 @@ em { margin-right: 10px; padding: 13px 13px 7px 13px; } -.boxTitleBar img { - float: left; -} -.boxTitleBar p:after { - clear: both; -} .boxTitleBar h1:before { font-family: "Segoe UI Symbol"; content: ' \25C6'; @@ -259,15 +260,9 @@ em { } .box p { 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 { margin: 10px 10px 0 10px; display: flex; @@ -278,7 +273,7 @@ em { } .equipPaletteSlotWrapper { background-color: rgba(128,128,128,0.50); - cursor:pointer; + cursor:pointer !important; padding: 10px; } .equipPaletteSlotWrapper span { @@ -327,7 +322,7 @@ em { color: white; margin: 0 0 5px 10px; padding: 12px 10px 7px 10px; - cursor: pointer; + cursor:pointer !important; } .equipAugs li:hover { 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; flex-basis: 27px; white-space: nowrap; - cursor: pointer; + cursor:pointer !important; } .boxmenu img { vertical-align: middle; @@ -809,7 +804,7 @@ width: 171px; height: 148px; left: 0; top: 0; -cursor: pointer; +cursor:pointer !important; } .skillButtons > span:hover { background-image: url("./icons/skilltree_div_overlay.png"); @@ -866,7 +861,7 @@ cursor: pointer; } .editBox:hover{ background-color:rgba(0,0,0,0.5); - cursor:pointer; + cursor:pointer !important; outline: 2px solid #30cdef; } .editBoxActive { @@ -874,7 +869,7 @@ cursor: pointer; width: 100%; } .editBoxActive:hover { - cursor:pointer; + cursor:pointer !important; } input#editBoxInput { position: absolute; @@ -882,7 +877,7 @@ input#editBoxInput { text-align: right; background-color: #101317; color: white; - cursor:pointer; + cursor:pointer !important; font-family: ngs,sans-serif; font-size: 11pt; height: 28px; @@ -898,7 +893,7 @@ input#editBoxInput { } .editClass:hover{ background-color:rgba(0,0,0,0.5); - cursor:pointer; + cursor:pointer !important; outline: 2px solid #30cdef; } .popup{ @@ -988,20 +983,43 @@ button{ 100% {opacity:1;margin-bottom:0;} } .boxAdmin { - height: 200px; - outline: 1px solid rgba(54,255,255,1); - width: 450px; + 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); + text-align:center; +} +.boxAdmin img { + margin: 20px; + background: linear-gradient(white,#bca9f5); +} +.boxAdmin input { + outline: 1px solid silver; + font-size: 36px; + height: 72px; + background-image: url("spinner.gif"); +} +.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); - margin-Top: 10px; + vertical-align: top; + margin-right: 10px; } - -.boxMisc input { - outline: 1px solid silver; +.boxMisc { + margin-top: 10px; } -.boxModal .boxTitleBar, .boxModalClassSelect .boxTitleBar, .boxMisc .boxTitleBar { +.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)); } .modalItemListContainer { @@ -1016,10 +1034,10 @@ button{ } .webicon:hover{ color:rgba(200,0,0,1); - cursor:pointer; + cursor:pointer !important; } .basichover:hover{ - cursor:pointer; + cursor:pointer !important; } .modalCloseButton{ float:right; @@ -1027,7 +1045,7 @@ button{ } .modalCloseButton:hover{ color:rgba(200,0,0,1); - cursor:pointer; + cursor:pointer !important; } .failedInput{ border: 1px solid rgba(200,0,0,1); @@ -1054,7 +1072,7 @@ button{ } .submitbutton:hover{ color:rgba(0,200,0,1); - cursor:pointer; + cursor:pointer !important; } /* Admin Panel */ @@ -1115,7 +1133,7 @@ p.adminNav hr { display: inline-block; position: relative; - cursor: pointer; + cursor:pointer !important; background-color: transparent; border: 0; padding: 0; @@ -1308,10 +1326,13 @@ p.adminNav hr { .toDoList { padding: 0 10px; } -.toDoList li { - padding-top: 10px; +dt { +margin: 10px 0 0 0; } -.toDoList li:before { +dd, dl { + padding: 10px 0 0 15px; +} +dd:before { content: "\2610"; padding-right: 10px; } @@ -1319,7 +1340,10 @@ p.adminNav hr { content: "\25E7" !important; } .check { - opacity: 33%; + opacity: 25%; +} +.check:hover { + opacity: 100%; } .check:before { font-family: "Segoe UI Symbol"; From 0ec7679f80cd85cafff2727f5b8755556226c586 Mon Sep 17 00:00:00 2001 From: dudleycu Date: Fri, 20 Aug 2021 06:12:39 +0000 Subject: [PATCH 2/2] ui revisions --- src/App.js | 2 +- src/style.css | 11 +++++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 2273402..45a5f6c 100644 --- a/src/App.js +++ b/src/App.js @@ -384,7 +384,7 @@ function AdminPanel(p) {

Admin

-

+

{setPassword(f.currentTarget.value)}} onKeyDown={(e)=>{ if (e.key==="Enter") { axios.post(GetBackendURL(p)+"/passwordcheck",{ diff --git a/src/style.css b/src/style.css index 4a27066..7ebca61 100644 --- a/src/style.css +++ b/src/style.css @@ -4,6 +4,7 @@ padding: 0; box-sizing: border-box; cursor: default; + outline: 0; } @font-face { font-family: "ngs"; @@ -960,7 +961,6 @@ button{ grid-template-rows: 10px minmax(10px, 1fr) 10px; } .modal { - outline: 0; grid-column: 2; grid-row: 2; } @@ -984,7 +984,6 @@ button{ } .boxAdmin { 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); text-align:center; @@ -994,10 +993,14 @@ button{ background: linear-gradient(white,#bca9f5); } .boxAdmin input { - outline: 1px solid silver; font-size: 36px; height: 72px; - background-image: url("spinner.gif"); + width: 33vw; + background-color: transparent; + cursor: text; +} +.boxAdmin input:hover { +outline: 0 !important; } .boxMisc { animation: fadeIn 0.15s;