From 60e6f7c834d3e60545bfd3181b5a585eeb24e4da Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@authentise.com>
Date: Thu, 9 Jun 2016 01:19:03 -0600
Subject: [PATCH] Add a navbar to the main page after login
I'll probably use it. Fairly certain. It looks nice either way.
This breaks up the main layout to 'things with the navbar' and 'things
without' and uses inheritance to make it all work out nicely. I also
added my first static asset which assumes nginx is properly configured
to serve up the file rather than doing it through vanth
---
static/css/vanth.css | 4 ++++
templates/base.html | 24 ++++++++++++++++++++++++
templates/index.html | 2 +-
templates/layout.html | 29 ++++++++---------------------
templates/login.html | 2 +-
templates/navbar.html | 31 +++++++++++++++++++++++++++++++
6 files changed, 69 insertions(+), 23 deletions(-)
create mode 100644 static/css/vanth.css
create mode 100644 templates/base.html
create mode 100644 templates/navbar.html
diff --git a/static/css/vanth.css b/static/css/vanth.css
new file mode 100644
index 0000000..25ab1cb
--- /dev/null
+++ b/static/css/vanth.css
@@ -0,0 +1,4 @@
+.main-content {
+ position: relative;
+ top: 50px;
+}
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..21db34e
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,24 @@
+<html>
+<head>
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
+
+<link rel="stylesheet" href="/static/css/vanth.css">
+
+</head>
+<body>
+<div class="container">
+ {% block body %}
+ default stuff
+ {% endblock %}
+</div>
+<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+<!-- Latest compiled and minified JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
+
+</body>
+</html>
diff --git a/templates/index.html b/templates/index.html
index ba1cd31..1e04f79 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,5 @@
{% extends 'layout.html' %}
-{% block body %}
+{% block main_content %}
<h1>Hello {{ current_user.name }} from Vanth</h1>
<form action="/logout/" method="POST">
<input type="submit">Log out</input>
diff --git a/templates/layout.html b/templates/layout.html
index 5d9d9ba..b4b242b 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -1,22 +1,9 @@
-<html>
-<head>
-<!-- Latest compiled and minified CSS -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
-
-<!-- Optional theme -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
-
-</head>
-<body>
-<div class="container">
- {% block body %}
- default stuff
- {% endblock %}
+{% extends 'base.html' %}
+{% block body %}
+{% include 'navbar.html' %}
+<div class="main-content">
+{% block main_content %}
+Main content goes here
+{% endblock %}
</div>
-<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-<!-- Latest compiled and minified JavaScript -->
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
-
-</body>
-</html>
+{% endblock %}
diff --git a/templates/login.html b/templates/login.html
index e845b94..03f949b 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,4 +1,4 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
{% block body %}
<h1>Welcome to Vanth</h1>
<h2>Please log in</h2>
diff --git a/templates/navbar.html b/templates/navbar.html
new file mode 100644
index 0000000..f37b7f4
--- /dev/null
+++ b/templates/navbar.html
@@ -0,0 +1,31 @@
+<nav class="navbar navbar-inverse navbar-fixed-top">
+ <div class="container-fluid">
+ <!-- Brand and toggle get grouped for better mobile display -->
+ <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>
+ </button>
+ <a class="navbar-brand" href="#">Vanth</a>
+ </div>
+
+ <!-- Collect the nav links, forms, and other content for toggling -->
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- /.navbar-collapse -->
+ </div><!-- /.container-fluid -->
+</nav>