jpk
/
homebench
1
0
Fork 0
Code Issues Pull Requests 17 Projects Releases Wiki Activity

PureCSS for cleaner ui

This commit is contained in:
Julian Knauer 2020-10-04 13:50:59 +02:00
parent 57fd2884ea
commit 1ab4408588
10 changed files with 337 additions and 3498 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -2,4 +2,6 @@ __pycache__/
instance/
venv/
.gitmodules
*.pyc

13
homebench/__init__.py
View File

@ -20,16 +20,19 @@ class NavBarRenderer(Renderer):
for item in node.items:
sub.append(self.visit(item))
return tags.div(*sub)
return tags.ul(*sub, cls='pure-menu-list')
def visit_View(self, node):
return tags.a(node.text, href=node.get_url(),
cls='f6 link dib dim mr3 mr4-ns')
return tags.li(tags.a(node.text, href=node.get_url(),
cls='pure-menu-link'),
cls='pure-menu-item {}'
.format('pure-menu-selected' if node.active else ''))
def visit_Subgroup(self, node):
# almost the same as visit_Navbar, but written a bit more concise
return tags.div(node.title,
*[self.visit(item) for item in node.items])
return tags.ul(node.title,
*[self.visit(item) for item in node.items],
cls='pure-menu-children')
def create_app(test_config=None):

118
homebench/parts/templates/create.html
View File

@ -9,66 +9,74 @@
{% endblock %}
{% block content %}
<form class="pa4 black-80" action="" method="post" novalidate>
{{ form.csrf_token }}
<div>
{{ form.name.label(class_="f6 b db mb2") }}
{{ form.name(size=32, class_="input-reset ba b--black-20 pa2 mb2 db w-100") }}
{% for error in form.name.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div>
{{ form.description.label(class_="f6 b db mb2") }}
{{ form.description(size=128, class_="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2") }}
{% for error in form.description.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div>
{{ form.value.label(class_="f6 b db mb2") }}
{{ form.value(class_="input-reset ba b--black-20 pa2 mb2 db w-100") }}
{% for error in form.value.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<form class="pure-form pure-form-stacked" action="" method="post" novalidate>
<fieldset>
{{ form.csrf_token }}
<div class="pure-g">
<div class="pure-u-5-24">
<div>
{{ form.name.label }}
{{ form.name(class_="pure-input-1") }}
{% for error in form.name.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
</div>
<div class="pure-u-5-24">
<div>
{{ form.value.label }}
{{ form.value(class_="pure-input-1") }}
{% for error in form.value.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
</div>
<div class="pure-u-14-24">
{{ form.description.label }}
{{ form.description(class_="pure-input-1", style="height:10em") }}
{% for error in form.description.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
</div>
<div>
Attribute editor becomes available after creation.
</div>
<div class="pure-g">
<div class="pure-u-5-24">
{{ form.parttype.label }}
{{ form.parttype(class_="pure-input-1") }} <a href="#" data-dialog="parttype" class="pure-button open-dialog">Add</a>
{% for error in form.parttype.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div>
{{ form.parttype.label(class_="f6 b db mb2") }}
{{ form.parttype(class_="ba b--black-20 pa2 mb2 db w-100") }} <a href="#" data-dialog="parttype" class="open-dialog f6 ph3 pv2 mb2 dib link white bg-blue">Add</a>
{% for error in form.parttype.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div>
{{ form.package.label(class_="f6 b db mb2") }}
{{ form.package(class_="ba b--black-20 pa2 mb2 db w-100") }} <a href="#" data-dialog="package" class="open-dialog f6 ph3 pv2 mb2 dib link white bg-blue">Add</a>
{% for error in form.package.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div class="pure-u-5-24">
{{ form.package.label }}
{{ form.package(class_="pure-input-1") }} <a href="#" data-dialog="package" class="pure-button open-dialog">Add</a>
{% for error in form.package.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div>
{{ form.stock.label(class_="f6 b db mb2") }}
{{ form.stock(class_="input-reset ba b--black-20 pa2 mb2 db w-10") }}
{% for error in form.stock.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div class="pure-u-5-24">
{{ form.stock.label }}
{{ form.stock(class_="pure-input-1") }}
{% for error in form.stock.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div>
{{ form.datasheet.label(class_="f6 b db mb2") }}
{{ form.datasheet(class_="ba b--black-20 pa2 mb2 db w-100") }} <a href="#" data-dialog="datasheet" class="open-dialog f6 ph3 pv2 mb2 dib link white bg-blue">Upload</a> <span>(Optional)</span>
{% for error in form.datasheet.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div class="pure-u-9-24">
{{ form.datasheet.label }}
{{ form.datasheet(class_="pure-input-1") }} <a href="#" data-dialog="datasheet" class="pure-button open-dialog">Upload</a> <span>(Optional)</span>
{% for error in form.datasheet.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
</div>
<div>{{ form.submit(class_="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib") }}</div>
<hr>
<div>{{ form.submit(class_="pure-button pure-button-primary") }}</div>
</fieldset>
</form>
<div id="parttype-dialog" class="modal-dialog" title="New Part Type" data-function="addNewParttype">

18
homebench/parts/templates/index.html
View File

@ -1,7 +1,7 @@
{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}Parts Overview{% endblock %}</h1>
{% block title %}Parts Overview{% endblock %}
{% endblock %}
{% block nav %}
@ -9,7 +9,7 @@
{% endblock %}
{%- block content %}
<table id="parts-catalog" class="display compact">
<table id="parts-catalog" class="pure-table pure-table-horizontal display compact">
<thead>
<tr>
<th></th>
@ -46,18 +46,18 @@
d.attributes.forEach(function(item, index) {
tbody +=
'<th style="text-align:left">'+ item.name +':</th>'+
'<td>'+ item.value + item.unit +'</td>'+
'<td style="text-align:right">'+ item.value + item.unit +'</td>'+
'</tr>'
});
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ tbody+ '</table>'
return '<table class="pure-table pure-table-bordered" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ tbody+ '</table>'
}
$(document).ready(function() {
var tableCatalog = $('#parts-catalog').DataTable({
ajax: '/parts/api/v1.0/catalog',
lengthMenu: [[10, 30, 50, -1], [10, 30, 50, "All"]],
pageLength: 30,
order: [[1, 'asc']],
lengthMenu: [[10, 25, 30, 50, -1], [10, 25, 30, 50, "All"]],
pageLength: 25,
order: [[2, 'asc']],
select: true,
stateSave: true,
columns: [
@ -113,6 +113,7 @@
},
{
data: 'attributes',
className: 'dt-body-center',
orderable: false,
render: function(data, type, row, meta) {
if ( type === 'display') {
@ -126,7 +127,8 @@
data: 'value'
},
{
data: 'stock'
data: 'stock',
className: 'dt-body-right'
},
]
});

192
homebench/parts/templates/update.html
View File

@ -15,100 +15,120 @@
{% endblock %}
{% block content %}
<form id="part-form" class="pa4 black-80" action="" method="post" novalidate>
{{ form.csrf_token }}
<div>
{{ form.name.label(class_="f6 b db mb2") }}
{{ form.name(size=32, class_="input-reset ba b--black-20 pa2 mb2 db w-100") }}
{% for error in form.name.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div>
{{ form.description.label(class_="f6 b db mb2") }}
{{ form.description(size=128, class_="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2") }}
{% for error in form.description.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div>
{{ form.value.label(class_="f6 b db mb2") }}
{{ form.value(class_="input-reset ba b--black-20 pa2 mb2 db w-100") }}
{% for error in form.value.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div id='attr-subform-container'>
<a id="attribute-add" class="f6 link dim ph3 pv2 mb2 dib white bg-blue" href="#">Add Attribute</a>
{% for subform in form.attributes %}
<div id="attr-{{ loop.index0 }}-form" class="attr-subform" data-index="{{ loop.index0 }}">
{{ subform }}
<a class="f6 link dim ph3 pv2 mb2 dib white bg-blue attribute-save">Update</a>
<a class="f6 link dim ph3 pv2 mb2 dib white bg-red attribute-remove">Remove</a>
<form id="part-form" class="pure-form pure-form-stacked" action="" method="post" novalidate>
<fieldset>
{{ form.csrf_token }}
<div class="pure-g">
<div class="pure-u-5-24">
<div>
{{ form.name.label }}
{{ form.name(class_="pure-input-1") }}
{% for error in form.name.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
</div>
<div class="pure-u-5-24">
<div>
{{ form.value.label }}
{{ form.value(class_="pure-input-1") }}
{% for error in form.value.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
</div>
<div class="pure-u-14-24">
{{ form.description.label }}
{{ form.description(class_="pure-input-1", style="height:10em") }}
{% for error in form.description.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
</div>
{% endfor %}
<div id="attr-_-form" class="is-hidden" data-index="_">
<table id="attributes-_">
<tbody>
<tr>
<th><label for="attributes-_-name">Name</label></th>
<td><input id="attributes-_-name" name="attributes-_-name" required="" type="text" value=""></td>
</tr>
<tr>
<th><label for="attributes-_-value">Value</label></th>
<td><input id="attributes-_-value" name="attributes-_-value" required="" type="text" value=""></td>
</tr>
<tr>
<th><label for="attributes-_-unit">Unit</label></th>
<td><input id="attributes-_-unit" name="attributes-_-unit" type="text" value=""></td>
</tr>
</tbody>
</table>
<div class="pure-g">
<div class="pure-u-5-24">
{{ form.parttype.label }}
{{ form.parttype(class_="pure-input-1") }} <a href="#" data-dialog="parttype" class="pure-button open-dialog">Add</a>
{% for error in form.parttype.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<a class="f6 link dim ph3 pv2 mb2 dib white bg-green attribute-save">Save</a>
<a class="f6 link dim ph3 pv2 mb2 dib white bg-red attribute-remove is-hidden">Remove</a>
<div class="pure-u-5-24">
{{ form.package.label }}
{{ form.package(class_="pure-input-1") }} <a href="#" data-dialog="package" class="pure-button open-dialog">Add</a>
{% for error in form.package.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div class="pure-u-5-24">
{{ form.stock.label }}
{{ form.stock(class_="pure-input-1") }}
{% for error in form.stock.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div class="pure-u-9-24">
{{ form.datasheet.label }}
{{ form.datasheet(class_="pure-input-1") }} <a href="#" data-dialog="datasheet" class="pure-button open-dialog">Upload</a> <span>(Optional)</span>
{% for error in form.datasheet.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
</div>
</div>
<div>
{{ form.parttype.label(class_="f6 b db mb2") }}
{{ form.parttype(class_="ba b--black-20 pa2 mb2 db w-100") }} <a href="#" data-dialog="parttype" class="open-dialog f6 ph3 pv2 mb2 dib link white bg-blue">Add</a>
{% for error in form.parttype.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div>
{{ form.package.label(class_="f6 b db mb2") }}
{{ form.package(class_="ba b--black-20 pa2 mb2 db w-100") }} <a href="#" data-dialog="package" class="open-dialog f6 ph3 pv2 mb2 dib link white bg-blue">Add</a>
{% for error in form.package.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<hr>
<div id='attr-subform-container' class="">
<a id="attribute-add" class="pure-button" href="#">Add Attribute</a>
{% for subform in form.attributes %}
<div id="attr-{{ loop.index0 }}-form" class="attr-subform pure-g" data-index="{{ loop.index0 }}">
<div class="pure-u-5-24">
{{ subform._fields['name'].label }}
{{ subform._fields['name'](class_="pure-input-1") }}
</div>
<div class="pure-u-5-24">
{{ subform.value.label }}
{{ subform.value(class_="pure-input-1") }}
</div>
<div class="pure-u-5-24">
{{ subform.unit.label }}
{{ subform.unit(class_="pure-input-1") }}
</div>
</div>
<a class="pure-button button-secondary attribute-save">Update</a>
<a class="pure-button button-warning attribute-remove">Remove</a>
{% endfor %}
<div>
{{ form.stock.label(class_="f6 b db mb2") }}
{{ form.stock(class_="input-reset ba b--black-20 pa2 mb2 db w-10") }}
{% for error in form.stock.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div id="attr-_-form" class="is-hidden" data-index="_">
<div id="attributes-_" class="pure-g">
<div class="pure-u-5-24">
<label for="attributes-_-name">Name</label>
<input id="attributes-_-name" name="attributes-_-name" class="pure-input-1" required="" type="text" value="">
</div>
<div class="pure-u-5-24">
<label for="attributes-_-value">Value</label>
<input id="attributes-_-value" name="attributes-_-value" class="pure-input-1" required="" type="text" value="">
</div>
<div class="pure-u-5-24">
<label for="attributes-_-unit">Unit</label>
<input id="attributes-_-unit" name="attributes-_-unit" class="pure-input-1" type="text" value="">
</div>
</div>
<a class="pure-button button-secondary attribute-save">Save</a>
<a class="pure-button button-warning attribute-remove is-hidden">Remove</a>
</div>
</div>
<div>
{{ form.datasheet.label(class_="f6 b db mb2") }}
{{ form.datasheet(class_="ba b--black-20 pa2 mb2 db w-100") }} <a href="#" data-dialog="datasheet" class="open-dialog f6 ph3 pv2 mb2 dib link white bg-blue">Upload</a> <span>(Optional)</span>
{% for error in form.datasheet.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div>{{ form.submit(class_="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib") }}</div>
<hr>
<div>{{ form.submit(class_="pure-button pure-button-primary") }}</div>
</fieldset>
</form>
<div id="parttype-dialog" class="modal-dialog" title="New Part Type" data-function="addNewParttype">
<form>
<form class="pure-form">
<fieldset>
<label for="parttype-name">Type name</label>
<input type="text" name="type" id="parttype-name" class="text ui-widget-content ui-corner-all input-reset ba b--black-20 pa2 mb2 db w-100">
@ -118,7 +138,7 @@
</div>
<div id="package-dialog" class="modal-dialog" title="New Package" data-function="addNewPackage">
<form>
<form class="pure-form">
<fieldset>
<label for="package-name">Package name</label>
<input type="text" name="package" id="package-name" class="text ui-widget-content ui-corner-all input-reset ba b--black-20 pa2 mb2 db w-100">
@ -128,7 +148,7 @@
</div>
<div id="datasheet-dialog" class="modal-dialog" title="Upload Datasheet" data-function="addNewDatasheet">
<form>
<form class="pure-form">
<fieldset>
<label for="datasheet-name">Datasheet</label>
<input type="file" name="datasheet" id="datasheet-name" class="ui-widget-content ui-corner-all input-reset ba b--black-20 pa2 mb2 db w-100">

11
homebench/static/pure-min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

119
homebench/static/style.css
View File

@ -1,13 +1,81 @@
.dialog {
position:absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
color: Black;
border: 1px solid #eee;
background: #fff;
padding: 2em;
@media (min-width: 48em) {
#layout {
padding-left: 150px;
left: 0;
}
#menu {
left: 150px;
}
.header, .content {
padding-left: 2em;
padding-right: 2em;
}
}
#layout {
position: relative;
}
#menu {
margin-left: -150px;
width: 150px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1000;
background: #191818;
overflow-y: auto;
}
#menu .pure-menu, #menu .pure-menu ul {
border: none;
background: transparent;
}
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
.pure-menu-disabled, .pure-menu-heading, .pure-menu-link {
padding: .5em 1em;
}
.pure-menu-heading {
text-transform: uppercase;
color: #565d64;
}
.pure-menu-heading, .pure-menu-link {
display: block;
text-decoration: none;
white-space: nowrap;
}
#menu .pure-menu-selected, #menu .pure-menu-heading {
background: #1f8dd6;
}
#main {
display: block;
}
.header {
margin: 0;
color: #333;
text-align: center;
padding: 0.5em 2em 0;
border-bottom: 1px solid #eee;
}
.content {
margin: 0 auto;
padding: 0 1em;
max-width: 1280px;
margin-bottom: 50px;
}
.is-hidden {
@ -38,3 +106,36 @@ fieldset {
padding: 0.3em;
}
/* END Dialog */
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 2px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65);
/* this is a green */
}
.button-error {
background: rgb(202, 60, 60);
/* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20);
/* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221);
/* this is a light blue */
}
table.dataTable {
font-size: small;
}

3315
homebench/static/tachyons.css
View File

File diff suppressed because it is too large Load Diff

3
homebench/static/tachyons.min.css vendored
View File

File diff suppressed because one or more lines are too long

44
homebench/templates/base.html
View File

@ -2,9 +2,9 @@
<html>
<head>
<meta charset="utf-8" />
<title>{% block title %}{% endblock %} - Homebench</title>
<title>{%- block title -%}{%- endblock -%} - Homebench</title>
<link rel="stylesheet" href="{{ url_for('static', filename='tachyons.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='pure-min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='DataTables/datatables.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='ui/jquery-ui.min.css') }}">
@ -15,28 +15,38 @@
<script type="text/javascript" src="{{ url_for('static', filename='ui/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('parts.static', filename='parts.js') }}"></script>
{% block script %}{% endblock %}
{%- block script %}{% endblock -%}
<body>
<nav class="flex justify-between w-100 bb bg-white-10 bg-washed-blue fixed">
<h1 class="f5 f4-ns fw6 mid-gray">Homebench</h1>
<div class="flex-grow pa3 flex items-center">
{% block nav %}{% endblock %}
<div id="layout">
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="{{ url_for('parts.index') }}">Homebench</a>
{%- block nav %}{% endblock -%}
</div>
</nav>
</div>
</nav>
<section class="fl w-100 pa3 mt3">
<header class="f6 gray fw2 ttu">
{% block header %}{% endblock %}
</header>
<div id="main">
<div class="header">
<h1>{%- block header %}{% endblock -%}</h1>
</div>
{% for message in get_flashed_messages() %}
<div class="flex items-center justify-center pa4 bg-lightest-blue navy">{{ message }}</div>
{% endfor %}
<div class="messages">
{%- for message in get_flashed_messages() -%}
<div class="">{{ message }}</div>
{%- endfor -%}
</div>
{% block content %}{% endblock %}
</section>
<div class="content">
{%- block content %}{% endblock -%}
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
});