diff options
Diffstat (limited to 'src/hydrilla/common_jinja_templates/base.html.jinja')
| -rw-r--r-- | src/hydrilla/common_jinja_templates/base.html.jinja | 228 |
1 files changed, 228 insertions, 0 deletions
diff --git a/src/hydrilla/common_jinja_templates/base.html.jinja b/src/hydrilla/common_jinja_templates/base.html.jinja new file mode 100644 index 0000000..08178b3 --- /dev/null +++ b/src/hydrilla/common_jinja_templates/base.html.jinja @@ -0,0 +1,228 @@ +{# +SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0 + +Hydrilla&Haketilo reusable base page template. + +This file is part of Hydrilla&Haketilo. + +Copyright (C) 2022 Wojtek Kosior + +Dual licensed under +* GNU General Public License v3.0 or later and +* Creative Commons Attribution Share Alike 4.0 International. + +You can choose to use either of these licenses or both. + + +I, Wojtek Kosior, thereby promise not to sue for violation of this +file's licenses. Although I request that you do not make use of this +code in a proprietary work, I am not going to enforce this in court. +#} +<!DOCTYPE html> + +{% macro button_row(buttons_data, common_fields={}) %} + <div class="flex-row"> + {% for classes, text, extra_fields in buttons_data %} + {% if not loop.first %} + <div class="button-row-separator"></div> + {% do classes.append('button-bordering-left') %} + {% endif %} + + {% if not loop.last %} + {% do classes.append('button-bordering-right') %} + {% endif %} + + {% if 'disabled-button' in classes %} + {% set disabled_attr = ' disabled=""' %} + {% else %} + {% set disabled_attr = '' %} + {% endif %} + + <form method="POST" class="flex-row"> + {% for name, value in extra_fields.items() %} + <input name="{{ name }}" value="{{ value }}" type="hidden"> + {% endfor %} + {% for name, value in common_fields.items() %} + <input name="{{ name }}" value="{{ value }}" type="hidden"> + {% endfor %} + + <button class="{{ classes|join(' ') }}"{{ disabled_attr }}> + {{ text }} + </button> + </form> + {% endfor %} + </div> +{% endmacro %} + +{% macro error_note(note_text) %} + <aside class="error-note"> + {{ note_text }} + </aside> +{% endmacro %} + +{% macro label(label_text, label_name=none) %} + {% set for_attr = label_name and (label_name + "_field") %} + <label {{ {'for': for_attr, 'class': 'section-label'}|xmlattr }}> + {{ label_text }} + </label> +{% endmacro %} + +{% macro form_field(field_name, required=true, sep_after=true, height=none) %} + <div class="flex-row"> + {% + set attrs = { + 'id': field_name + '_field', + 'name': field_name, + 'required': '' if required else none, + 'rows': height + } + %} + + {% if height is none %} + <input{{ attrs|xmlattr }}> + {% else %} + <textarea{{ attrs|xmlattr }}></textarea> + {% endif %} + </div> + + {% if sep_after %} + <div class="horizontal-separator"></div> + {% endif %} +{% endmacro %} + +<html> + <head> + {% block head %} + <style> + {% block style %} + body { + color: #444; + margin: 0; + } + + #main { + max-width: 750px; + margin: auto; + padding: 0 5px; + } + + a { + text-decoration: inherit; + color: inherit; + } + + .has-colored-links a { + color: #557b8e; + } + + .small-print { + font-size: 80%; + color: #555; + } + + .error-note { + display: block; + border-left: 5px solid #a33; + padding: 10px; + background-color: #fcc; + } + + #main > .error-note:first-child { + margin-top: 10px; + } + + .block-with-bottom-margin, .section-label, .flex-row, aside, p { + display: block; + margin: 0 0 10px 0; + } + + .section-label { + font-style: italic; + text-decoration: underline #ccc; + } + + .flex-row { + display: flex; + padding: 0; + } + + .flex-row > * { + flex: 1 1 0; + } + + .flex-row > .flex-row { + margin: 0; + } + + .button-row-separator { + background-color: #888; + flex: 0 0 2px; + } + + div.horizontal-separator { + display: block; + background-color: #e3e3e3; + height: 1px; + margin: 0 0 10px 0; + } + + textarea { + resize: none; + } + + .green-button, .red-button, .blue-button { + border: none; + border-radius: 2px; + color: white; + text-align: center; + text-decoration: none; + display: block; + padding: 5px 10px; + -moz-user-select: none; + user-select: none; + cursor: pointer; + font: 400 0.9em sans-serif; + } + + .green-button { + background-color: #4caf50; + } + + .red-button { + background-color: #af504c; + } + + .blue-button { + background-color: #504caf; + } + + .disabled-button { + background-color: #aaa; + cursor: default; + } + + .button-bordering-right { + border-radius: 2px 0 0 2px; + } + + .button-bordering-left { + border-radius: 0 2px 2px 0; + } + + .button-bordering-left.button-bordering-right { + border-radius: 0; + } + + .hide { + display: none !important; + } + {% endblock style %} + </style> + {% endblock head %} + </head> + <body> + {% block body %} + <div id="main">{% block main required %}{% endblock %}</div> + {% endblock body %} + </body> +</html> |