From 88e8c06927411a814809be8126491144653e86b3 Mon Sep 17 00:00:00 2001
From: Florian Pelz <pelzflorian@pelzflorian.de>
Date: Sun, 15 Sep 2019 22:03:26 +0200
Subject: [PATCH 8/8] 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 1653c1e..278036c 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."
@@ -400,13 +405,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 c8a6bd8..1146f13 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: 850px) {
+@media screen and (min-width: 900px) {
     .navbar {
 	position: relative;
 	overflow: visible;
-- 
2.23.0