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

3 files changed, 115 insertions, 93 deletions

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 %}