[taler-taler-merchant-demos] 05/18: language switcher now works

[gnunet]

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

grothoff pushed a commit to branch master
in repository taler-merchant-demos.

commit 7c08b690cc5d3bca79172b8f891e2000179cd703
Author: Torsten Grothoff <tg@wafflepowered.com>
AuthorDate: Sun Sep 6 18:36:33 2020 +0200

    language switcher now works
---
 talermerchantdemos/blog/templates/base.html |  17 ++++-
 talermerchantdemos/static/navbar.css        |  97 ++++++++++++++------------
 talermerchantdemos/static/navbar.css.map    |   1 +
 talermerchantdemos/static/navbar.scss       | 103 ++++++++++++++++++++++++++++
 4 files changed, 172 insertions(+), 46 deletions(-)

diff --git a/talermerchantdemos/blog/templates/base.html 
b/talermerchantdemos/blog/templates/base.html
index 2a094dc..87b1738 100644
--- a/talermerchantdemos/blog/templates/base.html
+++ b/talermerchantdemos/blog/templates/base.html
@@ -86,9 +86,22 @@
       <a href="{{ env('TALER_ENV_URL_MERCHANT_DONATIONS', '#') 
}}">Donations</a>
       <a href="{{ env('TALER_ENV_URL_MERCHANT_SURVEY', '#') 
}}">Tipping/Survey</a>
       <a href="{{ env('TALER_ENV_URL_BACKOFFICE', '#') }}">Back-office</a>
-      <a class="right">Language</a>
+      <span class="right">
+        Language
+        <!-- <input type="checkbox"> -->
+        <div class="nav">
+          <br>
+          <br>
+          <a href="" class="navbtn">EN</a><br>
+          <a href="" class="navbtn">DE</a><br>
+          <a href="" class="navbtn">FR</a><br>
+          <a href="" class="navbtn">IT</a><br>
+          <a href="" class="navbtn">JP</a>
+        </div>
+      </span>
     </nav>
-  </div> <input type="checkbox" class="r"><label>test</label>
+  </div>
+  <!-- <input type="checkbox" class="r"><label>test</label> -->
 
   <section id="main" class="content">
     {% block main %}
diff --git a/talermerchantdemos/static/navbar.css 
b/talermerchantdemos/static/navbar.css
index d5496c9..aabacc3 100644
--- a/talermerchantdemos/static/navbar.css
+++ b/talermerchantdemos/static/navbar.css
@@ -4,63 +4,72 @@
  * @description Makes the navigation bar have styles
  * @license     LGPL-3.0-or-later
  */
- 
- 
-.navcontainer{
-    overflow:hidden;
-    background:#144;
-    margin-bottom:50px;
-    width:100%; 
-    color:white; 
-    position:-webkit-sticky;
-    position:sticky;
-    top:0px;
-    width: 100vw;
-    backdrop-filter: blur(10px);
-    opacity: 1;
-    z-index: 10000;
+.navcontainer {
+  overflow: hidden;
+  background: #144;
+  margin-bottom: 50px;
+  width: 100%;
+  color: white;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0px;
+  width: 100vw;
+  backdrop-filter: blur(10px);
+  opacity: 1;
+  z-index: 10000;
 }
+
 nav {
-    left: 1vw;
-    position: relative;
-    background:#144;
-    z-index: 10000;
+  left: 1vw;
+  position: relative;
+  background: #144;
+  z-index: 10000;
+}
+
+nav a, nav span, .navbtn {
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  background: #00000000;
+  height: inherit;
 }
 
-nav * {
-    border: none;
-    color: white;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    background: #00000000;
-    height: inherit;
+nav a, nav span, .navbtn {
+  padding: 15px 32px;
 }
-nav *{
-    padding: 15px 32px;
+
+nav a:hover, nav span:hover, .navbtn:hover {
+  background: #00000022;
 }
 
-nav *:hover {
-    background: #00000022;
+nav a.active, nav span.active, .navbtn.active {
+  background-color: #4CAF50;
 }
 
-nav *.active {
-    background-color: #4CAF50;
+nav a.active:hover, nav span.active:hover, .navbtn.active:hover {
+  background: #377c39;
 }
 
-nav *.active:hover {
-    background: #377c39;
+nav a, nav span, .navbtn {
+  cursor: pointer;
 }
 
-nav * {
-    cursor: pointer;
+nav .right {
+  float: right;
+  margin-right: 5vw;
 }
-nav a.right {
-    float:right;
-    margin-right: 5vw;
+nav .right div.nav {
+  display: none;
+}
+nav .right div.nav:hover {
+  display: block;
+}
+
+nav .right:hover div.nav {
+  display: block;
 }
 
-input[type=checkbox]:checked + label {
-    color: red;
-}
\ No newline at end of file
+/*# sourceMappingURL=navbar.css.map */
diff --git a/talermerchantdemos/static/navbar.css.map 
b/talermerchantdemos/static/navbar.css.map
new file mode 100644
index 0000000..1725bd6
--- /dev/null
+++ b/talermerchantdemos/static/navbar.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["navbar.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAEJ;EAiCI;EACA;;AAPA;EACI;;AAEJ;EACI;;;AAMJ;EACI","file":"navbar.css"}
\ No newline at end of file
diff --git a/talermerchantdemos/static/navbar.scss 
b/talermerchantdemos/static/navbar.scss
new file mode 100644
index 0000000..312bf0c
--- /dev/null
+++ b/talermerchantdemos/static/navbar.scss
@@ -0,0 +1,103 @@
+/**
+ * @author      Torsten Grothoff
+ * @name        navbar.css
+ * @description Makes the navigation bar have styles
+ * @license     LGPL-3.0-or-later
+ */
+ 
+ 
+.navcontainer{
+    overflow:hidden;
+    background:#144;
+    margin-bottom:50px;
+    width:100%; 
+    color:white; 
+    position:-webkit-sticky;
+    position:sticky;
+    top:0px;
+    width: 100vw;
+    backdrop-filter: blur(10px);
+    opacity: 1;
+    z-index: 10000;
+}
+nav {
+    left: 1vw;
+    position: relative;
+    background:#144;
+    z-index: 10000;
+}
+
+nav a, nav span,.navbtn {
+    border: none;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    background: #00000000;
+    height: inherit;
+}
+nav a, nav span,.navbtn{
+    padding: 15px 32px;
+}
+
+nav a:hover, nav span:hover,.navbtn:hover {
+    background: #00000022;
+}
+
+nav a.active, nav span.active,.navbtn.active {
+    background-color: #4CAF50;
+}
+
+nav a.active:hover, nav span.active:hover,.navbtn.active:hover {
+    background: #377c39;
+}
+
+nav a, nav span,.navbtn {
+    cursor: pointer;
+}
+nav .right {
+    // input[type=checkbox] {
+    //     // // opacity: 0;
+    //     // // position: absolute;
+    //     // position: relative;
+    //     // left:0.5vw;
+    //     // // top:0;
+    //     // width: inherit;
+    //     // height: inherit;
+
+    //     // $sx: 1.5;
+    //     // $sy: 1.5;
+
+    //     // -ms-transform: scale($sx,$sy); /* IE */
+    //     // -moz-transform: scale($sx,$sy); /* FF */
+    //     // -webkit-transform: scale($sx,$sy); /* Safari and Chrome */
+    //     // -o-transform: scale($sx,$sy); /* Opera */
+    //     // transform: scale($sx,$sy);
+    //     // float:right;
+    //     opacity: 0;
+    // }
+    // input[type=checkbox]:checked + div.nav {
+    //     display: block;
+    // }
+    // input[type=checkbox] + div.nav {
+    //     display: none;
+    // }
+    div.nav {
+        display: none;
+    }
+    div.nav:hover {
+        display: block;
+    }
+    float:right;
+    margin-right: 5vw;
+}
+nav .right:hover {
+    div.nav {
+        display:block;
+    }
+}
+
+// input[type=checkbox]:checked + label {
+//     color: red;
+// }
\ No newline at end of file

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