From 678342a9c6e92b499cf1f23ab61677833e72213c Mon Sep 17 00:00:00 2001
From: Wolvan <wolvan1@gmail.com>
Date: Sat, 1 Jan 2022 13:54:58 +0100
Subject: [PATCH] Implement error message display

The error and visibility is set by the frontend server-side renderer.
---
 frontend/html/index.html     |  3 +++
 frontend/static/css/main.css | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/frontend/html/index.html b/frontend/html/index.html
index c574b01..c022e6a 100644
--- a/frontend/html/index.html
+++ b/frontend/html/index.html
@@ -15,6 +15,9 @@
         <h3>Make voting on things simpler</h3>
     </header>
     <main>
+        <section class="error {{ FORM_SUBMISSION_ERROR_SHOWN_CLASS }}">
+            {{ FORM_SUBMISSION_ERROR }}
+        </section>
         <section class="notepad">
             <div class="notepad-border"></div>
             <form action="{{ BACKEND_BASE_PATH }}/_backend/poll-form" method="POST">
diff --git a/frontend/static/css/main.css b/frontend/static/css/main.css
index 32628c0..cc119c7 100644
--- a/frontend/static/css/main.css
+++ b/frontend/static/css/main.css
@@ -3,6 +3,15 @@
     padding: 0;
 }
 
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
 body {
     width: 100vw;
     height: 100vh;
@@ -41,6 +50,32 @@ main {
     position: relative;
     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 */
 main .notepad {
     position: relative;