MightyPork/rocket-inv
1
0
Fork 0
Code Issues 9 Pull Requests Releases Wiki Activity

add index page with a cards list

Browse Source
This commit is contained in:
MightyPork
2019-12-30 09:02:08 +01:00
parent 8e5185f643
commit ed65215723
8 changed files with 199 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/_fields.html.tera
+33
View File
@@ -0,0 +1,33 @@
{%- for field in fields %}
<!-- {{ field.key }} -->
<div class="Row">
{%- if field.kind == "string" -%}
{{ form::text(field=field) }}
{%- elif field.kind == "text" -%}
{{ form::longtext(field=field) }}
{%- elif field.kind == "number" -%}
{{ form::number(field=field) }}
{%- elif field.kind == "bool" -%}
{{ form::checkbox(field=field) }}
{%- elif field.kind == "select" -%}
{{ form::select(field=field) }}
{%- elif field.kind == "free_select" -%}
{{ form::free_select(field=field) }}
{%- elif field.kind == "tags" -%}
{{ form::tags(field=field) }}
{%- elif field.kind == "free_tags" -%}
{{ form::free_tags(field=field) }}
{%- else -%}
TODO {{ field.key }}
{%- endif -%}
</div>
{%- endfor %}
templates/form_macros.html.tera → templates/_form_macros.html.tera
View File
templates/layout.html.tera → templates/_layout.html.tera
+5 -2
View File
@@ -2,12 +2,15 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock title %}</title>
<title>{% block title %}{% endblock title %} &bull; Inventory</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="taggle.css">
<script src="taggle.min.js"></script>
</head>
<body>
{% block content %}{% endblock content %}
<nav class="top-nav">
{% block nav %}{% endblock %}
</nav>
{% block content %}{% endblock %}
</body>
</html>
templates/add.html.tera
+22
View File
@@ -0,0 +1,22 @@
{% extends "_layout" %}
{% import "_form_macros" as form %}
{% block title -%}
Add Record
{%- endblock %}
{% block nav -%}
<a href="/">Index</a>
{%- endblock %}
{% block content -%}
<form action="/add" method="POST" class="Form">
<div class="Row indented">
<h1>New Record</h1>
</div>
{% include "_fields" %}
<div class="Row indented">
<button type="submit">Add</button>
</div>
</form>
{%- endblock %}
templates/index.html.tera
+37 -46
View File
@@ -1,50 +1,41 @@
{% extends "layout" %}
{% import "form_macros" as form %}
{% extends "_layout" %}
{% import "_form_macros" as form %}
{% block title -%}
Form
{%- endblock title %}
Inventory
{%- endblock %}
{% block nav -%}
<a href="/add">Add</a>
{%- endblock %}
{% block content -%}
<form action="/add" method="POST" class="Form">
<div class="Row indented">
<h1>New Record</h1>
</div>
{%- for field in fields %}
<!-- {{ field.key }} -->
<div class="Row">
{%- if field.kind == "string" -%}
{{ form::text(field=field) }}
{%- elif field.kind == "text" -%}
{{ form::longtext(field=field) }}
{%- elif field.kind == "number" -%}
{{ form::number(field=field) }}
{%- elif field.kind == "bool" -%}
{{ form::checkbox(field=field) }}
{%- elif field.kind == "select" -%}
{{ form::select(field=field) }}
{%- elif field.kind == "free_select" -%}
{{ form::free_select(field=field) }}
{%- elif field.kind == "tags" -%}
{{ form::tags(field=field) }}
{%- elif field.kind == "free_tags" -%}
{{ form::free_tags(field=field) }}
{%- else -%}
{{ field.key }}
{%- endif -%}
</div>
{%- endfor %}
<div class="Row indented">
<button type="submit">Add</button>
</div>
</form>
{%- endblock content %}
<table class="cards-table">
<thead>
<tr>
{%- for field in fields %}
<th>{{ field.label }}</th>
{%- endfor %}
</tr>
</thead>
<tbody>
{%- for card in cards %}
<tr>
{%- for field in card.fields %}
<td>
{%- if field.kind == "bool" -%}
{% if field.checked %}
✔
{% else %}
✘
{% endif %}
{%- else -%}
{{ field.value }}
{%- endif -%}
</td>
{%- endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{%- endblock %}
templates/static/style.css
+43
View File
@@ -12,6 +12,26 @@ html, textarea, select {
margin: 0 auto;
}
nav.top-nav {
margin: 0 auto;
margin-bottom: .5rem;
width: 900px;
border-bottom: 1px solid silver;
}
nav.top-nav a {
display: inline-block;
padding: .75rem;
color: gray;
text-decoration: none;
}
nav.top-nav a:hover {
color: black;
text-decoration: underline;
}
.Form .Row {
display: flex;
padding: .25rem;
@@ -85,3 +105,26 @@ textarea:focus,
box-shadow: none;
outline: 0 none !important;
}
.cards-table {
border-collapse: collapse;
margin: 0 auto;
margin-top: 1rem;
}
.cards-table td,
.cards-table th {
padding: .5rem;
}
.cards-table thead th {
border-bottom: 2px solid silver;
}
.cards-table tbody td {
border-bottom: 1px solid silver;
}
.cards-table tbody tr:last-child td {
border-bottom: 2px solid silver;
}