1
0
forked from moepman/bk-dss

Make more use of bootstrap.

This commit is contained in:
Markus 2016-03-20 16:10:00 +01:00
parent 71bfe671ed
commit 365b313544
8 changed files with 82 additions and 147 deletions

View File

@ -1,93 +1,14 @@
html {
box-sizing: border-box;
}
*, ::before, ::after {
box-sizing: inherit;
}
body { body {
margin: 10px auto; padding-top: 20px;
max-width: 60em; padding-bottom: 20px;
font-family: sans-serif;
color: #111111;
} }
header, nav, nav a, main, article, section, aside, footer { .navbar {
border: 1px solid; margin-bottom: 20px;
padding: 10px;
margin: 10px;
} }
header { .form-login {
background: #F7F7F7; max-width: 330px;
border-color: #DDDDDD; padding: 15px;
} margin: 0 auto;
header img {
width: 13em;
height: 5em;
margin-right: 50px;
float: left;
}
nav {
font-size: 0.91em;
float: left;
width: 15em;
padding: 0;
margin-top: 0;
background: #E6E6E6;
border-color: #CCCCCC;
}
nav ul {
padding:0;
}
nav li {
list-style: none;
margin: 0;
padding: 0.5em;
}
nav a {
display: block;
padding: 0.2em 10px;
font-weight: bold;
text-decoration: none;
background-color: #e7c157;
color: #333;
}
nav ul a:hover,
nav ul a:active {
color: #fffbf0;
background-color: #dfac20;;
}
main {
background: #D5D5D5;
border-color: #BBBBBB;
margin-left: 15em;
min-width: 16em;
}
section {
background: #F1F3F4;
border-color: slateblue;
}
footer {
background: #C4C4C4;
border-color: #AAAAAA;
clear: both;
}
footer a, footer p {
margin: 0;
}
* {
box-shadow: none!important;
} }

35
templates/_base.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/static/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="/static/css/style.css" type="text/css" rel="stylesheet">
<title>Binary Kitchen: Directory Self-Service</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- TODO scale and show logo
<img src="static/img/binary_kitchen.svg" alt="Binary Kitchen">
-->
<a class="navbar-brand" href="/">Directory Self-Service</a>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% for ni in nav %}
<li{%- if request.path == url_for(ni) %} class="active"{% endif %}><a href="{{ url_for(ni) }}">{{ ni|capitalize }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
<footer>
<p>Binary Kitchen: Directory Self-Service, <a href="https://github.com/moepman/bk-diss">source code</a> under MIT license, powered by <a href="http://flask.pocoo.org/">Flask</a> and <a href="http://getbootstrap.com/">Bootstrap</a></p>
</footer>
</div>
</body>
</html>

View File

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="static/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="static/css/style.css" type="text/css" rel="stylesheet">
<title>Binary Kitchen: Directory Self-Service</title>
</head>
<body>
<header>
<img src="static/img/binary_kitchen.svg" alt="Binary Kitchen">
<h1>Directory Self-Service</h1>
</header>
<nav>
<ul>
{% for ni in nav %}
<li><a href="{{ url_for(ni) }}">{{ ni|capitalize }}</a></li>
{% endfor %}
</ul>
</nav>
<main>
{% block content %}
{% endblock %}
</main>
<footer>
<p>Binary Kitchen: Directory Self-Service, <a href="https://github.com/moepman/bk-diss">source code</a> under MIT license, powered by <a href="http://flask.pocoo.org/">Flask</a> and <a href="http://getbootstrap.com/">Bootstrap</a></p>
</footer>
</body>
</html>

View File

@ -1,6 +1,9 @@
{% from "_helpers.html" import render_field %} {% from "_helpers.html" import render_field %}
{% extends "base.html" %} {% extends "_base.html" %}
{% block content %} {% block content %}
<div class="page-header">
<h1>Create user</h1>
</div>
<form method="POST"> <form method="POST">
{{ form.hidden_tag() }} {{ form.hidden_tag() }}
{{ render_field(form.user) }} {{ render_field(form.user) }}
@ -9,6 +12,6 @@
{{ render_field(form.gn) }} {{ render_field(form.gn) }}
{{ render_field(form.pwd1) }} {{ render_field(form.pwd1) }}
{{ render_field(form.pwd2) }} {{ render_field(form.pwd2) }}
<div class="form-group">{{ form.submit(class_="btn btn-default") }}</div> <div class="form-group">{{ form.submit(class_="btn btn-primary") }}</div>
</form> </form>
{% endblock %} {% endblock %}

View File

@ -1,11 +1,14 @@
{% from "_helpers.html" import render_field %} {% from "_helpers.html" import render_field %}
{% extends "base.html" %} {% extends "_base.html" %}
{% block content %} {% block content %}
<div class="page-header">
<h1>Edit</h1>
</div>
<form method="POST"> <form method="POST">
{{ form.hidden_tag() }} {{ form.hidden_tag() }}
{{ render_field(form.user) }} {{ render_field(form.user) }}
{{ render_field(form.pwd1) }} {{ render_field(form.pwd1) }}
{{ render_field(form.pwd2) }} {{ render_field(form.pwd2) }}
<div class="form-group">{{ form.submit(class_="btn btn-default") }}</div> <div class="form-group">{{ form.submit(class_="btn btn-primary") }}</div>
</form> </form>
{% endblock %} {% endblock %}

View File

@ -1,4 +1,6 @@
{% extends "base.html" %} {% extends "_base.html" %}
{% block content %} {% block content %}
<div class="alert alert-danger" role="alert">
<p>Error: {{ message }}</p> <p>Error: {{ message }}</p>
</div>
{% endblock %} {% endblock %}

View File

@ -1,4 +1,4 @@
{% extends "base.html" %} {% extends "_base.html" %}
{% block content %} {% block content %}
<p>Hello, World!</p> <p>Hello, World!</p>
{% endblock %} {% endblock %}

View File

@ -1,10 +1,10 @@
{% from "_helpers.html" import render_field %} {% from "_helpers.html" import render_field %}
{% extends "base.html" %} {% extends "_base.html" %}
{% block content %} {% block content %}
<form method="POST"> <form class="form-login" method="POST">
{{ form.hidden_tag() }} {{ form.hidden_tag() }}
{{ render_field(form.user) }} {{ render_field(form.user) }}
{{ render_field(form.pswd) }} {{ render_field(form.pswd) }}
<div class="form-group">{{ form.submit(class_="btn btn-default") }}</div> <div class="form-group">{{ form.submit(class_="btn btn-primary") }}</div>
</form> </form>
{% endblock %} {% endblock %}