[taler-taler-ops-www] branch master updated: mobile nav

[gnunet]

This is an automated email from the git hooks/post-receive script.

nora-grothoff pushed a commit to branch master
in repository taler-ops-www.

The following commit(s) were added to refs/heads/master by this push:
     new 53ff029  mobile nav
53ff029 is described below

commit 53ff029b1e58760780c58bddb4eacacd3b5db268
Author: Nullptrderef <nullptrderef@proton.me>
AuthorDate: Sat Mar 30 22:12:08 2024 +0100

    mobile nav
---
 common/header.j2.inc                 |  3 +-
 common/navigation/index.j2.inc       | 11 +++---
 common/navigation/items.j2.inc       | 13 ++++---
 common/navigation/lang-select.j2.inc | 73 +++++++++++++++++++-----------------
 static/scss/navigation/lang.scss     | 11 ++++++
 5 files changed, 63 insertions(+), 48 deletions(-)

diff --git a/common/header.j2.inc b/common/header.j2.inc
index 0ff1ef4..fc0828f 100644
--- a/common/header.j2.inc
+++ b/common/header.j2.inc
@@ -29,8 +29,7 @@
 <link rel="alternate" hreflang="en" href="{{ self_localized('en') }}" />
 <link rel="alternate" hreflang="fr" href="{{ self_localized('fr') }}" />
 <link rel="alternate" hreflang="de" href="{{ self_localized('de') }}" />
-{#
-<link rel="alternate" hreflang="it" href="{{ self_localized('it') }}" /> #}
+<!-- <link rel="alternate" hreflang="it" href="{{ self_localized('it') }}" /> 
-->
 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <meta charset="utf-8" />
diff --git a/common/navigation/index.j2.inc b/common/navigation/index.j2.inc
index 95d3ada..b96d2d6 100644
--- a/common/navigation/index.j2.inc
+++ b/common/navigation/index.j2.inc
@@ -10,19 +10,18 @@
   class="navigation-menu w-screen bg-white bg-opacity-50 backdrop-blur-xl 
sticky z-50 top-0 flex items-center justify-center py-4 px-8 md:px-16"
 >
   <nav
-    class="navbar navbar-desktop hidden md:flex items-center flex-row 
justify-between w-full max-w-screen-xl"
+    class="navbar navbar-desktop flex items-center justify-between w-full 
max-w-screen-xl md:flex-row flex-col gap-7"
   >
-    <div class="left">
+    <div class="left" style="min-width: 136px; min-height: 60.9px;">
       <a class="navbar-brand" href="{{ url_localized('index.html') }}"
         ><img
           src="{{ url_static('images/logo/taler-full.svg') }}"
           alt="Taler Operations SA"
-          style="width: 136px; height: 60.9px"
+          style="width: 136px; height: 60.9px;"
       /></a>
     </div>
-    <div class="right flex flex-row">
-      {% include "common/navigation/items.j2.inc" %} {# TODO: lang drop: {%
-      include 'common/navigation/lang-select.j2.inc' %} #}
+    <div class="right flex flex-row max-w-full">
+      {% include "common/navigation/items.j2.inc" %}
     </div>
   </nav>
 </header>
diff --git a/common/navigation/items.j2.inc b/common/navigation/items.j2.inc
index 73e68a9..932aca6 100644
--- a/common/navigation/items.j2.inc
+++ b/common/navigation/items.j2.inc
@@ -1,27 +1,28 @@
-<nav class="flex flex-row gap-4 font-medium">
+<nav class="flex flex-row gap-4 font-medium flex-wrap items-center 
justify-center text-center">
   <a
-    class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all"
+    class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all block h-max"
     href="{{ url_localized('index.html') }}"
     >{% trans %}Home{% endtrans %}</a
   >
   <a
-    class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all"
+    class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all block h-max"
     href="{{ url_localized('users.html') }}"
     >{% trans %}Users{% endtrans %}</a
   >
   <a
-    class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all"
+    class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all block h-max"
     href="{{ url_localized('merchants.html') }}"
     >{% trans %}Merchants{% endtrans %}</a
   >
   <a
-    class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all"
+    class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all block h-max"
     href="{{ url_localized('fees.html') }}"
     >{% trans %}Fees{% endtrans %}</a
   >
   <a
-    class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all"
+    class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all block h-max"
     href="https://exchange.taler-ops.ch/terms";
     >{% trans %}Terms of Service{% endtrans %}</a
   >
+  {% include 'common/navigation/lang-select.j2.inc' %}
 </nav>
diff --git a/common/navigation/lang-select.j2.inc 
b/common/navigation/lang-select.j2.inc
index 08128cb..372b7ad 100644
--- a/common/navigation/lang-select.j2.inc
+++ b/common/navigation/lang-select.j2.inc
@@ -1,34 +1,39 @@
-TBA: Lang Drop
-<button
-  class="btn btn-light dropdown-toggle"
-  type="button"
-  id="dropdownMenu1"
-  data-toggle="dropdown"
-  aria-haspopup="true"
-  aria-expanded="true"
->
-  <img
-    src="{{ url_static('images/unsorted/languageicon.svg') }}"
-    height="35"
-    alt="[{{lang}}]"
-  />
-  {{ lang_full }} [{{ lang }}]
-</button>
-<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-  {# TODO: look into if it's cleaner to show all langs alongside some kind of
-  indicator of which one is active within the dropdown #} {% if lang != 'en' %}
-  <li>
-    <a class="dropdown-item" href="{{ self_localized('en') }}">English [en]</a>
-  </li>
-  {% endif %} {% if lang != 'de' %}
-  <li>
-    <a class="dropdown-item" href="{{ self_localized('de') }}">Deutsch [de]</a>
-  </li>
-  {% endif %} {% if lang != 'fr' %}
-  <li>
-    <a class="dropdown-item" href="{{ self_localized('fr') }}"
-      >Fran&ccedil;ais [fr]</a
-    >
-  </li>
-  {% endif %}
-</ul>
+<div class="lang-switcher-container relative">
+  <button
+    class="dropdown-trigger no-underline hover:underline text-black 
text-opacity-50 hover:text-opacity-40 transition-all block h-max"
+    type="button"
+    aria-label="Language Switcher Trigger"
+  >
+    {{ lang_full }} <span class="text-gray-400 p-1 bg-black bg-opacity-10">[{{ 
lang }}]</span>
+  </button>
+  <ul
+    class="dropdown-menu hidden flex-col absolute w-max items-center 
justify-center left-[50%] -translate-x-1/2 p-4 bg-black bg-opacity-10 
rounded-lg mt-2 backdrop-blur-md"
+    aria-label="Language Options"
+  >
+    {% if lang != 'en' %}
+    <li class="py-1">
+      <a
+        class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all block h-max"
+        href="{{ self_localized('en') }}"
+        >English <span class="text-gray-500 p-1 bg-black 
bg-opacity-10">[en]</span></a
+      >
+    </li>
+    {% endif %} {% if lang != 'de' %}
+    <li class="py-1">
+      <a
+        class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all block h-max"
+        href="{{ self_localized('de') }}"
+        >Deutsch <span class="text-gray-500 p-1 bg-black 
bg-opacity-10">[de]</span></a
+      >
+    </li>
+    {% endif %} {% if lang != 'fr' %}
+    <li class="py-1">
+      <a
+        class="no-underline hover:underline text-black text-opacity-50 
hover:text-opacity-40 transition-all block h-max"
+        href="{{ self_localized('fr') }}"
+        >Fran&ccedil;ais <span class="text-gray-500 p-1 bg-black 
bg-opacity-10">[fr]</span></a
+      >
+    </li>
+    {% endif %}
+  </ul>
+</div>
diff --git a/static/scss/navigation/lang.scss b/static/scss/navigation/lang.scss
index e69de29..4dea85c 100644
--- a/static/scss/navigation/lang.scss
+++ b/static/scss/navigation/lang.scss
@@ -0,0 +1,11 @@
+.dropdown-trigger {
+  // kept here for future posible use
+  &:focus + .dropdown-menu,
+  &:focus-within + .dropdown-menu,
+  &:active + .dropdown-menu,
+  + .dropdown-menu:focus,
+  + .dropdown-menu:focus-within,
+  + .dropdown-menu:active {
+    display: flex;
+  }
+}

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.