Hello, Sorry it's taken a while to actually work on this. Been a bit busy, and had a minor data-loss disaster!
Please find attached a small patch that centralises CSS where possible and moves the JavaScript into the <head> section. Next I plan to invert the JavaScript, so it defaults to showing package descriptions for people with JavaScript disabled, without negatively affecting JavaScript users' experience. I also want to improve the CSS and add a table-header and a JavaScript snippet to make the header follow the top of the window downwards when scrolling down the page (i.e., set the table-header position to 'fixed'). Hope this all makes sense — and let me know if you have any problems with the patch. Best wishes, Alex ===File ~/projects/guix/0001-list-packages-Centralise-CSS-styling-in-head.patch=== >From c3a9ba4635e0af47423391b9777ec64f872bd2ab Mon Sep 17 00:00:00 2001 From: Alex Sassmannshausen <alex.sassmannshau...@gmail.com> Date: Sun, 4 Aug 2013 21:46:26 +0200 Subject: [PATCH] list-packages: Centralise CSS styling in <head>. * build-aux/list-packages.scm (package-logo): Assign class of 'package-description' to package synopsis div; 'package-logo'. Move inline CSS where possible. (packages->sxml): Assign id of 'intro' to intro div, 'packages' to the table. Move inline CSS. (list-packages): Create new <style> section, containing all inline CSS. Move JavaScript <script> section to above banner include to place it in <head>. --- build-aux/list-packages.scm | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/build-aux/list-packages.scm b/build-aux/list-packages.scm index 8d38728..ceadbef 100755 --- a/build-aux/list-packages.scm +++ b/build-aux/list-packages.scm @@ -104,12 +104,13 @@ exec guile -l "$0" \ description-id))) ,(package-synopsis package)) (div (@ (id ,description-id) - (style "position: relative; display: none;")) + (class "package-description") + (style "display: none;")) ,(match (package-logo (package-name package)) ((? string? url) `(img (@ (src ,url) (height "35em") - (style "float: left; padding-right: 1em;")))) + (class "package-logo")))) (_ #f)) (p ,(package-description package)) ,(license package) @@ -121,7 +122,7 @@ exec guile -l "$0" \ "Return an HTML page as SXML describing PACKAGES." `(div (h2 "GNU Guix Package List") - (div (@ (style "margin-bottom: 5em;")) + (div (@ (id "intro")) (div (img (@ (src "graphics/guix-logo.small.png") (alt "GNU Guix and the GNU System") @@ -134,7 +135,7 @@ exec guile -l "$0" \ "Our " (a (@ (href "http://hydra.gnu.org/jobset/gnu/master")) "continuous integration system") " shows their current build status.") - (table (@ (style "border: none;")) + (table (@ (id "packages")) ,@(map package->sxml packages)))) @@ -155,8 +156,6 @@ with gnu.org server-side include and all that." <!-- Parent-Version: 1.70 $ --> <title>GNU Guix - GNU Distribution - GNU Project</title> -<!--#include virtual=\"/server/banner.html\" --> - <script language=\"javascript\" type=\"text/javascript\"> // license: CC0 function show_hide(idThing) @@ -170,7 +169,23 @@ function show_hide(idThing) } } } -</script>") +</script> +<style> +div#intro { +margin-bottom: 5em; +} +table#packages { +border: none; +} +div.package-description { +position: relative; +} +img.package-logo { +float: left; padding-right: 1em; +} +</style> +<!--#include virtual=\"/server/banner.html\" --> +") (display (sxml->xml (packages->sxml packages))) (format #t "<!--#include virtual=\"/server/footer.html\" --> <div id=\"footer\"> -- 1.7.10.4 ============================================================