From 85a782924d260164df281f5dee328674d2e190a9 Mon Sep 17 00:00:00 2001 From: sirgazil Date: Fri, 25 Nov 2016 15:11:46 -0500 Subject: 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. --- website/static/base/css/base.css | 31 ++++++++-- website/static/base/css/packages.css | 18 ++++++ website/www/packages.scm | 117 +++++++++++++++++++---------------- 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. - + 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"))) -- cgit v1.2.3