Macintosh-Tools
/
jurassic-park-interface
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added both side panels to vehicle display screen.

This commit is contained in:
Max Stevenson 2020-09-10 13:19:59 -05:00
parent 41a92434e5
commit 380b8d5e8f
4 changed files with 129 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
index.html
View File

@ -31,7 +31,7 @@
<div class="vehicle-display__left-wrapper">
<div class="left-wrapper__location">
<div class="left-wrapper__group">
<p class="black-font-white-background">location</p>
<h4 class="black-font-white-background">location</h4>
</div>
<div class="left-wrapper__group">
<p>main:</p>
@ -43,13 +43,13 @@
</div>
</div>
<div class="left-wrapper__labels">
<p class="black-font-white-background">security</p>
<p class="black-font-white-background">power</p>
<p class="black-font-white-background">fence</p>
<h4 class="black-font-white-background">security</h4>
<h4 class="black-font-white-background">power</h4>
<h4 class="black-font-white-background">fence</h4>
</div>
<div class="left-wrapper__area">
<div class="left-wrapper__group">
<p class="black-font-white-background">area</p>
<h4 class="black-font-white-background">area</h4>
</div>
<div class="left-wrapper__group">
<p>entry:</p>
@ -84,7 +84,54 @@
<div class="vehicle-display__centre-wrapper">
<img id="island-img" src="./public/images/island.png" alt="">
</div>
<div class="vehicle-display__right-wrapper"></div>
<div class="vehicle-display__right-wrapper">
<div class="right-wrapper__keys">
<div class="right-wrapper__group">
<h4 class="black-font-white-background">keys</h4>
</div>
<div class="right-wrapper__group">
<p>ra t09</p>
<p>ra t06</p>
<p>ra t08</p>
<p>ra t11</p>
<p>ra t60</p>
<p>ra vc1</p>
<p>ra vc4</p>
<p>ra vc8</p>
<p>ra vc0</p>
<p>ra m0</p>
<p>ra mm</p>
</div>
<div class="right-wrapper__group">
<p>jh m</p>
<p>jh 09</p>
<p>jh 08</p>
<p>jh 09</p>
<p>rm 09</p>
<p>rm 09</p>
<p>rm 07</p>
<p>rm 03</p>
<p>rm 88</p>
</div>
<div class="right-wrapper__group">
<p>pp09</p>
</div>
</div>
<div class="right-wrapper__level">
<div class="right-wrapper__group">
<h4 class="black-font-white-background">LEVEL</h4>
</div>
<div class="right-wrapper__group">
<h4>B</h4>
<h4>1</h4>
<h4>2</h4>
<h4>FF</h4>
<h4>GG</h4>
<h4>HH</h4>
<h4>II</h4>
</div>
</div>
</div>
</div>
<div class="vehicle-display__lower-wrapper">
<div class="room-info__container">

37
public/stylesheets/styles.css
View File

@ -1268,7 +1268,8 @@ body {
.vehicle-display__right-wrapper {
display: flex;
flex-direction: column;
flex: 1;
flex: 1 0 10%;
justify-content: space-between;
}
.vehicle-display__upper-wrapper {
@ -1276,6 +1277,7 @@ body {
flex-direction: row;
flex: 1 0 77%;
padding: 0.5vw 0;
justify-content: space-between;
}
.vehicle-display__centre-wrapper {
@ -1295,4 +1297,37 @@ body {
height: 100%;
}
.left-wrapper__location, .left-wrapper__labels, .left-wrapper__area, .right-wrapper__keys, .right-wrapper__level {
display: flex;
flex-direction: column;
background-color: black;
justify-content: space-evenly;
align-items: center;
}
.left-wrapper__location p, .left-wrapper__labels p, .left-wrapper__area p, .right-wrapper__keys p, .right-wrapper__level p {
color: white;
font-size: 0.5vw;
font-weight: 500;
}
.left-wrapper__location h4, .left-wrapper__labels h4, .left-wrapper__area h4, .right-wrapper__keys h4, .right-wrapper__level h4 {
width: 100%;
}
.black-font-white-background {
color: black;
background-color: white;
margin: 0;
font-size: 0.55vw;
font-weight: 700;
}
.left-wrapper__group, .right-wrapper__group {
width: 100%;
text-align: center;
}
.right-wrapper__level div:last-child h4 {
color: white;
}
/*# sourceMappingURL=styles.css.map */

2
public/stylesheets/styles.css.map
View File

File diff suppressed because one or more lines are too long

40
sass/components/_vehicle-display.scss
View File

@ -6,7 +6,8 @@
.vehicle-display__right-wrapper {
display: flex;
flex-direction: column;
flex: 1;
flex: 1 0 10%;
justify-content: space-between;
}
.vehicle-display__upper-wrapper {
@ -14,6 +15,7 @@
flex-direction: row;
flex: 1 0 77%;
padding: 0.5vw 0;
justify-content: space-between;
}
.vehicle-display__centre-wrapper {
@ -32,3 +34,39 @@
width: 100%;
height: 100%;
}
.left-wrapper__location, .left-wrapper__labels, .left-wrapper__area, .right-wrapper__keys, .right-wrapper__level {
display: flex;
flex-direction: column;
background-color: black;
justify-content: space-evenly;
align-items: center;
p {
color: white;
font-size: .5vw;
font-weight: 500;
}
h4 {
width: 100%;
}
}
.black-font-white-background {
color: black;
background-color: white;
margin: 0;
font-size: .55vw;
font-weight: 700;
}
.left-wrapper__group, .right-wrapper__group {
width: 100%;
text-align: center;
}
.right-wrapper__level div:last-child h4 {
color: white;
}