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

Clearning up UI for itemDetails and header.

Browse Source
This commit is contained in:
dudleycu 2021-08-31 06:18:40 +00:00
parent 50dec099a0
commit c15559bc9f
3 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/TestHeader.js
View File

@ -4,16 +4,17 @@ function TestHeader() {
return ( return (
<header> <header>
<div className="headerWrapper"> <div className="headerWrapper">
<div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></div> <div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></div>
<div className="navigation"><ul> <div className="navigation"><ul>
<li className="headerMenuItem"><a href=".">Builds</a></li> <li className="headerMenuItem"><a href=".">Builds</a></li>
<li className="headerMenuItem"><a href=".">Guides</a></li> <li className="headerMenuItem"><a href=".">Guides</a></li>
<li className="headerMenuItem"><a href=".">Blog</a></li> <li className="headerMenuItem"><a href=".">Blog</a></li>
<li className="headerMenuItem"><a href=".">About</a></li> <li className="headerMenuItem"><a href=".">About</a></li></ul>
</ul></div> <section className="miniNav"><a href="."><span className="dotMenu">&#xb7;&#xb7;&#xb7;</span></a></section>
</div>
<div className="rightNav"> <div className="rightNav">
<section className="loginNav"><a href="."><img alt="." src={process.env.PUBLIC_URL + '/icons/nicodotpng.png.png'} /> Guest &emsp; <span className="dotMenu">&#xb7;&#xb7;&#xb7;</span></a></section> <section className="loginNav"><a href="."><img alt="." src={process.env.PUBLIC_URL + '/icons/nicodotpng.png.png'} /> Guest &emsp; <span className="dotMenu">&#xb7;&#xb7;&#xb7;</span></a></section>
<section className="miniNav"><a href="."><span>&#xb7;&#xb7;&#xb7;</span></a></section> <section className="miniNav"><a href="."><img alt="." src={process.env.PUBLIC_URL + '/icons/nicodotpng.png.png'} /></a></section>
</div> </div>
</div> </div>
</header> </header>

2
src/TestPanel.js
View File

@ -532,6 +532,8 @@ useEffect(()=>{
<span className="aug">Augment</span> <span className="aug">Augment</span>
<div className="itemDetailsAugmentWrapper"> <div className="itemDetailsAugmentWrapper">
<div><span>Precision III</span></div>
<div></div>
<div></div> <div></div>
<div></div> <div></div>

30
src/style.css
View File

@ -91,6 +91,8 @@ header {
text-align: left; text-align: left;
margin: 0; margin: 0;
padding: 0 10px; padding: 0 10px;
line-height: 50px;
height: 50px
} }
.headerWrapper { .headerWrapper {
grid-area: 1 / span 3; grid-area: 1 / span 3;
@ -100,12 +102,12 @@ header {
} }
header a { header a {
display: block; display: block;
height: 50px
} }
.logo { .logo {
font-family: "ngs2"; font-family: "ngs2";
margin-right: auto; margin-right: auto;
font-size:24px; font-size:24px;
line-height: 47px;
white-space: nowrap; white-space: nowrap;
} }
.logo span{ .logo span{
@ -120,9 +122,6 @@ header a {
} }
.navigation { .navigation {
text-align: left; text-align: left;
font-size: 17px;
font-family: "ngs2";
line-height: 50px;
} }
.navigation a { .navigation a {
padding: 0 15px; padding: 0 15px;
@ -132,13 +131,14 @@ header a {
border-color: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.13);
border-style: solid; border-style: solid;
border-left-width: 1px; border-left-width: 1px;
font-size: 17px;
font-family: "ngs2";
} }
.navigation li:last-child { .navigation li:last-child {
border-right-width: 1px; border-right-width: 1px;
} }
.rightNav { .rightNav {
text-align: right; text-align: right;
line-height: 43px;
} }
.rightNav a { .rightNav a {
padding: 0 15px; padding: 0 15px;
@ -150,20 +150,14 @@ header a {
} }
.dotMenu { .dotMenu {
display: inline-block; display: inline-block;
font-family: "Segoe UI Symbol";
font-size: 24px; font-size: 24px;
font-weight: 900;
letter-spacing: 2px;
} }
.miniNav { .miniNav {
display: none; display: none;
grid-area: 2 / span 2;
line-height: 45px;
text-align: right; text-align: right;
} }
.miniNav span {
display: inline-block;
font-family: "Segoe UI Symbol";
font-size: 24px;
}
@media screen and (max-width:860px) { @media screen and (max-width:860px) {
.navigation > ul, .loginNav { .navigation > ul, .loginNav {
display: none; display: none;
@ -173,7 +167,6 @@ header a {
} }
} }
.box { .box {
/*color: #97e2fc;*/
color:white; color:white;
background-clip: padding-box; background-clip: padding-box;
background-color: rgba(24, 36, 48, 0.66); background-color: rgba(24, 36, 48, 0.66);
@ -1535,7 +1528,7 @@ p.adminNav hr {
.itemDetailsAugmentWrapper { .itemDetailsAugmentWrapper {
margin: 10px 0 0 0; margin: 10px 0 0 0;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit,minmax(150px,200px)); grid-template-columns: repeat(auto-fit,minmax(100px,200px));
gap: 10px 30px; gap: 10px 30px;
} }
.itemDetailsAugmentWrapper > div { .itemDetailsAugmentWrapper > div {
@ -1543,6 +1536,13 @@ p.adminNav hr {
padding: 2px 10px; padding: 2px 10px;
border-radius: 0 10px 0 0; border-radius: 0 10px 0 0;
height: 20px; height: 20px;
white-space: nowrap;
text-overflow:ellipsis;
}
.itemDetailsAugmentWrapper > div span:before {
content: "\00B7";
margin-right: 10px;
font-weight: 900;
} }
.itemAbility { .itemAbility {
grid-area: ability; grid-area: ability;