Michatec/wk_wars2x
1
1
Fork 0
mirror of https://github.com/Michatec/wk_wars2x.git synced 2026-04-01 08:26:27 +02:00
Code Issues Packages Projects Releases Activity

UI updates, added trapezoid sides and started arrows

Browse Source
This commit is contained in:
Dan
2019-11-14 21:29:11 +00:00
parent 720831d2fe
commit 8120ffa97e
4 changed files with 112 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
nui/arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
nui/arrow.psd Normal file
View File

Binary file not shown.

102
nui/radar.css
View File

@@ -15,7 +15,7 @@
.radar_container { .radar_container {
width: 700px; width: 700px;
height: 220px; height: 200px;
/* Temp centre */ /* Temp centre */
position: absolute; position: absolute;
@@ -26,39 +26,57 @@
left: 0; left: 0;
display: grid; display: grid;
grid-template-columns: 5% 90% 5%; grid-template-columns: 2.50% 95% 2.50%;
} }
.panel_left_side { .panel_side {
border-right: 20px solid darkslategray; width: 100%;
border-top: 80px solid transparent; height: 100%;
border-bottom: 80px solid transparent; background: linear-gradient( to bottom, rgb( 50, 50, 50 ), rgb( 25, 25, 25 ) );
} }
.panel_left {
clip-path: polygon( 0 30%, 100% 0, 100% 100%, 0 70% );
}
.panel_right_side { .panel_right {
border-left: 20px solid darkslategray; clip-path: polygon( 0 0, 100% 30%, 100% 70%, 0 100% );
border-top: 80px solid transparent; }
border-bottom: 80px solid transparent;
.arrow {
transform: scale(0.50);
width: 25px;
height: 35px;
margin: auto;
background-color: red;
clip-path: polygon( 50% 0, 100% 55%, 65% 55%, 65% 100%, 35% 100%, 35% 55%, 0 55% );
} }
.arrow_up {
}
.arrow_down {
}
#radar { #radar {
background-color: gray; /* background-color: gray; */
background: linear-gradient( to bottom, rgb( 50, 50, 50 ), rgb( 25, 25, 25 ) );
display: grid; display: grid;
grid-template-columns: 60px 50px auto; grid-template-columns: 45px 50px 150px 45px auto;
} }
#radar .pwr_button_container { #radar .pwr_button_container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#radar .pwr_button_container .pwr_button { #radar .pwr_button_container .pwr_button {
width: 50px; width: 45px;
height: 50px; height: 45px;
margin: auto; margin: auto;
background: linear-gradient(to bottom, rgba( 230, 230, 230, 0.8 ), limegreen 10%, rgb(0, 149, 0) ); background: linear-gradient(to bottom, rgba( 230, 230, 230, 0.8 ), limegreen 10%, rgb(0, 149, 0) );
box-shadow: 0px 0px 3px 0px rgb( 80, 80, 80 ) ; box-shadow: 0px 0px 3px 0px rgb( 80, 80, 80 ) ;
text-align: center; text-align: center;
line-height: 50px; line-height: 45px;
border-radius: 10px; border-radius: 10px;
} }
@@ -70,8 +88,60 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px; box-sizing: border-box;
padding: 10px 0;
} }
#radar .modes_container .modes p { #radar .modes_container .modes p {
margin: auto; margin: auto;
} }
#radar .speeds_container {
display: flex;
flex-direction: column;
}
#radar .speeds_container .display {
display: grid;
grid-template-columns: 1fr;
height: 70px;
box-sizing: border-box;
border: 3px solid black;
margin: auto 0;
background-color: rgb(61, 18, 0);
}
#radar .speeds_container .display p {
grid-row-start: 1;
grid-column-start: 1;
font-family: 'Seg-7';
font-size: 70px;
text-align: center;
line-height: 108%;
margin: 0 auto;
letter-spacing: 10px;
margin-right: -6px;
}
#radar .speeds_container .display .ghost {
color: rgb(90, 35, 1);
}
#radar .speeds_container .display .speed {
color: rgb(252, 113, 1);;
}
#radar .speed_arrows_container {
display: grid;
grid-template-rows: 50% 50%;
}
#radar .speed_arrows_container .speed_arrows {
display: flex;
flex-direction: column;
}

28
nui/radar.html
View File

@@ -6,7 +6,7 @@
<body onselectstart="return false;" ondragstart="return false;"> <body onselectstart="return false;" ondragstart="return false;">
<div class="radar_container"> <div class="radar_container">
<div class="panel_left_side"></div> <div class="panel_side panel_left"></div>
<div id="radar"> <div id="radar">
<div class="pwr_button_container"> <div class="pwr_button_container">
@@ -26,9 +26,33 @@
<p id="rearXmit">XMIT</p> <p id="rearXmit">XMIT</p>
</div> </div>
</div> </div>
<div class="speeds_container">
<div class="display">
<p class="ghost">000</p>
<p class="speed" id="frontSpeed">¦27</p>
</div> </div>
<div class="panel_right_side"></div> <div class="display">
<p class="ghost">000</p>
<p class="speed" id="rearSpeed">118</p>
</div>
</div>
<div class="speed_arrows_container">
<div class="speed_arrows">
<div class="arrow arrow_up" id="frontDirAway"></div>
<div class="arrow arrow_down" id="frontDirTowards"></div>
</div>
<div class="speed_arrows">
<div class="arrow arrow_up" id="rearDirTowards"></div>
<div class="arrow arrow_down" id="rearDirAway"></div>
</div>
</div>
</div>
<div class="panel_side panel_right"></div>
</div> </div>
</body> </body>
</html> </html>