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

More progress on vehicle tab.

This commit is contained in:
Max Stevenson 2020-09-08 20:51:15 -05:00
parent 37cc0d1ad9
commit 94679a95d5
4 changed files with 105 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -344,13 +344,37 @@
<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>
<div class="vehicle-status__active"></div>
<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 class="vehicle-details__detail-container">
<div class="vehicle-status__active"></div>
<p class="vehicle-details__status-text white-font-black-background">EXP 5</p>
<div class="triangle-wrapper">
<div class="outer-triangle__right-blue"></div>
<div class="inner-triangle__right-blue"></div>
</div>
</div>
<div class="vehicle-details__detail-container">
<div class="vehicle-status__inactive"></div>
<p class="vehicle-details__status-text white-font-black-background">EXP 6</p>
<div class="triangle-wrapper">
<div class="outer-triangle__right-blue"></div>
<div class="inner-triangle__right-blue"></div>
</div>
</div>
<div class="vehicle-details__detail-container">
<div class="vehicle-status__inactive"></div>
<p class="vehicle-details__status-text white-font-black-background">EXP 7</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">

48
public/stylesheets/styles.css
View File

@ -801,6 +801,7 @@ body {
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
}
.video-screen__vehicle-status__wrapper {
@ -914,6 +915,12 @@ body {
display: flex;
justify-content: space-between;
flex: 1;
align-items: center;
margin-bottom: 0.2vw;
}
.vehicle-details__detail-container .triangle-wrapper {
align-self: end;
}
.video-screen__vehicle-details__left {
@ -922,7 +929,21 @@ body {
}
.vehicle-status__active {
margin-right: 1vw;
margin: 0 1vw;
background: radial-gradient(circle, #5FC2A6, #2C7C6E, #1B5E60, #023B3A);
width: 1vw;
height: 1vw;
border-radius: 50%;
border: 0.1vw solid black;
}
.vehicle-status__inactive {
margin: 0 1vw;
background: radial-gradient(circle, #db817b, #6E5375, #725378, #473959);
width: 1vw;
height: 1vw;
border-radius: 50%;
border: 0.1vw solid black;
}
.vehicle-status__label {
@ -932,28 +953,39 @@ body {
.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;
border-top: 0.75vw solid transparent;
border-left: 0.75vw solid #3B6285;
border-bottom: 0.75vw 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;
border-top: 0.65vw solid transparent;
border-left: 0.65vw solid black;
border-bottom: 0.65vw solid transparent;
position: absolute;
top: 0.1vw;
left: 0;
}
.vehicle-details__status-text {
.video-screen__vehicle-details__left .vehicle-details__status-text {
margin: 0;
border-top: 0.1vw solid #3B6285;
border-left: 0.1vw solid #3B6285;
border-bottom: 0.1vw solid #3B6285;
font-size: 0.75vw;
}
.video-screen__vehicle-details__left > div:nth-child(3) > p,
.video-screen__vehicle-details__left > div:nth-child(4) > p {
background: #2F89C6;
}
.video-screen__vehicle-details__left > div:nth-child(3) > div.triangle-wrapper > div.inner-triangle__right-blue,
.video-screen__vehicle-details__left > div:nth-child(4) > div.triangle-wrapper > div.inner-triangle__right-blue {
border-left: 0.65vw solid #2F89C6;
}
.control-panel__button-control {

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

File diff suppressed because one or more lines are too long

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

@ -97,6 +97,7 @@
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
}
.video-screen__vehicle-status__wrapper {
@ -211,6 +212,12 @@
display: flex;
justify-content: space-between;
flex: 1;
align-items: center;
margin-bottom: .2vw;
}
.vehicle-details__detail-container .triangle-wrapper {
align-self: end;
}
.video-screen__vehicle-details__left {
@ -219,7 +226,21 @@
}
.vehicle-status__active {
margin-right: 1vw;
margin: 0 1vw;
background: radial-gradient(circle, #5FC2A6, #2C7C6E, #1B5E60, #023B3A);
width: 1vw;
height: 1vw;
border-radius: 50%;
border: .1vw solid black;
}
.vehicle-status__inactive {
margin: 0 1vw;
background: radial-gradient(circle, #db817b, #6E5375, #725378, #473959);
width: 1vw;
height: 1vw;
border-radius: 50%;
border: .1vw solid black;
}
.vehicle-status__label {
@ -229,45 +250,37 @@
.outer-triangle__right-blue {
width: 0;
height: 0;
border-top: .9vw solid transparent;
border-left: .9vw solid #3B6285;
border-bottom: .9vw solid transparent;
border-top: .75vw solid transparent;
border-left: .75vw solid #3B6285;
border-bottom: .75vw 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;
border-top: .65vw solid transparent;
border-left: .65vw solid black;
border-bottom: .65vw solid transparent;
position: absolute;
top: 0.1vw;
left: 0;
}
.vehicle-details__status-text {
.video-screen__vehicle-details__left .vehicle-details__status-text {
margin: 0;
border-top: .1vw solid #3B6285;
border-left: .1vw solid #3B6285;
border-bottom: .1vw solid #3B6285
border-bottom: .1vw solid #3B6285;
font-size: .75vw;
}
// .arrow-pointer {
// background: black;
// position: relative;
// margin: 0;
// padding: 0;
.video-screen__vehicle-details__left > div:nth-child(3) > p,
.video-screen__vehicle-details__left > div:nth-child(4) > p {
background: #2F89C6;
}
// &: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;
// }
// }
.video-screen__vehicle-details__left > div:nth-child(3) > div.triangle-wrapper > div.inner-triangle__right-blue,
.video-screen__vehicle-details__left > div:nth-child(4) > div.triangle-wrapper > div.inner-triangle__right-blue {
border-left: 0.65vw solid #2F89C6;
}