summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorWojtek Kosior <koszko@koszko.org>2022-09-03 18:23:51 +0200
committerWojtek Kosior <koszko@koszko.org>2022-09-28 12:54:56 +0200
commit58b679e7412bad37e7a0206dcb5d1beab77cbb79 (patch)
tree1b80301d2f8d825a54d7a1629509651a87b4d179
parent699c949d8ec1260ca12dfbfa05c404be7395c9cc (diff)
downloadhaketilo-hydrilla-58b679e7412bad37e7a0206dcb5d1beab77cbb79.tar.gz
haketilo-hydrilla-58b679e7412bad37e7a0206dcb5d1beab77cbb79.zip
[proxy] visually improve the top bar of the web UI
-rw-r--r--src/hydrilla/proxy/web_ui/templates/base.html.jinja44
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>