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

3 files changed, 45 insertions, 7 deletions

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>