diff options
Diffstat (limited to 'talermerchantdemos/templates/common-base.html.j2')
| -rw-r--r-- | talermerchantdemos/templates/common-base.html.j2 | 67 |
1 files changed, 44 insertions, 23 deletions
diff --git a/talermerchantdemos/templates/common-base.html.j2 b/talermerchantdemos/templates/common-base.html.j2 index fd5a371..f37a306 100644 --- a/talermerchantdemos/templates/common-base.html.j2 +++ b/talermerchantdemos/templates/common-base.html.j2 @@ -15,24 +15,38 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> --> -<html> +<html lang="{{ getlang() }}"> <head> <title>{{ page_title | default(gettext("GNU Taler Demo")) }}</title> - <link rel="stylesheet" type="text/css" href="{{ static('pure.css') }}" /> - <link rel="stylesheet" type="text/css" href="{{ static('demo.css') }}" /> + <link rel="stylesheet" type="text/css" href="{{ static('pure.css') }}"> + <link rel="stylesheet" type="text/css" href="{{ static('demo.css') }}"> {% block head %} {% endblock %} + <script> + function resetState() { + document.getElementById("lang").classList.add("hide"); + } + function bodyKeyPress(event) { + if (event.code === "Escape") { + resetState(); + } + } + function bodyOnClick(event) { + resetState(); + } + </script> </head> -<body> +<body onkeydown="bodyKeyPress(event)" onclick="bodyOnClick(event)"> <header class="demobar" style="display: flex; flex-direction: row; justify-content: space-between;"> + <a href="#main" class="skip">Skip to main content</a> <div style="max-width: 50em; margin-left: 2em;"> {% block header_content %} <p>This is the header content.</p> {% endblock %} </div> <a href="https://taler.net/"> - <img src="{{ static('logo-white.svg') }}" height="100" width="224" style="margin: 2em 2em"><br/> + <img src="{{ static('logo-white.svg') }}" alt="GNU Taler logo" height="100" width="224" style="margin: 2em 2em"><br> </a> </header> @@ -42,7 +56,7 @@ <a href="{{ env('TALER_ENV_URL_INTRO', '#') + getlang() + '/' }}" {% if getactive() == 'landing' %} class="active" {% endif %} >{{gettext("Introduction")}}</a> - <a href="{{ env('TALER_ENV_URL_BANK', '#') + getlang() + '/' }}" + <a href="{{ env('TALER_ENV_URL_BANK', '#') + '?lang=' + getlang() }}" {% if getactive() == 'bank' %} class="active" {% endif %} >{{gettext("Bank")}}</a> <a href="{{ env('TALER_ENV_URL_MERCHANT_BLOG', '#') + getlang() + '/' }}" @@ -51,26 +65,33 @@ <a href="{{ env('TALER_ENV_URL_MERCHANT_DONATIONS', '#') + getlang() + '/' }}" {% if getactive() == 'donations' %} class="active" {% endif %} >{{gettext("Donations")}}</a> - <a href="{{ env('TALER_ENV_URL_MERCHANT_SURVEY', '#') + getlang() + '/' }}" - {% if getactive() == 'survey' %} class="active" {% endif %} - >{{gettext("Tipping/Survey")}}</a> + <script> + function handleLang(event){ + if (event.type === 'click') { + document.getElementById("lang").classList.toggle("hide"); + event.stopPropagation(); + } + } + </script> {# Language Selector #} <div class="right"> - <span>{{ all_languages[getlang()] | default("en") }}</span> - <div style="position: relative; overflow: visible;"> - <div class="nav" style="position: absolute; background: #0042b2; max-height: 60vh; overflow-y: scroll"> - <br> - {% for lang_code, lang_display in all_languages.items() %} - {% if lang_code != getlang() %} - <a href="/{{ lang_code }}/" class="navbtn langbtn">{{ lang_display }}</a> - <br> - {% endif %} - {% endfor %} - </div> + <button onkeydown="handleLang(event)" onclick="handleLang(event)" name="language"> + {{ all_languages[getlang()] | default("en") }} + </button> + <div id="lang" class="hide"> + <div style="position: relative; overflow: visible;"> + <div class="nav" style="position: absolute; max-height: 60vh; overflow-y: scroll"> + {% for lang_code, lang_display in all_languages.items() %} + {% if lang_code != getlang() %} + <a href="{{ url_for('index') + lang_code + '/' }}" + class="navbtn langbtn">{{ lang_display }}</a> + {% endif %} + {% endfor %} + </div> + </div> </div> </div> - </nav> </div> @@ -78,7 +99,7 @@ {% block main %} This is the main content of the page. {% endblock %} - <hr /> + <hr> <div> <p> {{ @@ -86,7 +107,7 @@ }} </p> <div style="flex-grow:1"></div> - <p>Copyright © 2014—2021 Taler Systems SA</p> + <p>Copyright © 2014—2022 Taler Systems SA</p> </div> </section> </body> |