diff options
| -rw-r--r-- | .be/bugs/312fb152-0155-45c1-9d4d-f49dd5816fbb/values | 2 | ||||
| -rw-r--r-- | static/style/aal.css | 4 | ||||
| -rw-r--r-- | static/style/cfbe.css | 237 | ||||
| -rw-r--r-- | templates/base.html | 107 | ||||
| -rw-r--r-- | templates/bug.html | 2 | ||||
| -rw-r--r-- | templates/list.html | 2 |
6 files changed, 232 insertions, 122 deletions
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">+ 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> 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) }} – {{ bug.summary|truncate(50) }} + Bug {{ bd.bug_shortname(bug) }} – {{ 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> |