From da0f5e80dfe104a2af6faecc49fc437a35c17025 Mon Sep 17 00:00:00 2001
From: nervuri <seva@nervuri.net>
Date: Sun, 20 Nov 2022 15:16:22 +0000
Subject: [PATCH Taler website 2/4] improve navbar appearance

---
 common/navigation.j2.inc | 186 ++++++++++++++++++++-------------------
 static/styles.css        |   4 -
 2 files changed, 96 insertions(+), 94 deletions(-)

diff --git a/common/navigation.j2.inc b/common/navigation.j2.inc
index e793ff7..ddd2c1e 100644
--- a/common/navigation.j2.inc
+++ b/common/navigation.j2.inc
@@ -1,96 +1,102 @@
 {% macro navlink(site, text) -%}
-   <a class="nav-link {{ 'active' if filename == site else '' }}"
-      href="{{ url_localized(site) }}">
-    {{ text }}
-   </a>
+   <li class="nav-item mx-2">
+     <a class="nav-link {{ 'active' if filename == site else '' }}"
+        href="{{ url_localized(site) }}">
+      {{ text }}
+     </a>
+   </li>
 {%- endmacro %}
 
-<nav class="navbar navbar-expand-lg navbar-light">
-  <a class="navbar-brand" href="{{ url_localized('index.html') }}">
-    <img class="taler_home" alt="Home" src="{{ url_static('images/logo-2021.svg') }}">
-  </a>
-  <button class="navbar-toggler"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarNavAltMarkup"
-          aria-controls="navbarNavAltMarkup"
-          aria-expanded="false"
-          aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
-    <div class="navbar-nav mr-auto">
-      {{ navlink('features.html', _('Features')) }}
-      {{ navlink('principles.html', _('Principles')) }}
-      {{ navlink('docs.html', _('Docs')) }}
-      {{ navlink('news/index.html', _('News')) }}
-      <a class="nav-link" href="https://taler-systems.com/" target="_blank" rel="noopener noreferrer">{{ _('Company') }}</a>
-    </div>
-
-    <div class="nav-item dropdown">
-      <button class="btn btn-dark dropdown-toggle"
+<div class="container">
+  <nav class="navbar navbar-expand-lg border-bottom">
+    <div class="container-fluid">
+      <a class="navbar-brand d-flex" href="{{ url_localized('index.html') }}">
+        <img alt="Home" width="100.5" height="45" src="{{ url_static('images/logo-2021.svg') }}">
+      </a>
+      <button class="navbar-toggler"
               type="button"
-              id="dropdownMenu1"
-              data-bs-toggle="dropdown"
-              data-bs-auto-close="true"
-              aria-haspopup="true"
-              aria-expanded="true">
-              <img src="{{ url_static('images/languageicon.svg') }}"
-                    height="35"
-                    alt="[{{lang}}]" />
-                    {{ lang_full }} [{{ lang }}]
+              data-bs-toggle="collapse"
+              data-bs-target="#navbarNavAltMarkup"
+              aria-controls="navbarNavAltMarkup"
+              aria-expanded="false"
+              aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
       </button>
-      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-      {% if lang != 'en' %}
-        <li><a class="dropdown-item" href="{{ self_localized('en') }}">English [en]</a></li>
-      {% endif %}
-      {% if lang != 'ar' %}
-        <li><a class="dropdown-item" href="{{ self_localized('ar') }}">عربى [ar]</a></li>
-      {% endif %}
-      {% if lang != 'zh_Hant' %}
-        <li><a class="dropdown-item" href="{{ self_localized('zh_Hant') }}">繁體中文 [zh]</a></li>
-      {% endif %}
-      {% if lang != 'zh_Hans' %}
-        <li><a class="dropdown-item" href="{{ self_localized('zh_Hans') }}">简体中文 [zh_Hans]</a></li>
-      {% endif %}
-      {% if lang != 'fr' %}
-        <li><a class="dropdown-item" href="{{ self_localized('fr') }}">Fran&ccedil;ais [fr]</a></li>
-      {% endif %}
-      {% if lang != 'de' %}
-        <li><a class="dropdown-item" href="{{ self_localized('de') }}">Deutsch [de]</a></li>
-      {% endif %}
-<!--  {% if lang != 'hi' %}
-        <li><a class="dropdown-item" href="{{ self_localized('hi') }}">हिंदी [hi]</a></li>
-      {% endif %} -->
-      {% if lang != 'it' %}
-        <li><a class="dropdown-item" href="{{ self_localized('it') }}">Italiano [it]</a></li>
-      {% endif %}
-      {% if lang != 'ja' %}
-        <li><a class="dropdown-item" href="{{ self_localized('ja') }}">日本語 [ja]</a></li>
-      {% endif %}
-      {% if lang != 'ko' %}
-        <li><a class="dropdown-item" href="{{ self_localized('ko') }}">한국어 [ko]</a></li>
-      {% endif %}
-<!--  {% if lang != 'pt' %}
-        <li><a class="dropdown-item" href="{{ self_localized('pt') }}">Portugu&ecirc;s [pt]</a></li>
-      {% endif %} -->
-<!--  {% if lang != 'pt_BR' %}
-        <li><a class="dropdown-item" href="{{ self_localized('pt_BR') }}">Portugu&ecirc;s (Brazil) [pt]</a></li>
-      {% endif %} -->
-      {% if lang != 'ru' %}
-        <li><a class="dropdown-item" href="{{ self_localized('ru') }}">&#x420;&#x443;&#x301;&#x441;&#x441;&#x43A;&#x438;&#x439;&#x20;&#x44F;&#x437;&#x44B;&#x301;&#x43A; [ru]</a></li>
-      {% endif %}
-      {% if lang != 'es' %}
-        <li><a class="dropdown-item" href="{{ self_localized('es') }}">Espa&ntilde;ol [es]</a></li>
-      {% endif %}
-      {% if lang != 'sv' %}
-        <li><a class="dropdown-item" href="{{ self_localized('sv') }}">Svenska [sv]</a></li>
-      {% endif %}
-      {% if lang != 'tr' %}
-        <li><a class="dropdown-item" href="{{ self_localized('tr') }}">T&uuml;rk&ccedil;e [tr]</a></li>
-      {% endif %}
-
-      </ul>
+      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+        <ul class="navbar-nav me-lg-auto">
+          {{ navlink('features.html', _('Features')) }}
+          {{ navlink('principles.html', _('Principles')) }}
+          {{ navlink('docs.html', _('Docs')) }}
+          {{ navlink('news/index.html', _('News')) }}
+          <li class="nav-item mx-2">
+            <a class="nav-link" href="https://taler-systems.com/" target="_blank" rel="noopener noreferrer">{{ _('Company') }}</a>
+          </li>
+        </ul>
+        <div class="nav-item dropdown">
+          <button class="btn btn-dark dropdown-toggle"
+                  type="button"
+                  id="dropdownMenu1"
+                  data-bs-toggle="dropdown"
+                  data-bs-auto-close="true"
+                  aria-haspopup="true"
+                  aria-expanded="true">
+                  <img src="{{ url_static('images/languageicon.svg') }}"
+                        height="35"
+                        alt="[{{lang}}]" />
+                        {{ lang_full }} [{{ lang }}]
+          </button>
+          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+          {% if lang != 'en' %}
+            <li><a class="dropdown-item" href="{{ self_localized('en') }}">English [en]</a></li>
+          {% endif %}
+          {% if lang != 'ar' %}
+            <li><a class="dropdown-item" href="{{ self_localized('ar') }}">عربى [ar]</a></li>
+          {% endif %}
+          {% if lang != 'zh_Hant' %}
+            <li><a class="dropdown-item" href="{{ self_localized('zh_Hant') }}">繁體中文 [zh]</a></li>
+          {% endif %}
+          {% if lang != 'zh_Hans' %}
+            <li><a class="dropdown-item" href="{{ self_localized('zh_Hans') }}">简体中文 [zh_Hans]</a></li>
+          {% endif %}
+          {% if lang != 'fr' %}
+            <li><a class="dropdown-item" href="{{ self_localized('fr') }}">Fran&ccedil;ais [fr]</a></li>
+          {% endif %}
+          {% if lang != 'de' %}
+            <li><a class="dropdown-item" href="{{ self_localized('de') }}">Deutsch [de]</a></li>
+          {% endif %}
+    <!--  {% if lang != 'hi' %}
+            <li><a class="dropdown-item" href="{{ self_localized('hi') }}">हिंदी [hi]</a></li>
+          {% endif %} -->
+          {% if lang != 'it' %}
+            <li><a class="dropdown-item" href="{{ self_localized('it') }}">Italiano [it]</a></li>
+          {% endif %}
+          {% if lang != 'ja' %}
+            <li><a class="dropdown-item" href="{{ self_localized('ja') }}">日本語 [ja]</a></li>
+          {% endif %}
+          {% if lang != 'ko' %}
+            <li><a class="dropdown-item" href="{{ self_localized('ko') }}">한국어 [ko]</a></li>
+          {% endif %}
+    <!--  {% if lang != 'pt' %}
+            <li><a class="dropdown-item" href="{{ self_localized('pt') }}">Portugu&ecirc;s [pt]</a></li>
+          {% endif %} -->
+    <!--  {% if lang != 'pt_BR' %}
+            <li><a class="dropdown-item" href="{{ self_localized('pt_BR') }}">Portugu&ecirc;s (Brazil) [pt]</a></li>
+          {% endif %} -->
+          {% if lang != 'ru' %}
+            <li><a class="dropdown-item" href="{{ self_localized('ru') }}">&#x420;&#x443;&#x301;&#x441;&#x441;&#x43A;&#x438;&#x439;&#x20;&#x44F;&#x437;&#x44B;&#x301;&#x43A; [ru]</a></li>
+          {% endif %}
+          {% if lang != 'es' %}
+            <li><a class="dropdown-item" href="{{ self_localized('es') }}">Espa&ntilde;ol [es]</a></li>
+          {% endif %}
+          {% if lang != 'sv' %}
+            <li><a class="dropdown-item" href="{{ self_localized('sv') }}">Svenska [sv]</a></li>
+          {% endif %}
+          {% if lang != 'tr' %}
+            <li><a class="dropdown-item" href="{{ self_localized('tr') }}">T&uuml;rk&ccedil;e [tr]</a></li>
+          {% endif %}
+          </ul>
+        </div>
+      </div>
     </div>
-  </div>
-</nav>
+  </nav>
+</div>
diff --git a/static/styles.css b/static/styles.css
index 44274f5..ace0a85 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -140,10 +140,6 @@ footer {
   display: contents;
 }
 
-.taler_home {
-  width: 8%;
-}
-
 .checkmark {
   height: 1em;
   margin-right: 0.3em;
-- 
2.35.1