01/01: website: packages: Fix letter selector location (see bug #30580).

[Luis Felipe López Acevedo]

lfla pushed a commit to branch master
in repository guix-artwork.

commit ecf9ae2645b2beefdde2460204ec701cbf351b40
Author: sirgazil <address@hidden>
Date:   Sun Feb 17 14:52:34 2019 -0500

    website: packages: Fix letter selector location (see bug #30580).
    
    This change adds a new letter selector component and displays it at
    the top and bottom of package lists.
    
    * website/apps/packages/templates/components.scm (letter-selector):
      New component.
    * website/apps/packages/templates/detailed-index.scm (detailed-index-t):
      Use the new component.
    * website/apps/packages/templates/detailed-package-list.scm
      (detailed-package-list-t): Likewise.
    * website/apps/packages/templates/index.scm (index-t): Likewise.
    * website/apps/packages/templates/package-list.scm (package-list-t):
      Likewise.
    * website/static/packages/css/letter-selector.css: New stylesheet.
---
 website/apps/packages/templates/components.scm     | 26 ++++++++++++++++++
 website/apps/packages/templates/detailed-index.scm |  8 +++---
 .../packages/templates/detailed-package-list.scm   |  8 +++---
 website/apps/packages/templates/index.scm          |  8 +++---
 website/apps/packages/templates/package-list.scm   |  8 +++---
 website/static/packages/css/letter-selector.css    | 32 ++++++++++++++++++++++
 6 files changed, 74 insertions(+), 16 deletions(-)

diff --git a/website/apps/packages/templates/components.scm 
b/website/apps/packages/templates/components.scm
index e4fff09..701432c 100644
--- a/website/apps/packages/templates/components.scm
+++ b/website/apps/packages/templates/components.scm
@@ -17,6 +17,7 @@
   #:use-module (srfi srfi-1)
   #:export (detailed-package-preview
            issue-count->shtml
+           letter-selector
            license->shtml
            lint-issue->shtml
            location->shtml
@@ -98,6 +99,31 @@
     ,(if (= count 1) " issue" " issues")))
 
 
+(define* (letter-selector #:optional (active-letter ""))
+  "Return an SHTML section element representing a widget to list
+   packages by initial.
+
+   ACTIVE-LETTER (string)
+     The letter that should be displayed as active."
+  `(section
+    (@ (class "letter-selector"))
+    (h3 (@ (class "a11y-offset")) "Packages menu: ")
+
+    (h4 (@ (class "selector-title selector-title-top"))
+       "Browse alphabetically")
+    (div
+     (@ (class "selector-box-padded"))
+     ,@(map
+       (lambda (letter)
+         (list
+          (button-little
+           #:label letter
+           #:url (guix-url (url-path-join "packages" letter ""))
+           #:active (string=? letter active-letter))
+          " ")) ; NOTE: Force space for readability in non-CSS browsers.
+       alphabet))))
+
+
 (define (license->shtml license)
   "Return an SHTML representation of the LICENSE.
 
diff --git a/website/apps/packages/templates/detailed-index.scm 
b/website/apps/packages/templates/detailed-index.scm
index e785164..245687f 100644
--- a/website/apps/packages/templates/detailed-index.scm
+++ b/website/apps/packages/templates/detailed-index.scm
@@ -32,7 +32,7 @@ packages to advertise."
      #:css
      (list (guix-url "static/base/css/page.css")
           (guix-url "static/base/css/item-preview.css")
-          (guix-url "static/base/css/sidebar.css")
+          (guix-url "static/packages/css/letter-selector.css")
           (guix-url "static/packages/css/package-list.css"))
      #:crumbs
      (list (crumb "Packages" (guix-url "packages/")))
@@ -56,6 +56,6 @@ packages to advertise."
 
        (div
         (@ (class "sheet sheet-padded justify-left"))
-        ,@(map detailed-package-preview packages))
-
-       ,(sidebar))))))
+        ,(letter-selector)
+        ,@(map detailed-package-preview packages)
+        ,(letter-selector)))))))
diff --git a/website/apps/packages/templates/detailed-package-list.scm 
b/website/apps/packages/templates/detailed-package-list.scm
index dbc32b2..df898b4 100644
--- a/website/apps/packages/templates/detailed-package-list.scm
+++ b/website/apps/packages/templates/detailed-package-list.scm
@@ -34,7 +34,7 @@
      #:css
      (list (guix-url "static/base/css/page.css")
           (guix-url "static/base/css/item-preview.css")
-          (guix-url "static/base/css/sidebar.css")
+          (guix-url "static/packages/css/letter-selector.css")
           (guix-url "static/packages/css/package-list.css"))
      #:scripts
      (list (guix-url "static/packages/js/build-status.js"))
@@ -58,9 +58,9 @@
 
        (div
         (@ (class "sheet sheet-padded justify-left"))
+        ,(letter-selector letter)
         ,@(map detailed-package-preview (context-datum context "items"))
+        ,(letter-selector letter)
         ,(page-selector (string->number total-pages)
                         (string->number page-number)
-                        (guix-url (url-path-join "packages" letter))))
-
-       ,(sidebar letter))))))
+                        (guix-url (url-path-join "packages" letter)))))))))
diff --git a/website/apps/packages/templates/index.scm 
b/website/apps/packages/templates/index.scm
index dc32662..4de93aa 100644
--- a/website/apps/packages/templates/index.scm
+++ b/website/apps/packages/templates/index.scm
@@ -32,7 +32,7 @@
      #:css
      (list (guix-url "static/base/css/page.css")
           (guix-url "static/base/css/item-preview.css")
-          (guix-url "static/base/css/sidebar.css"))
+          (guix-url "static/packages/css/letter-selector.css"))
      #:crumbs
      (list (crumb "Packages" (guix-url "packages/")))
      #:content
@@ -54,6 +54,6 @@
 
        (div
         (@ (class "sheet"))
-        ,@(map package-preview packages))
-
-       ,(sidebar))))))
+        ,(letter-selector)
+        ,@(map package-preview packages)
+        ,(letter-selector)))))))
diff --git a/website/apps/packages/templates/package-list.scm 
b/website/apps/packages/templates/package-list.scm
index 7d9d1a6..18e6a7c 100644
--- a/website/apps/packages/templates/package-list.scm
+++ b/website/apps/packages/templates/package-list.scm
@@ -34,7 +34,7 @@
      #:css
      (list (guix-url "static/base/css/page.css")
           (guix-url "static/base/css/item-preview.css")
-          (guix-url "static/base/css/sidebar.css"))
+          (guix-url "static/packages/css/letter-selector.css"))
      #:crumbs
      (list (crumb "Packages" (guix-url "packages/"))
           (crumb letter (guix-url (url-path-join "packages"
@@ -55,9 +55,9 @@
 
        (div
         (@ (class "sheet"))
+        ,(letter-selector letter)
         ,@(map package-preview (context-datum context "items"))
+        ,(letter-selector letter)
         ,(page-selector (string->number total-pages)
                         (string->number page-number)
-                        (guix-url (url-path-join "packages" letter))))
-
-       ,(sidebar letter))))))
+                        (guix-url (url-path-join "packages" letter)))))))))
diff --git a/website/static/packages/css/letter-selector.css 
b/website/static/packages/css/letter-selector.css
new file mode 100644
index 0000000..2c25fb8
--- /dev/null
+++ b/website/static/packages/css/letter-selector.css
@@ -0,0 +1,32 @@
+/* Public domain 2019. All rights waived. */
+
+.letter-selector {
+    box-sizing: border-box;
+    border-color: #999;
+    border-radius: 4px;
+    border-style: solid;
+    border-width: thin;
+    color: #555753;
+    font-size: 0.9em;
+    margin: 1.5rem auto;
+    padding: 0px;
+    text-align: left;
+    vertical-align: top;
+}
+
+.selector-title {
+    color: #525252;
+    background-color: #F5F5F5;
+    font-size: 14px;
+    font-weight: normal;
+    margin: 0px;
+    padding: 8px;
+}
+
+.selector-title-top {
+    border-radius: 4px 4px 0px 0px;
+}
+
+.selector-box-padded {
+    padding: 10px;
+}