[proxy] improve the look of item lists in web UI

6 files changed, 94 insertions, 28 deletions

diff --git a/src/hydrilla/proxy/web_ui/templates/base.html.jinja b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
index a1de86a..0d74fc0 100644
--- a/src/hydrilla/proxy/web_ui/templates/base.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
@@ -24,13 +24,16 @@ in a proprietary work, I am not going to enforce this in court.
   <div class="button-row">
     {% for classes, text, action in buttons_data %}
       {% if 'disabled-button' in classes %}
-        <button class="{{ classes|join(' ') }}">{{ text }}</button>
+        {% set disabled_attr = ' disabled=""' %}
       {% else %}
-        <form method="POST" class="inline-form">
-          <input name="action" value="{{ action }}" type="hidden">
-          <button class="{{ classes|join(' ') }}">{{ text }}</button>
-        </form>
+        {% set disabled_attr = '' %}
       {% endif %}
+      <form method="POST" class="inline-form">
+        <input name="action" value="{{ action }}" type="hidden">
+        <button class="{{ classes|join(' ') }}"{{ disabled_attr }}>
+          {{ text }}
+        </button>
+      </form>
     {% endfor %}
   </div>
 {% endmacro %}
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 54315ed..86ac1b5 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
@@ -25,14 +25,29 @@ ul#item_list {
 ul#item_list > li {
     list-style-type: none;
     max-width: 100%;
-    overflow-x: scroll;
     white-space: nowrap;
-    margin: 5px;
+    margin: 0 5px 0 5px;
 }
 
 ul#item_list > li > :only-child {
     display: block;
     padding: 5px;
-    border: 2px solid #999;
-    border-radius: 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;
 }
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 1ad8df3..07212ff 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
@@ -21,7 +21,7 @@ in a proprietary work, I am not going to enforce this in court.
 {% extends "base.html.jinja" %}
 
 {% macro versioned_identifier_with_repo(info) %}
-  {{ info.info.versioned_identifier }}
+  {{ info.info.version_string }}
   {% if not info.is_local %}
     @
     {{ info.info.repo }}
@@ -32,6 +32,10 @@ in a proprietary work, I am not going to enforce this in court.
   {{ super() }}
 
   {% include 'include/item_list_style.css.jinja' %}
+
+  .textcolor-gray {
+      color: #777;
+  }
 {% endblock %}
 {% block main %}
   {% block main_info %}
@@ -49,12 +53,23 @@ in a proprietary work, I am not going to enforce this in court.
               version_display_info.ref != info.ref
         %}
           {% set entry_classes = [] %}
-          {% if info.is_local %}
-            {% do entry_classes.append('version-entry-local') %}
+
+          {% if info.is_orphan or info.is_local %}
+            {% do entry_classes.append('textcolor-gray') %}
           {% endif %}
-          {% if info.is_orphan %}
-            {% do entry_classes.append('version-entry-orphan') %}
+
+          {% if info.active == ActiveStatus.REQUIRED %}
+            {% do entry_classes.append('entry-line-blue') %}
+            {%
+              if display_info.type != ItemType.MAPPING or
+                  display_info.enabled != EnabledStatus.ENABLED
+            %}
+              {% do entry_classes.append('entry-line-dashed') %}
+            {% endif %}
+          {% elif info.active == ActiveStatus.AUTO %}
+            {% do entry_classes.append('entry-line-green') %}
           {% endif %}
+
           <li class="{{ entry_classes|join(' ') }}">
             {%
               set href = url_for(
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 172c040..77874cb 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/libraries.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/libraries.html.jinja
@@ -24,6 +24,13 @@ in a proprietary work, I am not going to enforce this in court.
   {{ super() }}
 
   {% include 'include/item_list_style.css.jinja' %}
+
+  ul#item_list > li > a {
+      display: flex !important;
+      flex-direction: column;
+      justify-content: center;
+      min-height: 2.2em;
+  }
 {% endblock %}
 {% block main %}
   <h3>{{ _('web_ui.libraries.heading') }}</h3>
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 d2eaaf3..093570d 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/packages.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/packages.html.jinja
@@ -24,17 +24,33 @@ in a proprietary work, I am not going to enforce this in court.
   {{ super() }}
 
   {% include 'include/item_list_style.css.jinja' %}
+
+  ul#item_list > li > a {
+      display: flex !important;
+      flex-direction: column;
+      justify-content: center;
+      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 = [] %}
+
       {% if info.enabled == EnabledStatus.ENABLED %}
-        {% do entry_classes.append('mapping-entry-enabled') %}
+        {% do entry_classes.append('entry-line-blue') %}
       {% elif info.enabled == EnabledStatus.DISABLED %}
-        {% do entry_classes.append('mapping-entry-disabled') %}
+        {% do entry_classes.append('entry-line-red') %}
+      {% elif info.active_version is not none %}
+        {% if info.active_version.active == ActiveStatus.REQUIRED %}
+          {% do entry_classes.append('entry-line-blue') %}
+          {% do entry_classes.append('entry-line-dashed') %}
+        {% elif info.active_version.active == ActiveStatus.AUTO %}
+          {% do entry_classes.append('entry-line-green') %}
+        {% endif %}
       {% endif %}
+
       <li class="{{ entry_classes|join(' ') }}">
         <a href="{{ url_for('.show_package', item_id=info.ref.id) }}">
           <div>
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 c0cc6cb..07506e8 100644
--- a/src/hydrilla/proxy/web_ui/templates/repos/index.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/repos/index.html.jinja
@@ -35,9 +35,13 @@ in a proprietary work, I am not going to enforce this in court.
   <ul id="item_list">
     {% for info in display_infos %}
       {% set entry_classes = [] %}
+
       {% if info.deleted %}
-        {% do entry_classes.append('repo-entry-deleted') %}
+        {% do entry_classes.append('entry-line-red') %}
+      {% else %}
+        {% do entry_classes.append('entry-line-green') %}
       {% endif %}
+
       <li class="{{ entry_classes|join(' ') }}">
         <a href="{{ url_for('.show_repo', repo_id=info.ref.id) }}">
           <div>
@@ -54,16 +58,22 @@ in a proprietary work, I am not going to enforce this in court.
         </a>
       </li>
     {% endfor %}
-    <li>
-      <a href="{{ url_for('.show_repo', repo_id=local_semirepo_info.ref.id) }}">
-        {{ _('web_ui.repos.local_packages_semirepo') }}
-        <div class="small-print">
-          {{
-            _('web_ui.repos.package_count_{}')
-                .format(local_semirepo_info.mapping_count)
-          }}
-        </div>
-      </a>
-    </li>
+    {%
+      if local_semirepo_info.mapping_count > 0 or
+          local_semirepo_info.resource_count > 0
+    %}
+      {% set url = url_for('.show_repo', repo_id=local_semirepo_info.ref.id) %}
+      <li>
+        <a href="{{ url }}">
+          {{ _('web_ui.repos.local_packages_semirepo') }}
+          <div class="small-print">
+            {{
+              _('web_ui.repos.package_count_{}')
+                  .format(local_semirepo_info.mapping_count)
+            }}
+          </div>
+        </a>
+      </li>
+    {% endif %}
   </ul>
 {% endblock %}