meta: Flashed messages

Also convert dashboard to extend base.html

goathacks/static/css/style.css

@@ -167,3 +167,19 @@ form select {
   background: #974355;
   max-width: 11rem;
 }
+
+.flashes {
+  list-style-type: none;
+  display: flex;
+  justify-content: center;
+}
+
+.message {
+  width: 80%;
+  justify-content: center;
+  border: 1px solid #eee;
+  background-color: #26a69a;
+  padding: 0.2rem;
+  font-size: large;
+  color: #eee;
+}

goathacks/static/css/style.scss

@@ -164,3 +164,21 @@ form {
         max-width: 11rem;
     }
 }
+
+// Flashed messages
+.flashes {
+    list-style-type: none;
+    display: flex;
+    justify-content: center;
+}
+
+.message {
+    width: 80%;
+    justify-content: center; 
+    border: 1px solid $color-fg;
+    background-color: $color-accent;
+    padding: 0.2rem;
+    font-size: large;
+    color: $color-fg;
+}
+

goathacks/templates/base.html

@@ -5,7 +5,7 @@
     {% if messages %}
     <ul class="flashed-content">
         {% for m in messages %}
-        <li class="message">{{ message }}</li>
+        <li class="message">{{ m }}</li>
         {% endfor %}
     </ul>
     {% endif %}

goathacks/templates/dashboard.html

@@ -1,4 +1,6 @@
-{% include 'header.html' %}
+{% extends 'base.html' %}
+
+{% block content %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
 <script>
     function drop(id) {
@@ -94,5 +96,4 @@
     })
 
 </script>
-
-{% include 'footer.html' %}
+{% endblock %}