summaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authorWojtek Kosior <koszko@koszko.org>2022-10-29 12:28:26 +0200
committerWojtek Kosior <koszko@koszko.org>2022-10-29 12:29:14 +0200
commit2ad0889025599bca772c5921c404d7ad66616a8c (patch)
tree5dc307c4d213ec3786ff451223cbd0ef8d02d838 /templates
parenta38750ae1e62af2320069264c30c8693a1a858b4 (diff)
downloadhydrilla-common-html-jinja-templates-2ad0889025599bca772c5921c404d7ad66616a8c.tar.gz
hydrilla-common-html-jinja-templates-2ad0889025599bca772c5921c404d7ad66616a8c.zip
make common Jinja templates repo usable as a Python package module
Diffstat (limited to 'templates')
-rw-r--r--templates/base.html.jinja305
-rw-r--r--templates/import/checkbox_tricks.html.jinja42
-rw-r--r--templates/include/checkbox_tricks_style.css.jinja45
-rw-r--r--templates/include/item_list_style.css.jinja57
4 files changed, 449 insertions, 0 deletions
diff --git a/templates/base.html.jinja b/templates/base.html.jinja
new file mode 100644
index 0000000..c4d288b
--- /dev/null
+++ b/templates/base.html.jinja
@@ -0,0 +1,305 @@
+{#
+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 }}>
+ <span>{{ label_text }}</span>
+ {% if caller is defined %}
+ {{ caller() }}
+ {% endif %}
+ </label>
+{% endmacro %}
+
+{%
+ macro form_field(
+ field_name,
+ required = true,
+ sep_after = true,
+ height = none,
+ initial_value = 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 %}
+ {% do attrs.update({'value': initial_value}) %}
+ <input{{ attrs|xmlattr }}>
+ {% else %}
+ {% set value = initial_value|default('', true) %}
+ <textarea{{ attrs|xmlattr }}>{{ value }}</textarea>
+ {% endif %}
+ </div>
+
+ {% if sep_after %}
+ <div class="horizontal-separator"></div>
+ {% endif %}
+{% endmacro %}
+
+{% macro verbatim() %}
+ <code><pre>{{ caller()|safe }}</pre></code>
+{% endmacro %}
+
+{% macro unordered_list() %}
+ <ul>
+ {{ caller() }}
+ </ul>
+{% endmacro %}
+
+{% macro list_entry() %}
+ <li class="has-colored-links">
+ {{ caller() }}
+ </li>
+{% endmacro %}
+
+{% macro doc_link(doc_url) %}
+ <a class="doc-link" href="{{ doc_url }}" target="_blank"></a>
+{% endmacro %}
+
+<html>
+ <head>
+ {% block head %}
+ {% if style_nonce is defined %}
+ {% set style_attrs = {'nonce': style_nonce} %}
+ {% endif %}
+ <style{{ style_attrs|default({})|xmlattr }}>
+ {% 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 > span:first-child {
+ 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;
+ }
+
+ .doc-link {
+ display: inline-block;
+ width: 1.2em;
+ height: 1em;
+ }
+
+ .doc-link::after {
+ content: "?";
+ position:absolute;
+ display: inline-block;
+ width:1.2em;
+ height:1.2em;
+ line-height: 1.2em;
+ border: 2px solid #ffffff88;
+ border-radius: 1em;
+ transform: translate(1px, calc(-0.1em - 1px));
+ background-color: #4caf50;
+ color:white;
+ text-align: center;
+ font-style: normal;
+ font-family: initial;
+ font-size: 90%;
+ font-weight:bold;
+ }
+
+ .doc-link:hover::after {
+ color: #ffffffaa;
+ border-color: #4caf50;
+ }
+
+ code > pre {
+ overflow-x: auto;
+ background-color: #f0f0f0;
+ padding: 5px;
+ border: 1px solid #e3e3e3;
+ }
+
+ .bold {
+ font-weight: bold;
+ }
+
+ .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>
diff --git a/templates/import/checkbox_tricks.html.jinja b/templates/import/checkbox_tricks.html.jinja
new file mode 100644
index 0000000..4ad9ca1
--- /dev/null
+++ b/templates/import/checkbox_tricks.html.jinja
@@ -0,0 +1,42 @@
+{#
+SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
+
+Proxy web UI reusable macros for checkbox-based dynamically displayed elements.
+
+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.
+#}
+
+{% macro hider_id(name) -%}
+ {{ name }}_chbx
+{%- endmacro %}
+
+{% macro sibling_hider_but(button_text, name, initial_show=false) %}
+ {% set attrs = {'type': 'checkbox', 'class': 'chbx-tricks-show-hide'} %}
+ {% do attrs.update({'id': hider_id(name)}) %}
+ {% do attrs.update({'checked': none if initial_show else ''}) %}
+ <input {{ attrs|xmlattr }}>
+ <label for="{{ hider_id(name) }}"
+ class="green-button block-with-bottom-margin">
+ {{ button_text }}
+ </label>
+{% endmacro %}
+
+{% macro sibling_hider_radio(name, radio_id, initial_show=false) %}
+ {% set attrs = {'type': 'radio', 'class': 'chbx-tricks-show'} %}
+ {% do attrs.update({'name': name, 'id': radio_id}) %}
+ {% do attrs.update({'checked': '' if initial_show else none}) %}
+ <input {{ attrs|xmlattr }}>
+{% endmacro %}
diff --git a/templates/include/checkbox_tricks_style.css.jinja b/templates/include/checkbox_tricks_style.css.jinja
new file mode 100644
index 0000000..a47a438
--- /dev/null
+++ b/templates/include/checkbox_tricks_style.css.jinja
@@ -0,0 +1,45 @@
+{#
+SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
+
+Proxy web UI reusable stylesheet for checkbox-based dynamically displayed
+elements.
+
+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.
+#}
+
+input.chbx-tricks-show-hide, input.chbx-tricks-hide-show {
+ display: none !important;
+}
+
+input.chbx-tricks-show-hide:checked+*+*,
+input.chbx-tricks-hide-show:not(:checked)+*+* {
+ display: none !important;
+}
+
+input.chbx-tricks-hide-show:checked+*,
+input.chbx-tricks-show-hide:not(:checked)+* {
+ display: none !important;
+}
+
+
+input.chbx-tricks-show, input.chbx-tricks-hide {
+ display: none !important;
+}
+
+input.chbx-tricks-hide:checked+*,
+input.chbx-tricks-show:not(:checked)+* {
+ display: none !important;
+}
diff --git a/templates/include/item_list_style.css.jinja b/templates/include/item_list_style.css.jinja
new file mode 100644
index 0000000..66fcf10
--- /dev/null
+++ b/templates/include/item_list_style.css.jinja
@@ -0,0 +1,57 @@
+{#
+SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
+
+Proxy web UI reusable stylesheet for lists.
+
+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.
+#}
+ul.item-list {
+ padding: 0;
+}
+
+ul.item-list > li {
+ list-style-type: none;
+ max-width: 100%;
+ white-space: nowrap;
+ margin: 0;
+}
+
+ul.item-list > li > :only-child {
+ display: block;
+ padding: 5px;
+ overflow-x: auto;
+ border-bottom: 2px solid #999;
+}
+
+ul.item-list > li.entry-line-dashed > :only-child {
+ border-bottom-style: dashed
+}
+
+ul.item-list > li.entry-line-green > :only-child {
+ border-color: #4caf50;
+}
+
+ul.item-list > li.entry-line-blue > :only-child {
+ border-color: #504caf;
+}
+
+ul.item-list > li.entry-line-red > :only-child {
+ border-color: #af504c;
+}
+
+ul.item-list > li.invisible-entry-line > :only-child {
+ border-color: #fff;
+}
generated by cgit