severity: serious
-status: assigned
+status: fixed
summary: Revamp the layout/design.
header, nav, section, article, aside, footer {display: block;}
/* Basic styles */
-body {background: #fff; color: #000; font: .75em/1.5em "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Bitstream Vera Sans", sans-serif;}
-html>body {font-size: 12px;}
+body {background: #fff; color: #000; font: 0.875em/1.5em "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Bitstream Vera Sans", sans-serif;}
+html>body {font-size: 14px;}
img {display: inline-block; vertical-align: bottom;}
/* @override http://localhost:8080/static/style/cfbe.css */
-body { background-image: url(/static/images/gradient-background.png); background-color: #bbbbbb; background-repeat: repeat-x; }
-
-body.rhythm { background-image: url(/static/images/stripe-rhythm.png); background-repeat: repeat; }
-div#content-pane.rhythm { background-color: transparent; }
-div#external-pane-content.rhythm { background-color: transparent; }
-
-div#header { background-image: url(/static/images/gradient-header.png); background-repeat: repeat-x;
- background-color: #770005; color: #fff; margin-top: 1.5em; }
-div#header h1 { font-size: 4em; line-height: 1.5em; margin-bottom: 0em; }
-
-div.center-column { width: 55em; margin-left: 5em; }
-div#content-wrap { display: inline-block; vertical-align: top; }
-div#content-pane { background-color: #fbfbfb; padding: 1.5em 2em; }
-div#external-pane { background-image: url(/static/images/left-arrow.png); background-repeat: no-repeat; width: 24em; padding: 0em; display: inline-block; }
-div#external-pane-content { margin-left: 18px; background-color: #fbfbfb; padding: 1.5em 1em 1px; }
-
-div#footer { text-align: center; width: 59em; }
-div#footer p { font-size: 0.9em; line-height: 1.666em; }
-
-div#nav { margin-bottom: 1.5em; }
-span#filters { float: right; }
-span#filters a { margin-left: 1.5em; }
-
-a:link, a:visited, a:active { color: #d03; text-decoration: none; font-weight: bold; }
-a:hover { color: #60b305; }
-
-.header-with-link { display: inline-block; }
-.header-link { margin-left: 1em; }
-
-table#bug-list { width: 100%; border-collapse: collapse; border: 0.084em solid #ccc; }
-table#bug-list td, table#bug-list th { border: 0em; border-bottom: 0.084em solid #ccc; text-align: left; }
-table tr td, table tr th { padding: 0px 5px; }
-table tr td { line-height: 2.832em; padding-bottom: 0.084em; }
-table tr th { line-height: 2.916em; }
-table { margin-bottom: 1.417em; }
-tr.stripe { background-color: #f5e5f0; }
-
-div#assignees, div#targets { display: none; }
-
-p.creation-info { color: #888; }
-span.detail-field-header { font-weight: 700; width: 7.5em; padding-right: 1em; display: inline-block; text-align: right; }
-
-div.bug-comment { margin-left: 2em;}
-p.bug-comment-body { white-space: pre; margin: 0em 0em 0em 0em; }
-p.bug-comment-footer { margin: 0em 0em; color: #888; }
-h4.bug-comment-header { margin: 1.5em 0em 0em; }
-
-form#create-form { height: 3em; display: none; }
-form#create-form input#create-summary { width: 30em; font-weight: 700; }
-
-form#add-comment-form { display: none; margin-top: 1.5em; }
-p#add-comment-link {margin-top: 1.5em; }
-
-form#bug-details-edit-form { display: none; }
-form#bug-details-edit-form label { font-weight: 700; width: 7.5em; margin-left: 0em; margin-right: 1em; text-align: right; }
-form#bug-details-edit-form .field { padding-left: 0em; }
-
-form#bug-summary-edit-form { display: none; }
-input#bug-summary-edit-body { width: 95%; }
+body {
+ background-color: #eee;
+}
+
+div#main-pane {
+ width: 960px;
+ margin: 3em auto;
+ border: 1px solid #888;
+ background-color: #fcfcfc;
+}
+.inside-main-pane {
+ padding: 0em 3em;
+}
+
+div#header {
+ background-color: #D8004A;
+ height: 6em;
+}
+div#header h1 {
+ font-size: 4em;
+ line-height: 1.5em;
+ margin-bottom: 0em;
+ color: #fff;
+ font-weight: normal;
+ font-family: "Helvetica Neue Ultra Light", "HelveticaNeue-UltraLight", "Helvetica", "Arial", sans-serif;
+ letter-spacing: 1px;
+}
+
+div#navigation {
+ height: 3em;
+ line-height: 3em;
+ border-bottom: 1px solid #888;
+}
+div#content-pane {
+ margin: 1.5em 0em 3em;
+}
+
+div#filter-pane {
+ display: none;
+ border-bottom: 1px solid #888;
+ line-height: 3em;
+ text-align: right;
+}
+ul.filter-items {
+ list-style-type: none;
+ margin: 0em;
+ padding: 0em;
+}
+ul.filter-items li {
+ display: inline;
+ margin-left: 1.5em;
+}
+
+div#footer {
+ text-align: center;
+ height: 3em;
+ border-top: 1px solid #888;
+}
+div#footer p {
+ font-size: 0.9em;
+ line-height: 3.333em;
+}
+
+span#filters {
+ float: right;
+}
+span#filters a {
+ margin-left: 1.5em;
+}
+
+a:link, a:visited, a:active {
+ color: #d03; text-decoration: none; font-weight: bold;
+}
+a:hover {
+ color: #60b305;
+}
+
+.header-with-link {
+ display: inline-block;
+}
+.header-link {
+ margin-left: 1em;
+}
+
+table#bug-list {
+ width: 100%; border-collapse: collapse; border: 0.084em solid #ccc;
+}
+table#bug-list td, table#bug-list th {
+ border: 0em; border-bottom: 0.084em solid #ccc; text-align: left;
+}
+table tr td, table tr th {
+ padding: 0px 5px;
+}
+table tr td {
+ line-height: 2.832em; padding-bottom: 0.084em;
+}
+table tr th {
+ line-height: 2.916em;
+}
+table {
+ margin-bottom: 1.417em;
+}
+tr.stripe {
+ background-color: #fcecf8;
+}
+
+div#assignees, div#targets {
+ display: none;
+}
+
+p.creation-info {
+ color: #888;
+}
+span.detail-field-header {
+ font-weight: 700;
+ width: 7.5em;
+ padding-right: 1em;
+ display: inline-block;
+ text-align: right;
+}
+
+div.bug-comment {
+ margin-left: 2em;
+}
+p.bug-comment-body {
+ white-space: pre;
+ margin: 0em 0em 0em 0em;
+}
+p.bug-comment-footer {
+ margin: 0em 0em; color: #888;
+}
+h4.bug-comment-header {
+ margin: 1.5em 0em 0em;
+}
+
+#create-form {
+ display: none;
+}
+#create-form fieldset {
+ clear: none;
+}
+#create-form input#create-summary {
+ width: 20em;
+ border: 1px solid #888;
+ margin-right: 1.5em;
+}
+#create-button {
+ margin: 0em;
+}
+
+form#add-comment-form {
+ display: none;
+ margin-top: 1.5em;
+}
+p#add-comment-link {
+ margin-top: 1.5em;
+}
+
+form#bug-details-edit-form {
+ display: none;
+}
+form#bug-details-edit-form label {
+ font-weight: 700;
+ width: 7.5em;
+ margin-left: 0em;
+ margin-right: 1em;
+ text-align: right;
+}
+form#bug-details-edit-form .field {
+ padding-left: 0em;
+}
+
+form#bug-summary-edit-form {
+ display: none;
+}
+input#bug-summary-edit-body {
+ width: 95%;
+}
<link rel="stylesheet" type="text/css" media="screen"
href="/static/style/cfbe.css" />
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
- <script type="text/javascript" src="/static/scripts/jquery.corners.min.js"></script>
+ <script type="text/javascript"
+ src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
+ </script>
+
+ <script type="text/javascript"
+ src="/static/scripts/jquery.corners.min.js">
+ </script>
+
<script type="text/javascript">
$(function() {
- $('#content-pane').corners('bottom 8px');
-
- $('#external-pane').hide();
- $('#external-pane-content').corners('bottom 8px');
-
- $('#show-rhythm').click(function(e) {
- $('body').addClass('rhythm');
- $('#content-pane').addClass('rhythm');
- $('#external-pane-content').addClass('rhythm');
- e.preventDefault();
- });
-
$('#filter-assignee').click(function(e) {
- $('#external-pane-content').html($('#assignees').html());
- $('#external-pane').fadeIn('fast');
+ $('#filter-pane').html($('#assignees').html());
+ $('#filter-pane').fadeIn('fast');
e.preventDefault();
});
$('#filter-target').click(function(e) {
- $('#external-pane-content').html($('#targets').html());
- $('#external-pane').fadeIn('fast');
+ $('#filter-pane').html($('#targets').html());
+ $('#filter-pane').fadeIn('fast');
e.preventDefault();
});
$('#create-bug').click(function(e) {
+ $('#create-bug').hide();
$('#create-form').fadeIn('fast');
e.preventDefault();
});
</head>
<body>
- <div id="header">
- <div class="center-column">
+ <div id="main-pane">
+ <div id="header" class="inside-main-pane">
<h1>{{ repository_name }}</h1>
</div>
- </div>
- <div id="content-wrap">
- <div id="content-pane" class="center-column">
- <div id="nav">
- <span id="filters">
- <a href="/">Open</a>
- <a href="/?status=closed">Closed</a>
- <a href="" id="filter-assignee">Assigned to...</a>
- <a href="" id="filter-target">Scheduled for...</a>
- </span>
- <span id="create">
- <a href="" id="create-bug">+ Create a new bug</a>
- </span>
- </div>
- <form id="create-form" action="/create" method="post">
- <fieldset>
- <div class="field">
- <input type="text" class="text" id="create-summary" name="summary" />
- <button id="create-button" type="submit">Create</button>
- </div>
- </fieldset>
- </form>
+ <div id="navigation" class="inside-main-pane">
+ <span id="filters">
+ <a href="/">Open</a>
+ <a href="/?status=closed">Closed</a>
+ <a href="" id="filter-assignee">Assigned to...</a>
+ <a href="" id="filter-target">Scheduled for...</a>
+ </span>
+ <span id="create">
+ <a href="" id="create-bug">+ Create a new bug</a>
+ </span>
+ <span id="create-form">
+ <form action="/create" method="post">
+ <fieldset>
+ <input type="text"
+ id="create-summary" name="summary" />
+ <button id="create-button"
+ type="submit">Create</button>
+ </fieldset>
+ </form>
+ </span>
+ </div>
+ <div id="filter-pane" class="inside-main-pane"></div>
+ <div id="content-pane" class="inside-main-pane">
<h2>{% block page_title %} {% endblock %}</h2>
{% block content %}{% endblock %}
</div>
- <div id="footer" class="center-column">
+ <div id="footer" class="inside-main-pane">
<p>
<a href="">Cherry Flavored Bugs Everywhere</a>
- was created by <a href="http://stevelosh.com">Steve Losh</a>
+ was created by <a href="http://stevelosh.com">Steve Losh</a> and a very nice <a href="http://fecklessmind.com/2009/01/20/aardvark-css-framework/">aardvark</a>
using <a href="http://cherrypy.org">CherryPy</a>,
<a href="http://jinja.pocoo.org/2/">Jinja2</a>,
and <a href="http://jquery.com">jQuery</a>.
- <br/>
- He asked <a href="http://fecklessmind.com/2009/01/20/aardvark-css-framework/">aardvarks</a> for help
- to make it all <a href="" id="show-rhythm">line up</a>.
+ It all <a href="" id="show-rhythm">lines up</a>.
</p>
</div>
</div>
- <div id="external-pane">
- <div id="external-pane-content"></div>
- </div>
<div id="assignees">
- <p>
- <a href="/?assignee=None">Unassigned</a><br /><br />
+ <ul class="filter-items">
+ <li><a href="/?assignee=None">Unassigned</a></li>
{% for assignee in assignees %}
- <a href="/?assignee={{ assignee|e }}">{{ assignee|e }}</a><br />
+ <li><a href="/?assignee={{ assignee|e }}">{{ assignee|e }}</a></li>
{% endfor %}
- </p>
+ </ul>
</div>
<div id="targets">
- <p>
- <a href="/?target=None">Unscheduled</a><br /><br />
+ <ul class="filter-items">
+ <li><a href="/?target=None">Unscheduled</a></li>
{% for target in targets %}
- <a href="/?target={{ target }}">{{ target }}</a><br />
+ <li><a href="/?target={{ target }}">{{ target }}</a></li>
{% endfor %}
- </p>
+ </ul>
</div>
</body>
</html>
{% extends "base.html" %}
{% block page_title %}
- Bug {{ bd.bug_shortname(bug) }} – {{ bug.summary|truncate(50) }}
+ Bug {{ bd.bug_shortname(bug) }} – {{ bug.summary|truncate(70) }}
{% endblock %}
{% block script %}
<tr>
<td>{{ bd.bug_shortname(bug) }}</td>
<td><a href="/bug?id={{ bd.bug_shortname(bug)}}">
- {{ bug.summary|e|truncate(60) }}</a></td>
+ {{ bug.summary|e|truncate(70) }}</a></td>
<td>{{ bug.status }}</td>
<td>{{ bug.target }}</td>
<td>{{ bug.assigned|striptags }}</td>
projects / be.git / commitdiff