Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2024-06-01 21:41:31 +00:00
Code Issues Projects Releases Wiki Activity

control panel top buttons functional style finished.

Browse Source
This commit is contained in:
Max Stevenson 2020-06-11 13:48:40 +01:00
parent 059ca3b98f
commit 7312bb790c
2 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -105,8 +105,10 @@
<div class="outer-edge__light" id="control-panel">
<div class="inner-edge__light" id="control-panel__inner">
<div class="control-panel__button-display">
<div class="button__depressed">
<p class="button-text__embossed small-button">VEHICLE</p>
<div class="buttons button__depressed">
<div class="">
<p class="button-text__embossed small-button">VEHICLE</p>
</div>
</div>
<div class="outer-edge__light buttons">
<div class="inner-edge__light">

23
public/scripts/app.js
View File

@ -38,11 +38,25 @@ for (let i = 0; i < topControlPanelButtons.length; i++) {
let prevButton = topControlPanelButtons[k];
if (prevButton.classList.contains("button__depressed")) {
prevButton.classList.remove("button__depressed");
prevButton.classList.add("inner-edge__light");
prevButton.firstElementChild.classList.remove("button-text__embossed");
prevButton.firstElementChild.classList.add("button-text__engraved");
prevButton.classList.add("outer-edge__light");
prevButton.firstElementChild.classList.add("inner-edge__light");
prevButton.firstElementChild
.querySelector("p")
.classList.remove("button-text__embossed");
prevButton.firstElementChild
.querySelector("p")
.classList.add("button-text__engraved");
}
}
button.classList.add("button__depressed");
button.classList.remove("outer-edge__light");
button.firstElementChild.classList.remove("inner-edge__light");
prevButton.firstElementChild
.querySelector("p")
.classList.add("button-text__embossed");
prevButton.firstElementChild
.querySelector("p")
.classList.remove("button-text__engraved");
// find depressed styling in children
// remove depressed styling and embossed styling from previous button
// add inner edge light and engraved styling
@ -52,8 +66,7 @@ for (let i = 0; i < topControlPanelButtons.length; i++) {
// add embossed styling to para
//
});
}
};
////////////////////////
// Trash modal