Prettify frontend with a CSS template

code/app/routes.py

@@ -46,3 +46,18 @@ def admin():
 @login_required
 def nuke():
     return render_template("nuked.html", title="NUKE THE SYSTEM!")
+
+
+@app.route("/data")
+def data():
+    return render_template("data.html", title="Data")
+
+
+@app.route("/tables")
+def tables():
+    return render_template("data.html", title="Data")
+
+
+@app.route("/plots")
+def plots():
+    return render_template("data.html", title="Data")

code/app/templates/base.html

@@ -1,40 +1,46 @@
 {% extends 'bootstrap/base.html' %}
 
 {% block title %}
-    IGDB
+IGDB
+{% endblock %}
+
+{% block styles %}
+<link rel="stylesheet"
+      href="{{url_for('.static', filename='bootstrap.min.css')}}">
 {% endblock %}
 
 {% block navbar %}
-    <nav class="navbar navbar-default">
-        <div class="container">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <a class="navbar-brand" href="{{ url_for('index') }}">IGDB</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
     </button>
-                <a class="navbar-brand" href="{{ url_for('index') }}">Microblog</a>
-            </div>
-            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                <ul class="nav navbar-nav">
-                    <li><a href="{{ url_for('index') }}">Home</a></li>
-                </ul>
-                <ul class="nav navbar-nav navbar-right">
+
+    <div class="collapse navbar-collapse" id="navbarColor01">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+                <a class="nav-link" href="{{ url_for('index') }}">Home <span class="sr-only">(current)</span></a>
+            </li>
             {% if current_user.is_anonymous %}
-                    <li><a href="{{ url_for('login') }}">Login</a></li>
+            <li class="nav-link"><a href="{{ url_for('data') }}">Data</a></li>
             {% else %}
-                    <li><a href="{{ url_for('admin') }}">Administration</a></li>
-                    <li><a href="{{ url_for('logout') }}">Logout</a></li>
+            <li class="nav-link"><a href="{{ url_for('data') }}">Data</a></li>
+            <li class="nav-link"><a href="{{ url_for('admin') }}">Administration</a></li>
+            {% endif %}
+        </ul>
+        <ul class="navbar-nav navbar-right">
+            {% if current_user.is_anonymous %}
+            <li class="nav-link"><a href="{{ url_for('login') }}">Login</a></li>
+            {% else %}
+            <li class="nav-item"><a href="{{ url_for('logout') }}">Logout</a></li>
             {% endif %}
         </ul>
     </div>
-        </div>
-    </nav>
+</nav>
 {% endblock %}
 
 {% block content %}
-    <div class="container">
+<div class="container">
     {% with messages = get_flashed_messages() %}
     {% if messages %}
     {% for message in messages %}
@@ -45,5 +51,5 @@
 
     {# application content needs to be provided in the app_content block #}
     {% block app_content %}{% endblock %}
-    </div>
+</div>
 {% endblock %}

code/app/templates/data.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+    <h1>Hey, {{ current_user.username }}!</h1>
+    Wanna check out some cool data?
+    <li><a href="{{ url_for('tables') }}"></a></li>
+    <li><a href="{{ url_for('plots') }}"></a></li>
+{% endblock %}

code/app/templates/index.html

@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 
 {% block content %}
+<div class="jumbotron">
 <h1 id="igdb-internation-glacier-database">IGDB: Internation Glacier Database</h1>
 <p>The IGDB is a database, that uses data from the <a href="http://dx.doi.org/10.5904/wgms-fog-2018-11">WGMS</a> to illustrate the consequences of climate change.</p>
+</div>
 {% endblock %}