Implement error message display

The error and visibility is set by the frontend server-side renderer.
This commit is contained in:
Wolvan 2022-01-01 13:54:58 +01:00
parent 041e5e0acc
commit 678342a9c6
2 changed files with 38 additions and 0 deletions

View file

@ -15,6 +15,9 @@
<h3>Make voting on things simpler</h3> <h3>Make voting on things simpler</h3>
</header> </header>
<main> <main>
<section class="error {{ FORM_SUBMISSION_ERROR_SHOWN_CLASS }}">
{{ FORM_SUBMISSION_ERROR }}
</section>
<section class="notepad"> <section class="notepad">
<div class="notepad-border"></div> <div class="notepad-border"></div>
<form action="{{ BACKEND_BASE_PATH }}/_backend/poll-form" method="POST"> <form action="{{ BACKEND_BASE_PATH }}/_backend/poll-form" method="POST">

View file

@ -3,6 +3,15 @@
padding: 0; padding: 0;
} }
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
body { body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@ -41,6 +50,32 @@ main {
position: relative; position: relative;
padding-bottom: 120px; padding-bottom: 120px;
} }
/* #region Error */
main .error {
display: none;
position: absolute;
width: calc(40% - 10px);
min-width: 310px;
border: 1px solid red;
border-radius: 5px;
background-color: #cf2828cc;
left: 50%;
top: 25px;
transform: translate(-50%, 0);
text-align: center;
font-size: 1.5em;
z-index: 1;
animation: fadeOut .3s linear;
animation-delay: 3s;
animation-fill-mode: forwards;
pointer-events: none;
font-family: Arial, sans-serif;
padding: 5px;
}
main .error.error-visible {
display: block;
}
/* #endregion Error */
/* #region notepad */ /* #region notepad */
main .notepad { main .notepad {
position: relative; position: relative;