From 80237a2b764401a9ad6809ae727d6bad6d7dc30b Mon Sep 17 00:00:00 2001
From: Benjamin Bertrand <benjamin.bertrand@esss.se>
Date: Tue, 8 Aug 2017 22:57:30 +0200
Subject: [PATCH] Update templates for bootstrap 4 beta
---
app/templates/_helpers.html | 4 +--
app/templates/base.html | 57 ++++++++++++++++++-------------------
app/templates/index.html | 5 ++--
app/templates/qrcodes.html | 11 +++----
4 files changed, 37 insertions(+), 40 deletions(-)
diff --git a/app/templates/_helpers.html b/app/templates/_helpers.html
index efe2ae6..006674c 100644
--- a/app/templates/_helpers.html
+++ b/app/templates/_helpers.html
@@ -1,3 +1,3 @@
-{% macro nav_li(active) -%}
-<li {% if active %}class="active"{% endif %}>
+{% macro nav_a(active) -%}
+<a class="nav-item nav-link{% if active %} active{% endif %}"
{%- endmacro %}
diff --git a/app/templates/base.html b/app/templates/base.html
index 88e8c01..fff361b 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -1,6 +1,6 @@
{%- extends "bootstrap/base.html" %}
{% import "bootstrap/utils.html" as utils %}
-{% from "_helpers.html" import nav_li %}
+{% from "_helpers.html" import nav_a %}
{% block styles %}
{{super()}}
@@ -12,41 +12,38 @@
{% block navbar %}
<!-- Fixed navbar -->
- <div class="navbar navbar-default navbar-fixed-top" role="navigation">
- <div class="container">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <!--img class="navbar-brand" src="../../static/logo.png"-->
- <a class="navbar-brand" href="{{ url_for('main.index') }}">Inventory</a>
- </div>
- <div class="navbar-collapse collapse">
- <ul class="nav navbar-nav">
+ <div class="navbar fixed-top navbar-expand-lg navbar-light bg-light" role="navigation">
+ <a class="navbar-brand" href="{{ url_for('main.index') }}">Inventory</a>
+ <button class="navbar-toggler" type="button" data-toggle="collapse"
+ data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+ aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <div class="navbar-nav mr-auto">
{% set path = request.path %}
- {{ nav_li(path in ("/", "/index", "/index/")) }}<a href="{{ url_for('main.index') }}">Index</a></li>
- {{ nav_li(path == "/qrcodes") }}<a href="{{ url_for('main.qrcodes') }}">QR Codes</a></li>
+ {{ nav_a(path in ("/", "/index", "/index/")) }} href="{{ url_for('main.index') }}">Index</a>
+ {{ nav_a(path == "/qrcodes") }} href="{{ url_for('main.qrcodes') }}">QR Codes</a>
{% if current_user.is_authenticated and current_user.is_admin %}
- <li><a href="{{ url_for('admin.index') }}">Admin</a></li>
+ <a class="nav-item nav-link" href="{{ url_for('admin.index') }}">Admin</a>
{% endif %}
- </ul>
- <ul class="nav navbar-nav navbar-right">
+ </div>
+ <div class="navbar-nav">
{% if current_user.is_authenticated %}
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{current_user}} <span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="{{ url_for('users.profile') }}">Profile</a></li>
- <li><a href="{{ url_for('users.logout') }}">Logout</a></li>
- </ul>
- </li>
+ <div class="dropdown">
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ {{current_user}}
+ </a>
+ <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+ <a class="dropdown-item" href="{{ url_for('users.profile') }}">Profile</a>
+ <a class="dropdown-item" href="{{ url_for('users.logout') }}">Logout</a>
+ </div>
+ </div>
{% endif %}
{% block navbar_right %}{% endblock %}
- </ul>
- </div><!--/.nav-collapse -->
- </div>
+ </div>
+ </div>
</div>
{% endblock %}
diff --git a/app/templates/index.html b/app/templates/index.html
index f91e195..62cff4d 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,11 +1,10 @@
{%- extends "base.html" %}
-{% import "bootstrap/wtf.html" as wtf %}
{% block main %}
<div class="jumbotron">
- <h1>Welcome to the ICS Inventory!</h1>
+ <h1 class="display-4">Welcome to the ICS Inventory!</h1>
</div>
- <table id="items_table" class="table table-bordered table-condensed">
+ <table id="items_table" class="table table-bordered table-hover table-sm">
<thead>
<tr>
<th>Id</th>
diff --git a/app/templates/qrcodes.html b/app/templates/qrcodes.html
index de29285..be7bb9f 100644
--- a/app/templates/qrcodes.html
+++ b/app/templates/qrcodes.html
@@ -1,5 +1,4 @@
{%- extends "base.html" %}
-{% import "bootstrap/wtf.html" as wtf %}
{% block title %}QR Codes{% endblock %}
@@ -7,12 +6,14 @@
{% for name, images in codes.items() %}
<div class="row">
<h2>{{ name }} codes</h2>
+ </div>
+ <div class="row">
{% for image in images %}
<div class="col-md-3">
- <div class="thumbnail">
- <img src="data:image/png;base64,{{ image.data }}"/>
- <div class="caption">
- <h3>{{ image.name }}</h3>
+ <div class="card">
+ <img class="card-img-top" src="data:image/png;base64,{{ image.data }}">
+ <div class="card-body">
+ <h4 class="card-title">{{ image.name }}</h4>
</div>
</div>
</div>
--
GitLab