From: Steve Losh <steve@stevelosh.com>
Date: Thu, 25 Jun 2009 23:03:32 +0000 (-0400)
Subject: Revamp the layout to look less awful.
X-Git-Tag: 1.0.0~53^2~4^2~5
X-Git-Url: http://git.tremily.us/?a=commitdiff_plain;h=1da0b687776fa83cf8098d6783195e2ed48ca972;p=be.git

Revamp the layout to look less awful.
---

diff --git a/.be/bugs/312fb152-0155-45c1-9d4d-f49dd5816fbb/values b/.be/bugs/312fb152-0155-45c1-9d4d-f49dd5816fbb/values
index a100dd7..2795a3a 100644
--- a/.be/bugs/312fb152-0155-45c1-9d4d-f49dd5816fbb/values
+++ b/.be/bugs/312fb152-0155-45c1-9d4d-f49dd5816fbb/values
@@ -7,7 +7,7 @@ creator: Steve Losh <steve@stevelosh.com>
 severity: serious
 
 
-status: assigned
+status: fixed
 
 
 summary: Revamp the layout/design.
diff --git a/static/style/aal.css b/static/style/aal.css
index a1b7b10..9bad98f 100644
--- a/static/style/aal.css
+++ b/static/style/aal.css
@@ -25,8 +25,8 @@ blockquote:before,blockquote:after,q:before,q:after {content: ''; content: none;
 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;}
 
diff --git a/static/style/cfbe.css b/static/style/cfbe.css
index 360744f..c5f726e 100644
--- a/static/style/cfbe.css
+++ b/static/style/cfbe.css
@@ -1,61 +1,180 @@
 /* @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%;
+}
diff --git a/templates/base.html b/templates/base.html
index 1f0ab7b..dd016dc 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,35 +10,30 @@
         <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();
                 });
@@ -51,66 +46,62 @@
     </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">&#43; 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">&#43; 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 %}&nbsp;{% 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>
diff --git a/templates/bug.html b/templates/bug.html
index 3bada38..4d15536 100644
--- a/templates/bug.html
+++ b/templates/bug.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block page_title %}
-    Bug {{ bd.bug_shortname(bug) }} &ndash; {{ bug.summary|truncate(50) }}
+    Bug {{ bd.bug_shortname(bug) }} &ndash; {{ bug.summary|truncate(70) }}
 {% endblock %}
 
 {% block script %}
diff --git a/templates/list.html b/templates/list.html
index 8fad7cd..1d409f7 100644
--- a/templates/list.html
+++ b/templates/list.html
@@ -17,7 +17,7 @@
         <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>