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.

1 files changed, 64 insertions, 53 deletions

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")))