From 72e26a0614cc2cf069c0ef43f331a353098e12db Mon Sep 17 00:00:00 2001
From: Yorhel <git@yorhel.nl>
Date: Thu, 6 Oct 2016 14:43:07 +0200
Subject: [PATCH] Improved layout of package page

---
 www/index.pl | 58 +++++++++++++++++++++++++---------------------------
 www/man.css  | 17 ++++++++++++---
 2 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/www/index.pl b/www/index.pl
index e42a8a2..00a2e7d 100755
--- a/www/index.pl
+++ b/www/index.pl
@@ -392,43 +392,41 @@ sub pkg_info {
   # Latest version of this package determines last modification date of the page.
   $self->setLastMod($vers->[0]{released});
 
-  # TODO: A "previous" link would be nice...
-  my $next = sub {
-    use utf8;
-    if($more) {
-      p class => 'pagination';
-       a href => "/pkg/$sys->{short}/$pkg->{category}/$pkg->{name}/$sel->{version}?s=$mans->[199]{name}", 'next »';
-      end;
-    }
-  };
-
-  my $title = "$sys->{name}".($sys->{release}?" $sys->{release}":"")." / $pkg->{category} / $pkg->{name} $sel->{version}";
-  $self->htmlHeader(title => $title);
+  my $title = "$sys->{name}".($sys->{release}?" $sys->{release}":"")." / $pkg->{category} / $pkg->{name}";
+  $self->htmlHeader(title => "$title $sel->{version}");
   h1 $title;
 
-  h2 'Versions';
-  ul id => 'packages';
-   for(@$vers) {
-     li;
-      txt "$_->{released} ";
-      a href => "/pkg/$sys->{short}/$pkg->{category}/$pkg->{name}/$_->{version}", $_->{version} if $_ != $sel;
-      b " $_->{version}" if $_ == $sel;
-     end;
-   }
+  div id => 'pkgversions';
+   h2 'Versions';
+   ul;
+    for(@$vers) {
+      li;
+       a href => "/pkg/$sys->{short}/$pkg->{category}/$pkg->{name}/$_->{version}", $_->{version} if $_ != $sel;
+       b " $_->{version}" if $_ == $sel;
+       i " $_->{released}";
+      end;
+    }
+   end;
   end;
 
+  div id => 'pkgmans';
   h2 "Manuals for version $sel->{version}";
-  $next->();
-  ul id => 'manuals';
-   for(@$mans) {
-     li;
-      a href => "/$_->{name}/".substr($_->{hash},0,8), "$_->{name}($_->{section})";
-      b " $_->{locale}" if $_->{locale};
-      i " $_->{filename}";
+   ul;
+    for(@$mans) {
+      li;
+       a href => "/$_->{name}/".substr($_->{hash},0,8), "$_->{name}($_->{section})";
+       b " $_->{locale}" if $_->{locale};
+       i " $_->{filename}";
+      end;
+    }
+   end;
+   if($more) {
+     use utf8;
+     p class => 'pagination';
+      a href => "/pkg/$sys->{short}/$pkg->{category}/$pkg->{name}/$sel->{version}?s=$mans->[199]{name}", 'next »';
      end;
    }
   end;
-  $next->();
 
   $self->htmlFooter;
 }
@@ -624,7 +622,7 @@ sub htmlHeader {
 
   html;
    head;
-    Link rel => 'stylesheet', type => 'text/css', href => '/man.css';
+    Link rel => 'stylesheet', type => 'text/css', href => '/man.css?2';
     title $o{title}.' - manned.org';
    end 'head';
    body;
diff --git a/www/man.css b/www/man.css
index 175384c..42ba3f6 100644
--- a/www/man.css
+++ b/www/man.css
@@ -77,9 +77,20 @@ i.grayedout { color: #aaa; font-size: 13px; }
 #searchres i { color: #aaa; font-size: 13px; }
 #searchres a { padding-right: 2px }
 
-#manuals { margin: 20px 0; -webkit-column-width: 500px; -moz-column-width: 500px; column-width: 500px }
-#manuals li { display: block; }
-#manuals i { color: #aaa; font-size: 13px; }
+#pkgversions { margin-top: 10px }
+#pkgversions h2 { margin: 0 }
+#pkgversions { float: left; padding: 0 10px;  }
+#pkgversions ul { margin: 10px 0; padding-right: 10px; border-right: 1px dashed #468 }
+#pkgversions li { display: block; }
+#pkgversions i { color: #aaa; font-size: 13px; }
+#pkgversions a { padding-right: 2px }
+
+#pkgmans { margin-top: 10px }
+#pkgmans h2 { margin: 0 }
+#pkgmans { float: left }
+#pkgmans ul { margin: 10px 0 }
+#pkgmans li { display: block; }
+#pkgmans i { color: #aaa; font-size: 13px; }
 
 #footer { height: 60px; clear: both; padding: 4px 10px; color: #f8f8f8; margin: 0 0 -20px 0;
   border-top: 1px solid #888; font-size: 13px; background: url('images/gradients.png') 0 -37px repeat-x;