[proxy] complete the text content and styling of web UI pages written so far

author: Wojtek Kosior <koszko@koszko.org> 2022-09-05 13:58:34 +0200
committer: Wojtek Kosior <koszko@koszko.org> 2022-09-28 14:03:14 +0200
commit: 04853ff19450c5925a7c9bacc11abe90e75f8510 (patch)
tree: 8c3579c4280177bfd296d674b720fa5e0d18bf2d /src/hydrilla/proxy/web_ui
parent: 58b679e7412bad37e7a0206dcb5d1beab77cbb79 (diff)
download: haketilo-hydrilla-04853ff19450c5925a7c9bacc11abe90e75f8510.tar.gz
haketilo-hydrilla-04853ff19450c5925a7c9bacc11abe90e75f8510.zip
16 files changed, 383 insertions, 242 deletions
diff --git a/src/hydrilla/proxy/web_ui/items.py b/src/hydrilla/proxy/web_ui/items.py
index a781856..1a56d7d 100644
--- a/src/hydrilla/proxy/web_ui/items.py
+++ b/src/hydrilla/proxy/web_ui/items.py
@@ -47,16 +47,11 @@ from .. import state as st
 from . import _app
 
 
-class InvalidUploadedMalcontent(HaketiloException):
-    def __init__(self):
-        super().__init__(_('err.proxy.uploaded_malcontent_invalid'))
-
-
 bp = flask.Blueprint('items', __package__)
 
 @bp.route('/load_from_disk', methods=['GET'])
-def load_from_disk() -> werkzeug.Response:
-    html = flask.render_template('items/load_from_disk.html.jinja')
+def load_from_disk(errors: t.Mapping[str, bool] = {}) -> werkzeug.Response:
+    html = flask.render_template('items/load_from_disk.html.jinja', **errors)
     return flask.make_response(html, 200)
 
 @bp.route('/load_from_disk', methods=['POST'])
@@ -74,11 +69,11 @@ def load_from_disk_post() -> werkzeug.Response:
             with zipfile.ZipFile(zip_file_storage) as zip_file:
                 zip_file.extractall(tmpdir_child)
         except:
-            raise HaketiloException(_('err.proxy.uploaded_file_not_zip'))
+            return load_from_disk({'uploaded_file_not_zip': True})
 
         extracted_top_level_files = tuple(tmpdir_child.iterdir())
         if extracted_top_level_files == ():
-            raise InvalidUploadedMalcontent()
+            return load_from_disk({'invalid_uploaded_malcontent': True})
 
         if len(extracted_top_level_files) == 1 and \
            extracted_top_level_files[0].is_dir():
@@ -89,7 +84,7 @@ def load_from_disk_post() -> werkzeug.Response:
         try:
             _app.get_haketilo_state().import_items(malcontent_dir_path)
         except:
-            raise InvalidUploadedMalcontent()
+            return load_from_disk({'invalid_uploaded_malcontent': True})
 
     return flask.redirect(flask.url_for('.packages'))
 
diff --git a/src/hydrilla/proxy/web_ui/templates/base.html.jinja b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
index 2febf2f..918fb28 100644
--- a/src/hydrilla/proxy/web_ui/templates/base.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
@@ -21,14 +21,24 @@ in a proprietary work, I am not going to enforce this in court.
 <!DOCTYPE html>
 
 {% macro button_row(buttons_data) %}
-  <div class="button-row">
+  <div class="flex-row">
     {% for classes, text, action 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="inline-form">
+
+      <form method="POST" class="flex-row">
         <input name="action" value="{{ action }}" type="hidden">
         <button class="{{ classes|join(' ') }}"{{ disabled_attr }}>
           {{ text }}
@@ -38,6 +48,12 @@ in a proprietary work, I am not going to enforce this in court.
   </div>
 {% endmacro %}
 
+{% macro error_note(note_text) %}
+  <aside class="error-note">
+    {{ note_text }}
+  </aside>
+{% endmacro %}
+
 <html>
   <head>
     {% block head %}
@@ -56,6 +72,7 @@ in a proprietary work, I am not going to enforce this in court.
           #main {
               max-width: 750px;
               margin: auto;
+              padding: 0 5px;
           }
 
           a {
@@ -63,16 +80,6 @@ in a proprietary work, I am not going to enforce this in court.
               color: inherit;
           }
 
-          .inline-form {
-              display: inline-flex;
-              padding: 0;
-              margin: 0;
-          }
-
-          .inline-form > * {
-              flex: 1 1 0;
-          }
-
           .small-print {
               font-size: 80%;
               color: #555;
@@ -81,22 +88,52 @@ in a proprietary work, I am not going to enforce this in court.
           .error-note {
               display: block;
               border-left: 5px solid #a33;
+              padding: 10px;
               background-color: #fcc;
           }
 
+          .block-with-bottom-margin, .flex-row, aside, p {
+              display: block;
+              margin: 0 0 10px 0;
+          }
+
+          .flex-row {
+              display: flex;
+              padding: 0;
+          }
+
+          .flex-row > * {
+              flex: 1 1 0;
+          }
+
+          .flex-row > .flex-row {
+              margin: 0;
+          }
+
+          .button-row-separator {
+              background-color: #65A065;
+              flex: 0 0 2px;
+          }
+
+          div.horizontal-separator {
+              display: block;
+              background-color: #e3e3e3;
+              height: 1px;
+              margin: 0 0 10px 0;
+          }
+
           .green-button, .red-button, .blue-button {
                   border: none;
                   border-radius: 2px;
                   color: white;
                   text-align: center;
                   text-decoration: none;
-                  display: inline-block;
+                  display: block;
                   padding: 5px 10px;
                   -moz-user-select: none;
                   user-select: none;
                   cursor: pointer;
                   font: 400 0.9em sans-serif;
-                  margin: 2px;
           }
 
           .green-button {
@@ -112,34 +149,22 @@ in a proprietary work, I am not going to enforce this in court.
           }
 
           .disabled-button {
-                  background-color: #aaa;
-                  cursor: default;
+              background-color: #aaa;
+              cursor: default;
           }
 
           .button-bordering-right {
-              margin-right: 0;
               border-radius: 2px 0 0 2px;
-              border-right: 1px solid #65A065;
           }
 
           .button-bordering-left {
-              margin-left: 0;
               border-radius: 0 2px 2px 0;
-              border-left: 1px solid #65A065;
           }
 
           .button-bordering-left.button-bordering-right {
               border-radius: 0;
           }
 
-          .button-row {
-              display: flex;
-          }
-
-          .button-row > * {
-              flex: 1 1 0;
-          }
-
           .hide {
               display: none !important;
           }
diff --git a/src/hydrilla/proxy/web_ui/templates/include/item_list_style.css.jinja b/src/hydrilla/proxy/web_ui/templates/include/item_list_style.css.jinja
index 86ac1b5..d834862 100644
--- a/src/hydrilla/proxy/web_ui/templates/include/item_list_style.css.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/include/item_list_style.css.jinja
@@ -26,7 +26,7 @@ ul#item_list > li {
     list-style-type: none;
     max-width: 100%;
     white-space: nowrap;
-    margin: 0 5px 0 5px;
+    margin: 0;
 }
 
 ul#item_list > li > :only-child {
diff --git a/src/hydrilla/proxy/web_ui/templates/index.html.jinja b/src/hydrilla/proxy/web_ui/templates/index.html.jinja
index 8fd2ead..725e30e 100644
--- a/src/hydrilla/proxy/web_ui/templates/index.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/index.html.jinja
@@ -19,7 +19,25 @@ file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
 #}
 {% extends "base.html.jinja" %}
+
 {% block title %} {{ _('web_ui.home.title') }} {% endblock %}
+
 {% block main %}
-  {{ _('web_ui.home.welcome_to_haketilo') }}
+  <h3>
+    {{ _('web_ui.home.heading.welcome_to_haketilo') }}
+  </h3>
+
+  <p>
+    {{ _('web_ui.home.this_is_haketilo_page') }}
+  </p>
+
+  <div class="horizontal-separator"></div>
+
+  <h4>
+    {{ _('web_ui.home.heading.about_haketilo') }}
+  </h4>
+
+  <p>
+    {{ _('web_ui.home.haketilo_is_blah_blah') }}
+  </p>
 {% endblock %}
diff --git a/src/hydrilla/proxy/web_ui/templates/items/item_view.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/item_view.html.jinja
index 07212ff..d4910ab 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/item_view.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/item_view.html.jinja
@@ -20,13 +20,13 @@ in a proprietary work, I am not going to enforce this in court.
 #}
 {% extends "base.html.jinja" %}
 
-{% macro versioned_identifier_with_repo(info) %}
+{% macro versioned_identifier_with_repo(info) -%}
   {{ info.info.version_string }}
-  {% if not info.is_local %}
+  {%- if not info.is_local %}
     @
     {{ info.info.repo }}
-  {% endif %}
-{% endmacro %}
+  {%- endif %}
+{%- endmacro %}
 
 {% block style %}
   {{ super() }}
@@ -37,15 +37,25 @@ in a proprietary work, I am not going to enforce this in court.
       color: #777;
   }
 {% endblock %}
+
 {% block main %}
   {% block main_info %}
     <h3>{% block heading required %}{% endblock %}</h3>
   {% endblock %}
-  {% if display_info.all_versions|length > 0 %}
+
+  {%
+    if display_info.all_versions|length > 1 or
+       (display_info.all_versions|length == 1 and
+        (version_display_info is not defined or
+         version_display_info.ref != display_info.all_versions[0].ref))
+  %}
+    <div class="horizontal-separator"></div>
+
     <h4>
       {% block version_list_heading required %}
       {% endblock %}
     </h4>
+
     <ul id="item_list">
       {% for info in display_info.all_versions %}
         {%
diff --git a/src/hydrilla/proxy/web_ui/templates/items/item_viewversion.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/item_viewversion.html.jinja
index de62330..f1d34cc 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/item_viewversion.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/item_viewversion.html.jinja
@@ -19,44 +19,52 @@ file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
 #}
 {% extends "items/item_view.html.jinja" %}
+
 {% block main_info %}
   {% if file_installation_error is defined %}
-    <aside class="error-note">
-      {{ _('web_ui.err.file_installation_error') }}
-    </aside>
+    {{ error_note(_('web_ui.err.file_installation_error')) }}
   {% endif %}
+
   {% if uninstall_disallowed is defined %}
-    <aside class="error-note">
-      {{ _('web_ui.err.uninstall_disallowed') }}
-    </aside>
+    {{ error_note(_('web_ui.err.uninstall_disallowed')) }}
   {% endif %}
+
   {% if repo_communication_error is defined %}
-    <aside class="error-note">
-      {{ _('web_ui.err.repo_communication_error') }}
-    </aside>
+    {{ error_note(_('web_ui.err.repo_communication_error')) }}
   {% endif %}
 
   {{ super() }}
 
-  <div class="item-identifier">
-     {{ versioned_identifier_with_repo(version_display_info) }}
-  </div>
+  <p>
+    {{
+      _('web_ui.items.single_version.version_{}')
+            .format(versioned_identifier_with_repo(version_display_info))
+    }}
+  </p>
+
+  <div class="horizontal-separator"></div>
 
   {% block main_info_bulk %}
-    TODO: add more info...
+    <p>
+      TODO: add more info...
+    </p>
+
+    <div class="horizontal-separator"></div>
   {% endblock %}
 
-  {% if version_display_info.active == ActiveStatus.REQUIRED %}
-    <div>{% block item_required_msg required %}{% endblock %}</div>
-  {% elif version_display_info.active == ActiveStatus.AUTO %}
-    <div>{% block item_auto_activated_msg required %}{% endblock %}</div>
-  {% else %}
-    {# version_display_info.active == ActiveStatus.NOT_ACTIVE #}
-    <div>{% block item_not_activated_msg required %}{% endblock %}</div>
-  {% endif %}
+  <p>
+    {% if version_display_info.active == ActiveStatus.REQUIRED %}
+      {% block item_required_msg required %}{% endblock %}
+    {% elif version_display_info.active == ActiveStatus.AUTO %}
+      {% block item_auto_activated_msg required %}{% endblock %}
+    {% else %}
+      {# version_display_info.active == ActiveStatus.NOT_ACTIVE #}
+      {% block item_not_activated_msg required %}{% endblock %}
+    {% endif %}
+  </p>
 
-  {% set install_but_classes   = ['green-button', 'button-bordering-left'] %}
-  {% set uninstall_but_classes = ['green-button', 'button-bordering-right'] %}
+  {% set install_but_classes   = ['green-button'] %}
+  {% set uninstall_but_classes = ['green-button'] %}
   {% if version_display_info.installed == InstalledStatus.FAILED_TO_INSTALL %}
     {%
       set install_text =
diff --git a/src/hydrilla/proxy/web_ui/templates/items/libraries.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/libraries.html.jinja
index 77874cb..aa12246 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/libraries.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/libraries.html.jinja
@@ -19,7 +19,9 @@ file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
 #}
 {% extends "base.html.jinja" %}
+
 {% block title %} {{ _('web_ui.libraries.title') }} {% endblock %}
+
 {% block style %}
   {{ super() }}
 
@@ -32,8 +34,10 @@ in a proprietary work, I am not going to enforce this in court.
       min-height: 2.2em;
   }
 {% endblock %}
+
 {% block main %}
   <h3>{{ _('web_ui.libraries.heading') }}</h3>
+
   <ul id="item_list">
     {% for info in display_infos %}
       <li>
diff --git a/src/hydrilla/proxy/web_ui/templates/items/library_view.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/library_view.html.jinja
index b7d0d60..76736bc 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/library_view.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/library_view.html.jinja
@@ -19,18 +19,24 @@ file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
 #}
 {% extends "items/item_view.html.jinja" %}
+
 {% block title %} {{ _('web_ui.items.single.library.title') }} {% endblock %}
+
 {% block heading %}
   {{
     _('web_ui.items.single.library.heading.name_{}')
         .format(display_info.identifier)
   }}
 {% endblock %}
+
 {% block main_info %}
   {{ super() }}
 
-  TODO: add more info...
+  <p>
+    TODO: add more info...
+  </p>
 {% endblock %}
+
 {% block version_list_heading %}
   {{ _('web_ui.items.single.library.version_list_heading') }}
 {% endblock %}
diff --git a/src/hydrilla/proxy/web_ui/templates/items/library_viewversion.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/library_viewversion.html.jinja
index 9e0a32e..7e045ad 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/library_viewversion.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/library_viewversion.html.jinja
@@ -57,3 +57,9 @@ in a proprietary work, I am not going to enforce this in court.
 {% block version_list_heading %}
   {{ _('web_ui.items.single_version.library.version_list_heading') }}
 {% endblock %}
+
+{% block main_info_bulk %}
+  <p>
+    TODO: add more info...
+  </p>
+{% endblock %}
diff --git a/src/hydrilla/proxy/web_ui/templates/items/load_from_disk.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/load_from_disk.html.jinja
index 84ade45..30179dd 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/load_from_disk.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/load_from_disk.html.jinja
@@ -19,7 +19,9 @@ file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
 #}
 {% extends "base.html.jinja" %}
+
 {% block title %} {{ _('web_ui.load_from_disk.title') }} {% endblock %}
+
 {% block style %}
   {{ super() }}
 
@@ -27,20 +29,37 @@ in a proprietary work, I am not going to enforce this in court.
   input[type="file"]::file-selector-button {
       display: none;
   }
+
+  input[type="file"] {
+      display: block;
+      font-size: inherit;
+      font-style: inherit;
+  }
 {% endblock %}
+
 {% block main %}
   <h3>{{ _('web_ui.load_from_disk.heading') }}</h3>
+
   <form method="POST" enctype="multipart/form-data">
-    <div>
-      <input id="items_zipfile" name="items_zipfile" type="file"
-             accept=".zip,application/zip" required="">
-    </div>
-    <div>
-      <label class="green-button" for="items_zipfile">
-        {{ _('web_ui.load_from_disk.choose_zipfile_button') }}
-      </label>
-    </div>
-    <div>
+    {% if uploaded_file_not_zip is defined %}
+      {{ error_note(_('web_ui.err.uploaded_file_not_zip')) }}
+    {% endif %}
+
+    {% if invalid_uploaded_malcontent is defined %}
+      {{ error_note(_('web_ui.err.invalid_uploaded_malcontent')) }}
+    {% endif %}
+
+    <input id="items_zipfile" name="items_zipfile" type="file"
+           accept=".zip,application/zip" required=""
+           class="block-with-bottom-margin">
+
+    <label class="green-button block-with-bottom-margin" for="items_zipfile">
+      {{ _('web_ui.load_from_disk.choose_zipfile_button') }}
+    </label>
+
+    <div class="horizontal-separator"></div>
+
+    <div class="flex-row">
       <button class="green-button">
         {{ _('web_ui.load_from_disk.install_button') }}
       </button>
diff --git a/src/hydrilla/proxy/web_ui/templates/items/package_view.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/package_view.html.jinja
index 8df2d4d..ef04eb1 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/package_view.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/package_view.html.jinja
@@ -19,18 +19,24 @@ file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
 #}
 {% extends "items/item_view.html.jinja" %}
+
 {% block title %} {{ _('web_ui.items.single.package.title') }} {% endblock %}
+
 {% block heading %}
   {{
     _('web_ui.items.single.package.heading.name_{}')
         .format(display_info.identifier)
   }}
 {% endblock %}
+
 {% block main_info %}
   {{ super() }}
 
-  TODO: add more info...
+  <p>
+    TODO: add more info...
+  </p>
 {% endblock %}
+
 {% block version_list_heading %}
   {{ _('web_ui.items.single.package.version_list_heading') }}
 {% endblock %}
diff --git a/src/hydrilla/proxy/web_ui/templates/items/package_viewversion.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/package_viewversion.html.jinja
index ea8b7d3..1eb9878 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/package_viewversion.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/package_viewversion.html.jinja
@@ -59,33 +59,33 @@ in a proprietary work, I am not going to enforce this in court.
 {% endblock %}
 
 {% block main_info_bulk %}
-  TODO: add more info...
-
-  {% set enable_but_classes = ['blue-button', 'button-bordering-left'] %}
-  {%
-    set unenable_but_classes = [
-        'green-button',
-        'button-bordering-right',
-        'button-bordering-left'
-    ]
-  %}
-  {% set disable_but_classes = ['red-button', 'button-bordering-right'] %}
+  <p>
+    TODO: add more info...
+  </p>
+
+  <div class="horizontal-separator"></div>
+
+  {% set enable_but_classes = ['blue-button'] %}
+  {% set unenable_but_classes = ['green-button'] %}
+  {% set disable_but_classes = ['red-button'] %}
 
   {% set unenable_text = _('web_ui.items.single_version.unenable_button') %}
   {% set disable_text  = _('web_ui.items.single_version.disable_button') %}
   {% set enable_text   = _('web_ui.items.single_version.enable_button') %}
 
-  {% if display_info.enabled == EnabledStatus.NO_MARK %}
-    {% do unenable_but_classes.append('disabled-button') %}
-    <div> {{ _('web_ui.items.single_version.item_not_marked') }} </div>
-  {% elif display_info.enabled == EnabledStatus.DISABLED %}
-    {% do disable_but_classes.append('disabled-button') %}
-    <div> {{ _('web_ui.items.single_version.item_disabled') }} </div>
-  {% else %}
-    {# display_info.enabled == EnabledStatus.ENABLED #}
-    {% do enable_but_classes.append('disabled-button') %}
-    <div> {{ _('web_ui.items.single_version.item_enabled') }} </div>
-  {% endif %}
+  <p>
+    {% if display_info.enabled == EnabledStatus.NO_MARK %}
+      {% do unenable_but_classes.append('disabled-button') %}
+      {{ _('web_ui.items.single_version.item_not_marked') }}
+    {% elif display_info.enabled == EnabledStatus.DISABLED %}
+      {% do disable_but_classes.append('disabled-button') %}
+      {{ _('web_ui.items.single_version.item_disabled') }}
+    {% else %}
+      {# display_info.enabled == EnabledStatus.ENABLED #}
+      {% do enable_but_classes.append('disabled-button') %}
+      {{ _('web_ui.items.single_version.item_enabled') }}
+    {% endif %}
+  </p>
 
   {{
     button_row([
@@ -95,74 +95,90 @@ in a proprietary work, I am not going to enforce this in court.
     ])
   }}
 
+  <div class="horizontal-separator"></div>
+
   {% if display_info.enabled == EnabledStatus.ENABLED %}
-    {% set unpin_but_classes = ['green-button', 'button-bordering-right'] %}
-    {%
-      set pin_repo_but_classes = [
-          'green-button',
-          'button-bordering-right',
-          'button-bordering-left'
-      ]
-    %}
-    {% set pin_ver_but_classes = ['green-button', 'button-bordering-left'] %}
+    {% set unpin_but_classes = ['green-button'] %}
+    {% set pin_repo_but_classes = ['green-button'] %}
+    {% set pin_ver_but_classes = ['green-button'] %}
 
     {% set unpin_text = _('web_ui.items.single_version.unpin_button') %}
 
-    {% if display_info.frozen == FrozenStatus.NOT_FROZEN %}
-      {% do unpin_but_classes.append('disabled-button') %}
-      <div> {{ _('web_ui.items.single_version.not_pinned') }} </div>
-    {% endif %}
+    <p>
+      {% if display_info.frozen == FrozenStatus.NOT_FROZEN %}
+        {% do unpin_but_classes.append('disabled-button') %}
+        {{ _('web_ui.items.single_version.not_pinned') }}
+      {% endif %}
 
-    {% if display_info.frozen == FrozenStatus.REPOSITORY %}
-      {% if display_info.active_version.is_local %}
-        <div> {{ _('web_ui.items.single_version.pinned_repo_local') }} </div>
-      {% else %}
-        <div>
+      {% if display_info.frozen == FrozenStatus.REPOSITORY %}
+        {% if display_info.active_version.is_local %}
+          {{ _('web_ui.items.single_version.pinned_repo_local') }}
+        {% else %}
           {{
             _('web_ui.items.single_version.pinned_repo_{}')
                 .format(display_info.active_version.info.repo)
           }}
-        </div>
-      {% endif %}
-      {%
-        if display_info.active_version.info.repo ==
-            version_display_info.info.repo
-      %}
-        {% if version_display_info.is_local %}
+        {% endif %}
+        {%
+          if display_info.active_version.info.repo ==
+              version_display_info.info.repo
+        %}
+          {% if version_display_info.is_local %}
+            {%
+              set pin_repo_text =
+                  _('web_ui.items.single_version.pin_local_repo_button')
+            %}
+          {% else %}
+            {%
+              set pin_repo_text =
+                  _('web_ui.items.single_version.pin_repo_button')
+            %}
+          {% endif %}
+          {% do pin_repo_but_classes.append('disabled-button') %}
+        {% else %}
           {%
             set pin_repo_text =
-                _('web_ui.items.single_version.pin_local_repo_button')
+                _('web_ui.items.single_version.repin_repo_button')
+          %}
+        {% endif %}
+      {% else %}{# display_info.frozen == FrozenStatus.REPOSITORY #}
+        {%
+          set pin_repo_text =
+              _('web_ui.items.single_version.pin_repo_button')
+        %}
+      {% endif %}{# else/ display_info.frozen == FrozenStatus.REPOSITORY #}
+
+      {% if display_info.frozen == FrozenStatus.EXACT_VERSION %}
+        {% if display_info.active_version.ref == version_display_info.ref %}
+          {%
+            set pin_ver_text =
+                _('web_ui.items.single_version.pin_ver_button')
           %}
+          {% do pin_ver_but_classes.append('disabled-button') %}
+          {{ _('web_ui.items.single_version.pinned_ver') }}
         {% else %}
           {%
-            set pin_repo_text = _('web_ui.items.single_version.pin_repo_button')
+            set pin_ver_text = _('web_ui.items.single_version.repin_ver_button')
           %}
+          {{ _('web_ui.items.single_version.pinned_other_ver') }}
         {% endif %}
-        {% do pin_repo_but_classes.append('disabled-button') %}
       {% else %}
-        {%
-          set pin_repo_text =
-              _('web_ui.items.single_version.repin_repo_button')
-        %}
-      {% endif %}
-    {% else %}{# display_info.frozen == FrozenStatus.REPOSITORY #}
-      {% set pin_repo_text = _('web_ui.items.single_version.pin_repo_button') %}
-    {% endif %}{# else/ display_info.frozen == FrozenStatus.REPOSITORY #}
+        {% set pin_ver_text = _('web_ui.items.single_version.pin_ver_button') %}
+      {% endif %}{# else/ display_info.frozen == FrozenStatus.EXACT_VERSION #}
 
-    {% if display_info.frozen == FrozenStatus.EXACT_VERSION %}
       {% if display_info.active_version.ref == version_display_info.ref %}
-        {% set pin_ver_text = _('web_ui.items.single_version.pin_ver_button') %}
-        {% do pin_ver_but_classes.append('disabled-button') %}
-        <div> {{ _('web_ui.items.single_version.pinned_ver') }} </div>
+        {% if display_info.frozen != FrozenStatus.EXACT_VERSION %}
+          {{ _('web_ui.items.single_version.active_ver_is_this_one') }}
+        {% endif %}
       {% else %}
-        {%
-          set pin_ver_text = _('web_ui.items.single_version.repin_ver_button')
-        %}
-        <div> {{ _('web_ui.items.single_version.pinned_other_ver') }} </div>
+        {{
+          _('web_ui.items.single_version.active_ver_is_{}')
+              .format(
+                  versioned_identifier_with_repo(display_info.active_version)
+              )
+        }}
       {% endif %}
-    {% else %}
-      {% set pin_ver_text = _('web_ui.items.single_version.pin_ver_button') %}
-    {% endif %}{# else/ display_info.frozen == FrozenStatus.EXACT_VERSION #}
+    </p>
 
     {{
       button_row([
@@ -171,5 +187,7 @@ in a proprietary work, I am not going to enforce this in court.
           (pin_ver_but_classes,  pin_ver_text,  'freeze_to_version')
       ])
     }}
+
+    <div class="horizontal-separator"></div>
   {% endif %}{# display_info.enabled == EnabledStatus.ENABLED #}
 {% endblock main_info_bulk %}
diff --git a/src/hydrilla/proxy/web_ui/templates/items/packages.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/packages.html.jinja
index 093570d..3c2b241 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/packages.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/packages.html.jinja
@@ -19,7 +19,9 @@ file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
 #}
 {% extends "base.html.jinja" %}
+
 {% block title %} {{ _('web_ui.packages.title') }} {% endblock %}
+
 {% block style %}
   {{ super() }}
 
@@ -32,8 +34,10 @@ in a proprietary work, I am not going to enforce this in court.
       min-height: 2.2em;
   }
 {% endblock %}
+
 {% block main %}
   <h3>{{ _('web_ui.packages.heading') }}</h3>
+
   <ul id="item_list">
     {% for info in display_infos %}
       {% set entry_classes = [] %}
diff --git a/src/hydrilla/proxy/web_ui/templates/repos/add.html.jinja b/src/hydrilla/proxy/web_ui/templates/repos/add.html.jinja
index 398ac9a..8542d89 100644
--- a/src/hydrilla/proxy/web_ui/templates/repos/add.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/repos/add.html.jinja
@@ -19,42 +19,45 @@ file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
 #}
 {% extends "base.html.jinja" %}
+
 {% block title %} {{ _('web_ui.repos.add.title') }} {% endblock %}
+
 {% block main %}
   <h3>{{ _('web_ui.repos.add.heading') }}</h3>
   <form method="POST">
-    <div>
-      <label for="name_field">
-        {{ _('web_ui.repos.add.name_field_label') }}
-      </label>
-    </div>
     {% if repo_name_invalid is defined %}
-      <aside class="error-note">
-        {{ _('web_ui.err.repo_name_invalid') }}
-      </aside>
+      {{ error_note(_('web_ui.err.repo_name_invalid')) }}
     {% endif %}
+
     {% if repo_name_taken is defined %}
-      <aside class="error-note">
-        {{ _('web_ui.err.repo_name_taken') }}
-      </aside>
+      {{ error_note(_('web_ui.err.repo_name_taken')) }}
     {% endif %}
-    <div>
+
+    <label for="name_field" class="block-with-bottom-margin">
+      {{ _('web_ui.repos.add.name_field_label') }}
+    </label>
+
+    <div class="flex-row">
       <input id="name_field" name="name" required="">
     </div>
-    <div>
-      <label for="url_field">
-        {{ _('web_ui.repos.add.url_field_label') }}
-      </label>
-    </div>
+
+    <div class="horizontal-separator"></div>
+
     {% if repo_url_invalid is defined %}
-      <aside class="error-note">
-        {{ _('web_ui.err.repo_url_invalid') }}
-      </aside>
+      {{ error_note(_('web_ui.err.repo_url_invalid')) }}
     {% endif %}
-    <div>
+
+    <label for="url_field" class="block-with-bottom-margin">
+      {{ _('web_ui.repos.add.url_field_label') }}
+    </label>
+
+    <div class="flex-row">
       <input id="url_field" name="url" required="">
     </div>
-    <div>
+
+    <div class="horizontal-separator"></div>
+
+    <div class="flex-row block-with-bottom-margin">
       <button class="green-button">
         {{ _('web_ui.repos.add.submit_button') }}
       </button>
diff --git a/src/hydrilla/proxy/web_ui/templates/repos/index.html.jinja b/src/hydrilla/proxy/web_ui/templates/repos/index.html.jinja
index 07506e8..e6e9036 100644
--- a/src/hydrilla/proxy/web_ui/templates/repos/index.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/repos/index.html.jinja
@@ -19,19 +19,27 @@ file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
 #}
 {% extends "base.html.jinja" %}
+
 {% block title %}{{ _('web_ui.repos.title') }}{% endblock %}
+
 {% block style %}
   {{ super() }}
 
   {% include 'include/item_list_style.css.jinja' %}
 {% endblock %}
+
 {% block main %}
   <h3>{{ _('web_ui.repos.heading') }}</h3>
-  <div>
-    <a href="{{ url_for('.add_repo') }}" class="green-button">
-      {{ _('web_ui.repos.add_repo_button') }}
-    </a>
-  </div>
+
+  <a href="{{ url_for('.add_repo') }}"
+     class="green-button block-with-bottom-margin">
+    {{ _('web_ui.repos.add_repo_button') }}
+  </a>
+
+  <div class="horizontal-separator"></div>
+
+  <h4>{{ _('web_ui.repos.repo_list_heading') }}</h4>
+
   <ul id="item_list">
     {% for info in display_infos %}
       {% set entry_classes = [] %}
diff --git a/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja b/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja
index 604b38c..448c451 100644
--- a/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja
@@ -19,29 +19,28 @@ file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
 #}
 {% extends "base.html.jinja" %}
+
 {% block title %} {{ _('web_ui.repos.single.title') }} {% endblock %}
+
 {% block style %}
   {{ super() }}
 
   {% include 'include/checkbox_tricks_style.css.jinja' %}
 {% endblock %}
+
 {% block main %}
   {% if file_installation_error is defined %}
-      <aside class="error-note">
-        {{ _('web_ui.err.file_installation_error') }}
-      </aside>
+    {{ error_note(_('web_ui.err.file_installation_error')) }}
   {% endif %}
+
   {% if repo_communication_error is defined %}
-    <aside class="error-note">
-      {{ _('web_ui.err.repo_communication_error') }}
-    </aside>
+    {{ error_note(_('web_ui.err.repo_communication_error')) }}
   {% endif %}
+
   {% if repo_api_version_unsupported is defined %}
-    <aside class="error-note">
-      {{ _('web_ui.err.repo_api_version_unsupported') }}
-    </aside>
+    {{ error_note(_('web_ui.err.repo_api_version_unsupported')) }}
   {% endif %}
-  {% set repo_id = display_info.ref.id %}
+
   {% if display_info.is_local_semirepo %}
     <h3>{{ _('web_ui.repos.local_packages_semirepo') }}</h3>
   {% else %}
@@ -56,42 +55,53 @@ in a proprietary work, I am not going to enforce this in court.
     {% if not display_info.deleted %}
       <input id="hide_name_edit_form" type="checkbox"
              class="chbx-tricks-show-hide" {{ checked_attr }}>
-      <div>
-        <label for="hide_name_edit_form" class="green-button">
-          {{ _('web_ui.repos.single.update_name_button') }}
-        </label>
-      </div>
+      <label for="hide_name_edit_form"
+             class="green-button block-with-bottom-margin">
+        {{ _('web_ui.repos.single.update_name_button') }}
+      </label>
+
       <form method="POST">
         <input type="hidden" name="action" value="update_repo_data">
+
         {% if repo_name_invalid is defined %}
-          <aside class="error-note">
-            {{ _('web_ui.err.repo_name_invalid') }}
-          </aside>
+          {{ error_note(_('web_ui.err.repo_name_invalid')) }}
         {% endif %}
+
         {% if repo_name_taken is defined %}
-          <aside class="error-note">
-            {{ _('web_ui.err.repo_name_taken') }}
-          </aside>
+          {{ error_note(_('web_ui.err.repo_name_taken')) }}
         {% endif %}
-        <div>
+
+        <div class="flex-row">
           <input name="name" value="{{ display_info.name }}" required="">
         </div>
-        <div>
-          <button class="green-button">
+
+        <div class="flex-row">
+          <button class="green-button button-bordering-right">
             {{ _('web_ui.repos.single.commit_update_name_button') }}
           </button>
-          <label for="hide_name_edit_form" class="green-button">
+          <div class="button-row-separator"></div>
+          <label for="hide_name_edit_form"
+                 class="green-button button-bordering-left">
             {{ _('web_ui.repos.single.abort_update_name_button') }}
           </label>
         </div>
       </form>
+
+      <div class="horizontal-separator"></div>
     {% endif %}{# not display_info.deleted #}
   {% endif %}{# else/ display_info.is_local_semirepo #}
+
   {% if display_info.deleted and not display_info.is_local_semirepo %}
-    <div>
+    <p>
       {{ _('web_ui.repos.single.repo_is_deleted') }}
-    </div>
+    </p>
+
+    <div class="horizontal-separator"></div>
   {% elif not display_info.deleted %}
+    <p>
+      {{ _('web_ui.repos.single.url_is_{}').format(display_info.url) }}
+    </p>
+
     {% if repo_url_invalid is defined %}
       {% set checked_attr = '' %}
     {% else %}
@@ -99,53 +109,55 @@ in a proprietary work, I am not going to enforce this in court.
     {% endif %}
     <input id="hide_url_edit_form" type="checkbox" class="chbx-tricks-show-hide"
             {{ checked_attr }}>
-    <div>
-      <div>
-        {{ display_info.url }}
-      </div>
-      <div>
-        <label for="hide_url_edit_form" class="green-button">
-          {{ _('web_ui.repos.single.update_url_button') }}
-        </label>
-      </div>
-    </div>
+    <label for="hide_url_edit_form"
+           class="green-button block-with-bottom-margin">
+      {{ _('web_ui.repos.single.update_url_button') }}
+    </label>
+
     <form method="POST">
       <input type="hidden" name="action" value="update_repo_data">
+
       {% if repo_url_invalid is defined %}
-        <aside class="error-note">
-          {{ _('web_ui.err.repo_url_invalid') }}
-        </aside>
+          {{ error_note(_('web_ui.err.repo_url_invalid')) }}
       {% endif %}
-      <div>
+
+      <div class="flex-row">
         <input name="url" value="{{ display_info.url }}" required="">
       </div>
-      <div>
-        <button class="green-button">
+
+      <div class="flex-row">
+        <button class="green-button button-bordering-right">
           {{ _('web_ui.repos.single.commit_update_url_button') }}
         </button>
-        <label for="hide_url_edit_form" class="green-button">
+        <div class="button-row-separator"></div>
+        <label for="hide_url_edit_form"
+               class="green-button button-bordering-left">
           {{ _('web_ui.repos.single.abort_update_url_button') }}
         </label>
       </div>
     </form>
+
+    <div class="horizontal-separator"></div>
+
     <div>
-      {% if display_info.last_refreshed is none %}
-        {{ _('web_ui.repos.single.repo_never_refreshed') }}
-      {% else %}
-        {{
-          _('web_ui.repos.single.last_refreshed_{}')
-              .format(display_info.last_refreshed.strftime('%F %H:%M'))
-        }}
-      {% endif %}
-      <form method="POST">
-        <input type="hidden" name="action" value="refresh_repo">
-        <button class="green-button">
-          {{ _('web_ui.repos.single.refresh_now_button') }}
-        </button>
-      </form>
+      <p>
+        {% if display_info.last_refreshed is none %}
+          {{ _('web_ui.repos.single.repo_never_refreshed') }}
+        {% else %}
+          {{
+            _('web_ui.repos.single.last_refreshed_{}')
+                .format(display_info.last_refreshed.strftime('%F %H:%M'))
+          }}
+        {% endif %}
+      </p>
+
+      {% set button_text = _('web_ui.repos.single.refresh_now_button') %}
+      {{ button_row([[['green-button'], button_text, 'refresh_repo']]) }}
     </div>
+
+    <div class="horizontal-separator"></div>
   {% endif %}{# not display_info.deleted (elif) #}
-  <div>
+  <p>
     {{
       _('web_ui.repos.item_count_{mappings}_{resources}')
           .format(
@@ -153,13 +165,12 @@ in a proprietary work, I am not going to enforce this in court.
               resources = display_info.resource_count
           )
     }}
-  </div>
+  </p>
+
   {% if not display_info.is_local_semirepo and not display_info.deleted %}
-    <form method="POST">
-      <input type="hidden" name="action" value="remove_repo">
-      <button class="green-button">
-        {{ _('web_ui.repos.single.remove_button') }}
-      </button>
-    </form>
+    <div class="horizontal-separator"></div>
+
+    {% set button_text = _('web_ui.repos.single.remove_button') %}
+    {{ button_row([[['green-button'], button_text, 'remove_repo']]) }}
   {% endif %}
 {% endblock %}
author	Wojtek Kosior <koszko@koszko.org>	2022-09-05 13:58:34 +0200
committer	Wojtek Kosior <koszko@koszko.org>	2022-09-28 14:03:14 +0200
commit	04853ff19450c5925a7c9bacc11abe90e75f8510 (patch)
tree	8c3579c4280177bfd296d674b720fa5e0d18bf2d /src/hydrilla/proxy/web_ui
parent	58b679e7412bad37e7a0206dcb5d1beab77cbb79 (diff)
download	haketilo-hydrilla-04853ff19450c5925a7c9bacc11abe90e75f8510.tar.gz haketilo-hydrilla-04853ff19450c5925a7c9bacc11abe90e75f8510.zip