Simple application styling

5 years ago · 059e051596
5 changed files with 158 additions and 37 deletions
--- a/app.py
+++ b/app.py
@ -85,14 +85,16 @@ def is_safe_url(target):
@login_manager.user_loader
 def load_user(user_id):
    if user_id == "admin":
-        return User("admin", app.config.get("ADMIN_TOKEN"))
+        user = User("admin", app.config.get("ADMIN_TOKEN"))
+        g.user = user
+        return user
    else:
        return None


@app.route('/')
 def index():
-    return 'Hello World!'
+    return redirect('/register')


@app.route('/register', methods=('GET', 'POST'))
--- a/static/style.css
+++ b/static/style.css
@ -0,0 +1,105 @@
+nav {
+    overflow: hidden;
+    padding: 0px 0px;
+}
+
+nav h1 {
+    display: block;
+    float: left;
+}
+
+nav ul {
+    display: block;
+    float: right;
+}
+
+nav ul li {
+    display: block;
+    float: left;
+    padding-left: 1em;
+}
+
+#activeRegistrationCodes {
+    display: block;
+    width: 100%;
+}
+
+#activeRegistrationCodes table {
+    margin: 0 auto; /* or margin: 0 auto 0 auto */
+}
+
+#registeredUsers {
+    display: block;
+    width: 100%;
+}
+
+#registeredUsers table {
+    margin: 0 auto; /* or margin: 0 auto 0 auto */
+}
+
+table {
+    border-collapse: collapse;
+}
+
+table tr:nth-child(even) {
+    background: #CCC
+}
+
+table th, td {
+    padding-left: 1em;
+    padding-right: 1em;
+    text-align: center;
+    height: 2.5em;
+}
+
+table tbody td {
+    border: 1px solid black;
+}
+
+table tbody tr .borderless {
+    border: none;
+    background: white;
+}
+
+#register {
+    width: 100%;
+    text-align: center;
+}
+
+#register form {
+    display: inline-block;
+}
+
+form div .row {
+    display: table-cell;
+}
+
+label {
+    display: inline-block;
+    float: left;
+    clear: left;
+    width: 250px;
+    text-align: right;
+    padding-right: 1em;
+    vertical-align: middle;
+}
+
+input {
+    display: inline-block;
+    float: left;
+    vertical-align: middle;
+    width: auto;
+}
+
+.formSubmit input {
+    float: right;
+}
+
+.flashMessages {
+    padding: 1em;
+}
+
+.flash {
+    width: 100%;
+    text-align: center;
+}
--- a/templates/admin.html
+++ b/templates/admin.html
@ -28,7 +28,7 @@
                            {% if not registration_code.is_expired() and registration_code.has_available_uses() %}
                            <a href="/register?registrationCode={{ registration_code.code }}">link</a>
                            {% endif %}
-                        <td>
+                        <td class="borderless">
                            <form method="POST" action="/admin/expire_registration_code">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                <input type="hidden" name="registration_code" value="{{ registration_code.code }}"/>
@ -64,10 +64,18 @@
        </table>
    </div>
    <hr>
-    <form method="POST" action="/admin/add_registration_code">
-        {{ add_registration_code_form.csrf_token }}
-        {{ add_registration_code_form.expiration_time.label }} {{ add_registration_code_form.expiration_time() }}
-        {{ add_registration_code_form.max_usages.label }} {{ add_registration_code_form.max_usages(default="1", value="1") }}
-        <input type="submit" value="Add">
-    </form>
+    <div id="register">
+        <form method="POST" action="/admin/add_registration_code">
+            {{ add_registration_code_form.csrf_token }}
+            <div class="row">
+            {{ add_registration_code_form.expiration_time.label }} {{ add_registration_code_form.expiration_time() }}
+            </div>
+            <div class="row">
+            {{ add_registration_code_form.max_usages.label }} {{ add_registration_code_form.max_usages(default="1", value="1") }}
+            </div>
+            <div class="formSubmit">
+                <input type="submit" value="Add Token">
+            </div>
+        </form>
+    </div>
 {% endblock %}
--- a/templates/base.html
+++ b/templates/base.html
@ -1,24 +1,26 @@
 <!doctype html>
-<title>{% block title %}{% endblock %} - Matrix</title>
+<title>{% block title %}{% endblock %} - NullOctet Matrix</title>
 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-{#<nav>#}
-{#  <h1>Flaskr</h1>#}
-{#  <ul>#}
-{#    {% if g.user %}#}
-{#      <li><span>{{ g.user['username'] }}</span>#}
-{#      <li><a href="{{ url_for('auth.logout') }}">Log Out</a>#}
-{#    {% else %}#}
-{#      <li><a href="{{ url_for('auth.register') }}">Register</a>#}
-{#      <li><a href="{{ url_for('auth.login') }}">Log In</a>#}
-{#    {% endif %}#}
-{#  </ul>#}
-{#</nav>#}
+<nav>
+    <h1>NullOctet Matrix</h1>
+    <ul>
+        {% if g.user %}
+            <li><span>{{ g.user['username'] }}</span>
+            <li><a href="{{ url_for('admin_logout') }}">Log Out</a>
+                {% else %}
+            <li><a href="{{ url_for('registration') }}">Register</a>
+            <li><a href="{{ url_for('admin_login') }}">Log In</a>
+        {% endif %}
+    </ul>
+</nav>
 <section class="content">
-  <header>
-    {% block header %}{% endblock %}
-  </header>
-  {% for message in get_flashed_messages() %}
-    <div class="flash">{{ message }}</div>
-  {% endfor %}
-  {% block content %}{% endblock %}
+    <header>
+        {% block header %}{% endblock %}
+    </header>
+    <div class="flashMessages">
+        {% for message in get_flashed_messages() %}
+            <div class="flash">{{ message }}</div>
+        {% endfor %}
+    </div>
+    {% block content %}{% endblock %}
 </section>
--- a/templates/register.html
+++ b/templates/register.html
@ -5,12 +5,16 @@
 {% endblock %}

 {% block content %}
-    <form method="POST">
-        {{ form.csrf_token }}
-        {{ form.username.label }} {{ form.username(size=20) }}
-        {{ form.password.label }} {{ form.password() }}
-        {{ form.confirm.label }} {{ form.confirm() }}
-        {{ form.registration_code.label }} {{ form.registration_code() }}
-        <input type="submit" value="Register">
-    </form>
+    <div id="register">
+        <form method="POST">
+            {{ form.csrf_token }}
+            {{ form.username.label }} {{ form.username(size=20) }}
+            {{ form.password.label }} {{ form.password() }}
+            {{ form.confirm.label }} {{ form.confirm() }}
+            {{ form.registration_code.label }} {{ form.registration_code() }}
+            <div class="formSubmit">
+                <input type="submit" value="Register">
+            </div>
+        </form>
+    </div>
 {% endblock %}