aboutsummaryrefslogtreecommitdiff
path: root/src/hydrilla/common_jinja_templates
diff options
context:
space:
mode:
authorWojtek Kosior <koszko@koszko.org>2022-10-22 14:49:37 +0200
committerWojtek Kosior <koszko@koszko.org>2022-10-22 14:54:42 +0200
commit44c09ab27ce8407f4fc5c75df9cdf309df8463eb (patch)
tree648f2b53456f9886b5e243a1734073342d8ab154 /src/hydrilla/common_jinja_templates
parent59a4b477dd922d2f839a717fe199501e7cb71e6e (diff)
downloadhaketilo-hydrilla-44c09ab27ce8407f4fc5c75df9cdf309df8463eb.tar.gz
haketilo-hydrilla-44c09ab27ce8407f4fc5c75df9cdf309df8463eb.zip
[proxy] extract potentially reusable HTML jinja templates into a separate directory
Diffstat (limited to 'src/hydrilla/common_jinja_templates')
-rw-r--r--src/hydrilla/common_jinja_templates/base.html.jinja228
-rw-r--r--src/hydrilla/common_jinja_templates/import/checkbox_tricks.html.jinja42
-rw-r--r--src/hydrilla/common_jinja_templates/include/checkbox_tricks_style.css.jinja45
-rw-r--r--src/hydrilla/common_jinja_templates/include/item_list_style.css.jinja57
4 files changed, 372 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>
diff --git a/src/hydrilla/common_jinja_templates/import/checkbox_tricks.html.jinja b/src/hydrilla/common_jinja_templates/import/checkbox_tricks.html.jinja
new file mode 100644
index 0000000..4ad9ca1
--- /dev/null
+++ b/src/hydrilla/common_jinja_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/src/hydrilla/common_jinja_templates/include/checkbox_tricks_style.css.jinja b/src/hydrilla/common_jinja_templates/include/checkbox_tricks_style.css.jinja
new file mode 100644
index 0000000..a47a438
--- /dev/null
+++ b/src/hydrilla/common_jinja_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/src/hydrilla/common_jinja_templates/include/item_list_style.css.jinja b/src/hydrilla/common_jinja_templates/include/item_list_style.css.jinja
new file mode 100644
index 0000000..063cd01
--- /dev/null
+++ b/src/hydrilla/common_jinja_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: scroll;
+ 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;
+}