Mercurial > hg > bts-webui

changeset 102:d1903d18294a draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
templates: use 2 column layout rework the layout, use a different CSS hack to get nice two columns. add a nice spiral :)
author diegoe-guest
date Thu, 16 Jul 2009 03:54:28 +0000
parents de9f24ab5b62
children cedf8ac92cf5
files bts_webui/amancay/static/amancay.css bts_webui/amancay/static/spiral.png bts_webui/amancay/templates/base.html
diffstat 3 files changed, 161 insertions(+), 603 deletions(-) [+]
line wrap: on
line diff
--- a/bts_webui/amancay/static/amancay.css
+++ b/bts_webui/amancay/static/amancay.css
@@ -1,314 +1,114 @@
-div.header
-{
-	font-family: sans-serif;
-	font-size: medium;
-	float: right;
-	position: absolute;
-	top: 0.1em;
-	left: 12em;
-	height: 1em;
-	margin-bottom: 0.5em;
-	margin-right: 0;
-	border-bottom:dotted 1px #ccc;
-	background-color: #ffffff;
-}
-
-div.appname
-{
-	position: absolute;
-	float: left;
-	display: block;
-	width: 7em;
-	top: 0.3em;
-	left: 0.5em;
-	text-align: center;
-	font-family: sans-serif;
-	font-size: x-large;
-	font-weight: bold;
-	background-color: #ffffff;
-	color: #d70751;
+html {
+    padding: 0;
+    margin: 0;
 }
-
-div.topnav
-{
-	float: right;
-	font-size: small;
-	color: #000000;
-	margin-right: 1em;
-}
-
-div.topnav ul {
-	/*margin: 2px;*/
-	margin: 0;
-	padding: 0;
-	list-style-type: none;
-	font-size: small;
+body {
+    padding: 0;
+    margin: 0;
+    font-family: "Bitstream Vera Sans", "Verdana", sans-serif;
+    font-size: 0.9em;
+    background: #eee;
+    width:100%;
+    background:#fff;
+    min-width:600px;        /* Minimum width of layout - remove line if not required */ /* The min-width property does not work in old versions of Internet Explorer */
+    /*background: url('http://localhost:8000/static/bg.png') repeat-x top left white;*/
+    border:0;            /* This removes the border around the viewport in old versions of IE */
 }
-
-div.topnav ul li {
-	display: inline;
-	margin: 0;
-	white-space: nowrap;
-}
-
-div.topnav a {
-/*	font-size: small;*/
-	text-decoration: none;
-	color: #047F54;
-}
-
-div.topnav a:hover {
-	text-decoration: underline;
-}
-
-div.body {
-	margin: auto auto auto auto;
-	font-family: sans-serif;
-}
-
+/*******************************************************************************
+                       Positioning rules
+*******************************************************************************/
 
-div.sidebar { 
-	-moz-border-radius: 5px;
-	top: 3em;
-	margin-left: 0.05em;
-	right: auto;
-	float: left;
-	position: absolute;
-/*	padding-bottom: 0.5em;*/
-	padding-bottom: 0;
-	padding-top: 0.2em;
-	padding-right: 0.2em;
-	padding-left: 0.2em;
-	background-color: rgb(135,202,214);
-	width: 10em;
+#header {
+    background: #BF1238;
+    border-bottom: 3px groove #BF1238;
+    color:white;
+    padding: 0.8em;
+    padding-left: 1.0em;
 }
-
-h3.sidebar_title {
-	font-size: medium;
-	font-weight: normal;
-	margin-top: 0.1em;
-	margin-bottom: 0.1em;
-	padding-left: 0.4em;
+#main_title {
+    padding: 0;
+    margin: 0;
+    vertical-align: middle;
 }
-
-div.sidebar ul {
-	background: white;
-	margin-top: 0.15em;
-	margin-left: 0;
-	margin-right: 0;
-	margin-bottom: 0.25em;
-	padding-left: 0.4em;
-	list-style-type: none;
-	font-size: medium;
-	font-weight: normal;
+#main_title img {
+    vertical-align: middle;
+    margin-right: 0.5em;
 }
-
-div.sidebar a {
-	font-size: 0.85em;
-	line-height: 2em;
-	padding-right: 0.5em;
-	text-decoration: none;
-	color: #000000;
-	/* padding: 0.2em 0 0.3em 0em; */
-}
-
-div.sidebar a:hover {
-	text-decoration: underline;
+#navbar {
+    text-align: right;
+    padding: 5px;
 }
-
-div.toolbox { 
-	-moz-border-radius: 5px;
-	top: 16em;
-	margin-left: 0.05em;
-	float: left;
-	right: auto;
-	position: absolute;
-	padding-bottom: 0;
-	padding-right: 0.25em;
-	padding-left: 0.2em;
-	background: #87d6ba;
-	width: 10em;
+#footer {
+    color: #fff;
+    background-color: black;
+    clear:both;
+    float:left;
+    width:100%;
+    border-top:1px solid #000;
 }
-
-h3.toolbox_title {
-	padding-left: 0.4em;
-	margin-top: 0.1em;
-	margin-bottom: 0.1em;
-	padding-top: 0.1em;
-	font-size: medium;
-	font-weight: normal;
-}
-
-div.toolbox_itemlist {
-	width: 100%;
-	background: white;
-	vertical-align: text-bottom;
-	margin-bottom: 0.2em;
-	padding-top: 0.2em;
-	padding-bottom: 0.2em;
+#footer p {
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 0.8em;
 }
 
-div.toolbox_itemlist table {
-/*	float: left;*/
-/*	display: block;*/
-/*	position: relative;*/
-	display: inline-table;
-/*	margin-top: 0.15em;
-	margin-left: 0;
-	margin-bottom: 0.25em;*/
-	padding-left: 0em;
-	font-size: small;
-	font-weight: normal;
-	table-layout: fixed;
-	width: 100%;
+/************* column holy grial **************/
+/* column container */
+.colmask {
+    position:relative;    /* This fixes the IE7 overflow hidden bug */
+    clear:both;
+    float:left;
+    width:100%;            /* width of whole page */
+    overflow:hidden;        /* This chops off any overhanging divs */
 }
-td.item_select {
-	margin: 0 0 0 0;
-	padding: 0 0 0 0;
-	width: 1.3em;
-}
-td.item_name {
-/*	width: 5em;*/
-	white-space: nowrap;
-	overflow: hidden;
+/* common column settings */
+.colright,
+.colmid,
+.colleft {
+    float:left;
+    width:100%;            /* width of page */
+    position:relative;
 }
-div.toolbox_remove {
-/*	display: inline;*/
-	width: 100%;
-/*	float: right;
-	clear: both;*/
-/*	height: 100%;*/
-/*	position: absolute;*/
-/*	position: relative;*/
-/*	left: 1em;*/
-/*	right: -0.1em;*/
-/*	position: fixed;*/
-	text-align: right;
+.col1,
+.col2,
+.col3 {
+    float:left;
+    position:relative;
+    padding:0 0 1em 0;    /* no left and right padding on columns, we just make them narrower instead
+                    only padding top and bottom is included here, make it whatever value you need */
+    overflow:hidden;
+}
+/* 2 Column (left menu) settings */
+.leftmenu {
+    background:#fff;        /* right column background colour */
 }
-
-input.toolbox_remove {
-	/* This part hides the original button. */
-	background-color: transparent; 
-	color: transparent; 
-	border: 0px;
-	padding: 0px;
-	overflow: hidden;
-	
-	/* This part defines its new look. */
-	width: 24px;
-	height: 24px;
-	max-width: 24px;
-	max-height: 24px;
-	/*background-position: center center;
-	background-repeat: no-repeat;*/
-	background-image: url(../images/delete.png);
+.leftmenu .colleft {
+    right:80%;            /* right column width */
+/*    border: 1px blue solid;*/
+    background:#f4f4f4;    /* left column background colour */
 }
-
-div.toolbox_message {
-	background-color: white;
-	text-align: center;
-	font-size: small;
-	width: 96%;
-	padding: 0.2em;
-	margin-bottom: 0.2em;
-	display: block;
+.leftmenu .col1 {
+    width:76%;            /* right column content width */
+/*    border: 1px green solid;*/
+    left:102%;            /* 100% plus left column left padding */
 }
-
-div.toolbox_add_item {
-	margin-bottom: 0.25em;
+.leftmenu .col2 {
+    width:17%;            /* left column content width (column width minus left and right padding) */
+/*    border: 1px purple solid;*/
+    left:6%;            /* (right column left and right padding) plus (left column left padding) */
 }
+/************* /column holy grial **************/
 
-div.toolbox_txt {
-	display: inline;
-}
-input.toolbox_txt {
-	width: 7em;
-}
-div.toolbox_add {
-	text-align: right;
-	width: 100%;
-	display: inline;
-}
-input.toolbox_add {
-	width: 2.8em;
-}
-
-div.main { 
-/*	position: absolute;*/
-/*	float: right;
-	clear: both;*/
-	width: auto;
-	height: auto; 
-	margin-top: 2em;
-	margin-left: 12em;
-	margin-right: 0.5em;
-}
-
-div.footer
-{
-margin:10px auto 0px auto;
-width:100%;
-border-top:dotted 1px #ccc;
-clear: both;
-font-size: small;
-}
-
-span.table_title {
-font-family: sans-serif;
-font-size: large;
-font-weight: bold;
-color: #9999dd;
-}
-
-div.loading {
-	position: fixed;
-	top: 1.5em;
-	right: 0;
-}
-
-span.loading {
-	font-family: sans-serif;
-	font-size: small;
-	background-color: #9999dd;
-	color: #FFFFFF;
-	padding-top: 0.1em;
-	padding-bottom: 0.1em;
-	padding-left: 0.3em;
-	padding-right: 0.3em;
-}
-span.error {
-	font-family: sans-serif;
-	font-size: medium;
-	color: #CC6666;
-}
-
-div.bugs {
-display:block;
-margin: 1% 1% 1% 1%;
-/*float:right;*/
-}
+/************* amancay style *******************/
 
 table.bugs {
-background: #ffffff;
-border: 0;
-border-collapse: collapse;
-font-family: sans-serif;
-font-size: small;
-width: 100%;
-}
-
-table.bugs th {
-	border: 1px solid #999999;
-	padding-top: 0.3em;
-	padding-left: 0.2em;
-	padding-right: 0.2em;
-	padding-bottom: 0.3em;
+    border: 0;
+    border-collapse: collapse;
+    font-family: sans-serif;
+    font-size: small;
+    width: 100%;
 }
 table.bugs td {
-	padding-left: 0.4em;
-	padding-right: 0.4em;
-	padding-top: 0.1em;
-	padding-bottom: 0.1em;
 	border-bottom:dotted 1px #CCCCCC;
 	vertical-align: top;
 }
@@ -319,7 +119,6 @@
 table.bugs a:hover {
 	text-decoration: underline;
 }
-
 table.bugs td.package {
 	color: #333399;
 }
@@ -333,24 +132,15 @@
 	color: #999999;
 	text-align: right;
 }
-
 /* Hover boxes */
 table.bugs tr:hover {
 	background-color: rgb(135,202,214);
 }
-
-table.bugs a {
-    position:relative;/*this is the key*/
-    z-index:24; 
+table.bugs span.hidden {
+	display: none;
+	position: relative;
 }
-table.bugs a:hover {
-	z-index:25; 
-}
-table.bugs a span.hidden{
-	display: none
-}
-
-table.bugs a:hover span.hidden{ /*the span will display just on :hover state*/
+table.bugs a:hover span.hidden { /*the span will display just on :hover state*/
     display: block;
     position: absolute;
     top:2em; left:2em;
@@ -361,262 +151,34 @@
     text-align: left;
 	padding: 0.3em;
 }
-
-
 /* Severities */
 td.critical {
-color: #771a1a;
-font-weight: bold;
+    color: #771a1a;
+    font-weight: bold;
 }
-
 td.grave {
-color: #771a1a;
-font-weight: bold;
+    color: #771a1a;
+    font-weight: bold;
 }
-
 td.serious {
-color: #771a1a;
-font-weight: bold;
+    color: #771a1a;
+    font-weight: bold;
 }
-
 td.important {
-color: #333399;
+    color: #333399;
 }
-
 td.normal {
-color: #333399;
+    color: #333399;
 }
-
 td.minor {
-color: #006600;
+    color: #006600;
 }
-
 td.wishlist {
-color: #006600;
+    color: #006600;
 }
 table.bugs span.done {
 	color: #000000;
 	font-weight: normal;
 }
 
-/* Bug Page */
-div.bug_log {
-	margin-bottom: 2em;
-	margin-right: 2em;
-}
-div.bug_log_title div.report_information {
-	font-size: 0.9em;
-	font-weight: normal;
-	color: #333333;
-}
-div.bug_log_title span.bug_number {
-	font-weight: bold;
-}
-div.bug_log_title span.severity {
-	font-weight: bold;
-}
-div.bug_log_title span.modified {
-	font-weight: bold;
-}
-div.bug_log_title div.bug_title {
-	font-size: large;
-	font-weight: bold;
-	color: #7f042f;
-	padding-top: 0.2em;
-	padding-bottom: 0.2em;
-}
-div.bug_log_title ul {
-	margin: 0;
-	padding: 0;
-	list-style-type: none;
-	font-size: 0.9em;
-}
-
-div.bug_log_item {
-	margin-top: 1em;
-	border: 1px solid #a3b8a7;
-	font-size: 0.9em;
-}
-div.bug_log_header {
-	background: #c8e5d6;
-	padding: 0.4em;
-}
-span.bug_log_from {
-}
-span.bug_log_date {
-}
-span.bug_log_subject {
-	font-weight: bold;
-}
-div.bug_log_body {
-	padding: 0.4em;
-}
-
-/* Search */
-div.search_form {
-	width: 100%;
-	margin-bottom: 0.5em;
-}
-fieldset.search_form {
-	margin: 0.2em 0 0 0;  
-	padding: 0.2em; 
-}
-legend.search_title {
-	font-size: normal;
-	font-weight: bold;
-	color: #4ea385;
-	padding-right: 1em;
-	padding-left: 1em;
-}
-ol.search_form {
-	margin-bottom: 0.5em;
-	margin-left: 1em;
-	margin-right: 1em;
-	margin-top: 0.3em;
-	padding: 0;  
-	list-style: none; 
-}
-ol.search_form li {
-	padding-right: 0.5em;
-	display: inline;
-	margin: 0;
-	white-space: nowrap;
-	font-size: small;
-}
-input.search_field {
-	color: #4ea385;
-	font-size: small;
-	font-weight: bold;
-	background: #defcf4;
-	border: 1px solid #4ea385;
-	width: 25em;
-	padding-left: 0.2em;
-}
-input.submit_search {
-	color: #000;
-	background: rgb(135,202,214);
-	border: 2px outset #d7b9c9
-}
-
-/* Pager */
-div.pager{
-	font-size: small;
-	margin-bottom: 0.2em;
-}
-span.total_bugs {
-}
-span.page_numbers {
-	float: right;
-}
-ul.page_numbers {
-	list-style: none; 
-	margin: 0;
-	padding: 0;
-	display: inline;
-}
-ul.page_numbers li {
-	padding-right: 0.5em;
-	display: inline;
-	margin: 0;
-	white-space: nowrap;
-}
-
-/* Bug actions */
-div.bug_actions {
-	text-align: right;
-	background: rgb(135,202,214);
-	padding: 0;
-	border-bottom: solid #a3b8a7 1px;
-	border-left: solid #a3b8a7 1px;
-	border-right: solid #a3b8a7 1px;
-}
-div.bug_actions form {
-	padding: 0.2em;
-	font-size: small;
-}
-div.bug_actions input {
-	padding-right: 0.2em;
-}
-div.bug_actions input {
-	padding-right: 0.2em;
-}
-
-div.action_form {
-	display: none;
-	font-size: small;
-}
-fieldset.action_form {
-	margin-top: 0.5em;
-	margin-right: 2em;  
-	padding: 0.5em; 
-}
-
-div.action_form ul {
-	margin-bottom: 0.3em;
-	margin-top: 0.3em;
-	padding: 0;  
-	list-style: none; 
-}
-div.action_form li {
-	padding-bottom: 0.4em;
-	padding-top: 0.4em;
-}
-div.action_form label { 
-	display: block;
-	float: left; 
-	width: 8em;
-	margin-right: 1em;
-	text-align: right; 
-}
-div.action_form input.submit {
-	margin-left: 9em;	
-}
-div.info_to_user {
-	text-align: center;
-	font-size: small;
-	background: #ffcccc;
-	margin-top: 0.5em;
-	margin-bottom: 0.5em;
-	padding: 0.4em;
-	font-weight: bold;
-}
-
-/* Registration */
-div.account_form {
-	width: 20em;
-	float: left;
-}
-
-.account_title {
-	font-size: large;
-	font-weight: bold;
-	color: rgb(135,202,214);
-}
-
-fieldset.account_form {
-	margin: 0.5em 0 0 0;  
-	padding: 0.5em; 
-}
-
-ol.account_form {
-	margin-bottom: 0.3em;
-	margin-top: 0.3em;
-	padding: 0;  
-	list-style: none; 
-}
-ol.account_form li {
-	padding-bottom: 0.4em;
-	padding-top: 0.4em;
-}
-div.account_comment {
-	width: 15em;
-	float: left;
-	margin-left: 2em;
-	margin-right: 2em;
-	margin-top: 2em;
-}
-div.account_form input.submit {
-	float: right;	
-}
-
-
+/************* /amancay style ******************/
new file mode 100644
index 0000000000000000000000000000000000000000..d56c9887ebfee22917f53792d8055b30a9278784
GIT binary patch
literal 1363
zc$@)K1+4msP)<h;3K|Lk000e1NJLTq001Ze001%w1^@s6F0+}C00004b3#c}2nYxW
zd<bNS00009a7bBm0009?0009?0njHMhyVZp8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H11kg!DK~z|U&6!Dz6;%|5zn-9FkO+u~G6)7G0#QQ<lP01@i80^?
zJCTLM%D6xi2}a$x01~H#8nrPo29by}M8pv!;1on$I1r{d;J{!jGI!H_F77S6`tjcD
zSJh3!pPX0qZk^$O_f*|`>bxqIPU0$HAkYU`0ki-^ft^5A{GJ=NIqiA?4Zyv?6>+Q;
zs0NyV?^3!WfVY8HfUmO#s>(5gw*ij>gR>d}8-S;QX5av@7C2GXLakITQs1|0@q{|M
zT--{CU92uv4`mGAQlZ{ab)nj$Sp1GsJRbNEIIoP(Heh8;-yUEya3o$E2~3GH6&Opn
zPmAFrU}nm;!xT?Y|1R^(e^eXPsxm$brJwqgdZL8SwQBFQO({p0sQXGd*{RM^$7Up#
zmTT0XOZZ<=3Bh$Gj900BbCN2Q5$bOx;@ne?;QS&6yVXb4QC&nXk#QEkjgA<y_&>ox
z@mQzsDo|dp4(?)NX_;Pp5`7^}@TPdYt3YX4Bz>yLCGti=+-CKl+Apniv+dWe4QkJB
zActYCZBE6W6iL^ol|D`>>{QR~M8JCWGQ&MvU!l$7RQzYuDe3^?EDf`5ZTdGl&qHjo
zx>{{j_o&~i8`Y&1_-wE}E>|z81%?B&38fK)jeL8#?WF`}0Pg_HfUAKoXe$Kz5X!RV
zxbqalm#Om>U=*+owOZYpV!j~9%uQ2wsMmF%*F&u-b3MIyU$54nPE8FSQ_s&xZjkzW
z^wZgg<<%6Ic`DU}`Yyq8;E#-{eGXU*e3sF!BUC3Jy;Fm4Wppx;P=PddC8>y6$v{(T
zFzf8y39QRuH?72Yx=Mc!0>NXc!QB}H4FrD4Xan$hiSY~LaS!kVoLoHqnK4i;VF}5K
zQtu)A;;|8UHwlnnKX5c-pgQ2nj5gI2Cs;?QzyVejQ{JC35Wo&#2yk|V`Zd7l64x4l
z0l;6t#)MZjZL?OBgW&7YZcc^zt&u<>CICy~`O0`ao)A172hPet@GD>!Fqh)9H~^Rj
z+?pEOTSRYqJU&ZUSB(OO@;br946A-$wU;`}P#ml=UwL+)dR#rM4lTTndVAsaQlXq}
zs3Ggrhob#!hP}NK`(Elx(Qcoi5;{o_Ls^qxZpL3f%&-?<sxFE?-i$s=*;K1{tJ|ag
z7UTOzDT3AN{;0erBS8$Wp5xWVIFrYsul4F|L)wO@HyB>Lw#DlQ)dwumQAi}|EUX4@
z1pXnk&JN~yV1@&a#0LXla_T&Rz_-8$@qzfYBc}<$2Z04~>@nbBLUEY~Gl5BjRz?eL
z%a_0wGH#~{!I6Y2I;pC+6LyFLIY|Qa1+FD5Wm|!t$dj2=zE|5GSs$2FBI#n``2z0!
zbIx3sBHezgA@r4p#qUjo_HAd<+-am|uobvJ^}RnZrhDlWL6N+t@5N6~_dQsw!#ax4
zrLQMcI%5b=;AugzcI*ydemt)SUM62D)-@<Iy^X0<FICSu9Vsq%u~z*gMRL)ZMvypb
zn<BwO>J0PurB4Y#)IPTV1LsN0_gA`|V3O_^QzVz1X#^9wL)~lWAuco&tEaR@oX4oY
zp}~E^P;@T0gQBy$2_`bm@UKym`i*7E_RdJ2zhev06S#%Y5R%Y7*$iwVd#~pt{0Hu1
V6~>kshb;gA002ovPDHLkV1m7)a5Vq`
--- a/bts_webui/amancay/templates/base.html
+++ b/bts_webui/amancay/templates/base.html
@@ -1,71 +1,67 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html lang="en">
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-	<title>{% block title %}{% endblock %}</title>
-	<script type="text/javascript" src="/static/MochiKit.js"></script> 
-	<script type="text/javascript" src="/static/amancay_interface.js"></script> 
-	<link rel="stylesheet" href="/static/amancay.css" type="text/css" />
+    <title>amancay 0.0.0</title>
+    <link rel="icon" type="image/png" href="/static/icon.png"/>
+    <link rel="stylesheet" type="text/css" href="/static/amancay.css"/>
+	<script type="text/javascript" src="/static/MochiKit.js"></script>
+	<script type="text/javascript" src="/static/amancay_interface.js"></script>
 </head>
+
 <body>
-	<div class="header">
-	{% block content_header %}
-	<div class="topnav">
-		{% if current_user.is_authenticated %}
-		<ul>
-			<li>Logged in as {{ current_user }}</li>
-			<li style="list-style: none">|</li>
-			<li><a id="home_link" href="/index">Home</a></li>
-			<li style="list-style: none">|</li>
-			<li><a id="settings_link"href="/accounts/settings">Settings</a></li>
-			<li style="list-style: none">|</li>
-			<li><a id="help_link" href="/help">Help</a></li>
-			<li style="list-style: none">|</li>
-			<li><a id="logout_link" href="/accounts/logout">Logout</a></li>
-		</ul>
-		{% else %}
-		<ul>
-			<li>Not logged in</li>
-			<li style="list-style: none">|</li>
-			<li><a id="home_link" href="/index">Home</a></li> 
-			<li style="list-style: none">|</li>
-			<li><a id="login_link" href="/accounts/login">Login</a></li>
-			<li style="list-style: none">|</li>
-			<li><a id="help_link" href="/help">Help</a></li>
-		</ul>
-		{% endif %}
-	</div>
-	{% endblock %}
-	</div>
-	<div class="appname">Amancay</div>
-
-	<div class="body">
-		<div class="sidebar">
-		{% block sidebar %}
-		<h3 class="sidebar_title">Bugs</h3>
-		<ul>
-			<li><a id="search_link" href="/search">Search</a></li>
-			<li><a id="selected_bugs_link" href="/selected_bugs">Selected</a></li>
-			<li><a id="tagged_bugs_link" href="/tagged_bugs">Tagged</a></li>
-			<li><a id="submitted_bugs_link" href="/submitted_bugs">Latest Submitted</a></li>
-			<li><a id="received_bugs_link" href="/received_bugs">Latest Received</a></li>
-			<li><a id="package_bugs_link" href="/package_bugs">Selected Packages</a></li>
-		</ul>
-		{% endblock %}
-		</div>
-
-		<div id="toolbox" class="toolbox">
-		{% block toolbox %}{% endblock %}
-		</div>
-
-		<div class="main">
+<div id="header">
+    <h1 id="main_title"><img src="/static/spiral.png"/>Amancay!</h1>
+</div>
+<div class="colmask leftmenu">
+	<div class="colleft">
+		<div class="col1">
+			<!-- Column 1 start -->
+			<div id="navbar">
+			    {% block navbar %}
+			    <a href="/">Home</a> • 
+			    {% if session.logged %}
+			        <a href="/accounts/settings">Settings</a> • 
+			        <a href="/accounts/logout">Logout</a>
+			    {% endif %}
+			    <a href="/accounts/settings">Help</a>
+			    {% endblock %}
+			    <br/>
+			    <span style="font-size: smaller;">
+			        <a href="/join">rel tasks</a>
+			    </span>
+			</div>
 			{% if info_to_user %}
-			<div class="info_to_user">{{ info_to_user }}</div>
+				<div class="info_to_user">{{ info_to_user }}</div>
 			{% endif %}
 			{% block main_content %}{% endblock %}
+			<div class="loading" id="loading"></div>
+			<!-- Column 1 end -->
 		</div>
+		<div class="col2">
+			<!-- Column 2 start -->
+			{% block sidebar %}
+			{% endblock %}
+			<h3 class="sidebar_title">Bugs</h3>
+			• <a id="search_link" href="/search">Search</a><br/>
+			• <a id="selected_bugs_link" href="/selected_bugs">Selected</a><br/>
+			• <a id="tagged_bugs_link" href="/tagged_bugs">Tagged</a><br/>
+			• <a id="submitted_bugs_link" href="/submitted_bugs">Latest Submitted</a><br/>
+			• <a id="received_bugs_link" href="/received_bugs">Latest Received</a><br/>
+			• <a id="package_bugs_link" href="/package_bugs">Selected Packages</a><br/>
 
-		<div class="loading" id="loading"></div>
+			<div id="toolbox" class="toolbox">
+			{% block toolbox %}{% endblock %}
+			</div>
+			<!-- Column 2 end -->
+		</div>
 	</div>
+</div>
+
+<div id="footer">
+    <p>Copyright © 2009 - The <a href="#">Amancay</a> authors.<br/>
+</div>
+
 </body>
 </html>