You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@bloodhound.apache.org by Joachim Dreimann <jo...@wandisco.com> on 2012/04/05 19:15:55 UTC
Layout update and css improvements
I've just committed an update to the Product page to suggest a layout.
So far Dashboard, Product, Version, Milestone etc pages all contained
a button bar below the description. The idea behind this was that
users would switch between the different things they'd be interested
to see within the page.
After some basic testing I found that this isn't a great way to both
display and navigate this content. Within each section there was also
a lot of duplication.
My new suggestion is to change the layout of these pages to something
more 'long form' - so a single, continuous page that gives users a
quick overview, without requiring further navigation within the page
other than scrolling down:
https://svn.apache.org/repos/asf/incubator/bloodhound/trunk/doc/html-templates/product.html
Currently only Versions are displayed on that page, Tuesday or
Wednesday next week I'll add the remaining parts (Projects,
Components, Tickets).
I have also updated the custom css with statusitem class and did some
general cleanup such as fixing the alignment of tab content on the
version page.
- Joe
On 5 April 2012 18:03, <jd...@apache.org> wrote:
> Author: jdreimann
> Date: Thu Apr 5 17:03:09 2012
> New Revision: 1309944
>
> URL: http://svn.apache.org/viewvc?rev=1309944&view=rev
> Log:
> Updated the Product page to suggest a layout, please see mailing list for more. Also updated the custom css with statusitem class and did some general cleanup such as fixing the alignment of tab content on the version page.
>
> Modified:
> incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css
> incubator/bloodhound/trunk/doc/html-templates/css/bootstrap.css
> incubator/bloodhound/trunk/doc/html-templates/dashboard.html
> incubator/bloodhound/trunk/doc/html-templates/product.html
> incubator/bloodhound/trunk/doc/html-templates/version.html
>
> Modified: incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css
> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css?rev=1309944&r1=1309943&r2=1309944&view=diff
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css (original)
> +++ incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css Thu Apr 5 17:03:09 2012
> @@ -1,6 +1,7 @@
> +/* @group Sticky Status */
> +
> div#stickyStatus {
> position: relative;
> - width: 620px;
> }
>
> div#belowStatus {
> @@ -27,27 +28,78 @@ div#stickyStatus #whitebox {
> }
>
> div#stickyStatus #statusBar {
> - position: relative;
> + position: absolute;
> top: 65px;
> left: 30px;
> width: 580px;
> text-align: center;
> }
>
> -div#stickyStatus #statusBarBox {
> +div#statusBarBox {
> background-color: #FEFFF0;
> height: 45px;
> width: 583px;
> position: absolute;
> top: -5px;
> left: -18px;
> - z-index: -1;
> + z-index: -50;
> }
>
> -div#stickyStatus .first {
> +div#statusBar .first {
> float: left;
> }
> -div#stickyStatus .other {
> +div#statusBar .other {
> float: left;
> margin-left: 50px;
> -}
> \ No newline at end of file
> +}
> +
> +/* @end */
> +
> +/* @group OOCSS */
> +
> +ul.oocss {
> + list-style-type: none;
> + padding-left: 30px;
> + margin: 0;
> +}
> +
> +ul.oocss h3,
> +ul.oocss h6 {
> + display: inline;
> +}
> +
> +ul.oocss h3 {
> + margin-right: 20px;
> +}
> +
> +/* @end */
> +
> +/* @group Status items */
> +
> +ul.statusitems {
> + list-style-type: none;
> + margin: 0;
> + text-align: center;
> + border-bottom: 1px dashed gray;
> +}
> +
> +ul.statusitems li {
> + display: inline-block;
> + margin-right: 50px;
> +}
> +
> +ul.statusitems li p {
> + margin-bottom: -2px;
> +}
> +
> +ul.statusitems li a {
> + font-size: 150%;
> +}
> +
> +ul.statusitems li .progress {
> + width: 200%;
> + margin-bottom: 0px;
> + margin-top: 0;
> +}
> +
> +/* @end */
> \ No newline at end of file
>
> Modified: incubator/bloodhound/trunk/doc/html-templates/css/bootstrap.css
> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/css/bootstrap.css?rev=1309944&r1=1309943&r2=1309944&view=diff
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/css/bootstrap.css (original)
> +++ incubator/bloodhound/trunk/doc/html-templates/css/bootstrap.css Thu Apr 5 17:03:09 2012
> @@ -2689,7 +2689,7 @@ input[type="submit"].btn.btn-mini {
> clear: both;
> }
> .tab-content {
> - display: block;
> + display: table;
> width: 100%;
> }
> .tabs-below .nav-tabs,
> @@ -2699,7 +2699,7 @@ input[type="submit"].btn.btn-mini {
> }
> .tab-content > .tab-pane,
> .pill-content > .pill-pane {
> - display: block;
> + display: none;
> }
> .tab-content > .active,
> .pill-content > .active {
>
> Modified: incubator/bloodhound/trunk/doc/html-templates/dashboard.html
> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/dashboard.html?rev=1309944&r1=1309943&r2=1309944&view=diff
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/dashboard.html (original)
> +++ incubator/bloodhound/trunk/doc/html-templates/dashboard.html Thu Apr 5 17:03:09 2012
> @@ -31,7 +31,7 @@
>
> <!-- Create button -->
> <div class="span4">
> - <button class="btn btn-primary" href="#">Create Ticket</a>
> + <button class="btn btn-primary" href="#">Create Ticket</button>
> </div>
>
> <!-- Main navigation tabs -->
>
> Modified: incubator/bloodhound/trunk/doc/html-templates/product.html
> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/product.html?rev=1309944&r1=1309943&r2=1309944&view=diff
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/product.html (original)
> +++ incubator/bloodhound/trunk/doc/html-templates/product.html Thu Apr 5 17:03:09 2012
> @@ -1,11 +1,13 @@
> <!DOCTYPE html>
> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
> +<link rel="stylesheet" type="text/css" href="css/bloodhound-custom.css" />
> <html>
> <head>
> <title>MultiSite - Apache Bloodhound</title>
> </head>
> <body>
> <div class="container">
> + <header>
> <div class="row">
> <div class="span6">
> <div id="logo" style="position:relative;">
> @@ -30,7 +32,7 @@
>
> <!-- Create button -->
> <div class="span4">
> - <button class="btn btn-primary" href="#">Create Ticket</a>
> + <button class="btn btn-primary" href="#">Create Ticket</button>
> </div>
>
> <!-- Main navigation tabs -->
> @@ -60,83 +62,152 @@
> </div>
> <div class="span3" style="text-align:right;"></div>
> </div>
> + </header>
> <div class="row">
> - <div class="span8">
> - <h1 style="display:inline;">MultiSite</h1>
> - <br><br><div class="well">
> - <p><strong>This is the product description.</strong> Nay lad ipsum dolor sit t'foot o' our <a href="#">stairs ah'll box</a> thi ears big girl's blouse ey up donec ee by gum ah'll learn thi soft southern pansy at mardy bum phasellus soft southern pansy.</p>
> - <ul>
> - <li>Michael palin gi' o'er felis nah <a href="#">then mi bloomin' 'eck</a> t' molestie nunc accumsan.</li>
> - <li>Varius tempor gerritetten eget <a href="#">'sup wi' 'im.</a><a href="#" class="btn btn-info btn-small pull-right">More</a></li>
> - </ul>
> - </div>
> - <div class="btn-toolbar">
> - <div class="btn-group offset1" data-toggle="buttons-radio">
> - <a class="btn active" href="#">Versions</a>
> - <a class="btn" href="#">My tickets</a>
> - <a class="btn" href="#">All tickets</a>
> - </div>
> - <div class="btn-group">
> - <a class="btn" href="#">Projects</a>
> - <a class="btn" href="#">Components</a>
> - </div>
> - </div>
> - <br>
> - <div class="tabbable tabs-left">
> - <ul class="nav nav-tabs" style="text-align:right;">
> - <li><a href="#"><span class="label">Undefined</span></a></li>
> - <li><a href="#14.3">14.3<br /><br /><div class="progress progress-warning">
> - <div class="bar" style="width: 35%;"></div>
> - </div></a></li>
> - <li class="active"><a href="#14.3"><span class="label label-warning" style="">14.3</span>
> - <br /><br /><div class="progress progress-success">
> - <div class="bar" style="width: 75%;"></div>
> - </div></a></li>
> - <li><a href="#">14.2<br /><br /><div class="progress progress-success">
> - <div class="bar" style="width: 100%;"></div>
> - </div></a></li>
> - <li><a href="#">14.1<br /><br /><div class="progress progress-success">
> - <div class="bar" style="width: 100%;"></div>
> - </div></a></li>
> - <li><a href="#">« Previous</a></li>
> - </ul>
> - <div class="tab-content">
> - <div class="tab-pane active" id="14.3">
> - <h3><a href="version.html">Version 14.3</a> <span class="label label-warning">Current</span></h3>
> - <strong>Due in 3 weeks</strong> (15 Feb, 2012) <a href="#">Change</a><div class="pull-right">75% completed</div>
> - <div class="progress progress-success">
> - <div class="bar" style="width: 75%;"></div>
> + <div id="content" class="span8">
> + <div id="stickyStatus">
> + <div id="whitebox"></div>
> + <div style="position: absolute; z-index: 20;">
> + <hgroup>
> + <h1>MultiSite</h1>
> + <h6>Owned by <a href="profile.html">Warren Warwick</a></h6>
> + </hgroup>
> + <div id="statusBar">
> + <div id="statusBarBox"></div>
> + <div style="width: 150px; margin-left: 40px;" class="first">
> + <p style="margin-bottom:-2px;">24% complete</p>
> + <div class="progress">
> + <div class="bar" style="width: 24%;"></div>
> </div>
> - <a href="#">Complete (75)</a><a href="#" class="pull-right">Incomplete (25)</a><br/>
> - <p>Note to maintainers
> - <ul>
> - <li>Move tickets from <a href="#">next-minor-0.14.x</a> to here once you know you're going to fix them for the <a href="#">0.14.2</a> release.</li>
> - <li>There should be no enhancements here, only defects</li>
> - <li>There should be only <strong>major</strong> defects here anyway, focus is now on <a href="#">0.15</a></li>
> - </ul>
> - </p>
> </div>
> - <div class="tab-pane" id="14.2"></div>
> - <div class="tab-pane" id="14.1"></div>
> + <div id="status" class="other">
> + <p style="margin-bottom:-2px;">In progress</p>
> + <p style="font-size:150%;"><a href="#">14</a></p>
> + </div>
> + <div id="type" class="other">
> + <p style="margin-bottom:-2px;">Open</p>
> + <p style="font-size:150%;"><a href="#">20</a></p>
> + </div>
> + <div id="type" class="other">
> + <p style="margin-bottom:-2px;">Complete</p>
> + <p style="font-size:150%;"><a href="#">24</a></p>
> </div>
> </div>
> - <!--
> - # Components will be displayed in the place where currently Versions are displayed, when selected via the button-bar.
> -
> - <div class="well">
> - <h3 style="display:inline;">Components</h3> <a href="#">View all</a>
> - <p style="font-size:medium; line-height:150%"><a href="#">APIs</a> <a href="#">Branding</a> <a href="#">Website</a> <a href="#">Database</a> <a href="#">Interface</a></p>
> - </div>
> -
> - -->
> - </div>
> + </div>
> + </div>
> + <div id="belowStatus">
> + <div id="description" class="well">
> + <h3>Replication, mirroring and clustering for enterprise performance</h3>
> + <div>
> + <p><i class="icon-tags"></i> <a href="#">Apache Subversion</a>, <a href="#">replication</a>, <a href="#">mirroring</a>, <a href="#">clustering</a>, <a href="#">enterprise performance</a>, <a href="#">scalability</a>, <a href="#">backup</a>, <a href="#">distributed</a></p>
> + </div>
> + <p>This is the product description. Nay lad ipsum dolor sit t'foot o' our stairs ah'll box thi ears big girl's blouse ey up donec ee by gum ah'll learn thi soft southern pansy at mardy bum phasellus soft southern pansy.</p>
> + <ul>
> + <li>Michael palin gi' o'er felis nah then mi bloomin' 'eck t' molestie nunc accumsan.</li>
> + <li>Varius tempor gerritetten eget 'sup wi' 'im.</li>
> + </ul>
> + <button class="btn" style="margin-right: 10px;"><i class="icon-edit"></i> Edit</button> <button class="btn"><i class="icon-file"></i> Attach file</button>
> + </div>
> + <div id="Versions">
> + <h2>Versions</h2>
> + <a href="">Add new</a>
> + <ul class="oocss">
> + <li><a href="version.html"><h3>14.3 Rutland</h3></a><h6>Due in <time datetime="2012-05-27"><a href="#">3 weeks</a></time>, assigned to <a href="profile.html">Werner Hoffer</a></h6>
> + <ul class="statusitems">
> + <li style="margin-right: 80px;"><p style="position: relative; top: -17px;">75% complete</p>
> + <div class="progress" style="position: relative; top: -17px; left: -50%;">
> + <div class="bar" style="width: 75%;"></div>
> + </div></li>
> + <li><p>In progress</p><a href="#">14</a></li>
> + <li><p>Open</p><a href="#">20</a></li>
> + <li><p>Complete</p><a href="#">24</a></li>
> + </ul>
> + </li>
> + <li><a href="#"><h3>14.2.2 - Bugfix</h3></a><h6>Due in <time datetime="2012-05-27"><a href="#">6 days</a></time>, assigned to <a href="profile.html">Werner Hoffer</a></h6>
> + <ul class="statusitems">
> + <li style="margin-right: 80px;"><p style="position: relative; top: -17px;">90% complete</p>
> + <div class="progress" style="position: relative; top: -17px; left: -50%;">
> + <div class="bar" style="width: 90%;"></div>
> + </div></li>
> + <li><p>In progress</p><a href="#">14</a></li>
> + <li><p>Open</p><a href="#">20</a></li>
> + <li><p>Complete</p><a href="#">24</a></li>
> + </ul>
> + </li>
> + <li><a href="#"><h3>14.2.1 - Bugfix release</h3></a><h6>Completed <time datetime="2012-05-27"><a href="#">2 months ago</a></time>, owned by <a href="profile.html">Werner Hoffer</a></h6>
> + <ul class="statusitems">
> + <li style="margin-right: 80px;"><p style="position: relative; top: -17px;">100% complete</p>
> + <div class="progress" style="position: relative; top: -17px; left: -50%;">
> + <div class="bar" style="width: 100%;"></div>
> + </div></li>
> + <li><p>In progress</p><a href="#">14</a></li>
> + <li><p>Open</p><a href="#">20</a></li>
> + <li><p>Complete</p><a href="#">24</a></li>
> + </ul>
> + </li>
> + </ul>
> + <a href="">View more</a>
> + </div>
> + </div>
> + </div>
> +<!-- Buttonbar and below <div class="btn-toolbar">
> + <div class="btn-group offset1" data-toggle="buttons-radio">
> + <a class="btn active" href="#">Versions</a>
> + <a class="btn" href="#">My tickets</a>
> + <a class="btn" href="#">All tickets</a>
> + </div>
> + <div class="btn-group">
> + <a class="btn" href="#">Projects</a>
> + <a class="btn" href="#">Components</a>
> + </div>
> + </div>
> + <div class="tabbable tabs-left">
> + <ul class="nav nav-tabs" style="text-align:right;">
> + <li><a href="#"><span class="label">Undefined</span></a></li>
> + <li><a href="#14.3">14.3<br /><br /><div class="progress progress-warning">
> + <div class="bar" style="width: 35%;"></div>
> + </div></a></li>
> + <li class="active"><a href="#14.3"><span class="label label-warning" style="">14.3</span>
> + <br /><br /><div class="progress progress-success">
> + <div class="bar" style="width: 75%;"></div>
> + </div></a></li>
> + <li><a href="#">14.2<br /><br /><div class="progress progress-success">
> + <div class="bar" style="width: 100%;"></div>
> + </div></a></li>
> + <li><a href="#">14.1<br /><br /><div class="progress progress-success">
> + <div class="bar" style="width: 100%;"></div>
> + </div></a></li>
> + <li><a href="#">« Previous</a></li>
> + </ul>
> + <div class="tab-content" style="width: auto;">
> + <div class="tab-pane active" id="14.3">
> + <h3><a href="version.html">Version 14.3</a> <span class="label label-warning">Current</span></h3>
> + <strong>Due in 3 weeks</strong> (15 Feb, 2012) <a href="#">Change</a><div class="pull-right">75% completed</div>
> + <div class="progress progress-success">
> + <div class="bar" style="width: 75%;"></div>
> + </div>
> + <a href="#">Complete (75)</a><a href="#" class="pull-right">Incomplete (25)</a><br/>
> + <p>Note to maintainers
> + <ul>
> + <li>Move tickets from <a href="#">next-minor-0.14.x</a> to here once you know you're going to fix them for the <a href="#">0.14.2</a> release.</li>
> + <li>There should be no enhancements here, only defects</li>
> + <li>There should be only <strong>major</strong> defects here anyway, focus is now on <a href="#">0.15</a></li>
> + </ul>
> + </p>
> + </div>
> + <div class="tab-pane" id="14.2"></div>
> + <div class="tab-pane" id="14.1"></div>
> + </div>
> + </div>-->
> <!-- Activity starts -->
> - <div id="Activity" class="span4">
> - <h1>Activity</h1>
> - <iframe name="activity-iframe" src="activity-iframe.html" frameborder="0" border="0" cellspacing="0" style="border-style: none; height: 450px; width: 100%;"></iframe>
> + <div id="activity" class="span4">
> + <h1>Activity</h1>
> + <iframe name="activity-iframe" src="activity-iframe.html" frameborder="0" border="0" cellspacing="0" style="border-style: none; height: 600px; width: 100%;"></iframe>
> </div>
> </div>
> -
> + <!-- This is only here to force the footer further down! -->
> + <div style="height:200px;"></div>
> + <!-- Likely due to a position: style that I got wrong somewhere in the 'content' div -->
> <!-- Footer -->
> <div class="row">
> <footer style="border-top: 1px solid #EEE; margin-top:20px;">
> @@ -148,6 +219,7 @@
> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
> <script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
> <script type="text/javascript" src="js/bootstrap-button.js"></script>
> + <script type="text/javascript" src="js/bloodhound-stickyscroll.js"></script>
> </body>
> </html>
>
>
> Modified: incubator/bloodhound/trunk/doc/html-templates/version.html
> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/version.html?rev=1309944&r1=1309943&r2=1309944&view=diff
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/version.html (original)
> +++ incubator/bloodhound/trunk/doc/html-templates/version.html Thu Apr 5 17:03:09 2012
> @@ -97,21 +97,19 @@
> </div>
> </div>
> <div id="belowStatus">
> - <div class="well">
> - <h3>Sit amet vestibulum</h3>
> - <div>
> - <p><i class="icon-tags"></i> <a href="#">Trac</a>, <a href="#">components</a></p>
> - </div>
> + <div class="well">
> + <h3>Sit amet vestibulum</h3>
> + <div>
> + <p><i class="icon-tags"></i> <a href="#">Trac</a>, <a href="#">components</a></p>
> + </div>
> <p>Note to maintainers:</p>
> <ul>
> <li>Move tickets from next-minor-0.14.x to here once you know you're going to fix them for the 0.14.2 release.</li>
> <li>There should be no enhancements here, only defects</li>
> <li>There should be only major defects here anyway, focus is now on 0.15</li>
> </ul>
> -
> <button class="btn" style="margin-right: 10px;"><i class="icon-edit"></i> Edit</button> <button class="btn"><i class="icon-file"></i> Attach file</button>
> - </div>
> -
> + </div>
> <div class="btn-toolbar">
> <div class="btn-group offset1" data-toggle="buttons-radio">
> <a class="btn active" href="#">Milestones</a>
> @@ -127,41 +125,31 @@
> <div class="tabbable tabs-left">
> <ul class="nav nav-tabs" style="text-align:right;">
> <li class="active"><a href="#Undefined"><span class="label">Undefined</span></a></li>
> - <li><a href="#14.3">Super Singularity</a></li>
> - <li><a href="#14.3"><span class="label label-warning">Aktueller Meilenstein</span></a></li>
> - <li><a href="#">Etapa Anterior</a></li>
> + <li><a href="#14.3">Singularity</a></li>
> + <li><a href="#14.3"><span class="label label-warning">Aktuell</span></a></li>
> + <li><a href="#">Anterior</a></li>
> </ul>
> - <div class="tab-content">
> + <div class="tab-content" style="width: auto;">
> <div class="tab-pane active" id="Undefined">
> - <h3>Create Milestone</a></h3>
> - <br />
> - <form method="post" action="">
> - <label style="font-size:14pt;">Name</label>
> - <input type="text" class="span5">
> - <label style="font-size:14pt;">Summary</label>
> - <input type="text" class="span5">
> - <br /><br />
> -
> - <div class="span2">
> - <a href="#" style="font-size:14pt;">+ Attach files</a><br />Upload or link to files.
> - <br /><br />
> - <a href="#" style="font-size:14pt;">+ Set owner</a><br />This is you by default.
> - </div>
> - <div class="span2">
> - <a href="#" style="font-size:14pt;">+ Due date</a><br />Upload or link to files.
> - <br /><br />
> - <a href="#" style="font-size:14pt;">+ Component</a><br />Upload or link to files.
> - </div>
> -
> - <button class="btn btn-primary" style="margin-right: 15px;">Create</button><a href="#">Cancel</a>
> - </form>
> + <h3>Create Milestone</h3>
> + <form method="post" class="form-horizontal">
> + <label>Name</label>
> + <input type="text" />
> + <label>Summary</label>
> + <input type="text" />
> + </form>
> + <a href="#" style="font-size:14pt;">+ Attach files</a><p>Upload or link to files.</p>
> + <a href="#" style="font-size:14pt;">+ Set owner</a><p>This is you by default.</p>
> + <a href="#" style="font-size:14pt;">+ Due date</a><p>Upload or link to files.</p>
> + <a href="#" style="font-size:14pt;">+ Component</a><p>Upload or link to files.</p>
> + <button class="btn btn-primary" style="margin-right: 15px;">Create</button><a href="#">Cancel</a>
> </div>
> </div>
> </div>
> </div>
> <!-- This is only here to force the footer further down! -->
> <div style="height:350px;"></div>
> - <!-- Likely due to a poisition: style that I got wrong somewhere in the 'content' div -->
> + <!-- Likely due to a position: style that I got wrong somewhere in the 'content' div -->
> </div>
>
> <!-- Activity starts -->
> @@ -174,13 +162,12 @@
> </div>
>
> <!-- Footer -->
> - <div class="row">
> <footer style="border-top: 1px solid #EEE; margin-top:20px;">
> + <div class="row">
> <div class="span12" style="color:grey; margin-top:10px;">Powered by <a href="#" style="color:#565656;">Bloodhound</a>. Standing on the shoulders of <a href="#" style="color:#565656;">Trac 0.13</a>.</div>
> </div>
> -
> - </footer>
> </div>
> + </footer>
> </div>
> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
> <script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
>
>