Quality of life styling changes

* Added style to flash messages
* Included category in flash message retrieval
* Use category to help style flash messages
* Forced tables to be full width inside their pure-u-* containers

app.py

@@ -191,6 +191,8 @@ def registration():
 
     if 'registrationCode' in request.values:
         form.registration_code.data = request.values['registrationCode']
+    else:
+        flash("Missing registration code. Use provided link.", "error")
 
     return render_template('register.html', form=form)
 

static/style.css

@@ -3,11 +3,6 @@ nav {
     padding: 0px 0px;
 }
 
-nav h1 {
-    display: block;
-    float: left;
-}
-
 nav ul {
     display: block;
     float: right;
@@ -19,6 +14,20 @@ nav ul li {
     padding-left: 1em;
 }
 
+.flash {
+    padding: 0.2em;
+}
+
+.flash-error {
+    color: black;
+    background: red;
+    font-weight: bold;
+}
+
+.full-width {
+    width: 100%;
+}
+
 .text-center {
     text-align: center;
 }

templates/admin.html

@@ -12,15 +12,17 @@
     <div class="pure-g text-center">
         <div class="pure-u-1-24"></div>
         <div class="pure-u-22-24">
-            <table class="pure-table pure-table-striped">
+            <table class="pure-table pure-table-striped full-width">
                 <thead>
-                <th>Registration Code</th>
-                <th>Creation Time</th>
-                <th>Expiration Time</th>
-                <th>Usages</th>
-                <th>Max Usages</th>
-                <th>Registration Link</th>
-                <th>Expire</th>
+                <tr>
+                    <th>Registration Code</th>
+                    <th>Creation Time</th>
+                    <th>Expiration Time</th>
+                    <th>Usages</th>
+                    <th>Max Usages</th>
+                    <th>Registration Link</th>
+                    <th>Expire</th>
+                </tr>
                 </thead>
                 <tbody>
                 {% for registration_code in registration_codes %}
@@ -57,7 +59,7 @@
     <div class="pure-g text-center pad-top">
         <div class="pure-u-1-5"></div>
         <div class="pure-u-3-5">
-            <table class="pure-table pure-table-striped">
+            <table class="pure-table pure-table-striped full-width">
                 <thead>
                 <tr>
                     <th>Matrix ID</th>

templates/base.html

@@ -23,8 +23,8 @@
         {% block header %}{% endblock %}
     </header>
     <div class="pure-g text-center pad-bottom">
-        {% for message in get_flashed_messages() %}
-            <div class="flash pure-u-1">{{ message }}</div>
+        {% for category, message in get_flashed_messages(with_categories=True) %}
+            <div class="flash pure-u-1 flash-{{ category }}">{{ message }}</div>
         {% endfor %}
     </div>
     {% block content %}{% endblock %}

templates/register.html

@@ -3,7 +3,7 @@
 {% block header %}
     <div class="pure-g text-center">
         <div class="pure-u-1">
-            <h1>{% block title %}Register{% endblock %}</h1>
+            <h1>{% block title %}Registration{% endblock %}</h1>
         </div>
     </div>
 {% endblock %}