[proxy] visually improve the top bar of the web UI

1 files changed, 36 insertions, 8 deletions

diff --git a/src/hydrilla/proxy/web_ui/templates/base.html.jinja b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
index 0d74fc0..2febf2f 100644
--- a/src/hydrilla/proxy/web_ui/templates/base.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
@@ -147,22 +147,37 @@ in a proprietary work, I am not going to enforce this in court.
           ul#nav {
               -moz-user-select: none;
               user-select: none;
+              display: flex;
+              justify-content: stretch;
+              white-space: nowrap;
               background-color: #e0e0e0;
               margin: 0;
+              padding: 0;
               border-bottom: 2px solid #444;
           }
 
-          ul#nav > li {
+          li.nav-entry, li.nav-separator {
               list-style-type: none;
+          }
+
+          li.nav-entry {
               background-color: #70af70;
               font-size: 115%;
-              padding: 10px;
-              display: inline-block;
               cursor: pointer;
-              margin: 5px 0 0 0;
+              text-align: center;
+              flex: 1 1 0;
           }
 
-          ul#nav > li:hover {
+          li.nav-separator {
+              flex: 0 0 2px;
+              background-color: inherit;
+          }
+
+          li.big-separator {
+              flex: 4 0 2px;
+          }
+
+          li.nav-entry:hover {
               box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
           }
 
@@ -173,8 +188,9 @@ in a proprietary work, I am not going to enforce this in court.
               cursor: default;
           }
 
-          ul#item_list > li > a:only-child {
+          ul#nav > li > :only-child {
               display: block;
+              padding: 10px;
           }
         {% endblock %}
     </style>
@@ -193,10 +209,22 @@ in a proprietary work, I am not going to enforce this in court.
     %}
     <ul id="nav">
       {% for endpoint, label in navigation_bar %}
+        {% if not loop.first %}
+          {% set sep_classes = ['nav-separator'] %}
+          {% if loop.last %}
+            {% do sep_classes.append('big-separator') %}
+          {% endif %}
+          <li class="{{ sep_classes|join(' ') }}"></li>
+        {% endif %}
+
         {% if endpoint == active_endpoint %}
-          <li class="nav-active">{{ label }}</li>
+          <li class="nav-entry nav-active"><div>{{ label }}</div></li>
         {% else %}
-          <li><a href="{{ url_for(endpoint) }}">{{ label }}</a></li>
+          <li class="nav-entry">
+            <a href="{{ url_for(endpoint) }}" draggable="false">
+              {{ label }}
+            </a>
+          </li>
         {% endif %}
       {% endfor %}
     </ul>