09/09: website: Add language selection dropdown to navbar.

[Florian Pelz]

pelzflorian pushed a commit to branch wip-i18n
in repository guix-artwork.

commit 253392d3d9c3a6f49c66ac3ba1a8448fef275fd2
Author: Florian Pelz <pelzflorian@pelzflorian.de>
AuthorDate: Wed Oct 30 12:12:23 2019 +0000

    website: Add language selection dropdown to navbar.
    
    * website/apps/base/templates/components.scm (navbar): Add it.
    (horizontal-skip): New procedure.
    * website/static/base/css/navbar.css: Add CSS for horizontal-skip.
    Increase size at which website switches to mobile mode.
---
 website/apps/base/templates/components.scm | 30 +++++++++++++++++++++++++++---
 website/static/base/css/navbar.css         |  6 +++++-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/website/apps/base/templates/components.scm 
b/website/apps/base/templates/components.scm
index f8e7214..404d59f 100644
--- a/website/apps/base/templates/components.scm
+++ b/website/apps/base/templates/components.scm
@@ -23,6 +23,7 @@
            contact->shtml
             horizontal-line
            horizontal-separator
+            horizontal-skip
            link-more
            link-subtle
            link-yellow
@@ -180,6 +181,10 @@
            `(src ,(guix-url "static/base/img/h-separator-dark.png")))
        (alt ""))))
 
+(define (horizontal-skip)
+  "Return SHTML for a small horizontal space."
+  `(span (@ (class "hskip"))))
+
 (define (horizontal-line)
   "Return SHTML for a visible separator to be used in a dropdown menu
 like a menu item."
@@ -420,13 +425,32 @@ manual.
          (C_ "website menu" (menu-item #:label "Contact" #:active-item 
active-item #:url (guix-url "contact/")))
          (C_ "website menu" (menu-item #:label "Contribute" #:active-item 
active-item #:url (guix-url "contribute/")))
          (C_ "website menu" (menu-item #:label "Security" #:active-item 
active-item #:url (guix-url "security/")))
-         (C_ "website menu" (menu-item #:label "Graphics" #:active-item 
active-item #:url (guix-url "graphics/")))))))
+         (C_ "website menu" (menu-item #:label "Graphics" #:active-item 
active-item #:url (guix-url "graphics/")))))
+      ,(horizontal-skip)
+      ;; Languages dropdown.
+      ,(menu-dropdown #:label (locale-display-name) #:active-item active-item
+        #:items
+        (map-in-order
+         (lambda (ietf-info)
+           (let ((lingua (car ietf-info))
+                 (code (cdr ietf-info)))
+             (setlocale LC_ALL (string-append lingua ".utf8"))
+             (let ((out (menu-item #:label (locale-display-name)
+                                   #:active-item active-item
+                                   #:url (guix-url (string-append code "/")
+                                                   #:localize #f))))
+               (setlocale LC_ALL "")
+               out)))
+         (sort (delete %current-lingua
+                       ietf-tags-file-contents
+                       (lambda (a b) (string=? a (car b))))
+               (lambda (a b) string<?))))))
+
 
     ;; Menu button.
     (a
      (@ (class "menu-btn")
-       (href ,(guix-url "menu/"))) "")))
-
+        (href ,(guix-url "menu/"))) "")))
 
 (define (page-indicator page-number total-pages)
   "Return an SHTML span element in the form 'page X of Y' if there is
diff --git a/website/static/base/css/navbar.css 
b/website/static/base/css/navbar.css
index b8bba8a..2274aa1 100644
--- a/website/static/base/css/navbar.css
+++ b/website/static/base/css/navbar.css
@@ -109,6 +109,10 @@ label.menu-item {
     background-position: top;
 }
 
+.hskip {
+    padding-left: 10px;
+}
+
 .hline {
     display: none;
 }
@@ -116,7 +120,7 @@ label.menu-item {
 
 
 
-@media screen and (min-width: 900px) {
+@media screen and (min-width: 920px) {
     .navbar {
        position: relative;
        overflow: visible;