mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-06-25 19:29:32 +00:00
More work in progress on the trash modal.
This commit is contained in:
parent
2e585ff17e
commit
eb0cb7bd3b
32
index.html
32
index.html
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
/////////////////
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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"}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user