diff mbox

[Branch,~linaro-validation/lava-server/trunk] Rev 278: New website look and feel.

Message ID 20111109192615.3833.25909.launchpad@ackee.canonical.com
State Accepted
Headers show

Commit Message

Zygmunt Krynicki Nov. 9, 2011, 7:26 p.m. UTC
------------------------------------------------------------
revno: 278
committer: Zygmunt Krynicki <zygmunt.krynicki@linaro.org>
branch nick: lava-server
timestamp: Wed 2011-11-09 00:50:58 +0100
message:
  New website look and feel.
  
  The side is modeled after linaro.org website, the general theme is kept
  similar, but not identical. In particular we don't use a fixed-width content
  pane and use a totally different top-level pane.
added:
  lava_server/templates/layouts/form.html
modified:
  lava_server/htdocs/css/default.css
  lava_server/htdocs/css/demo_table_jui.css
  lava_server/templates/layouts/base.html
  lava_server/templates/layouts/content.html
  lava_server/templates/layouts/content_with_sidebar.html


--
lp:lava-server
https://code.launchpad.net/~linaro-validation/lava-server/trunk

You are subscribed to branch lp:lava-server.
To unsubscribe from this branch go to https://code.launchpad.net/~linaro-validation/lava-server/trunk/+edit-subscription
diff mbox

Patch

=== modified file 'lava_server/htdocs/css/default.css'
--- lava_server/htdocs/css/default.css	2011-10-06 11:51:05 +0000
+++ lava_server/htdocs/css/default.css	2011-11-08 23:50:58 +0000
@@ -1,3 +1,18 @@ 
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  color: #EEE;
+  background-color: #999999;
+  font-family: Ubuntu, Helvetica Neue, Verdana, sans-serif;
+}
+
 body, input, th, td {
   font-family: Ubuntu, Helvetica Neue, Verdana, sans-serif;
   font-size: 10pt;
@@ -7,13 +22,6 @@ 
   font-family: UbuntuBeta Mono, Lucida Console, Consolas, monospace;
 }
 
-body {
-  color: 333;
-  background-color: #f5f6f7;
-  padding: 0;
-  margin: 0;
-}
-
 a {
   color: #08C;
 }
@@ -22,328 +30,317 @@ 
 /* Selection style */
 
 ::selection { 
-  color: white !important;
-  background-color: #222 !important;
+  color: white;
+  background-color: #222;
 }
 
 ::-moz-selection {
-  color: white !important;
-  background-color: #222 !important;
+  color: white;
+  background-color: #222;
 }
 
 ::-webkit-selection {
-  color: white !important;
-  background-color: #222 !important;
+  color: white;
+  background-color: #222;
 }
 
 /* The master container of all things, similar to body */
 
 #lava-container {
+  color: #EEE;
+  position: relative;
+  height: 100%; /* IE6 */
+  height: auto !important; /* good browsers */
+  min-height: 100%; /* good browsers */
 }
 
 /* Header */
 
-#lava-server-header {
-  background: #706f6f url(../images/dark-noise.png);
-  color: #f1efef;
-  font-family: "Ubuntu Light", Helvetica Neue, Verdana, sans-serif;
-  font-size: 12pt;
-  box-shadow: 0 3px 3px rgba(127, 127, 127, 0.5);
-  text-shadow: 1px 1px 0px #333, 0 0 3px #000;
-  padding: 0.9ex 2ex;
-}
-
-#lava-server-header a {
-  color: inherit;
-}
-
-/* User Box (part of header) */
-
-#lava-server-user-box {
-  font-size: 9pt;
-  /* Don't inherit font family, we're moved around and header uses ubuntu light */
-  font-family: "Ubuntu", Helvetica Neue, Verdana, sans-serif !important;
-}
-
-#lava-server-user-box span.username {
+#lava-panel {
+  background: black;
+  color: #cccccc;
+  font-family: 'Cantarell', sans-serif;
   font-weight: bold;
-}
-
-#lava-server-header #lava-server-user-box {
-  /* Float right only when in the user box.
-   * When relocated to the sidebar it will 
-   * Vnot be floating anymore */
+  font-size: 14px;
+  border-bottom: 2px solid #a1cd41;
+
+  width: 100%;
+
+  display: box;
+  display: -moz-box;
+  display: -webkit-box;
+}
+
+#lava-panel .lava-panel-element {
+  display: block;
+  line-height: 18px;
+  min-height: 18px;
+  padding: 10px 1ex;
+}
+
+#lava-panel .lava-panel-element.has-menu {
+  cursor: pointer;
+}
+
+/*
+#lava-panel .lava-panel-element:hover {
+  background-color: #444;
+  color: #000;
+}
+
+#lava-panel a.lava-panel-element:hover {
+  color: #a1cd41;
+}
+
+#lava-panel .lava-panel-element.no-hover:hover {
+  background-color: inherit;
+  color: inherit;
+}
+*/
+
+#lava-panel .lava-panel-element.active {
+  background-image: linear-gradient(bottom, rgb(161,205,65) 0%, rgb(0,0,0) 20%);
+  background-image: -o-linear-gradient(bottom, rgb(161,205,65) 0%, rgb(0,0,0) 20%);
+  background-image: -moz-linear-gradient(bottom, rgb(161,205,65) 0%, rgb(0,0,0) 20%);
+  background-image: -webkit-linear-gradient(bottom, rgb(161,205,65) 0%, rgb(0,0,0) 20%);
+  background-image: -ms-linear-gradient(bottom, rgb(161,205,65) 0%, rgb(0,0,0) 20%);
+  background-image: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    color-stop(0, rgb(161,205,65)),
+    color-stop(0.2, rgb(0,0,0))
+  );
+  color: white;
+}
+
+
+#lava-panel a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Spacer */
+
+#lava-panel-spacer {
+  box-flex: 1;
+  -moz-box-flex: 1;
+  -webkit-box-flex: 1;
+}
+
+/* Panel menu items */
+
+#lava-panel ul.lava-panel-menu {
+  list-style: none;
+
   position: absolute;
-  right: 0;
-  top: 0;
-  padding: 2pt 2pt 5pt 5pt;
-}
-
-#lava-server-sidebar #lava-server-user-box {
-  text-align: right;
-  text-shadow: none;
-}
-
-
-/* Navigation (part of header) */ 
-
-#lava-server-navigation ul,
-#lava-server-extension-navigation ul {
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-}
-
-#lava-server-navigation ul li,
-#lava-server-extension-navigation ul li {
-  margin: 0 1ex 0 0;
-  padding: 0;
-  list-style: none;
-  display: inline-block;
-}
-
-#lava-server-navigation ul li a,
-#lava-server-extension-navigation ul li a {
-  font-family: Ubuntu Condensed, Helvetica Neue, Verdana, sans-serif;
-  text-decoration: none;
+  left: 0;
+  top: 35px;
+
+  background: black;
+  border: 2px solid #a1cd41;
+  /* border-top: none; */
+
+  margin: 0;
+  padding: 0;
+  display: none;
+}
+
+#lava-panel ul.lava-panel-menu li {
+  margin: 0;
+  padding: 2pt 1ex;
+  text-align: center;
+}
+
+#lava-panel ul.lava-panel-menu li a:hover {
+  color: #fff;
+  text-decoration: underline;
+}
+
+/* User indicator */
+
+#lava-user-indicator span.username {
+  font-weight: bold;
+}
+
+#lava-user-indicator img {
+  vertical-align: top;
+}
+
+#lava-user-indicator a {
+  text-decoration: underline;
+}
+
+#lava-user-indicator .sign-in,
+#lava-user-indicator .sign-out, 
+#lava-user-indicator .admin-site { 
+  font-size: smaller;
+  position: relative;
+  top: -1pt;
+}
+
+/* AJAX indicator */
+
+#lava-ajax-indicator {
+  opacity: 0.0;
+}
+
+#lava-ajax-indicator img {
+  vertical-align: middle;
 }
 
 /* Breadcrumbs */
 
-#lava-server-breadcrumbs {
+#lava-breadcrumbs {
   font-size: 10pt;
   margin: 1ex 1em;
   padding: 0;
 }
 
-#lava-server-breadcrumbs ul {
+#lava-breadcrumbs ul {
   display: inline-block;
-  margin: 0;
+  margin: 0 0 0 1ex;
   padding: 0;
 }
 
-#lava-server-breadcrumbs ul li {
+#lava-breadcrumbs ul li {
   list-style: none;
-  display: inline-block;
+  display: inline;
   margin: 0;
   padding: 0;
 }
 
-#lava-server-breadcrumbs ul li a {
+#lava-breadcrumbs ul li a {
   text-decoration: underline;
   color: inherit;
 }
 
-#lava-server-breadcrumbs ul li:before {
+#lava-breadcrumbs ul li:before {
   content: "ยป ";
 }
 
-#lava-server-breadcrumbs ul li:first-child:before {
+#lava-breadcrumbs ul li:first-child:before {
   content: "";
 }
 
+#lava-around-content {
+  padding-bottom: 100px;
+  margin: 0 3em;
+  width: auto;
+}
+
+#lava-around-content:before {
+  display: block;
+  content: " ";
+  width: 100%;
+  height: 360px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1000;
+  background-image: linear-gradient(bottom, rgb(153,153,153) 0%, rgb(0,0,0) 70%);
+  background-image: -o-linear-gradient(bottom, rgb(153,153,153) 0%, rgb(0,0,0) 70%);
+  background-image: -moz-linear-gradient(bottom, rgb(153,153,153) 0%, rgb(0,0,0) 70%);
+  background-image: -webkit-linear-gradient(bottom, rgb(153,153,153) 0%, rgb(0,0,0) 70%);
+  background-image: -ms-linear-gradient(bottom, rgb(153,153,153) 0%, rgb(0,0,0) 70%);
+  background-image: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    color-stop(0, rgb(153,153,153)),
+    color-stop(0.7, rgb(0,0,0))
+  );
+}
+
+#lava-logo {
+  margin: 10px 0;
+  border: none;
+}
+
+#lava-content-and-sidebar,
+#lava-content-without-sidebar {
+  background-color: white;
+  border-radius: 8px;
+  color: #444;
+  margin: 1ex 0 75px 0;
+  overflow-x: auto;
+}
+
+
 /* Sidebar */
 
-#lava-server-sidebar {
-}
-
-#lava-server-sidebar.classic {
-  background-color: white;
-  border-radius: 3px;
-  border: 1px solid #999;
-  color: #444;
-  font-family: Ubuntu, Helvetica Neue, Verdana, sans-serif;
-  font-size: 10pt;
-  margin: 1ex;
-  padding: 1ex;
-}
-
-#lava-server-sidebar .lava-sidebar-controls {
-  margin-top: 1em;
-}
-
-#lava-server-sidebar.lava-sidebar {
-  color: #333;
-  height: 100%;
-  padding: 2pt 2pt 5pt 5pt;
-  border: none;
-  border-radius: 0;
-  z-index: 1000; /* otherwise data-tables seem to override this */
-  border-left: 1px solid gray;
-  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
-  background: white;
-  top: 0;
-  font-size: 9pt;
-  font-family: 'Ubuntu', sans-serif;
-  overflow-y: auto;
-}
-
-/* Hidden sidebar should be opaque. Removing the border and keeping the shadow
- * adds a nice dramatic effect. */
-#lava-server-sidebar.lava-sidebar-hidden {
-  opacity: 0.5;
-}
-
-/* Hidden sidebar that users hover should be highlighted nicely */ 
-#lava-server-sidebar.lava-sidebar-hidden:hover {
-  opacity: 1;
-  background: rgba(0, 136, 204, 0.5);
-  text-shadow: 1px 1px 1px #000;
-  color: white !important;
-}
-
-#lava-server-sidebar.lava-sidebar-hidden:hover h1,
-#lava-server-sidebar.lava-sidebar-hidden:hover h2,
-#lava-server-sidebar.lava-sidebar-hidden:hover h3,
-#lava-server-sidebar.lava-sidebar-hidden:hover h4,
-#lava-server-sidebar.lava-sidebar-hidden:hover a {
-  color: inherit !important;
-  border-color: inherit !important;
-}
-
-#lava-server-sidebar span.has-tooltip {
-  border-bottom: 1px dotted;
-}
-
-#lava-server-sidebar dl {
-  margin: 0 0 0 1em;
-  padding: 0;
-}
-
-#lava-server-sidebar dt {
-  font-weight: bold;
-  margin: 0;
-  padding: 0;
-}
-
-#lava-server-sidebar dd {
-  margin: 0 0 0.5ex 1em;
-  padding: 0;
-}
-
-#lava-server-sidebar p.help_text {
-  color: #888;
-  padding: 2pt;
-}
-
-#lava-server-sidebar .help-button {
-  margin: 0 0 0 0.5em;
-  font-size: 7pt;
-  font-weight: bold;
-  cursor: help;
-  background-color: #555;
-  color: white;
-  border-radius: 0.5em;
-  padding: 0.3em;
-}
-
-#lava-server-sidebar ul {
-  margin: 0 0 0 1em;
-  padding: 0 0 0 0;
-  list-style-position: inside;
-  list-style-type: square;
-}
-
-#lava-server-sidebar dd ul {
-  margin: 0 0 0 0;
-  padding: 0 0 0 0;
-}
-
-#lava-server-sidebar dd p {
-  margin: 0.2ex 0;
-}
-
-#lava-server-sidebar h3 {
-  margin: 2ex 0 1ex 0;
-  padding: 0 0 0 0;
-  font-size: 12pt;
-  font-weight: bold;
-  line-height: 1.2ex;
-  color: inherit;
-}
-
-#lava-server-sidebar h3 + p {
-  margin: 0;
-  text-indent: 1ex;
-}
-
-#lava-server-sidebar div.console {
-  background-color: #222;
-  color: white;
-  border: 3px solid #000;
-  padding: 0.5ex;
-  overflow: auto;
-}
-
-#lava-server-sidebar div.console code {
-  white-space: pre;
-}
-
+#lava-sidebar {
+  width: 200px;
+  vertical-align: top;
+  padding: 10px 15px;
+  display: table-cell;
+}
 
 /* Content */
 
-#lava-server-content {
-  color: #444;
-  padding: 1ex;
-  border: 1px solid #999;
-  border-radius: 3px;
-  margin: 1ex;
-  background-color: white;
-}
-
-
-h1 {
-  color: #222;
-  border-bottom: 3pt solid #444;
-}
-
-h2 {
-  color: #222;
-  border-bottom: 2pt solid #444;
-}
-
-h3 {
-  color: #111;
+#lava-content {
+  padding: 10px 15px;
+  vertical-align: top;
+  display: table-cell;
 }
 
 /* Footer */
 
-#lava-server-footer {
+#lava-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   clear: both;
-  margin: 1ex;
-  color: #999;
-}
-
-#lava-server-topics {
-  text-align: justify;
-  font-family: Ubuntu Condensed, Helvetica Neue, Verdana, sans-serif;
-  font-size: 11pt;
-  border-left: 1px solid #08C;
-}
-
-#lava-server-topics a {
+  border-top: 2px solid #fff;
+
+  margin: 0 auto;
+  height: 100px;
+
+  text-align: center;
+  font-size: 8pt;
+
+  background-image: linear-gradient(bottom, rgb(75,75,75) 30%, rgb(35,35,35) 100%);
+  background-image: -o-linear-gradient(bottom, rgb(75,75,75) 30%, rgb(35,35,35) 100%);
+  background-image: -moz-linear-gradient(bottom, rgb(75,75,75) 30%, rgb(35,35,35) 100%);
+  background-image: -webkit-linear-gradient(bottom, rgb(75,75,75) 30%, rgb(35,35,35) 100%);
+  background-image: -ms-linear-gradient(bottom, rgb(75,75,75) 30%, rgb(35,35,35) 100%);
+
+  background-image: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    color-stop(0.3, rgb(75,75,75)),
+    color-stop(1, rgb(35,35,35))
+  );
+  /* This is mainly for IE6 */
+  background-color: #4b4b4b;
+}
+
+#lava-footer ul {
+  margin: 1em 1ex;
+  padding: 0;
+  list-style-type: none;
+}
+
+#lava-footer ul li {
+  margin-left: 1ex;
+  padding: 0;
+  display: inline;
+}
+
+#lava-footer ul li:before {
+  content: " | ";
+  margin-right: 1ex;
+}
+
+#lava-footer ul li:first-child:before {
+  content: "";
+}
+
+#lava-footer a {
   color: inherit !important;
-}
-
-#lava-server-topics dt {
-  border-radius: 0 6pt 6pt 0;
-  cursor: pointer;
-  padding: 2pt 5pt;
-  margin: 1ex 0 0 0;
-}
-
-#lava-server-topics dt:hover {
-  color: white;
-  background-color: #08C;
-}
-
-#lava-server-topics dd {
-  padding: 0;
-  margin: 1em auto;
-  font-family: Ubuntu, Helvetica Neue, Verdana, sans-serif;
-  position: relative;
-  width: 50%;
-  color: #333;
+  color: white; /* IE6 */
 }
 
 /* Text listings */
@@ -365,33 +362,8 @@ 
   color: inherit;
 }
 
-
-/* Ajax notification bar */
-
-#lava-server-working {
-  background-color: white;
-  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
-  color: #555;
-  border-bottom: 1px solid #777;
-  display: hidden;
-  font-size: 12pt;
-  font-weight: bold;
-  height: 30px;
-  top: -1000px;
-  left: 0;
-  padding: 5pt;
-  position: fixed;
-  width: 100%;
-  z-index: 1000;
-}
-
-#lava-server-working img {
-  vertical-align: baseline;
-  position: relative;
-  top: 3px;
-}
-
 /* Form styles */
+
 table.form_helper {
   border-collapse: collapse;
 }
@@ -429,3 +401,132 @@ 
   padding: 0;
   margin: 0;
 }
+
+/* Misc items */
+
+.lava-chart {
+  clear: both;
+}
+
+
+h1 {
+  color: #98c13d;
+  clear: none;
+}
+
+h2 {
+  color: #98c13d;
+  clear: none;
+}
+
+h3 {
+  color: #98c13d;
+  clear: none;
+}
+
+h4 {
+  clear: none;
+}
+
+/* Console snippets */
+
+div.console {
+  background-color: #222;
+  color: white;
+  border: 3px solid #000;
+  padding: 0.5ex;
+  overflow-x: scroll;
+}
+
+div.console code {
+  white-space: pre;
+}
+
+div.console ::selection {
+  color: #222;
+  background-color: white;
+}
+
+div.console ::-moz-selection {
+  color: #222;
+  background-color: white;
+}
+
+div.console ::-webkit-selection {
+  color: #222;
+  background-color: white;
+}
+
+/* Sidebar UI */
+#lava-sidebar ul li {
+  background: url(../images/lin-bullet.gif) no-repeat left 2px;
+  list-style-type: none;
+  padding-left: 20px;
+}
+
+#lava-sidebar span.has-tooltip {
+  border-bottom: 1px dotted;
+}
+
+#lava-sidebar dl {
+  margin: 0 0 0 1em;
+  padding: 0;
+}
+
+#lava-sidebar dt {
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+}
+
+#lava-sidebar dd {
+  margin: 0 0 0.5ex 1em;
+  padding: 0;
+}
+
+#lava-sidebar p.help_text {
+  color: #888;
+  padding: 2pt;
+}
+
+#lava-sidebar .help-button {
+  margin: 0 0 0 0.5em;
+  font-size: 7pt;
+  font-weight: bold;
+  cursor: help;
+  background-color: #555;
+  color: white;
+  border-radius: 0.5em;
+  padding: 0.3em;
+}
+
+#lava-sidebar ul {
+  margin: 0 0 0 1em;
+  padding: 0 0 0 0;
+  list-style-position: inside;
+  list-style-type: square;
+}
+
+#lava-sidebar dd ul {
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
+}
+
+#lava-sidebar dd p {
+  margin: 0.2ex 0;
+}
+
+#lava-sidebar h3 {
+  margin: 2ex 0 1ex 0;
+  padding: 0 0 0 0;
+  font-size: 12pt;
+  font-weight: bold;
+  line-height: 1.2ex;
+  color: inherit;
+}
+
+#lava-sidebar h3 + p {
+  margin: 0;
+  text-indent: 1ex;
+}
+

=== modified file 'lava_server/htdocs/css/demo_table_jui.css'
--- lava_server/htdocs/css/demo_table_jui.css	2011-07-08 03:02:35 +0000
+++ lava_server/htdocs/css/demo_table_jui.css	2011-11-08 23:50:58 +0000
@@ -105,10 +105,13 @@ 
  */
 
 .dataTables_wrapper {
+  /*
 	position: relative;
 	min-height: 302px;
 	_height: 302px;
 	clear: both;
+  */
+  margin: 1ex 0;
 }
 
 .dataTables_processing {
@@ -176,8 +179,7 @@ 
  */
 table.display {
 	margin: 0 auto;
-	width: 100%;
-	clear: both;
+  width: 100%;
 	border-collapse: collapse;
 }
 

=== modified file 'lava_server/templates/layouts/base.html'
--- lava_server/templates/layouts/base.html	2011-09-27 19:48:36 +0000
+++ lava_server/templates/layouts/base.html	2011-11-08 23:50:58 +0000
@@ -12,27 +12,11 @@ 
     <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}lava-server/css/default.css"/>
     <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}lava-server/css/jquery.lava.sidebar.css"/>
     <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'/>
+    <link href='http://fonts.googleapis.com/css?family=Cantarell:400,700' rel='stylesheet' type='text/css'>
     {% endblock %}
     {% block extrahead %}{% endblock %}
   </head>
   <body>
-    {% block ajax_notification %}
-    <div id="lava-server-working" style="display: none">
-      <img src="{{ STATIC_URL }}lava-server/images/ajax-progress.gif" alt="AJAX progress indicator"/>
-      {% load i18n %}
-      {% trans "working..." %}
-    </div>
-    <script type="text/javascript">
-      $(document).ajaxStart(function() {
-      // +5 is for the shadow
-        $("#lava-server-working").css("top", -($('#ajax_notification').outerHeight() + 5) + "px");
-        $('#lava-server-working').show().animate({top: "0"}, 1000);
-      }).ajaxStop(function() {
-        // +5 is for the shadow
-        $('#lava-server-working').animate({top: -($('#ajax_notification').outerHeight() + 5)}, 1000).hide();
-      });
-    </script>
-    {% endblock %}
     {% block body %}
     {% endblock %}
   </body>

=== modified file 'lava_server/templates/layouts/content.html'
--- lava_server/templates/layouts/content.html	2011-10-21 00:44:02 +0000
+++ lava_server/templates/layouts/content.html	2011-11-08 23:50:58 +0000
@@ -2,135 +2,252 @@ 
 {% load i18n %}
 
 
+{% block title %}
+{{ block.super }}{% for bread_crumb in bread_crumb_trail %} | {{ bread_crumb.get_name }}{% endfor %}
+{% endblock %}
+
+
 {% block body %}
 <!-- lava-container -->
 <div id="lava-container">
 
   {% block header %}
   <!-- header -->
-  <div id="lava-server-header">
-
-    <!-- home link and user box -->
-    <div id="lava-server-user-box">
-      {% if user.is_authenticated %}
-      {% trans "Signed in as" %} <span class="username">{{user}}</span>,
-      <a
-        class="sign-out"
+  <div id="lava-panel">
+
+    {% block menu %}
+    <!-- menu -->
+    {% for menu in lava.menu_list %}
+    <a class="lava-panel-element{% if menu.sub_menu %} has-menu{% endif %}" href="{{ menu.url }}">{{ menu.label }}{% if menu.sub_menu %} &#x25BE;{% endif %}</a>
+    {% if menu.sub_menu %}
+    <ul class="lava-panel-menu">
+    {% for sub_menu in menu.sub_menu %}
+      <li><a href="{{ sub_menu.url }}">{{ sub_menu.label }}</a></li>
+    {% endfor %}
+    </ul>
+    {% endif %}
+    {% endfor %}
+    <!-- !menu -->
+    {% endblock menu %}
+
+    <!-- empty spacer to separate menu from indicators -->
+    <div class="lava-panel-element no-hover" id="lava-panel-spacer"></div>
+
+    <!-- ajax indicator -->
+    <div class="lava-panel-element lava-indicator no-hover" id="lava-ajax-indicator">
+      <img src="{{ STATIC_URL }}lava-server/images/ajax-loader.gif" alt="AJAX progress indicator"/>
+    </div>
+    <script type="text/javascript">
+      $(document).ajaxStart(function() {
+        $('#lava-ajax-indicator').animate({
+          opacity: 1.0
+        }, "fast", function() {
+        });
+      }).ajaxStop(function() {
+        $('#lava-ajax-indicator').animate({
+          opacity: 0.0
+        }, "fast", function() {
+          $("#lava-ajax-indicator").css("display", "hidden");
+        });
+      });
+    </script>
+    <!-- !ajax indicator -->
+
+    <!-- user indicator -->
+    <div class="lava-indicator lava-panel-element has-menu" id="lava-user-indicator">
+      <img 
+      src="{{ STATIC_URL }}lava-server/images/avatar-default-symbolic.svg"
+      width="18" height="18"/>
+      {% if user.is_authenticated %}
+      <a href="{% url lava.me %}" class="username">{{user.get_full_name}}</a>
+      {% else %}
+      <a href="{% url django.contrib.auth.views.login %}" class="username"
+        >{% trans "Guest" %}</a>
+      {% endif %}
+    </div>
+    <ul class="lava-panel-menu">
+      {% if user.is_authenticated %}
+      <li><a class="admin-site" href="{% url admin:index %}"
+        >{% trans "Administration" %}</a></li>
+      {% else %}
+      <li><a class="sign-in"
+        href="{% url django.contrib.auth.views.login %}"
+        >{% trans "Sign in" %}</a></li>
+      {% endif %}
+      {% if user.is_staff %}
+      <li><a class="sign-out"
         href="{% url django.contrib.auth.views.logout %}"
-        >{% trans "sign out" %}</a>
-      {% if user.is_staff %}
-      {% trans " or visit the " %}<a 
-        class="admin-site"
-        href="{% url admin:index %}"
-        >{% trans "admin interface" %}</a>
-      {% endif %}
-      {% else %}
-      {% trans "Welcome stranger" %},
-      <a
-        class="sign-in"
-        href="{% url django.contrib.auth.views.login %}"
-        >{% trans "sign in" %}</a>
-      {% endif %}
-    </div>
-    <!-- !home link and user box -->
-
-    <!-- navigation -->
-    {% block navigation %}
-    <div id="lava-server-navigation"> 
+        >{% trans "Sign out" %}</a></li>
+      {% endif %}
+    </ul>
+    <!-- !user indicator -->
+
+  </div>
+  <!-- !panel -->
+
+  <script type="text/javascript">
+    $(document).ready(function(){  
+      // When true sub-mens should open on hover.
+      // This mode is enabled by the first click on a top-level menu.
+      var menu_should_open = false;
+
+      var current_menu = null;
+      var current_sub_menu = null;
+
+      function close_current_menu() {
+        if (current_menu) {
+          current_menu.removeClass("active");
+          current_menu = null;
+        }
+        if (current_sub_menu) {
+          current_sub_menu.slideUp("fast");
+          current_sub_menu = null;
+        }
+      }
+
+      // Leaving the panel closes all menus and disables "preview" mode where
+      // menus open automatically.
+      $("#lava-panel").bind('mouseleave', function() {
+        menu_should_open = false;
+        close_current_menu();
+      });
+
+      $('.lava-panel-element')
+        .bind('mouseenter', function() {
+          if (menu_should_open) {
+            close_current_menu();
+            if ($(this).hasClass("has-menu")) {
+              $(this).click();
+            }
+          }
+        });
+
+      // Clicking on a panel element with a menu does stuff
+      $('.lava-panel-element.has-menu')
+        .click(function(event) {
+          // Enter hover-mode
+          menu_should_open = true;
+          if ($(this).next(".lava-panel-menu").is(":visible")) {
+            // Clicking on a menu with a visible sub-menu just triggers the link
+            return;
+          }
+          // Since our menu headers are links (for compatibility) let's prevent
+          // the default link action from firing
+          event.preventDefault();
+
+          // The top absolute position of the menu.
+          // Defaults to the bottom border of the panel
+          // with the border size (2px) substracted to make
+          // both borders overlap and look nicer
+          var _top = $("#lava-panel").outerHeight(false) - 2;
+
+          // The left absolute position of the menu.
+          // defaults to the offset of the indicator span
+          var _left = $(this).offset().left
+
+          // Check how much horizontal space we have so that the menu
+          // does not resize the page. The idea is to get the width of
+          // the panel and remove the left offset of the indicator box.
+          // If the box would be squeezed (smaller than minimum size) then
+          // let's keep the size to minimum and move the left offset
+          // to compensate;
+          var avail_width = $("#lava-panel").outerWidth(true) - $(this).offset().left;
+
+          var orig_width = $(this).next(".lava-panel-menu").width();
+          var menu_width = $(this).outerWidth(false);
+          var sub_menu_width = $(this).next(".lava-panel-menu").outerWidth(true);
+          var _width = menu_width - 4;
+
+          // Center the sub-menu if it is wider than the menu itself
+          if (sub_menu_width > menu_width) {
+            _left -= (sub_menu_width - menu_width) / 2;
+            _width = sub_menu_width;
+          }
+          // Relocate the sub-menu if we ran out of space
+          if (_width > avail_width) {
+            _width = sub_menu_width; 
+            _left = $("#lava-panel").outerWidth(true) - sub_menu_width;
+          }
+          // Show the sub menu 
+          var self = $(this);
+          current_menu = self;
+          current_sub_menu = self.next(".lava-panel-menu");
+
+          // Add an 'active' class to the current menu, this showes up as a nice gradient
+          current_menu
+            .addClass("active");
+          // Repositiobn and slide down the sub menu
+          current_sub_menu
+            .css({
+              top: _top,
+              left: _left,
+              width: _width
+            })
+            .slideDown("fast")
+            .show()
+            .bind('mouseleave', function() { close_current_menu(); });
+        });
+    });
+  </script>
+
+  {% endblock header %}
+
+  {% spaceless %}
+  <div id="lava-around-content">
+    <!-- logo -->
+    <a href="{% url lava.home %}"><img 
+      id="lava-logo"
+      src="{{ STATIC_URL }}lava-server/images/logo.png"
+      width="150"
+      height="70"
+      alt="Linaro logo"/></a>
+
+    {% block breadcrumb_container %}
+    <!-- breadcrumbs -->
+    <div id="lava-breadcrumbs">
+      <b>{% trans "You are here:" %}</b>
       <ul>
-        <li><a href="{% url lava.home %}">{% trans "LAVA Server" %}</a></li>
-        {% for extension in lava.extension_list %}
-        {% if extension.name %}
-        <li><a href="{{ extension.get_main_url }}">{{ extension.name }}</a></li>
-        {% endif %}
+        {% block breadcrumbs %}
+        {% for bread_crumb in bread_crumb_trail %}
+        <li><a 
+          href="{{ bread_crumb.get_absolute_url }}"
+          >{{ bread_crumb.get_name }}</a></li>
         {% endfor %}
-        <li><a href="{% url lava.api_help %}">{% trans "API" %}</a></li>
+        {% endblock %}
       </ul>
     </div>
-    {% endblock navigation %}
-    <!-- !navigation -->
-
-    <!-- extension navigation -->
-    {% block extension_navigation %}{% endblock %}
-    <!-- !extension navigation -->
-
-  </div>
-  <!-- !header -->
-
-  <!-- breadcrumbs -->
-  <div id="lava-server-breadcrumbs">
-    <b>{% trans "You are here:" %}</b>
-    <ul>
-      <li><a href="{% url lava.home %}">{% trans "LAVA" %}</a></li>
-      {% block breadcrumbs %}
-      {% for bread_crumb in bread_crumb_trail %}
-      <li><a 
-        href="{{ bread_crumb.get_absolute_url }}"
-        >{{ bread_crumb.get_name }}</a></li>
-      {% endfor %}
-      {% endblock %}
-    </ul>
-  </div>
-  <!-- !breadcrumbs -->
-
-  {% endblock header %}
-
-  {% block content-and-sidebar %}
-  <div id="lava-server-content-without-sidebar">
+    <!-- !breadcrumbs -->
+    {% endblock breadcrumb_container %}
+
+    {% block content-and-sidebar %}
     <!-- sidebar (not in this layout) -->
-    <div id="lava-server-content">
-      <!-- content -->
-      {% block content %}{% endblock %}
-      <!-- !content -->
+    <div id="lava-content-without-sidebar">
+      <div id="lava-content">
+        <!-- content -->
+        {% block content %}{% endblock %}
+        <!-- !content -->
+      </div>
     </div>
+    {% endblock %}
   </div>
+  {% endspaceless %}
 
-  {% endblock %}
   <!-- footer -->
-  <div id="lava-server-footer">
+  <div id="lava-footer">
     {% block footer %}
-    <!-- topics -->
-    <dl id="lava-server-topics">
-      <dt>{% trans "Report a bug" %}</dt>
-      <dd>If you think the content of this page is incorrect, have encountered
-      a server error or otherwise feel like it you may want to <a
-        href="https://bugs.launchpad.net/lava/+filebug" >report a bug</a>. If
-      you are unsure which LAVA sub-project to select feel free to report a bug
-      on any of them and we'll re-assign it to the appropriate place.</dd>
-      <dt>{% trans "Documentation" %}</dt>
-      <dd>LAVA Documentation is maintained on a per-component basis. You can
-      find pointers to each component on the <a
-        href="https://wiki.linaro.org/Platform/Validation/LAVA/Documentation"
-        >LAVA Documentation wiki</a></dd>
-      <dt>{% trans "Source code" %}</dt>
-      <dd>The canonical source of LAVA is a collection of Bazaar branches
-      hosted on Launchpad. LAVA itself is spread across multiple sub-projects,
-      each with a separate source repository. You can find them on the <a
-        href="http://launchpad.net/lava/">LAVA project group</a> page</dd>
-      <dt>{% trans "Web standards" %}</dt>
-      <dd>This website should contain only valid XHTML markup, you can 
-      <a href="http://validator.w3.org/check?uri=referer">validate it</a> if
-      you wish.</dd>
-      <dt>{% trans "Licensing and copyright" %}</dt>
-      <dd>LAVA Server is free software developed by <a
-        href="http://linaro.org">Linaro</a>. It is distributed under the terms
-      of the <a href="http://www.gnu.org/licenses/agpl-3.0.html"
-        >GNU Affero General Public License version 3</a>.
-      <strong>You have the right to obtain source code of any server side
-        installations of this software that you interact with.</strong>.</dd>
-    </dl>
-    <script type="text/javascript">
-      $(function() {
-        $("#lava-server-topics dd").hide();
-        $("#lava-server-topics dt").click(function (event) {
-          if ($(this).next("dd").is(":hidden")) {
-            $(this).parent().children("dd").slideUp("fast");
-            $(this).next("dd").slideDown("fast");
-          }
-        });
-      });
-    </script>
-    <!-- !topics -->
+    <ul>
+      <li><a href="{% url lava.version_details %}">{% trans "LAVA version" %}</a></li>
+      <li><a href="https://bugs.launchpad.net/lava/+filebug" >Report a bug</a></li>
+      <li><a href="http://launchpad.net/lava/">Source Code</a></li>
+      <li><a href="http://validator.w3.org/check?uri=referer">Validate HTML</a></li>
+    </ul>
+    <p>LAVA Server is free software developed by <a
+      href="http://linaro.org">Linaro</a>. It is distributed under the terms
+    of the <a href="http://www.gnu.org/licenses/agpl-3.0.html"
+      >GNU Affero General Public License version 3</a>.
+    <br/>
+    <strong>You have the right to obtain source code of any server side
+      installations of this software that you interact with.</strong>.</p>
     {% endblock footer %}
   </div>
   <!-- !footer -->

=== modified file 'lava_server/templates/layouts/content_with_sidebar.html'
--- lava_server/templates/layouts/content_with_sidebar.html	2011-10-21 00:44:02 +0000
+++ lava_server/templates/layouts/content_with_sidebar.html	2011-11-08 23:50:58 +0000
@@ -1,86 +1,19 @@ 
 {% extends "layouts/content.html" %}
 
 
+{% spaceless %}
 {% block content-and-sidebar %}
-<div id="lava-server-content-and-sidebar">
+<div id="lava-content-and-sidebar">
   <!-- sidebar -->
-  <div id="lava-server-sidebar" class="classic"> 
+  <div id="lava-sidebar"> 
     {% block sidebar %}{% endblock %}
   </div>
   <!-- !sidebar -->
   <!-- content -->
-  <div id="lava-server-content">
+  <div id="lava-content">
     {% block content %}{% endblock %}
   </div>
   <!-- !content -->
 </div>
-<script type="text/javascript">
-  $(window).load(function() {
-    var preferDockedCookieName = "lava-server-prefer-docked";
-    var sidebar = $("#lava-server-sidebar");
-
-    function dock_the_sidebar() {
-      var user_box = $("#lava-server-user-box");
-      var content = $("#lava-server-content");
-      var header = $("#lava-server-header");
-      // Compute how much margin should remain once the sidebar is toggled
-      var base_margin = (
-        $("#lava-server-content").outerWidth(true) 
-        - $("#lava-server-content").outerWidth(false)) / 2;
-
-      // As for the sidebar
-      sidebar
-        // Remove the 'classic' class
-        .removeClass("classic")
-        // Enable the new looks
-        .sidebar({
-          onShow: function() {
-            user_box.prependTo(sidebar);
-            content.css("marginRight", base_margin + sidebar.outerWidth(true) + "px");
-          },
-          onHide: function() {
-            user_box.prependTo(header);
-            content.css("marginRight", base_margin + "px");
-          },
-          onDestroy: function() {
-            user_box.prependTo(header);
-            content.css("marginRight", base_margin + "px");
-            sidebar.addClass("classic")
-          }
-        });
-    }
-
-    dock_the_sidebar();
-
-    // Collapse help_text items to a clickable question mark
-    $("#lava-server-sidebar dd p.help_text")
-      .each(function(index, item) {
-        $(item)
-          .hide() // hide the orginal text
-          .closest("dd").prev("dt") // to the closest data definition's topic
-          .append( // append a small span
-            $("<span/>", {"class": "help-button" })
-              .text("?") // with a question mark
-              .click(function() {
-                $(this).hide(); // that goes away when clicked
-                $(item).show() // but displays the originally hidden text
-              })
-          );
-    });
-    $("#lava-server-sidebar h3 + p.help_text")
-      .each(function(index, item) {
-        $(item)
-          .hide() // hide the orginal text
-          .prev("h3") // to the prevous header line
-          .append( // append a small span
-            $("<span/>", {"class": "help-button" })
-              .text("?") // with a question mark
-              .click(function() {
-                $(this).hide(); // that goes away when clicked
-                $(item).show() // but displays the originally hidden text
-              })
-          );
-    });
-  });
-</script>
 {% endblock %}
+{% endspaceless %}

=== added file 'lava_server/templates/layouts/form.html'
--- lava_server/templates/layouts/form.html	1970-01-01 00:00:00 +0000
+++ lava_server/templates/layouts/form.html	2011-11-08 23:50:58 +0000
@@ -0,0 +1,34 @@ 
+{% extends "layouts/content.html" %}
+
+
+{% block content %}
+<form action="" method="POST">
+  {% block form_header %}
+  {% endblock %}
+  {% csrf_token %}
+  <table class="form_helper">
+    {% for field in form %}
+    {% block form_field %}
+    <tr>
+      <th><label for="{{ field.id_for_label }}">{{ field.label }}</label></th>
+      <td>
+        {% if field.errors %}
+        <div class="ui-state-error">
+          {{ field.errors }}
+          {{ field }}
+        </div>
+        {% else %}
+        {{ field }}
+        {% endif %}
+        <p class='help_text'>{{ field.help_text }}</p>
+      </td>
+    </tr>
+    {% endblock %}
+    {% endfor %}
+  </table>
+  {% block form_footer %}
+  <h2>Continue</h2>
+  <input type="submit" value="Save"/>
+  {% endblock %}
+</form>
+{% endblock %}