clean up flash messages and style them better

aarhusstadsarkiv · Aug 2, 2023 · 7eaca57 · 7eaca57
1 parent 6631644
commit 7eaca57
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 31 deletions.
diff --git a/stadsarkiv_client/static/css/default.css b/stadsarkiv_client/static/css/default.css
@@ -1,9 +1,3 @@
-.navigation {
-    display: flex;
-    justify-content: space-between;
-    background-color: var(--navigation-background-color);
-}
-
 .logo {
     margin-left: 10px;
     align-self: flex-start;
@@ -23,7 +17,6 @@
     font-size: 1.4em;
     font-weight: 600;
     padding: 8px;
-
     margin-right: 8px;
     text-decoration: none;
     border-radius: 6px;
@@ -52,9 +45,9 @@ body {
 .flash-messages {
     margin-top: 10px;
     bottom: 10px;
+    left: 2%;
     position: fixed;
-    max-width: 95%;
-    width: var(--width);
+    width: 96%;
     z-index: 1000;
 }
 
@@ -80,19 +73,22 @@ body {
     color: var(--flash-color);
 }
 
-
 .container {
+    padding-top: 25px;
     max-width: var(--container-width);
     margin: 0 auto;
+    padding-left: 20px;
 }
 
 .container-fluid {
     margin: 0 auto;
     max-width: 100%;
 }
 
-.container-main {
-    padding-top: 25px;
+.navigation {
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--navigation-background-color);
 }
 
 /**
@@ -114,14 +110,11 @@ body {
 
 .container-main-center {
     margin-left: 420px;
+    max-width: 100%;
     height: 100%;
 }
 
 .container-search {
     width: 100%;
     margin-left: 420px;
-}
-
-.navigation {
-    display: flex;
 }
diff --git a/stadsarkiv_client/static/js/flash.js b/stadsarkiv_client/static/js/flash.js
@@ -24,19 +24,14 @@ document.addEventListener("click", function (e) {
 })
 
 class Flash {
-    static setWidth() {
-        let containerElem = document.querySelector('.container')
-        let flashMessagesElem = document.querySelector('.flash-messages')
-        flashMessagesElem.style.width = containerElem.offsetWidth + "px"
-    }
 
     /**
      * @param {str} The message to display
      * @param {type}  'info', 'success', 'warning', 'error' or any other you may use in your app. 
      * @param {remove_after} remove the message after some seconds 
      */
-    static setMessage(str, type, remove_after) {
-        var messageElem = document.querySelector(".flash-messages");
+    static setMessage(message, type, remove_after) {
+        let messageElem = document.querySelector(".flash-messages");
         messageElem.innerHTML = '';
 
         if (!type) {
@@ -54,15 +49,15 @@ class Flash {
             }, removeAfterSecs * 1000)
         }
 
-        var html = `<div class="flash flash-${type} ${class_random}">${str}</div>`;
+        var html = `<div class="flash flash-${type} ${class_random}">${message}</div>`;
         messageElem.insertAdjacentHTML('afterbegin', html);
         messageElem.scrollIntoView();
     }
 }
 
 // On screen resize, set the width of the flash messages
 window.addEventListener('resize', function () {
-    Flash.setWidth()
+    Flash.setWidth(selector)
 })
 
 export {Flash}
diff --git a/stadsarkiv_client/templates/base.html b/stadsarkiv_client/templates/base.html
@@ -25,7 +25,6 @@
         </script>
     <script type="module">
         import { Flash } from "/static/js/flash.js";
-        Flash.setWidth();
     </script>
 
     {% block head %}
@@ -40,15 +39,18 @@
         {% include "includes/navigation.html" %}
     </nav>
 
-    <main class="container container-main">
+    <main class="container">
         {% block content %}
         {% endblock content %}
+
     </main>
 
     <footer class="container">
+        <p>Footer</p>
         {% include "includes/flash.html" %}
     </footer>
 
+
 </body>
 
 </html>
diff --git a/stadsarkiv_client/templates/records/search.html b/stadsarkiv_client/templates/records/search.html
@@ -205,7 +205,7 @@
 
 {% block content %}
 
-<div class="container-fluid">
+
     <div class="container-left">
         {{ parse_top_level_facets(facets) }}
     </div>
@@ -219,7 +219,7 @@
     {{ parse_pagination(pagination_data) }}
     {% endif %}
     </div>
-</div>
+
 
 <script type="module">
     import { searchEvents } from "/static/js/search.js";

diff --git a/stadsarkiv_client/templates/search.html b/stadsarkiv_client/templates/search.html
@@ -25,7 +25,6 @@
         </script>
     <script type="module">
         import { Flash } from "/static/js/flash.js";
-        Flash.setWidth();
     </script>
 
     {% block head %}
@@ -45,7 +44,7 @@
         {% endblock content %}
     </main>
 
-    <footer class="container-search">
+    <footer class="container-fluid-search">
         {% include "includes/flash.html" %}
     </footer>