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

Progress made on vehicle tab.

This commit is contained in:
Max Stevenson 2020-09-08 16:11:23 -05:00
parent 75418835cb
commit 37cc0d1ad9
4 changed files with 162 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -340,9 +340,21 @@
<p class="white-font-black-background">vehicle status</p>
<p class="white-font-black-background">headlights on</p>
</div>
<div
class="video-screen_vehicle-img__wrapper"
>
<div class="video-screen__vehicle-img__wrapper"></div>
<div class="video-screen__vehicle-details__wrapper">
<div class="video-screen__vehicle-details__left">
<div class="vehicle-details__detail-container">
<button class="vehicle-status__active"></button>
<p class="vehicle-details__status-text white-font-black-background">EXP 4</p>
<div class="triangle-wrapper">
<div class="outer-triangle__right-blue"></div>
<div class="inner-triangle__right-blue"></div>
</div>
</div>
</div>
<div class="vide-screen__vehicle-details__right">
</div>
</div>
</div>
<div

64
public/stylesheets/styles.css
View File

@ -794,11 +794,27 @@ body {
align-items: center;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.video-screen__vehicle-details__wrapper {
display: flex;
flex-direction: row;
width: 100%;
}
.video-screen__vehicle-status__wrapper {
display: flex;
flex: 1;
width: 100%;
justify-content: space-between;
}
.video-screen__vehicle-status__wrapper p {
margin: 0;
text-transform: none;
font-size: 1.5vw;
padding: 0.5vw 1vw 0 1vw;
font-weight: 600;
}
.video-screen__info-text {
@ -894,6 +910,52 @@ body {
color: white;
}
.vehicle-details__detail-container {
display: flex;
justify-content: space-between;
flex: 1;
}
.video-screen__vehicle-details__left {
display: flex;
flex-direction: column;
}
.vehicle-status__active {
margin-right: 1vw;
}
.vehicle-status__label {
position: relative;
}
.outer-triangle__right-blue {
width: 0;
height: 0;
border-top: 0.9vw solid transparent;
border-left: 0.9vw solid #3B6285;
border-bottom: 0.9vw solid transparent;
position: absolute;
}
.inner-triangle__right-blue {
width: 0;
height: 0;
border-top: 0.8vw solid transparent;
border-left: 0.8vw solid black;
border-bottom: 0.8vw solid transparent;
position: absolute;
top: 0.1vw;
left: 0;
}
.vehicle-details__status-text {
margin: 0;
border-top: 0.1vw solid #3B6285;
border-left: 0.1vw solid #3B6285;
border-bottom: 0.1vw solid #3B6285;
}
.control-panel__button-control {
display: flex;
flex-direction: column;

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

File diff suppressed because one or more lines are too long

85
sass/components/_video-screen.scss
View File

@ -89,12 +89,28 @@
flex: 1;
align-items: center;
flex-direction: column;
height: 100%
height: 100%;
justify-content: space-between;
}
.video-screen__vehicle-details__wrapper {
display: flex;
flex-direction: row;
width: 100%;
}
.video-screen__vehicle-status__wrapper {
display: flex;
flex: 1;
width: 100%;
justify-content: space-between;
}
.video-screen__vehicle-status__wrapper p {
margin: 0;
text-transform: none;
font-size: 1.5vw;
padding: 0.5vw 1vw 0 1vw;
font-weight: 600;
}
.video-screen__info-text {
@ -190,3 +206,68 @@
background-color: #148e42;
color: white;
}
.vehicle-details__detail-container {
display: flex;
justify-content: space-between;
flex: 1;
}
.video-screen__vehicle-details__left {
display: flex;
flex-direction: column;
}
.vehicle-status__active {
margin-right: 1vw;
}
.vehicle-status__label {
position: relative;
}
.outer-triangle__right-blue {
width: 0;
height: 0;
border-top: .9vw solid transparent;
border-left: .9vw solid #3B6285;
border-bottom: .9vw solid transparent;
position: absolute;
}
.inner-triangle__right-blue {
width: 0;
height: 0;
border-top: 0.8vw solid transparent;
border-left: 0.8vw solid black;
border-bottom: 0.8vw solid transparent;
position: absolute;
top: 0.1vw;
left: 0;
}
.vehicle-details__status-text {
margin: 0;
border-top: .1vw solid #3B6285;
border-left: .1vw solid #3B6285;
border-bottom: .1vw solid #3B6285
}
// .arrow-pointer {
// background: black;
// position: relative;
// margin: 0;
// padding: 0;
// &:before {
// content: '';
// position: absolute;
// right: -25px;
// bottom: 0;
// width: 0;
// height: 0;
// border-left: 25px solid black;
// border-top: 25px solid transparent;
// border-bottom: 25px solid transparent;
// }
// }