Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2024-06-16 17:29:35 +00:00
Code Issues Projects Releases Wiki Activity

More work in progress on the trash modal.

Browse Source
This commit is contained in:
Max Stevenson 2020-06-10 19:46:19 +01:00
parent 2e585ff17e
commit eb0cb7bd3b
6 changed files with 86 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

@ -319,18 +319,26 @@
width="60px"
height="45px"
/>
<img
id="trash-icon"
src="./public/icons/trash.png"
width="25px"
height="45px"
/>
<div class="outer-edge__dark modal-container hidden" id="trash-modal">
<div class="inner-edge__dark modal-container__content">
<p class="modal-container__text">Test</p>
<button id="modal-container__close-button">
close
</button>
<div id="trash-icon-wrapper">
<img
id="trash-icon"
src="./public/icons/trash.png"
width="25px"
height="45px"
/>
<div
class="outer-edge__dark modal-inactive"
id="trash-modal"
>
<div class="inner-edge__dark modal-container__content">
<p class="modal-container__text">Test</p>
<p class="modal-container__text">Test</p>
<p class="modal-container__text">Test</p>
<p class="modal-container__text">Test</p>
<button id="modal-container__close-button">
close
</button>
</div>
</div>
</div>
</div>

6
public/scripts/app.js
View File

@ -31,12 +31,14 @@ trashIcon.addEventListener("click", () => {
const trashModal = document.getElementById("trash-modal");
const trashModalCloseButton = document.getElementById("modal-container__close-button");
trashModalCloseButton.addEventListener("click", () => {
trashModal.classList.add("hidden");
trashModal.classList.add("modal-inactive");
trashModal.classList.remove("modal-active");
});
trashModal.addEventListener("focusout", () => {
trashModal.classList.add("hidden");
});
trashModal.classList.remove("hidden");
trashModal.classList.remove("modal-inactive");
trashModal.classList.add("modal-active");
trashModal.focus();
});
/////////////////

32
public/stylesheets/styles.css
View File

@ -584,20 +584,48 @@ body {
padding: 2px;
}
#trash-icon {
z-index: 1;
}
.system-icons__icon-wrapper {
display: flex;
align-items: flex-end;
}
#system-icons__wrapper > div > img {
#system-icons__wrapper img {
cursor: pointer;
}
.modal-container {
position: fixed;
z-index: 0;
background-color: #797979;
width: 500px;
height: 200px;
transition-duration: 2s;
transition-property: transform;
}
#trash-icon-wrapper {
position: relative;
display: flex;
align-items: baseline;
}
.modal-inactive {
position: absolute;
z-index: 0;
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
}
.modal-active {
transform-origin: bottom right;
transform: translate(-400px, -250px) scale(1, 1);
z-index: 9999;
z-index: 99;
background-color: #797979;
width: 500px;
height: 200px;

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

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrBF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC/DF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACzBF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC9BF;EACE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrBF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC/DF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACzBF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AClCF;EACE;EAIA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"}

31
sass/components/_modal.scss
View File

@ -1,10 +1,9 @@
.modal-container {
position: fixed;
transform-origin: bottom right;
transform: translate(-400px, -250px) scale(1, 1);
// top: 30%;
// left: 20%;
z-index: 9999;
z-index: 0;
background-color: #797979;
width: 500px;
height: 200px;
@ -12,6 +11,28 @@
transition-property: transform;
}
.modal__active {
#trash-icon-wrapper {
position: relative;
display: flex;
align-items: baseline;
}
.modal-inactive {
position: absolute;
z-index: 0;
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
}
.modal-active {
transform-origin: bottom right;
transform: translate(-400px, -250px) scale(1, 1);
z-index: 99;
background-color: #797979;
width: 500px;
height: 200px;
transition-duration: 2s;
transition-property: transform;
}

6
sass/components/_system-icons.scss
View File

@ -22,11 +22,15 @@
padding: 2px;
}
#trash-icon {
z-index: 1;
}
.system-icons__icon-wrapper {
display: flex;
align-items: flex-end;
}
#system-icons__wrapper > div > img {
#system-icons__wrapper img {
cursor: pointer;
}