- adapted ui for hydra, more in line with nixos.org website

src/lib/Hydra/Base/Controller/ListBuilds.pm

@@ -53,7 +53,7 @@ sub all : Chained('get_builds') PathPart {
 
     my $page = int($c->req->param('page')) || 1;
 
-    my $resultsPerPage = 50;
+    my $resultsPerPage = 20;
 
     my $nrBuilds = scalar($c->stash->{allBuilds}->search({finished => 1}));
 

src/root/all.tt

@@ -9,8 +9,7 @@
 <p>Showing builds [% (page - 1) * resultsPerPage + 1 %] - [% (page - 1) * resultsPerPage + builds.size %]
 out of [% totalBuilds %] in order of descending timestamp.</p>
 
-[% INCLUDE renderBuildList %]
+[% BLOCK renderNav %]
-
 <p>
 [<a href="[% "$baseUri?page=1" %]">First</a>]
 [% IF page > 1 %]
@@ -21,5 +20,13 @@ out of [% totalBuilds %] in order of descending timestamp.</p>
 [% END %]
 [<a href="[% "$baseUri?page="; (totalBuilds - 1) div resultsPerPage + 1 %]">Last</a>]
 </p>
+[% END %]
+
+
+[% INCLUDE renderNav %]
+[% INCLUDE renderBuildList %]
+[% INCLUDE renderNav %]
+
+
 
 [% END %]

src/root/common.tt

@@ -68,7 +68,7 @@
         [% END %]
         <th>#</th>
         [% IF showSchedulingInfo %]
-          <th>Priority</th>
+          <th>P</th>
         [% END %]
         <th>Job</th>
         <th>Release Name</th>
@@ -77,7 +77,9 @@
         [% IF showStatusChange %]
           <th class="headerSortUp">Last status change</th>
         [% END %]
-        <th>Description</th>
+        [% IF showDescription %]
+          <th>Description</th>
+        [% END %]
       </tr>
     </thead>
     <tbody>
@@ -120,13 +122,16 @@
             [% END %]
           </td>
           [% END %]
+        [% IF showDescription %]
           <td>[% build.description %]</td>
+        [% END -%]
         </tr>
       [% END -%]
     </tbody>
   </table>
 [% END %]
 
+[% BLOCK renderLink %]<a href="[% uri %]">[% title %]</a>[% END %]
 
 [% BLOCK showBuildStats %]
 

src/root/contextbar.tt

@@ -0,0 +1,40 @@
+[% BLOCK makeLinkWrapped %]
+  <li [% IF curUri == uri %]class="active"[% END %]>
+    <a href="[% uri %]">[% title %]</a>
+    [% content %]
+  </li>
+[% END %]
+
+[% BLOCK makeLink -%]
+[% INCLUDE makeLinkWrapped content="" -%]
+[% END %]
+
+[% BLOCK makeSubMenu %]
+    <ul class="short-menu" id="context-menu">
+      [% content %]
+    </ul>
+[% END %]
+
+
+
+[% IF project %]
+[% WRAPPER makeSubMenu %]
+    [% INCLUDE makeLink
+      uri = c.uri_for(c.controller('Project').action_for('view'), [project.name])
+       title = project.name %]
+
+  [% IF jobset %]
+    [% INCLUDE makeLink
+      uri = c.uri_for(c.controller('Jobset').action_for('index'), [project.name, jobset.name])
+      title = jobset.name %]
+  [% END %]
+
+  [% IF job %]
+      [% INCLUDE makeLink
+        uri = c.uri_for(c.controller('Job').action_for('index'), [project.name, jobset.name, job.name])
+        title = job.name %]
+
+  [% END %]
+[% END %]
+[% END %]
+

src/root/job.tt

@@ -2,7 +2,11 @@
 [% PROCESS common.tt %]
 
 
-<h1>Job <tt>[% project.name %]:[% jobset.name %]:[% job.name %]</tt></h1>
+<h1>Job <tt>[% INCLUDE renderLink
+      uri = c.uri_for(c.controller('Project').action_for('view'), [project.name])
+       title = project.name %]:[% INCLUDE renderLink
+      uri = c.uri_for(c.controller('Jobset').action_for('index'), [project.name, jobset.name])
+       title = jobset.name %]:[% job.name %]</tt></h1>
 
 
 <h2>Channels</h2>

src/root/jobset.tt

@@ -1,7 +1,6 @@
 [% WRAPPER layout.tt title=(edit ? (create ? "New Jobset in Project ‘$project.name’" : "Editing Jobset ‘$project.name:$jobset.name’") : "Jobset ‘$project.name:$jobset.name’") %]
 [% PROCESS common.tt %]
 
-
 [% IF edit %]
   <form action="[% IF create %][% c.uri_for('/project' project.name 'create-jobset/submit') %][% ELSE %][% c.uri_for('/jobset' project.name jobset.name 'submit') %][% END %]" method="post">
 [% END %]
@@ -10,7 +9,9 @@
 [% IF create %]
   <h1>New Jobset in Project <tt>[% project.name %]</tt></h1>
 [% ELSE %]
-  <h1>Jobset <tt>[% project.name %]:[% jobset.name %]</tt></h1>
+  <h1>Jobset <tt>[% INCLUDE renderLink
+      uri = c.uri_for(c.controller('Project').action_for('view'), [project.name])
+       title = project.name %]:[% jobset.name %]</tt></h1>
 [% END %]
 
 

src/root/layout.tt

@@ -11,8 +11,8 @@
   <head>
     <title>Hydra - [% title %]</title>
     <link rel="stylesheet" href="/static/css/hydra.css" type="text/css" />
-    <link rel="stylesheet" href="/static/css/navbar.css" type="text/css" />
     <link rel="stylesheet" href="/static/css/nix-common.css" type="text/css" />
+    <link rel="stylesheet" href="/static/css/nixos-site.css" type="text/css" />
     <link rel="stylesheet" href="/static/css/logfile.css" type="text/css" />
     <script type="text/javascript" src="/static/js/jquery-pack.js"></script> 
     <script type="text/javascript" src="/static/js/tablesorter/jquery.tablesorter.js"></script>
@@ -71,24 +71,29 @@
   </head>
   
   <body>
-    <div id="container">
+    <div id="page"> 
-
+ 
-      <div id="leftnavbar">
+      <div id="header"> 
-        <div id="logo"><a class="no-hover" href="/"><img src="/static/images/hydra.png" alt="Hydra" /></a></div>
+        <div id="logo"><a class="no-hover" href="/"><img src="/static/images/hydra.png" alt="Hydra Logo" /></a></div> 
+          [% PROCESS topbar.tt %]        
+          [% PROCESS contextbar.tt %]
+      </div>
+      <div id="main"> 
         [% PROCESS navbar.tt %]        
-      </div>
 
-      <div id="content">
+        <div id="content">
-        [% content %]
+          [% content %]
-        <div id="footer">
-          <hr />
-          <em>Hydra [% HTML.escape(version) %] (using [% HTML.escape(nixVersion) %]).</em>
-          Page generated on [% INCLUDE renderDateTime %].
-          [% IF c.user_exists %]
-          You are logged in as <tt>[% c.user.username %]</tt>.
-          [% END %]
         </div>
+
       </div>
+      <div id="footer">
+        <div id="last-modified">
+        <em>Hydra [% HTML.escape(version) %] (using [% HTML.escape(nixVersion) %]).</em>
+        Page generated on [% INCLUDE renderDateTime %].
+        [% IF c.user_exists %]
+        You are logged in as <tt>[% c.user.username %]</tt>.
+        [% END %]
+        </div>
 
     </div>
   </body>

src/root/navbar.tt

@@ -5,61 +5,36 @@
   </li>
 [% END %]
 
+
+[% BLOCK menuItem %]
+  <li [% IF "${root}${curUri}" == uri %]class="active"[% END %]>
+    <a href="[% uri %]">[% title %]</a>
+  </li>
+[% END %]
+
 [% BLOCK makeLink -%]
 [% INCLUDE makeLinkWrapped content="" -%]
 [% END %]
 
 [% BLOCK makeSubMenu %]
   [% extra = collapsed ? "collapsed" : "" %]
-  <li class="submenu">
+  <div id="left-title">[% title %]</div>
-    <div class="title [% extra %]"><a class="[% collapsed ? "submenuToggleCollapsed" : "submenuToggleExpanded" %]"
+  <ul id="left-menu">
-      href="javascript:">[% HTML.escape(title) %]</a></div>
-    <ul class="submenu [% extra %]">
       [% content %]
-    </ul>
+  </ul>
-  </li>
 [% END %]
 
+[% IF project %]
 
-<ul class="menu">
+<div id="left-bar">  
-
-  
-  [% WRAPPER makeSubMenu title="Hydra" collapsed=0  %]
-      [% INCLUDE makeLink
-        uri = c.uri_for(c.controller('Root').action_for('index'))
-        title = "Overview" %]
-      [% INCLUDE makeLink
-        uri = c.uri_for(c.controller('Root').action_for('queue'))
-        title = "Queue" %]
-      [% INCLUDE makeLink
-        uri = c.uri_for(c.controller('Root').action_for('all'))
-        title = "All builds" %]
-      [% INCLUDE makeLink
-        uri = c.uri_for(c.controller('Root').action_for('jobstatus'))
-        title = "Job status" %]
-      [% INCLUDE makeLink
-        uri = c.uri_for(c.controller('Root').action_for('errors'))
-        title = "Errors" %]
-  [% END %]
-
 
   [% IF project %]
     [% WRAPPER makeSubMenu title="Project" collapsed=(jobset || job)  %]
-      [% INCLUDE makeLink
+      [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('view'), [project.name]) title = "Overview" %]
-        uri = c.uri_for(c.controller('Project').action_for('view'), [project.name])
+      [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('releases'), [project.name]) title = "Releases" %]
-         title = "Overview" %]
+      [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('all'), [project.name]) title = "All builds" %]
-      [% INCLUDE makeLink
+      [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('jobstatus'), [project.name]) title = "Job status" %]
-        uri = c.uri_for(c.controller('Project').action_for('releases'), [project.name])
+      [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('errors'), [project.name]) title = "Errors" %]
-         title = "Releases" %]
-      [% INCLUDE makeLink
-        uri = c.uri_for(c.controller('Project').action_for('all'), [project.name])
-        title = "All builds" %]
-      [% INCLUDE makeLink
-        uri = c.uri_for(c.controller('Project').action_for('jobstatus'), [project.name])
-        title = "Job status" %]
-      [% INCLUDE makeLink
-        uri = c.uri_for(c.controller('Project').action_for('errors'), [project.name])
-        title = "Errors" %]
     [% END %]
   [% END %]
   
@@ -99,36 +74,7 @@
     [% END %]
   [% END %]
   
-
+</div>
-  [% WRAPPER makeSubMenu title="Admin" collapsed=0 %]
+[% END %]
-      [% IF c.user_exists %]
-        [% INCLUDE makeLink
-          uri = c.uri_for(c.controller('Root').action_for('logout'))
-          title = "Logout" %]
-      [% ELSE %]
-        [% INCLUDE makeLink
-          uri = c.uri_for(c.controller('Root').action_for('login'))
-          title = "Login" %]
-      [% END %]
-      [% INCLUDE makeLink
-        uri = c.uri_for(c.controller('Project').action_for('create'))
-        title = "Create project" %]
-  [% END %]
 
 
-</ul>
-
-
-<script type="text/javascript">
-  $(document).ready(function() {
-    $('.submenuToggleExpanded').toggle(
-      function () { $(".submenu", $(this).parents(".submenu")).slideUp(); },
-      function () { $(".submenu", $(this).parents(".submenu")).slideDown(); }
-    );
-
-    $('.submenuToggleCollapsed').toggle(
-      function () { $(".submenu", $(this).parents(".submenu")).slideDown(); },
-      function () { $(".submenu", $(this).parents(".submenu")).slideUp(); }
-    );
-  });
-</script>

src/root/overview.tt

@@ -34,6 +34,14 @@ href="http://nixos.org/hydra"><em>[Read more...]</em></a></p>
   </tbody>
 </table>
 
+[% IF c.user_exists %]
+<p>
+  [ [% INCLUDE maybeLink
+          uri = c.uri_for(c.controller('Project').action_for('create'))
+          content = "Create project" %] ]
+</p>
+[% END %]
+
 
 <h2>Channels</h2>
 

src/root/static/css/hydra.css

@@ -1,5 +1,5 @@
 #logo img {
-    width: 11em;
+    width: 8em;
 }
 
 tr.clickable:hover {
@@ -154,3 +154,4 @@ button {
 form.inline {
     display: inline;
 }
+

src/root/static/css/nixos-site.css

@@ -0,0 +1,170 @@
+body {
+    background-color: gray;
+    margin: 0;
+}
+
+/* The main container element. */
+div#page {
+    max-width: 80em; 
+    min-width: 50em;
+    min-height: 20em;
+    margin: 1em auto;
+    background-color: white;
+    
+    /* Put a rounded border around the page. */
+    border: 1px solid black;
+    padding: 1em;
+    border-radius: 1em;
+    -moz-border-radius: 1em;
+    -webkit-border-radius: 1em;
+    -moz-box-shadow: #404040 0px 5px 50px;
+    -webkit-box-shadow: #404040 0px 5px 50px;
+}
+
+/* The header. */
+div#header {
+    border-bottom: 1px solid black;
+    position: relative;
+    padding-bottom: 1em;
+}
+
+div#logo {
+    display: inline;
+}
+
+ul#top-menu {
+    top: 0em;
+}
+
+ul#context-menu {
+    bottom: 1em;
+}
+
+
+/* The footer. */
+div#footer {
+    margin-top: 1em;
+    border-top: 1px solid black;
+    position: relative;
+}
+
+div#last-modified {
+    font-size: 80%;
+    font-style: italic;   
+}
+
+ul#bottom-menu {
+    bottom: 0em;
+}
+
+/* The top and bottom menus. */
+ul.short-menu {
+    display: block;
+    position: absolute;
+    right: 0em;
+    margin: 0;
+    padding: 0;
+}
+
+ul.short-menu li {
+    display: inline;
+
+    /* Put a ">" in front of the menu item. */
+    margin-left: 0.5em;
+    padding-left: 1.3em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    background-image: url(../images/arrow-right.gif);
+    background-repeat: no-repeat;
+    background-position: 0.3em center;
+}
+
+ul.short-menu li a {
+    color: black;
+    text-decoration: none;
+}
+
+ul.short-menu li a:hover {
+    text-decoration: none;
+    border-bottom: 1px dotted black;
+    background: white;
+}
+
+/* The left menu. */
+div#main {
+    position: relative;
+    min-height: 10em;
+}
+
+div#left-bar {
+    position: absolute;
+    left: 0em;
+    width: 8em;
+    min-height: 10em;
+}
+
+div#left-title {
+    font-weight: bold;
+    padding-bottom: 0.5em;
+    margin-bottom: 0.5em;
+    border-bottom: 1px dotted black;
+}
+
+ul#left-menu {
+    padding: 0 0 0 0;
+    margin: 0 0 0 0;
+}
+
+ul#left-menu li {
+    font-size: 90%;
+    list-style: none;
+    padding-left: 1.3em;
+    margin-bottom: 0.5em;
+}
+
+ul#left-menu li {
+    background-image: url(../images/arrow-right.gif);
+    background-repeat: no-repeat;
+    background-position: 0 center;
+}
+
+ul#left-menu li.active {
+    background-image: url(../images/arrow-right-active.gif);
+    background-color: #eef2ff;
+    font-weight: bold;
+    color: #606060;
+}
+
+/* The content. */
+div#left-bar + div#content {
+    margin-left: 9em;
+}
+
+/* Inline (floating) images. */
+img.inline, img.inlineNoBorder {
+    float: right;
+    margin-left: 1em;
+    margin-bottom: 1em;
+}
+
+/* Release tables. */
+.reldate {
+    font-style: italic;   
+}
+
+table.releases td {
+    border: 0px;
+}
+
+/* Screenshot table. */
+table.screenshots {
+    border-style: hidden;
+}
+
+table.screenshots td {
+    vertical-align: middle;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    border: 0px;
+    border-bottom: 1px dotted black;
+}

src/root/topbar.tt

@@ -0,0 +1,47 @@
+[% BLOCK makeLinkWrapped %]
+  <li [% IF curUri == uri %]class="active"[% END %]>
+    <a href="[% uri %]">[% title %]</a>
+    [% content %]
+  </li>
+[% END %]
+
+[% BLOCK makeLink -%]
+[% INCLUDE makeLinkWrapped content="" -%]
+[% END %]
+
+[% BLOCK makeSubMenu %]
+    <ul class="short-menu" id="top-menu">
+      [% content %]
+    </ul>
+  </li>
+[% END %]
+
+
+  [% WRAPPER makeSubMenu title="Hydra" %]
+      [% INCLUDE makeLink
+        uri = c.uri_for(c.controller('Root').action_for('index'))
+        title = "Overview" %]
+      [% INCLUDE makeLink
+        uri = c.uri_for(c.controller('Root').action_for('queue'))
+        title = "Queue" %]
+      [% INCLUDE makeLink
+        uri = c.uri_for(c.controller('Root').action_for('all'))
+        title = "All builds" %]
+      [% INCLUDE makeLink
+        uri = c.uri_for(c.controller('Root').action_for('jobstatus'))
+        title = "Job status" %]
+      [% INCLUDE makeLink
+        uri = c.uri_for(c.controller('Root').action_for('errors'))
+        title = "Errors" %]
+      [% IF c.user_exists %]
+        [% INCLUDE makeLink
+          uri = c.uri_for(c.controller('Root').action_for('logout'))
+          title = "Sign out" %]
+      [% ELSE %]
+        [% INCLUDE makeLink
+          uri = c.uri_for(c.controller('Root').action_for('login'))
+          title = "Sign in" %]
+      [% END %]
+  [% END %]
+
+