efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(14): styling of desktop rules modal

This commit is contained in:
efim 2023-07-02 11:50:47 +00:00
parent b67b3cdc89
commit a7dbfffa8e
2 changed files with 62 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
14-rock-paper-scissors/src/main/resources/public/output.css
View File

@ -1032,3 +1032,41 @@ video {
animation: quickly-appear 2s;
transform-origin: center;
}
@media (min-width: 768px) {
.md\:absolute {
position: absolute;
}
.md\:end-5 {
inset-inline-end: 1.25rem;
}
.md\:top-5 {
top: 1.25rem;
}
.md\:h-12 {
height: 3rem;
}
.md\:h-\[400px\] {
height: 400px;
}
.md\:w-\[400px\] {
width: 400px;
}
.md\:w-12 {
width: 3rem;
}
.md\:rounded-xl {
border-radius: 0.75rem;
}
.md\:rounded-lg {
border-radius: 0.5rem;
}
}

42
14-rock-paper-scissors/src/main/resources/templates/index.html
View File

@ -178,22 +178,28 @@
<!-- This is rules overlay modal window -->
<dialog
id="rules-dialog"
class="w-screen h-screen"
class="w-screen h-screen md:rounded-lg md:w-[400px] md:h-[400px]"
>
<div
class="flex flex-col justify-between w-full h-full"
>
<div class="flex flex-col justify-between w-full h-full">
<h1
class="grid place-content-center h-1/4 text-3xl font-bold tracking-wide uppercase"
>Rules</h1>
class="grid place-content-center h-1/4 text-3xl font-bold tracking-wide uppercase md:h-12"
>
Rules
</h1>
<div class="grid place-content-center grow">
<img src="../public/images/image-rules.svg" alt="Rules of the game: rock beats scissors, scissors beat paper, paper beats rock." />
<img
src="../public/images/image-rules.svg"
alt="Rules of the game: rock beats scissors, scissors beat paper, paper beats rock."
/>
</div>
<button
id="close-dialog-button"
class="grid place-content-center h-32"
class="grid place-content-center h-32 md:absolute md:top-5 md:w-12 md:h-12 md:end-5"
>
<img src="../public/images/icon-close.svg" alt="Close rules display" />
<img
src="../public/images/icon-close.svg"
alt="Close rules display"
/>
</button>
</div>
</dialog>
@ -206,15 +212,15 @@
Rules
</button>
<script type="text/javascript">
const dialog = document.getElementById("rules-dialog");
const openButton = document.getElementById("rules-button");
const closeButton = document.getElementById("close-dialog-button");
openButton.addEventListener("click", function() {
dialog.showModal();
});
closeButton.addEventListener("click", function() {
dialog.close();
});
const dialog = document.getElementById("rules-dialog");
const openButton = document.getElementById("rules-button");
const closeButton = document.getElementById("close-dialog-button");
openButton.addEventListener("click", function () {
dialog.showModal();
});
closeButton.addEventListener("click", function () {
dialog.close();
});
</script>
</div>
</main>