website: packages: Fix content overflow on Issues page (bug #22115).

Note that the overflow issue is fixed, but an issue with duplicated
anchors (used for ID attributes) remains, and prevents the document
from passing HTML validation (see bug #24981).

* website/static/base/css/base.css (anchor-link, pre): New rule sets.
* website/static/base/css/packages.css (issue, issue-type): Ditto.
* website/www/packages.scm (issue-count->sxml): New procedure.
(issues-page): Remove unused JavaScript link. Move update date to the
top of the page.
(packages->issue-sxml, package->issue-sxml)
(issues->sxml): Don't use table elements for document structure.

3 files changed, 109 insertions, 57 deletions

diff --git a/website/static/base/css/base.css b/website/static/base/css/base.css
index 4669290..df35c15 100644
--- a/website/static/base/css/base.css
+++ b/website/static/base/css/base.css
@@ -1,7 +1,7 @@
 /*
     Public domain 2015 Luis Felipe López Acevedo. All rights waived.
     <felipe.lopez@openmailbox.org>
-   
+
     NOTE  The default style is targeted at screens with a width less than
           1024 pixels.
 */
@@ -32,6 +32,13 @@ body {
     font-size: 16px;
     margin: 0px;
 }
+
+h1:hover > a.anchor-link,
+h2:hover > a.anchor-link,
+h3:hover > a.anchor-link,
+h4:hover > a.anchor-link {
+    visibility: visible;
+}
 /* END NATIVE ELEMENTS */
 
 
@@ -43,6 +50,11 @@ body {
 
 
 /* CLASSES */
+a.anchor-link {
+    visibility: hidden;
+    padding: 0 0.5em;
+}
+
 a.button:link, a.button:visited {
     background-position: bottom;
     background-repeat: repeat-x;
@@ -125,6 +137,17 @@ a.hlink-yellow-boxed:hover {
     width: 100%;
 }
 
+pre {
+    background-color: #F2EFE4;
+    border-style: solid;
+    border-color: #D4CBB6;
+    border-radius: .3em;
+    border-width: thin;
+    font-size: 85%;
+    overflow: auto;
+    padding: 3em;
+}
+
 .text-center {
     text-align: center;
 }
@@ -151,9 +174,9 @@ a.hlink-yellow-boxed:hover {
     .h-separator {
         width: auto;
     }
-    
-    
-    /* GENERIC CONTAINERS */    
+
+
+    /* GENERIC CONTAINERS */
     .summary-box {
         color: #4D4D4D;
         display: inline-block;
diff --git a/website/static/base/css/packages.css b/website/static/base/css/packages.css
index 97d0345..177f416 100644
--- a/website/static/base/css/packages.css
+++ b/website/static/base/css/packages.css
@@ -65,3 +65,21 @@ a#top:hover, a#top:focus {
 img.status-icon {
     padding-right: 1em;
 }
+
+
+/* PACKAGE ISSUES */
+
+.issue {
+    position: relative;
+}
+
+.issue-type {
+    background-color: #D4CBB6;
+    border-radius: 2px;
+    padding: 2px 4px;
+    font-size: 90%;
+    margin: 0px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
\ No newline at end of file
diff --git a/website/www/packages.scm b/website/www/packages.scm
index ccafa28..747320f 100644
--- a/website/www/packages.scm
+++ b/website/www/packages.scm
@@ -376,38 +376,43 @@ issue is a CHECKER/REPORT tuple."
   "Return an SXML tree representing ISSUES for PACKAGE, where ISSUES is a
 list of checker/report tuples."
   (if (null? issues)
-      "Nothing to declare!"
+      '(p "Nothing to declare!")
       (let ((count  (length issues)))
-        `(div
-          (div (b ,(number->string count)
-                  ,(if (= count 1) " issue" " issues")))
-          (table
-           ,@(list-join (map (match-lambda
-                               ((checker report)
-                                `(tr (td ,(lint-checker-name checker))
-                                     (td (pre ,(string-trim-right report))))))
-                             issues)
-                        "\n"))))))
+	`(div
+	  ,@(map
+	     (match-lambda
+	      ((checker report)
+	       `(div
+		 (@ (class "issue"))
+		 (p (@ (class "issue-type")) ,(lint-checker-name checker) ":")
+		 (pre ,(string-trim-right report)))))
+	     issues)))))
 
 (define* (package->issue-sxml package
                               #:key
                               (anchor (package-full-name package))
                               (checkers %issue-checkers))
-  "Return an SXML table row for PACKAGE containing all the reports generated
-by CHECKERS."
-  (let ((issues (package-issues package checkers)))
-    (define name+version
-      (string-append (package-name package) " "
-                     (package-version package)))
-
-    `(tr (td (a (@ (href ,(source-url package))
-                   (title "Link to the Guix package source code"))
-                ,(if (null? issues)
-                     name+version
-                     `(b ,name+version))))
-         "\n"
-         (td (a (@ (name ,anchor)))
-             ,(issues->sxml package issues)))))
+  "Return an SXML representation of PACKAGE containing all the reports
+generated by CHECKERS."
+  (let ((issues (package-issues package checkers))
+	(name (string-append (package-name package) " "
+			     (package-version package))))
+    `(div
+      (@ (class "issues-list"))
+      (h2
+       (@ (id ,anchor))
+       ,name
+       (a
+	(@ (class "anchor-link") (href ,(string-append "#" anchor))
+	   (title "Link to this section"))
+	"§"))
+      (p
+       ;; Issue count
+       ,(issue-count->sxml (length issues)) ". "
+       "See " (a (@ (href ,(source-url package))) "package definition ")
+       "in Guix source code.")
+
+      ,(issues->sxml package issues))))
 
 (define* (packages->issue-sxml packages #:key (checkers %issue-checkers))
   "Return an SXML tree representing the reports generated by CHECKERS for
@@ -423,15 +428,13 @@ PACKAGES."
   (define package-anchor
     (packages->anchors packages))
 
-  `(table
-    ,@(list-join
-       (map (lambda (package)
-              (report-progress)
-              (package->issue-sxml package
-                                   #:anchor (package-anchor package)
-                                   #:checkers checkers))
-            packages)
-       "\n")))
+  `(div
+    ,@(map (lambda (package)
+	     (report-progress)
+	     (package->issue-sxml package
+				  #:anchor (package-anchor package)
+				  #:checkers checkers))
+	   packages)))
 
 
 ;;;
@@ -476,26 +479,34 @@ PACKAGES."
 	  ,(html-page-footer))))
 
 (define* (issues-page #:key (checkers %issue-checkers))
-  `(html (@ (lang "en"))
-	 ,(html-page-header "Package Issues" #:css "packages.css" #:js "packages.js")
-	 (body
-	  ,(html-page-description)
-	  ,(html-page-links)
+  `(html
+    (@ (lang "en"))
+    ,(html-page-header "Package Issues" #:css "packages.css")
+    (body
+     ,(html-page-description)
+     ,(html-page-links)
 
-	  (div (@ (id "content-box"))
-	       (article
-		(h1 "Package Issues")
+     (div
+      (@ (id "content-box"))
+      (article
+       (h1 "Package Issues")
+       (p "Everybody's got issues! This page lists problems reported by "
+	  (a
+	   (@ (href ,(base-url "manual/html_node/Invoking-guix-lint.html")))
+	   (code "guix lint")) " ("
+	   "Updated " ,(date->string (current-date) "~B ~e, ~Y") ").")
 
-                (p "Everybody's got issues!  This page lists problems
-reported by "
-                   (a (@ (href ,(base-url
-                                 "manual/html_node/Invoking-guix-lint.html")))
-                      (code "guix lint")) ".")
+       ,(packages->issue-sxml (all-packages) #:checkers checkers)))
 
-		,(packages->issue-sxml (all-packages)
-                                       #:checkers checkers)
+     ,(html-page-footer))))
 
-                (p "Updated " ,(date->string (current-date) "~B ~e, ~Y")
-                   ".")))
 
-	  ,(html-page-footer))))
+;;;
+;;; SXML Components
+;;;
+
+(define (issue-count->sxml count)
+  "Return and SXML representation of COUNT."
+  `(,(if (> count 0) 'mark 'span)
+    ,(number->string count)
+    ,(if (= count 1) " issue" " issues")))