Include header in page, put content in container for margins

This commit is contained in:
Philipp Klaus 2016-12-19 00:15:27 +01:00
parent 1c359ba77b
commit cb3cc07389
3 changed files with 35 additions and 11 deletions

View File

@ -51,7 +51,9 @@ def serve_static(filename):
def labeldesigner():
fonts = sorted(list(FONTS.keys()))
label_sizes = LABEL_SIZES
return {'title': 'Labeldesigner', 'message': '', 'fonts': fonts, 'label_sizes': label_sizes}
title = 'Label Designer'
page_headline = 'Brother QL Label Designer'
return {'title': title, 'page_headline': page_headline, 'message': '', 'fonts': fonts, 'label_sizes': label_sizes}
def get_label_context(request):
""" might raise LookupError() """

View File

@ -12,8 +12,25 @@
<title>{% block page_title %}{% endblock %} | Brother QL</title>
</head>
<body>
<h1>{% block page_headline %}{% endblock %}</h1>
{% block content %}{% endblock %}
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/">{{page_headline}}</a>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
{% block jumbotron %}{% endblock %}
</div>
</div>
<div class="container">{% block content %}{% endblock %}</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="/static/js/jquery.min.js"></script>

View File

@ -2,6 +2,12 @@
{% block page_title %}{{ title }}{% endblock %}
{% block jumbotron %}
<h1>{{page_headline}}</h1>
<p>Design your label and print it...</p>
<!--<p><a class="btn btn-primary btn-lg" href="#" role="button">History of printed labels</a></p>-->
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-4">
@ -10,9 +16,7 @@
<select class="form-control" id="labelSize" onChange="preview()">
{% for label_size in label_sizes %}<option value="{{label_size[0]}}">{{label_size[1]}}</option>{% endfor %}
</select>
<label for="labelText">Label Text:</label>
<textarea rows="4" id="labelText" class="form-control" onChange="preview()" onInput="preview()"></textarea>
<label for="fontFamily">Font Selection:</label>
<label for="fontFamily">Font Selection:</label>
<select class="form-control" id="fontFamily" onChange="preview()">
{% for font in fonts %}<option>{{font}}</option> {% endfor %}
</select>
@ -20,6 +24,12 @@
<input id="fontSize" type="text" name="quant[2]" class="form-control input-number" value="70" min="1" max="120" onChange="preview()">
</fieldset>
</div>
<div class="col-md-4">
<fieldset class="form-group">
<label for="labelText">Label Text:</label>
<textarea rows="7" id="labelText" class="form-control" onChange="preview()" onInput="preview()"></textarea>
</fieldset>
</div>
<div class="col-md-4">
<fieldset class="form-group">
<label for="previewImg">Label Preview:</label>
@ -30,11 +40,6 @@
</div>
{% endblock %}
{% block page_headline %}
{{message}}
{% endblock %}
{% block javascript %}
var text = $('#labelText');