norm/song-prompt-webapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Got modal to open and close successfully without refreshing the page, bringing this closer to a SPA. Fixed some small styling on the modal.

Browse Source
This commit is contained in:
Normanras
2023-11-29 22:31:24 -05:00
parent 74306d606c
commit 7793dc88fa
8 changed files with 136 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
application/templates/modal_results.html
View File

@ -7,115 +7,24 @@
aria-hidden="true">
<section class="first-time-user-popup-container">
<div id="dialogContent" class="first-time-user-popup-content">
<input
type="button"
class="modal-x-out"
value=&#10006
onclick="document.getElementById('firstTimeUsers').remove();">
<div class="modal-headline">Here you go! Now go write a song!</div>
<div class="modal-links">
<h2> Key: </h2>
<h3> {{ session.output_key }} </h3>
<p></p>
<h2> Time Signature: </h2>
<h3> {{ session.output_signature }} </h3>
<p></p>
<h2> Theme: </h2>
<h3> {{ session.output_theme }} </h3>
<h3> {{ session.output_theme }} </h3>
<p></p>
</div>
</div>
</section>
</div>
<style>
/* MODAL POPUP */
.first-time-user-popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: flex;
padding: 1em;
background-color: rgba(0, 0, 0, 0.75);
opacity: 0;
pointer-events: none;
transition: 0.25s ease-out;
}
.first-time-user-popup.is-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.first-time-user-popup-container {
width: 100%;
max-width: 600px;
margin: auto;
transform: translateY(-1em) scale(0.95);
background-color: white;
transition: transform 0.25s ease-out;
border-radius: 8px;
}
.first-time-user-popup.is-active .first-time-user-popup-container {
transform: translateY(0) scale(1);
}
.modal-headline {
font-size: 20px;
line-height: normal;
font-weight: 500;
margin-bottom: 32px;
text-align: center;
color: #F7492D;
}
.modal-links {
display: flex;
}
.modal-links a {
border: 2px solid #3c228a;
background: #F7492D;
padding: 8px 16px;
text-align: center;
width: calc(50% - 8px);
margin: 0 8px;
border-radius: 30px;
color: #fff;
text-decoration: none;
font-weight: 700;
transition: all 0.2s;
}
.modal-links a.secondary {
background: transparent;
color: #3c228a;
}
.modal-links a:hover {
border: 2px solid #13014a;
background: #13014a;
}
.modal-links a.secondary:hover {
border: 2px solid #13014a;
background: #ebe8f3;
color: #13014a;
}
.first-time-user-popup-content {
padding: 32px 16px;
}
@media (min-width: 768px) {
.first-time-user-popup-content {
padding: 32px;
}
.modal-headline {
font-size: 24px;
}
.modal-links a {
min-height: 40px;
line-height: 40px;
}
}
</style>