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

2010-01-07 14:25:12 +00:00 · 2010-01-07 14:25:12 +00:00 · 67f468e0a3
parent 791a6eddd6
commit 67f468e0a3
12 changed files with 331 additions and 97 deletions
--- a/src/lib/Hydra/Base/Controller/ListBuilds.pm
+++ b/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}));

--- a/src/root/all.tt
+++ b/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 %]
--- a/src/root/common.tt
+++ b/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 %]
+        [% 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 %]

--- a/src/root/contextbar.tt
+++ b/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 %]
+
--- a/src/root/job.tt
+++ b/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>
--- a/src/root/jobset.tt
+++ b/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 %]


--- a/src/root/layout.tt
+++ b/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="logo"><a class="no-hover" href="/"><img src="/static/images/hydra.png" alt="Hydra" /></a></div>
-        [% PROCESS navbar.tt %]        
+      <div id="header"> 
+        <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 id="content">
          [% content %]
+        </div>
+
+      </div>
      <div id="footer">
-          <hr />
+        <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>

    </div>
  </body>
--- a/src/root/navbar.tt
+++ b/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 class="title [% extra %]"><a class="[% collapsed ? "submenuToggleCollapsed" : "submenuToggleExpanded" %]"
-      href="javascript:">[% HTML.escape(title) %]</a></div>
-    <ul class="submenu [% extra %]">
+  <div id="left-title">[% title %]</div>
+  <ul id="left-menu">
      [% content %]
  </ul>
-  </li>
 [% END %]

+[% IF project %]

-<ul class="menu">
-
-  
-  [% 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 %]
-
+<div id="left-bar">  

  [% IF project %]
    [% WRAPPER makeSubMenu title="Project" collapsed=(jobset || job)  %]
-      [% INCLUDE makeLink
-        uri = c.uri_for(c.controller('Project').action_for('view'), [project.name])
-         title = "Overview" %]
-      [% INCLUDE makeLink
-        uri = c.uri_for(c.controller('Project').action_for('releases'), [project.name])
-         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" %]
+      [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('view'), [project.name]) title = "Overview" %]
+      [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('releases'), [project.name]) title = "Releases" %]
+      [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('all'), [project.name]) title = "All builds" %]
+      [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('jobstatus'), [project.name]) title = "Job status" %]
+      [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('errors'), [project.name]) title = "Errors" %]
    [% END %]
  [% END %]
  
@ -99,36 +74,7 @@
    [% END %]
  [% END %]
  
-
-  [% WRAPPER makeSubMenu title="Admin" collapsed=0 %]
-      [% 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" %]
+</div>
 [% 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>
--- a/src/root/overview.tt
+++ b/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>

--- a/src/root/static/css/hydra.css
+++ b/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;
 }
+
--- a/src/root/static/css/nixos-site.css
+++ b/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;
+}
--- a/src/root/topbar.tt
+++ b/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 %]
+
+