diff mbox

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

Message ID 20110712024052.924.98479.launchpad@loganberry.canonical.com
State Accepted
Headers show

Commit Message

Zygmunt Krynicki July 12, 2011, 2:40 a.m. UTC
------------------------------------------------------------
revno: 202
committer: Zygmunt Krynicki <zygmunt.krynicki@linaro.org>
branch nick: trunk
timestamp: Tue 2011-07-12 04:22:10 +0200
message:
  New server look and feel
modified:
  lava_server/htdocs/css/default.css
  lava_server/templates/index.html
  lava_server/templates/layouts/base.html
  lava_server/templates/layouts/content.html
  lava_server/templates/layouts/content_with_sidebar.html
  lava_server/templates/linaro_django_xmlrpc/_base.html
  lava_server/templates/linaro_django_xmlrpc/api.html
  lava_server/templates/linaro_django_xmlrpc/authtoken_confirm_delete.html
  lava_server/templates/linaro_django_xmlrpc/create_token.html
  lava_server/templates/linaro_django_xmlrpc/edit_token.html
  lava_server/templates/linaro_django_xmlrpc/tokens.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-07-09 14:25:36 +0000
+++ lava_server/htdocs/css/default.css	2011-07-12 02:22:10 +0000
@@ -1,415 +1,162 @@ 
-body {
-  background-color: #222;
-  color: #F5F4E1;
-  font-size: 10pt;
-  margin: 0;
-  min-width: 650px;
-  padding: 25pt 15pt 2em 15pt;
-}
-
 body, p, input, th, td {
   font-family: Ubuntu, Helvetica Neue, Verdana, sans-serif;
+  font-size: 9pt;
 }
 
 code {
-  font-family: UbuntuBeta Mono, Lucida Console, Consolas, monospace; 
-}
-
-
-#master_container {
-  border-radius: 7pt;
-  box-shadow: 0 0 15pt black;
-  -moz-border-radius: 7pt;
-  -webkit-border-radius: 7pt;
-  -moz-box-shadow: 0 0 15pt black;
-  -webkit-box-shadow: 0 0 15pt black;
-  border-collapse: collapse;
-  border-spacing: 0;
-  width: 100%;
-}
-
-#header {
-  background-color: #D44917;
-  color: #F5F4E1;
-  margin: 0;
-  padding: 3pt 7pt 0 7pt;
-
-  border-radius: 7pt 7pt 0 0;
-  -moz-border-radius: 7pt 7pt 0 0;
-  -webkit-border-radius: 7pt 7pt 0 0;
-  background: -moz-linear-gradient(
-    center bottom,
-    rgb(212,52,16) 6%,
-    rgb(212,74,23) 75%
-  );
-  background: -webkit-gradient(
-    linear,
-    left top,
-    left bottom,
-    color-stop(0.06, rgb(212, 52, 16)),
-    color-stop(0.75, rgb(212, 74, 23))
-  );
-}
-
-#header #account_info {
+  font-family: UbuntuBeta Mono, Lucida Console, Consolas, monospace;
+  font-size: 9pt;
+}
+
+body {
+  background-color: white;
+  color: black;
+  margin: 1em auto;
+  padding: 0;
+  width: 80%;
+  min-width: 800px;
+  overflow-y: scroll;
+}
+
+/* Header */
+
+#lava-server-header {
+}
+
+/* Home link */
+
+#lava-server-home {
+  margin-bottom: 1ex;
+}
+
+/* User box */
+
+#lava-server-user-box {
   float: right;
+}
+
+#lava-server-user-box span.username {
+  font-weight: bold;
+}
+
+#lava-server-user-box .ui-button-text {
+  padding: 2px;
+  font-size: inherit;
+}
+
+/* Main and sub toolbars */
+
+.lava-server-toolbar {
+  margin: 1ex 0;
+  padding: 3pt;
+}
+
+.lava-server-sub-toolbar {
+  font-size: smaller !important;
+}
+
+.lava-server-sub-toolbar .ui-button-text {
+  padding: 2px;
+  font-size: inherit;
+}
+
+#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 {
+  list-style: none;
+  display: inline-block;
+}
+
+#lava-server-navigation,
+#lava-server-extension-navigation {
+  margin-bottom: 3pt;
+}
+
+/* Breadcrumbs */
+
+#lava-server-breadcrumbs {
   font-size: 8pt;
-  font-weight: bold;
-  padding-top: 5pt;
-  text-align: right;
-  text-shadow: #541d09 1px 1px;
-}
-
-#header #account_info a.change_password,
-#header #account_info a.sign_in,
-#header #account_info a.admin_site,
-#header #account_info a.sign_out {
-  background-color: #943310;
-  color: #F5F4E1;
-  padding: 5pt;
-
-  border-radius: 5pt;
-  -moz-border-radius: 5pt;
-  -webkit-border-radius: 5pt;
-}
-
-#header #account_info a {
-  color: #F5F4E1;
-  text-decoration: none;
-}
-
-#header #account_info a:hover {
-  text-decoration: underline;
-}
-
-#header a {
-  color: #F5F4E1;
-  text-decoration: none;
-}
-
-#header h1 {
-  font-size: 25pt;
-  font-weight: bold;
-  padding: 0.5em 0.5em 0.1em 0.5em;
-  margin: 0;
-  text-shadow: #541d09 2px 2px;
-}
-
-#header h1 a {
-  color: #F5F4E1;
-  text-decoration: none;
-}
-
-#header .version{
-  font-size: 10pt;
-  font-weight: normal;
-  left: 1em;
-  position: relative;
-  text-shadow: #541d09 1px 1px;
-  top: -0.5em;
-}
-
-
-#navigation {
-  background-color: #541D09;
-  color: #F5F4E1;
-}
-
-#extension_navigation {
-  background-color: #541D09;
-  color: #F5F4E1;
-}
-
-#extension_navigation ul {
-  margin: 0;
-  padding: 10pt 5pt;
-}
-
-#extension_navigation ul li {
-  display: inline;
-  margin: 0;
-  padding: 0.2em 0; 
-}
-
-#extension_navigation ul li a {
-  color: #F5F4E1;
-  text-decoration: none;
-  background-color: #943310;
-  text-shadow: #541d09 1px 1px;
-  font-weight: bold;
-  padding: 5pt;
-  border-radius: 5pt;
-  -moz-border-radius: 5pt;
-  -webkit-border-radius: 5pt;
-}
-
-#extension_navigation ul li a:active {
-  color: #943310;
-  background-color: #F5F4E1;
-  text-shadow: none;
-}
-
-ul.menu {
-  display: inline;
-  margin: 0;
-  padding: 0;
-  font-size: 12pt;
-  font-weight: bold;
-  margin: 0;
-  padding: 0;
-}
-
-ul.menu li {
-  display: block;
-  float: left;
-  margin: 0 0.2em;
-  padding: 2pt 5pt;
-  background-color: #541D09;
-  border-radius: 3pt 3pt 0 0;
-  -moz-border-radius: 3pt 3pt 0 0;
-  -webkit-border-radius: 3pt 3pt 0 0;
-}
-
-ul.menu li a {
-  color: #F5F4E1;
-  text-decoration: none;
-}
-
-ul#menu li a:hover {
-  text-decoration: underline;
-}
-
-#breadcrumbs {
-  clear: both;
-  font-size: 9pt;
-  font-weight: normal;
-  margin: 0;
-  padding: 0 5pt;
-}
-
-#breadcrumbs .header {
-  display: inline;
-  font-weight: bold;
-}
-
-#breadcrumbs ul {
-  display: inline;
-  margin: 0;
-  padding: 0;
-}
-
-#breadcrumbs ul li {
-  display: inline;
-  margin: 0;
-  padding: 0.2em 0; 
-}
-
-#breadcrumbs ul li a {
-  color: #F5F4E1;
-  text-decoration: none;
-}
-
-#breadcrumbs ul li:before {
+  margin: 1ex;
+}
+
+#lava-server-breadcrumbs ul {
+  display: inline-block;
+  margin: 0 3pt;
+  padding: 0;
+}
+
+#lava-server-breadcrumbs ul li {
+  list-style: none;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+#lava-server-breadcrumbs ul li a {
+  text-decoration: underline;
+}
+
+#lava-server-breadcrumbs ul li:before {
   content: "ยป";
-  margin: 0 2pt;
+  margin: 0 1ex;
 }
 
-#breadcrumbs ul li:first-child:before {
+#lava-server-breadcrumbs ul li:first-child:before {
   content: "";
   margin: 0;
 }
 
-
-#content {
-  color: #202020;
-  padding: 5pt;
-  width: 78%;
-
-  background-color: #F5F4E1;
-  background: -webkit-gradient(
-    linear,
-    left top,
-    left bottom,
-    color-stop(0, #CFCEBE),
-    color-stop(0.1, #F5F4E1)
-  );
-  background: -moz-linear-gradient(
-    center top,
-    #CFCEBE 0,
-    #F5F4E1 10pt
-  );
-  vertical-align: top;
-} 
-
-#content dl {
-  display block;
+/* Content table */
+
+#lava-server-content {
+}
+
+#lava-server-sidebar {
   margin: 1em 0;
 }
 
-#content dt {
-  font-weight: bold;
-  margin: 0;
-}
-
-#content dd {
-}
-
-/* Nested list, used in custom attributes */
-
-#content dl dl {
-  margin-top: 0;
-}
-
-
-#content dl dl dt {
-  margin-left: 0em;
-}
-
-#content dl dl dd {
-  margin-left: 2em;
-}
-
-
-
-#sidebar {
-  color: white;
+/* Footer */
+
+#lava-server-footer {
+  clear: both;
+  color: gray;
   font-size: smaller;
-  width: 18%;
-  padding: 5pt;
-
-  background-color: #75756C;
-  background: -webkit-gradient(
-    linear,
-    left top,
-    left bottom,
-    color-stop(0, #5B5B54),
-    color-stop(0.1, #75756C)
-  );
-  background: -moz-linear-gradient(
-    center top,
-    #5B5B54 0,
-    #75756C 10pt
-  );
-  vertical-align: top;
-}
-
-#sidebar p.hint {
-  font-size: larger;
-}
-
-#content_footer {
-  background-color: #F5F4E1;
-  height: 10pt;
-
-  border-radius: 0 0 0 7pt;
-  -moz-border-radius: 0 0 0 7pt;
-  -webkit-border-radius: 0 0 0 7pt;
-}
-
-#rounded_content_footer {
-  background-color: #F5F4E1;
-  height: 10pt;
-
-  border-radius: 0 0 7pt 7pt;
-  -moz-border-radius: 0 0 7pt 7pt;
-  -webkit-border-radius: 0 0 7pt 7pt;
-}
-
-#sidebar_footer {
-  background-color: #75756C;
-  height: 10pt;
-
-  border-radius: 0 0 7pt 0;
-  -moz-border-radius: 0 0 7pt 0;
-  -webkit-border-radius: 0 0 7pt 0;
-}
-
-#content p {
-  text-align: justify;
-}
-
-#content table.data {
-  border: 1px solid gray;
-  border-collapse: collapse;
-  margin: 5pt;
-}
-
-#content table.data th,
-#content table.data td {
-  border: 1px solid gray;
-  margin: 0;
-  padding: 3pt; 
-}
-
-#content table.data th {
-  font-weight: bold;
-}
-
-#content div.pagination {
-  margin-top: 0.5em;
+  margin-top: 2em;
   text-align: center;
 }
 
-#sidebar dl,
-#sidebar dl dt,
-#sidebar dl dd,
-#sidebar ul,
-#sidebar p {
-  padding: 0;
-  margin: 1em 0 0 0;
-}
-
-#sidebar dl dt {
-  margin: 0;
-  padding: 0;
-  font-weight: bold;
-}
-
-#sidebar dl dd, #sidebar ul li {
-  margin: 0 0 0 2em;
-  padding: 0;
-}
-
-#footer {
-  font-size: smaller;
-  margin-top: 1em;
-  margin: auto;
-  padding: 0 12pt;
-  text-align: justify;
-}
-
-#footer a {
-  color: #F5F4E1;
-}
-
-.deserialization_failure_reason {
-  margin-top: 0.25em;
-  font-style: italic;
-  font-size: smaller;
-  cursor: help;
-  border-bottom: 1px dotted;
-  display: inline;
-}
+#lava-server-footer a {
+  color: inherit !important;
+}
+
+/* Text listings */
 
 ol.file_listing {
   font-family: monospace;
 }
 
+ol.file_listing li:target {
+  outline: 1px solid red;
+}
+
+ol.file_listing li a:hover {
+  text-decoration: underline;
+}
+
 ol.file_listing li a {
-  white-space: pre;
-  text-decoration: none !important;
-  color: inherit !important;
-}
-
-ol.file_listing li:target {
-  background-color: red;
-  color: white;
-}
-
-ol.file_listing li:hover {
-  text-decoration: underline;
-}
-
+  text-decoration: none;
+  color: inherit;
+}
+
+
+/* Ajax notification bar */
 
 #ajax_notification {
   background-color: white;
@@ -419,11 +166,14 @@ 
   font-size: 12pt;
   font-weight: bold;
   height: 30px;
+  top: -1000px;
   left: 0;
   padding: 5pt;
   position: fixed;
   width: 100%;
+  z-index: 1000;
 }
+
 #ajax_notification img {
   vertical-align: baseline;
   position: relative;

=== modified file 'lava_server/templates/index.html'
--- lava_server/templates/index.html	2011-07-08 02:56:22 +0000
+++ lava_server/templates/index.html	2011-07-12 02:22:10 +0000
@@ -2,15 +2,6 @@ 
 {% load i18n %}
 
 
-{% block style %}
-<style type="text/css">
-#breadcrumbs {
-  display: none;
-}
-</style>
-{% endblock %}
-
-
 {% block content %}
 <h2>About LAVA</h2>
 <p>LAVA is a stack of technologies developed by Linaro Validation team that
@@ -20,4 +11,6 @@ 
 <h2>About LAVA Server</h2>
 <p>LAVA Server is a shell and runtime environment for various server-side LAVA
 components.</p>
+<p>To know find out more about the installed components see <a
+  href="{% url lava.version_details %}">{% trans "version details" %}</a></p>
 {% endblock %}

=== modified file 'lava_server/templates/layouts/base.html'
--- lava_server/templates/layouts/base.html	2011-07-09 14:25:11 +0000
+++ lava_server/templates/layouts/base.html	2011-07-12 02:22:10 +0000
@@ -14,14 +14,14 @@ 
   </head>
   <body>
     {% block ajax_notification %}
-    <div id="ajax_notification" style="display:hidden">
+    <div id="ajax_notification">
       <img src="{{ STATIC_URL }}lava/images/ajax-progress.gif"/>
       {% trans "AJAX request is in progress..." %}
     </div>
     <script type="text/javascript">
+      $(document).ajaxStart(function() {
       // +5 is for the shadow
-      $("#ajax_notification").css("top", -($('#ajax_notification').outerHeight() + 5) + "px").show();
-      $(document).ajaxStart(function() {
+        $("#ajax_notification").css("top", -($('#ajax_notification').outerHeight() + 5) + "px");
         $('#ajax_notification').show().animate({top: "0"}, 1000);
       }).ajaxStop(function() {
         // +5 is for the shadow

=== modified file 'lava_server/templates/layouts/content.html'
--- lava_server/templates/layouts/content.html	2011-07-09 14:25:11 +0000
+++ lava_server/templates/layouts/content.html	2011-07-12 02:22:10 +0000
@@ -3,87 +3,104 @@ 
 
 
 {% block body %}
-<table id="master_container">
-  <tr>
-    <td colspan="2" id="header">
-      {% block header %}
-      <div id="account_info">
-        {% if user.is_authenticated %}
-        {% blocktrans %}Signed in as {{user}}{% endblocktrans %}
-        <a class="sign_out" href="{% url django.contrib.auth.views.logout %}">{% trans "Sign out" %}</a>
-        {% if user.is_staff %}
-        {% trans " or visit " %}<a class="admin_site" href="{% url admin:index %}"
-          >{% trans "admin interface" %}</a>
-        {% endif %}
-        {% else %}
-        {% trans "You are not signed in" %}
-        <a class="sign_in" href="{% url django.contrib.auth.views.login %}">{% trans "Sign in" %}</a>
-        {% endif %}
-      </div>
-      <h1><a href="{% url lava.home %}">LAVA</a></h1>
-      <div class="version">
-        {% trans "Server Version:" %} {{ lava.version }} | <a href="{% url lava.version_details %}">{% trans "details..." %}</a>
-      </div>
-      {% endblock %}
-      {% block navigation %}
-      <ul class="menu">
-        <li><a href="{% url lava.home %}">{% trans "Home" %}</a></li>
-        {% for extension in lava.extensions %}
-        <li><a href="{{ extension.get_main_url }}">{{ extension.name }}</a></li>
-        {% endfor %}
-        <li><a href="{% url linaro_django_xmlrpc.views.default_handler %}">{% trans "XML-RPC" %}</a></li>
-      </ul>
-      <div style="clear:both"></div>
-      {% endblock %}
-    </td>
-  </tr>
-  <tr id="extension_navigation">
-    <td colspan="2">
-      {% block extension_navigation %}{% endblock %}
-    </td>
-  </tr>
-  <tr id="navigation">
-    <td colspan="2">
-      <div id="breadcrumbs">
-        {% block breadcrumbs_outer %}
-        <div class="header">{% trans "You are here: " %}</div>
-        <ul>
-          <li><a href="{% url lava.home %}">{% trans "Home" %}</a></li>
-          {% block breadcrumbs %}{% endblock %}
-        </ul>
-        {% endblock %}
-      </div>
-      <div style="clear: both;"></div>
-    </td>
-  </tr>
-  <tr>
-    <td id="content">
-      {% block content %}{% endblock %}
-    </td>
-  </tr>
-  <tr>
-    <td id="rounded_content_footer"></td>
-  </tr>
-</table>
-<div id="footer">
+{% block header %}
+<!-- header -->
+<div id="lava-server-header">
+
+  <!-- home link and user box -->
+  <div id="lava-server-user-box">
+    <span class="status-text">
+      {% if user.is_authenticated %}
+      {% trans "Signed in as" %} <span class="username">{{user}}</span>
+      <a class="sign-out" href="{% url django.contrib.auth.views.logout %}">{% trans "sign out" %}</a>
+      {% if user.is_staff %}
+      {% trans " or visit " %}<a class="admin-site" href="{% url admin:index %}"
+        >{% trans "admin interface" %}</a>
+      {% endif %}
+      {% else %}
+      {% trans "You are not signed in" %}
+    </span>
+    <a class="sign-in" href="{% url django.contrib.auth.views.login %}">{% trans "sign in" %}</a>
+    {% endif %}
+  </div>
+  <!-- !home link and user box -->
+
+  <div id="lava-server-home">
+    <a href="{% url lava.home %}">{% trans "LAVA Server" %}</a>
+  </div>
+
+  <!-- navigation -->
+  {% block navigation %}
+  <div id="lava-server-navigation"> 
+    <ul>
+      {% for extension in lava.extensions %}
+      <li><a href="{{ extension.get_main_url }}">{{ extension.name }}</a></li>
+      {% endfor %}
+      <li><a href="{% url linaro_django_xmlrpc.views.default_handler %}">{% trans "XML-RPC" %}</a></li>
+    </ul>
+  </div>
+  {% endblock navigation %}
+  <!-- !navigation -->
+
+  <!-- extension navigation -->
+  {% block extension_navigation %}{% endblock %}
+  <!-- !extension navigation -->
+
+  <!-- breadcrumbs -->
+  <div id="lava-server-breadcrumbs">
+    <b>You are here:</b>
+    <ul>
+      <li><a href="{% url lava.home %}">{% trans "Home" %}</a></li>
+      {% block breadcrumbs %}{% endblock %}
+    </ul>
+  </div>
+  <!-- !breadcrumbs -->
+
+  <!--
+  <div class="ui-widget-header ui-corner-all lava-server-toolbar">
+  </div>
+  -->
+</div>
+<script type="text/javascript">
+  $("#lava-server-user-box a").button();
+  $("#lava-server-home a ").button({
+    icons: {
+      primary: 'ui-icon-home'
+    }
+  });
+  $("#lava-server-navigation li a").button()
+  $("#lava-server-extension-navigation li a").button()
+</script>
+<!-- !header -->
+{% endblock header %}
+
+
+{% block content-and-sidebar %}
+<div id="lava-server-content">
+  <!-- sidebar (not in this layout) -->
+  <!-- content -->
+  {% block content %}{% endblock %}
+  <!-- !content -->
+</div>
+{% endblock %}
+
+<!-- footer -->
+<div id="lava-server-footer">
   {% block footer %}
-  <p id="copyright">
-  {% blocktrans %}
+  <p id="lava-server-copyright">
   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>. You have the right to
   obtain source code of any server side installations of this software that you
   interact with.
-  {% endblocktrans %}
   </p>
   <p>
-  {% blocktrans %}
   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
-  {% endblocktrans %}
   </p>
-  {% endblock %}
+  {% endblock footer %}
 </div>
-{% endblock %}
+<!-- footer -->
+{% endblock body %}

=== modified file 'lava_server/templates/layouts/content_with_sidebar.html'
--- lava_server/templates/layouts/content_with_sidebar.html	2011-07-08 02:56:22 +0000
+++ lava_server/templates/layouts/content_with_sidebar.html	2011-07-12 02:22:10 +0000
@@ -1,98 +1,17 @@ 
-{% extends "layouts/base.html" %}
-{% load i18n %}
-
-
-{% block title %}
-{% trans "LAVA" %}
-{% endblock %}
-
-
-{% block body %}
-<table id="master_container">
-  <tr>
-    <td colspan="2" id="header">
-      {% block header %}
-      <div id="account_info">
-        {% if user.is_authenticated %}
-        {% blocktrans %}Signed in as {{user}}{% endblocktrans %}
-        <a class="sign_out" href="{% url django.contrib.auth.views.logout %}">{% trans "Sign out" %}</a>
-        {% if user.is_staff %}
-        {% trans " or visit " %}<a class="admin_site" href="{% url admin:index %}"
-          >{% trans "admin interface" %}</a>
-        {% endif %}
-        {% else %}
-        {% trans "You are not signed in" %}
-        <a class="sign_in" href="{% url django.contrib.auth.views.login %}">{% trans "Sign in" %}</a>
-        {% endif %}
-      </div>
-      <h1><a href="{% url lava.home %}">LAVA</a></h1>
-      <div class="version">
-        {% trans "Server Version:" %} {{ lava.version }} | <a href="{% url lava.version_details %}">{% trans "details..." %}</a>
-      </div>
-      {% endblock %}
-      {% block navigation %}
-      <ul class="menu">
-        <li><a href="{% url lava.home %}">{% trans "Home" %}</a></li>
-        {% for extension in lava.extensions %}
-        <li><a href="{{ extension.get_main_url }}">{{ extension.name }}</a></li>
-        {% endfor %}
-        <li><a href="{% url linaro_django_xmlrpc.views.default_handler %}">{% trans "XML-RPC" %}</a></li>
-      </ul>
-      <div style="clear:both"></div>
-      {% endblock %}
-    </td>
-  </tr>
-  <tr id="extension_navigation">
-    <td colspan="2">
-      {% block extension_navigation %}{% endblock %}
-    </td>
-  </tr>
-  <tr id="navigation">
-    <td colspan="2">
-      <div id="breadcrumbs">
-        {% block breadcrumbs_outer %}
-        <div class="header">{% trans "You are here: " %}</div>
-        <ul>
-          <li><a href="{% url lava.home %}">{% trans "Home" %}</a></li>
-          {% block breadcrumbs %}{% endblock %}
-        </ul>
-        {% endblock %}
-      </div>
-      <div style="clear: both;"></div>
-    </td>
-  </tr>
-  <tr>
-    <td id="content">
-      {% block content %}{% endblock %}
-    </td>
-    <td id="sidebar">
-      {% block sidebar %}{% endblock %}
-    </td>
-  </tr>
-  <tr>
-    <td id="content_footer"></td>
-    <td id="sidebar_footer"></td>
-  </tr>
-</table>
-<div id="footer">
-  {% block footer %}
-  <p id="copyright">
-  {% blocktrans %}
-  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>. You have the right to
-  obtain source code of any server side installations of this software that you
-  interact with.
-  {% endblocktrans %}
-  </p>
-  <p>
-  {% blocktrans %}
-  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
-  {% endblocktrans %}
-  </p>
-  {% endblock %}
+{% extends "layouts/content.html" %}
+
+
+{% block content-and-sidebar %}
+<div id="lava-server-content-then-sidebar">
+  <!-- sidebar -->
+  <div id="lava-server-sidebar"> 
+    {% block sidebar %}{% endblock %}
+  </div>
+  <!-- !sidebar -->
+  <!-- content -->
+  <div id="lava-server-content">
+    {% block content %}{% endblock %}
+  </div>
+  <!-- !content -->
 </div>
 {% endblock %}

=== modified file 'lava_server/templates/linaro_django_xmlrpc/_base.html'
--- lava_server/templates/linaro_django_xmlrpc/_base.html	2011-07-08 02:56:22 +0000
+++ lava_server/templates/linaro_django_xmlrpc/_base.html	2011-07-12 02:22:10 +0000
@@ -3,19 +3,21 @@ 
 
 
 {% block title %}
-{{ block.super }} | {% trans "XML-RPC API" %}
+{{ block.super }} | {% trans "XML-RPC" %}
 {% endblock %}
 
 
 {% block extension_navigation %}
-<ul>
-  <li><a href="{% url linaro_django_xmlrpc.views.default_handler %}">{% trans "XML-RPC Handler" %}</a></li>
-  <li><a href="{% url linaro_django_xmlrpc.views.tokens %}">{% trans "Authentication tokens" %}</a></li>
-</ul>
+<div id="lava-server-extension-navigation" class="lava-server-sub-toolbar">
+  <ul>
+    <li><a href="{% url linaro_django_xmlrpc.views.default_handler %}">{% trans "XML-RPC Handler" %}</a></li>
+    <li><a href="{% url linaro_django_xmlrpc.views.tokens %}">{% trans "Authentication Tokens" %}</a></li>
+  </ul>
+</div>
 {% endblock %}
 
 
 {% block breadcrumbs %}
 {{ block.super }}
-<li><a href="{% url linaro_django_xmlrpc.views.handler %}">{% trans "XML-RPC" %}</a></li>
+<li><a href="{% url linaro_django_xmlrpc.views.handler %}">{% trans "XML-RPC Handler" %}</a></li>
 {% endblock %}

=== modified file 'lava_server/templates/linaro_django_xmlrpc/api.html'
--- lava_server/templates/linaro_django_xmlrpc/api.html	2011-07-08 02:56:22 +0000
+++ lava_server/templates/linaro_django_xmlrpc/api.html	2011-07-12 02:22:10 +0000
@@ -3,11 +3,11 @@ 
 {% load i18n %}
 
 
-{% block title %} {{ block.super }} | {% trans "Handler" %}{% endblock %}
+{% block title %}{{ block.super }} | {% trans "XML-RPC Handler" %}{% endblock %}
 
 
 {% block breadcrumbs %}
-<li><a href="{% url linaro_django_xmlrpc.views.handler %}">{% trans "XML-RPC API" %}</a></li>
+{{ block.super }}
 {% endblock %}
 
 

=== modified file 'lava_server/templates/linaro_django_xmlrpc/authtoken_confirm_delete.html'
--- lava_server/templates/linaro_django_xmlrpc/authtoken_confirm_delete.html	2011-07-08 02:56:22 +0000
+++ lava_server/templates/linaro_django_xmlrpc/authtoken_confirm_delete.html	2011-07-12 02:22:10 +0000
@@ -1,4 +1,20 @@ 
 {% extends "linaro_django_xmlrpc/_base.html" %}
+{% load i18n %}
+
+
+{% block title %}{{ block.super }} | {% trans "API Tokens" %} | {% trans "Delete Token" %} {{ token.pk }}{% endblock %}
+
+
+{% block breadcrumbs %}
+{{ block.super }}
+<li><a
+  href="{% url linaro_django_xmlrpc.views.tokens %}"
+  >{% trans "Authentication Tokens" %}</a></li>
+<li><a 
+  href="{% url linaro_django_xmlrpc.views.delete_token token.pk %}"
+  >{% trans "Delete Token" %} {{ token.pk }}</a></li>
+{% endblock %}
+
 
 
 {% block content %}
@@ -13,4 +29,9 @@ 
   </p>
   <input type="submit" value="Yes, Delete"/>
 </form>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $("input[type=submit]").button();
+  });
+</script>
 {% endblock %}

=== modified file 'lava_server/templates/linaro_django_xmlrpc/create_token.html'
--- lava_server/templates/linaro_django_xmlrpc/create_token.html	2011-07-08 02:56:22 +0000
+++ lava_server/templates/linaro_django_xmlrpc/create_token.html	2011-07-12 02:22:10 +0000
@@ -2,6 +2,16 @@ 
 {% load i18n %}
 
 
+{% block title %}{{ block.super }} | {% trans "API Tokens" %} | {% trans "Create" %}{% endblock %}
+
+
+{% block breadcrumbs %}
+{{ block.super }}
+<li><a href="{% url linaro_django_xmlrpc.views.tokens %}">{% trans "Authentication Tokens" %}</a></li>
+<li><a href="{% url linaro_django_xmlrpc.views.create_token %}">{% trans "Create Token" %}</a></li>
+{% endblock %}
+
+
 {% block content %}
 <h1>Create new authentication token</h1>
 <p>

=== modified file 'lava_server/templates/linaro_django_xmlrpc/edit_token.html'
--- lava_server/templates/linaro_django_xmlrpc/edit_token.html	2011-07-08 02:56:22 +0000
+++ lava_server/templates/linaro_django_xmlrpc/edit_token.html	2011-07-12 02:22:10 +0000
@@ -2,6 +2,20 @@ 
 {% load i18n %}
 
 
+{% block title %}{{ block.super }} | {% trans "API Tokens" %} | {% trans "Edit Token" %} {{ token.pk }}{% endblock %}
+
+
+{% block breadcrumbs %}
+{{ block.super }}
+<li><a
+  href="{% url linaro_django_xmlrpc.views.tokens %}"
+  >{% trans "Authentication Tokens" %}</a></li>
+<li><a
+  href="{% url linaro_django_xmlrpc.views.edit_token token.pk%}"
+  >{% trans "Edit Token" %} {{ token.pk }}</a></li>
+{% endblock %}
+
+
 {% block content %}
 <h1>Edit token {{ token.pk }}</h1>
 <form action="{% url linaro_django_xmlrpc.views.edit_token token.pk %}" method="POST">
@@ -11,7 +25,12 @@ 
     <input id="id_description" name="description" style="width: 80ex" value="{{ token.description }}"/>
   </p>
   <p>
-    <button type="submit">Modify Token</button>
+  <input type="submit" value='{% trans "Save" %}'/>
   </p>
 </form>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $("input[type=submit]").button();
+  });
+</script>
 {% endblock %}

=== modified file 'lava_server/templates/linaro_django_xmlrpc/tokens.html'
--- lava_server/templates/linaro_django_xmlrpc/tokens.html	2011-07-08 02:56:22 +0000
+++ lava_server/templates/linaro_django_xmlrpc/tokens.html	2011-07-12 02:22:10 +0000
@@ -2,58 +2,75 @@ 
 {% load i18n %}
 
 
-{% block title %} {{ block.super }} | {% trans "Handler" %}{% endblock %}
+{% block extrahead %}
+<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}lava/css/demo_table_jui.css"/>
+<script type="text/javascript" src="{{ STATIC_URL }}lava/js/jquery.dataTables.min.js"></script> 
+{% endblock %}
+
+
+{% block title %}{{ block.super }} | {% trans "API Tokens" %}{% endblock %}
 
 
 {% block breadcrumbs %}
-<li><a href="{% url linaro_django_xmlrpc.views.handler %}">{% trans "XML-RPC API" %}</a></li>
+{{ block.super }}
+<li><a
+  href="{% url linaro_django_xmlrpc.views.tokens %}"
+  >{% trans "Authentication Tokens" %}</a></li>
 {% endblock %}
 
 
 {% block content %}
-<h1>Authentication tokens</h1>
-{% if token_list %}
-<table border="1">
-  <tr>
-    <th>ID</th>
-    <th>Description</th>
-    <th>Created on</th>
-    <th>Last used on</th>
-    <th>Secret</th>
-    <th>Actions</th>
-  </tr>
-  {% for token in token_list %}
-  <tr>
-    <td>{{ token.pk }}</td>
-    <td>{{ token.description|default:"empty" }}</td>
-    <td>{{ token.created_on|date }}</td>
-    <td>{{ token.last_used_on|default_if_none:"Never" }}</td>
-    <td>
-      <button id="button_{{ forloop.counter }}" onclick='document.getElementById("secret_{{ forloop.counter }}").style.display="block"; this.style.display="none";'>Show</button>
-      <code style="overflow: auto; width: 25em; display:none;" id="secret_{{ forloop.counter }}">{{ token.secret }}</code>
-    </td>
-    <td>
-      <a href="{% url linaro_django_xmlrpc.views.delete_token token.pk %}">delete this token</a>
-      <a href="{% url linaro_django_xmlrpc.views.edit_token token.pk %}">edit the description</a>
-    </td>
-  </tr>
-  {% endfor %}
-</table>
-<p>
-  To use a token with lava-tool, ...
-</p>
-{% else %}
-<p>
-  There are no tokens associated with your account yet.
-</p>
+<h1>Authentication Tokens</h1>
+<script type="text/javascript" charset="utf-8"> 
+  $(document).ready(function() {
+    $('#tokens').dataTable({
+      "bJQueryUI": true,
+      "sPaginationType": "full_numbers",
+      "aaSorting": [[1, "desc"]],
+    });
+    $('#tokens tbody td a').button();
+    $('button').button();
+  });
+</script> 
 <p>
   Authentication tokens allow scripts
   using <a href="https://launchpad.net/lava-tool">lava-tool</a> to
   securely access LAVA resources.
 </p>
-<p>
-  XXX help goes here!
-</p>
-{% endif %}
 <p>You can <a href="{% url linaro_django_xmlrpc.views.create_token %}">create a new authentication token</a>.</p>
+<table id="tokens" class="demo_jui display">
+  <thead>
+    <tr>
+      <th>ID</th>
+      <th>{% trans "Description" %}</th>
+      <th>{% trans "Created On" %}</th>
+      <th>{% trans "Last Used On" %}</th>
+      <th style="width: 128ex">{% trans "Secret" %}</th>
+      <th>{% trans "Actions" %}</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for token in token_list %}
+    <tr>
+      <td>{{ token.pk }}</td>
+      <td>{{ token.description|default:"empty" }}</td>
+      <td>{{ token.created_on|date }}</td>
+      <td>{{ token.last_used_on|default_if_none:"Never" }}</td>
+      <td>
+        <code style="display:none; overflow:auto;" id="secret_{{ forloop.counter }}">{{ token.secret }}</code>
+      </td>
+      <td>
+        <a href="{% url linaro_django_xmlrpc.views.delete_token token.pk %}">{% trans "Delete" %}</a>
+        <a href="{% url linaro_django_xmlrpc.views.edit_token token.pk %}">{% trans "Edit" %}</a>
+        <button id="button_{{ forloop.counter }}">{% trans "Toggle" %}</button>
+        <script type="text/javascript">
+          $("#button_{{ forloop.counter }}").click(function() {
+            $("#secret_{{ forloop.counter }}").toggle();
+          });
+        </script>
+      </td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
 {% endblock %}