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

7
src/TestHeader.js
View File

@ -9,11 +9,12 @@ function TestHeader() {
<li className="headerMenuItem"><a href=".">Builds</a></li>
<li className="headerMenuItem"><a href=".">Guides</a></li>
<li className="headerMenuItem"><a href=".">Blog</a></li>
<li className="headerMenuItem"><a href=".">About</a></li>
</ul></div>
<li className="headerMenuItem"><a href=".">About</a></li></ul>
<section className="miniNav"><a href="."><span className="dotMenu">&#xb7;&#xb7;&#xb7;</span></a></section>
</div>
<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="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>
</header>

2
src/TestPanel.js
View File

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

30
src/style.css
View File

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