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/04 19:41:40 UTC

Status bar for Version and Milestone view

I've now added the status bars (as on the Ticket view previously) to
version and milestone screens:
Version: https://svn.apache.org/repos/asf/incubator/bloodhound/trunk/doc/html-templates/version.html
Milestone: https://svn.apache.org/repos/asf/incubator/bloodhound/trunk/doc/html-templates/milestone.html

I have also moved the required css and js into separate files. I'll
continue moving more of the CSS into the new custom file next week.

I didn't get round to do the Product screen yet, but will do tomorrow.
Does anyone have suggestions on what should be tracked as the status
for Products?

Also, I'm not too keen on the way Activity currently sticks to the top
of the frame, and lets users scroll within the element.
I've raised a ticket to myself [1] to try and see if it can be
improved by _not_ making it sticky and instead just add more activity
to the bottom of the element using lazy load when users scroll down.

- Joe

[1] https://issues.apache.org/bloodhound/ticket/25

On 4 April 2012 18:29,  <jd...@apache.org> wrote:
> Author: jdreimann
> Date: Wed Apr  4 17:29:11 2012
> New Revision: 1309496
>
> URL: http://svn.apache.org/viewvc?rev=1309496&view=rev
> Log:
> Added status bars to version and milestone screens and moved required css and js into seperate files.
>
> Added:
>    incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css   (with props)
>    incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-activitysize.js   (with props)
>    incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-stickyscroll.js   (with props)
> Modified:
>    incubator/bloodhound/trunk/doc/html-templates/activity-iframe.html
>    incubator/bloodhound/trunk/doc/html-templates/milestone.html
>    incubator/bloodhound/trunk/doc/html-templates/ticket.html
>    incubator/bloodhound/trunk/doc/html-templates/version.html
>
> Modified: incubator/bloodhound/trunk/doc/html-templates/activity-iframe.html
> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/activity-iframe.html?rev=1309496&r1=1309495&r2=1309496&view=diff
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/activity-iframe.html (original)
> +++ incubator/bloodhound/trunk/doc/html-templates/activity-iframe.html Wed Apr  4 17:29:11 2012
> @@ -46,6 +46,30 @@
>                <td><a href="profile.html">Warren</a> commented on <a href="ticket.html">E-5476</a> (Fix header graphic) saying:
>                <div style="color:grey;">"The header graphic is going to need a re-think"</div></td>
>        </tr>
> +       <tr>
> +               <td><a href="profile.html">Warren</a> commented on <a href="ticket.html">E-5476</a> (Fix header graphic) saying:
> +               <div style="color:grey;">"The header graphic is going to need a re-think"</div></td>
> +       </tr>
> +       <tr>
> +               <td><a href="profile.html">Warren</a> commented on <a href="ticket.html">E-5476</a> (Fix header graphic) saying:
> +               <div style="color:grey;">"The header graphic is going to need a re-think"</div></td>
> +       </tr>
> +       <tr>
> +               <td><a href="profile.html">Warren</a> commented on <a href="ticket.html">E-5476</a> (Fix header graphic) saying:
> +               <div style="color:grey;">"The header graphic is going to need a re-think"</div></td>
> +       </tr>
> +       <tr>
> +               <td><a href="profile.html">Warren</a> commented on <a href="ticket.html">E-5476</a> (Fix header graphic) saying:
> +               <div style="color:grey;">"The header graphic is going to need a re-think"</div></td>
> +       </tr>
> +       <tr>
> +               <td><a href="profile.html">Warren</a> commented on <a href="ticket.html">E-5476</a> (Fix header graphic) saying:
> +               <div style="color:grey;">"The header graphic is going to need a re-think"</div></td>
> +       </tr>
> +       <tr>
> +               <td><a href="profile.html">Warren</a> commented on <a href="ticket.html">E-5476</a> (Fix header graphic) saying:
> +               <div style="color:grey;">"The header graphic is going to need a re-think"</div></td>
> +       </tr>
>  </table>
>  </div>
>  </body>
>
> Added: 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=1309496&view=auto
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css (added)
> +++ incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css Wed Apr  4 17:29:11 2012
> @@ -0,0 +1,53 @@
> +div#stickyStatus {
> +       position: relative;
> +       width: 620px;
> +}
> +
> +div#belowStatus {
> +       position: relative;
> +       top: 135px;
> +}
> +
> +div#stickyStatus hgroup {
> +       position: absolute;
> +       left: 60px;
> +       width: 620px;
> +}
> +
> +div#stickyStatus h6 {
> +       margin-top: -5px;
> +}
> +
> +div#stickyStatus #whitebox {
> +       position: absolute;
> +       z-index: 10;
> +       background-color: white;
> +       height: 115px;
> +       width: 620px;
> +}
> +
> +div#stickyStatus #statusBar {
> +       position: relative;
> +       top: 65px;
> +       left: 30px;
> +       width: 580px;
> +       text-align: center;
> +}
> +
> +div#stickyStatus #statusBarBox {
> +       background-color: #FEFFF0;
> +       height: 45px;
> +       width: 583px;
> +       position: absolute;
> +       top: -5px;
> +       left: -18px;
> +       z-index: -1;
> +}
> +
> +div#stickyStatus .first {
> +       float: left;
> +}
> +div#stickyStatus .other {
> +       float: left;
> +       margin-left: 50px;
> +}
> \ No newline at end of file
>
> Propchange: incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css
> ------------------------------------------------------------------------------
>    svn:eol-style = native
>
> Propchange: incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css
> ------------------------------------------------------------------------------
>    svn:mime-type = text/css
>
> Added: incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-activitysize.js
> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-activitysize.js?rev=1309496&view=auto
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-activitysize.js (added)
> +++ incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-activitysize.js Wed Apr  4 17:29:11 2012
> @@ -0,0 +1,3 @@
> +$(document).ready(function activitySize() {
> +      $("#activity iframe").height($(window).height()-($("#activity h1").height()+25));
> +});
> \ No newline at end of file
>
> Propchange: incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-activitysize.js
> ------------------------------------------------------------------------------
>    svn:eol-style = native
>
> Propchange: incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-activitysize.js
> ------------------------------------------------------------------------------
>    svn:mime-type = text/javascript
>
> Added: incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-stickyscroll.js
> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-stickyscroll.js?rev=1309496&view=auto
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-stickyscroll.js (added)
> +++ incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-stickyscroll.js Wed Apr  4 17:29:11 2012
> @@ -0,0 +1,23 @@
> +       $(document).ready(function stickyStatus() {
> +       $(window).scroll(function onScroll() {
> +
> +    var docViewTop = $(window).scrollTop();
> +    var docViewBottom = docViewTop + $(window).height();
> +
> +    var elemTop = $("header").offset().top;
> +    var elemBottom = elemTop + $("header").height();
> +
> +       if (docViewTop > elemBottom) {
> +               $("#stickyactivity").attr("style", "position: fixed; top: 0;")
> +               $("#stickyStatus").attr("style", "position: fixed; top: 0; width: 620px;")
> +               $("#belowStatus").attr("style", "position: relative; top: 135px;")
> +               $("#whitebox").attr("style", "position: absolute; z-index: 10; background-color: white; height: 115px; width: 620px; border-bottom: 2px solid #A4A4A4;")
> +               }
> +       else {
> +               $("#stickyactivity").attr("style", "")
> +               $("#stickyStatus").attr("style", "position: relative; width: 620px;")
> +               $("#belowStatus").attr("style", "position: relative; top: 135px;")
> +               $("#whitebox").attr("style", "position: absolute; z-index: 10; background-color: white; height: 115px; width: 620px;")
> +               }
> +
> +       })});
> \ No newline at end of file
>
> Propchange: incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-stickyscroll.js
> ------------------------------------------------------------------------------
>    svn:eol-style = native
>
> Propchange: incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-stickyscroll.js
> ------------------------------------------------------------------------------
>    svn:mime-type = text/javascript
>
> Modified: incubator/bloodhound/trunk/doc/html-templates/milestone.html
> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/milestone.html?rev=1309496&r1=1309495&r2=1309496&view=diff
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/milestone.html (original)
> +++ incubator/bloodhound/trunk/doc/html-templates/milestone.html Wed Apr  4 17:29:11 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>Milestone 2 - Apache Bloodhound</title>
>  </head>
>  <body>
>        <div class="container">
> +       <header>
>                <div class="row">
>                        <div class="span6">
>                                <div id="logo" style="position:relative;">
> @@ -62,16 +64,48 @@
>                        </div>
>                <div class="span3" style="text-align:right;"></div>
>        </div>
> +       </header>
>                <div class="row">
> -               <div class="span8">
> -                       <h1 style="display:inline;">Milestone 2</h1>
> -                                       <br><br><div class="well">
> -                                               <strong>Due in 3 days</strong> (3 Feb, 2012) <a href="#">Change</a><div class="pull-right">24% completed</div>
> -                                                       <div class="progress progress-danger">
> -                                                               <div class="bar" style="width: 24%;"></div>
> -                                                       </div>
> -                                                       <a href="#">Complete (24)</a><a href="#" class="pull-right">Incomplete (76)</a><br/>
> -                                                       <p>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>
> +               <div class="span8" id="content">
> +                       <div id="stickyStatus">
> +                               <div id="whitebox"></div>
> +                               <div style="position: absolute; z-index: 20;">
> +                               <hgroup>
> +                                       <h1>Milestone 2</h1>
> +                                       <h6>Due in <time datetime="2012-04-27"><a href="#">6 days</a></time>, assigned to <a href="profile.html">Karl Krombacher</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>
> +                                       </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>
> +                               </div>
> +                       </div>
> +                            <div id="belowStatus">
> +                             <div class="well">
> +                                     <h3>Sit amet vestibulum</h3>
> +                                     <div>
> +                                       <p><i class="icon-tags"></i> <a href="#">lorum ipsum</a>, <a href="#">dolor</a>, <a href="#">header</a></p>
> +                                     </div>
> +                                                       <p>Vel fusce in aliquam egestas gravida vitae at blandit porta suscipit suspendisse sit sem id. Ipsum rutrum aenean. Id mollis cursus felis dictum elementum. Ut facilisi turpis dui ipsum vitae quis quis id. Fusce nisi posuere. Vivamus in mi. Vestibulum lacus lorem aliquam feugiat.</p>
> +                                                       <p>Sodales donec sem risus bibendum semper. Velit et mauris. Vestibulum sit quam mollis massa consectetuer nonummy mattis imperdiet. Ornare varius natoque. Tortor amet venenatis pede.</p>
> +                                                       <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 class="btn-toolbar">
>                                        <div class="btn-group offset1"  data-toggle="buttons-radio">
> @@ -83,7 +117,6 @@
>                                                <a class="btn" href="#">Components</a>
>                                        </div>
>                                </div>
> -                               <br>
>                        <table class="table table-condensed">
>                <thead>
>                        <tr>
> @@ -200,24 +233,20 @@
>                        <td style="text-align:right;">Med</td>
>                </tr>
>                </table>
> -                               <br>
> -               <!--
> -               # Components will be displayed in the place where currently My tickets are displayed, when selected via the button-bar.
> -
> -               <div class="well">
> -                       <h3 style="display:inline;">Components</h3>&nbsp;&nbsp;&nbsp;<a href="#">View all</a>
> -                       <p style="font-size:medium; line-height:150%"><a href="#">APIs</a>&nbsp;&nbsp;&nbsp;<a href="#">Branding</a>&nbsp;&nbsp;&nbsp;<a href="#">Website</a>&nbsp;&nbsp;&nbsp;<a href="#">Database</a>&nbsp;&nbsp;&nbsp;<a href="#">Interface</a></p>
> +
> +                               <!-- This is only here to force the footer further down! -->
> +                               <div style="height:150px;"></div>
> +                       <!-- Likely due to a poisition: style that I got wrong somewhere in the 'content' div -->
>                </div>
> -       -->
> -
>                </div>
>  <!-- Activity starts -->
> -               <div id="Activity" class="span4">
> +               <div id="activity" class="span4">
> +               <div id="stickyactivity">
>                        <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>
>        </div>
> -
> +       </div>
>  <!-- Footer -->
>        <div class="row">
>        <footer style="border-top: 1px solid #EEE; margin-top:20px;">
> @@ -229,6 +258,8 @@
>     <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-activitysize.js"></script>
> +    <script type="text/javascript" src="js/bloodhound-stickyscroll.js"></script>
>  </body>
>  </html>
>
>
> Modified: incubator/bloodhound/trunk/doc/html-templates/ticket.html
> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/ticket.html?rev=1309496&r1=1309495&r2=1309496&view=diff
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/ticket.html (original)
> +++ incubator/bloodhound/trunk/doc/html-templates/ticket.html Wed Apr  4 17:29:11 2012
> @@ -1,5 +1,6 @@
>  <!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>wiki-5476 - Apache Bloodhound</title>
> @@ -30,7 +31,7 @@
>                        </div>
>  <!-- Create button -->
>                        <div class="span4">
> -                               <button class="btn btn-primary" href="#">+ Ticket</button>
> +                               <button class="btn btn-primary" href="#">Create Ticket</button>
>                        </div>
>  <!-- Main navigation tabs -->
>                        <div class="span4">
> @@ -72,33 +73,33 @@
>                <div class="row">
>  <!-- Main element starts -->
>                <div class="span8" id="content">
> -                       <div id="stickystatus" style="position: relative; width: 620px;" >
> -                               <div id="whitebox" style="position: absolute; z-index: 10; background-color: white; height: 115px; width: 620px;" ></div>
> +                       <div id="stickyStatus">
> +                               <div id="whitebox"></div>
>                                <div style="position: absolute; z-index: 20;">
> -                                       <hgroup style="position: absolute; left: 60px;">
> +                                       <hgroup>
>                                                <h1>AP-5476</h1>
> -                                               <h6 style="margin-top: -5px;">Due in <time datetime="2012-04-27"><a href="#">2 days</a></time>, assigned to <a href="profile.html">Fred Feuerstein</a></h6>
> +                                               <h6>Due in <time datetime="2012-04-27"><a href="#">2 days</a></time>, assigned to <a href="profile.html">Fred Feuerstein</a></h6>
>                                        </hgroup>
>        <!-- Status Bar -->
> -                                       <div style="position: relative; top: 65px; left: 30px; text-align: center;" id="status bar" >
> -                                               <div style="background-color: #FEFFF0; height: 45px; width: 583px; position: absolute; top: -5px; left: -18px; z-index: -1;" ></div>
> -                                               <div id="priority" style="float: left;">
> +                                       <div id="statusBar" >
> +                                               <div id="statusBarBox"></div>
> +                                               <div id="priority" class="first">
>                                                        <p style="margin-bottom:-4px;">Priority</p>
>                                                        <p style="font-size:150%;"><a href="#">High</a></p>
>                                                </div>
> -                                               <div id="status" style="float: left; margin-left: 50px;">
> +                                               <div id="status" class="other">
>                                                        <p style="margin-bottom:-4px;">Status</p>
>                                                        <p style="font-size:150%;"><a href="#">Reviewed</a></p>
>                                                </div>
> -                                               <div id="type" style="float: left; margin-left: 50px;">
> +                                               <div id="type" class="other">
>                                                        <p style="margin-bottom:-4px;">Type</p>
>                                                        <p style="font-size:150%;"><a href="#">Defect</a></p>
>                                                </div>
> -                                               <div id="component" style="float: left; margin-left: 50px;">
> +                                               <div id="component" class="other">
>                                                        <p style="margin-bottom:-4px;">Components</p>
>                                                        <p style="font-size:150%;"><a href="#">Interface</a></p>
>                                                </div>
> -                                               <div id="Projects" style="float: left; margin-left: 50px;">
> +                                               <div id="Projects" class="other">
>                                                        <p style="margin-bottom:-4px;">Projects</p>
>                                                        <p style="font-size:150%;"><a href="#" style="color: grey;">+ Assign</a></p>
>                                                </div>
> @@ -106,7 +107,7 @@
>                                        </div>
>                                </div>
>  <!-- Description -->
> -                               <div id="afterstatus" style="position: relative; top: 135px;" >
> +                               <div id="belowStatus">
>                                <div id="description" class="well">
>                                        <h3>SQL report realm/id decoration</h3>
>                                        <div>
> @@ -173,7 +174,9 @@
>                                        </div>
>                                        <button class="btn" style="margin-top: 20px;"><i class="icon-comment"></i> Add comment</button>
>                                </div>
> -                               <div style="height:140px;"></div>
> +                               <!-- This is only here to force the footer further down! -->
> +                               <div style="height:150px;"></div>
> +                       <!-- Likely due to a poisition: style that I got wrong somewhere in the 'content' div -->
>                        </div>
>                        </div>
>  <!-- Activity starts -->
> @@ -195,37 +198,8 @@
>  <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">
> -     $(document).ready(function activitySizer() {
> -           $("#activity iframe").height($(window).height()-($("#activity h1").height()+25));
> -     });
> -</script>
> -<script type="text/javascript">
> -       $(document).ready(function stickyStatus() {
> -       $(window).scroll(function onScroll() {
> -
> -    var docViewTop = $(window).scrollTop();
> -    var docViewBottom = docViewTop + $(window).height();
> -
> -    var elemTop = $("header").offset().top;
> -    var elemBottom = elemTop + $("header").height();
> -
> -       if (docViewTop > elemBottom) {
> -               $("#stickyactivity").attr("style", "position: fixed; top: 0;")
> -               $("#stickystatus").attr("style", "position: fixed; top: 0; width: 620px;")
> -               $("#afterstatus").attr("style", "position: relative; top: 135px;")
> -               $("#whitebox").attr("style", "position: absolute; z-index: 10; background-color: white; height: 115px; width: 620px; border-bottom: 2px solid #A4A4A4;")
> -               }
> -       else {
> -               $("#stickyactivity").attr("style", "")
> -               $("#stickystatus").attr("style", "position: relative; width: 620px;")
> -               $("#afterstatus").attr("style", "position: relative; top: 135px;")
> -               $("#whitebox").attr("style", "position: absolute; z-index: 10; background-color: white; height: 115px; width: 620px;")
> -               }
> -
> -       })});
> -</script>
> -
> +<script type="text/javascript" src="js/bloodhound-activitysize.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=1309496&r1=1309495&r2=1309496&view=diff
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/version.html (original)
> +++ incubator/bloodhound/trunk/doc/html-templates/version.html Wed Apr  4 17:29:11 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>14.3 - 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 -->
> @@ -61,24 +63,55 @@
>                                </ul>
>                        </div>
>        </div>
> +       </header>
>                <div class="row">
> -               <div class="span8">
> -                       <h1 style="display:inline;">Version 14.3</h1>
> -                                       <br><br>
> -                                       <div class="well">
> -                                               <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="span8" id="content">
> +                       <div id="stickyStatus">
> +                               <div id="whitebox"></div>
> +                               <div style="position: absolute; z-index: 20;">
> +                                       <hgroup>
> +                                               <h1>14.3</h1>
> +                                               <h6>Due in <time datetime="2012-05-27"><a href="#">3 weeks</a></time>, assigned to <a href="profile.html">Werner Hoffer</a></h6>
> +                                       </hgroup>
> +                                       <div id="statusBar">
> +                                       <div id="statusBarBox"></div>
> +                                               <div style="width: 150px; margin-left: 40px;" class="first">
> +                                                       <p style="margin-bottom:-2px;">75% complete</p>
> +                                                       <div class="progress">
>                                                                <div class="bar" style="width: 75%;"></div>
>                                                        </div>
> -                                                       <a href="#">Complete (75)</a><a href="#" class="pull-right">Incomplete (25)</a>
> -                               <p>Note to maintainers
> +                                               </div>
> +                                       <div id="status" class="other">
> +                                               <p style="margin-bottom:-2px;">In progress</p>
> +                                               <p style="font-size:150%;"><a href="#">4</a></p>
> +                                       </div>
> +                                       <div id="type" class="other">
> +                                               <p style="margin-bottom:-2px;">Open</p>
> +                                               <p style="font-size:150%;"><a href="#">25</a></p>
> +                                       </div>
> +                                       <div id="type" class="other">
> +                                               <p style="margin-bottom:-2px;">Complete</p>
> +                                               <p style="font-size:150%;"><a href="#">75</a></p>
> +                                       </div>
> +                               </div>
> +                               </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>
> +                                       <p>Note to maintainers:</p>
>                                        <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>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 <strong>major</strong> defects here anyway, focus is now on <a href="#">0.15</a></li>
> +                                               <li>There should be only major defects here anyway, focus is now on 0.15</li>
>                                        </ul>
> -                               </p>
> -                               </div>
> +
> +                                       <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 class="btn-toolbar">
>                                <div class="btn-group offset1"  data-toggle="buttons-radio">
>                                        <a class="btn active" href="#">Milestones</a>
> @@ -108,7 +141,7 @@
>                                                <label style="font-size:14pt;">Summary</label>
>                                                <input type="text" class="span5">
>                                                <br /><br />
> -                                               <div class="row">
> +
>                                                        <div class="span2">
>                                                                <a href="#" style="font-size:14pt;">+ Attach files</a><br />Upload or link to files.
>                                                                <br /><br />
> @@ -119,36 +152,24 @@
>                                                                <br /><br />
>                                                                <a href="#" style="font-size:14pt;">+ Component</a><br />Upload or link to files.
>                                                        </div>
> -                                               </div>
> -                                               <br />
> -                                               <button class="btn btn-primary" style="font-size:14pt;">Create</button>&nbsp;&nbsp;&nbsp;<a href="#">Cancel</a>
> +
> +                                               <button class="btn btn-primary" style="margin-right: 15px;">Create</button><a href="#">Cancel</a>
>                                                </form>
> -
> -                                               </div>
> -                                               <div class="tab-pane" id="14.2">
> -                                                       <h3><a href="#">Version 14.2</a></h3>
> -                                                       <div class="progress progress-info">
> -                                                               <div class="bar" style="width: 40%;"></div>
> -                                                       </div>
>                                                </div>
>                                        </div>
>                                </div>
> -                               <br>
> -
> -               <!--
> -               # Components will be displayed in the place where currently Milestones are displayed, when selected via the button-bar.
> -
> -               <div class="well">
> -                       <h3 style="display:inline;">Components</h3>&nbsp;&nbsp;&nbsp;<a href="#">View all</a>
> -                       <p style="font-size:medium; line-height:150%"><a href="#">APIs</a>&nbsp;&nbsp;&nbsp;<a href="#">Branding</a>&nbsp;&nbsp;&nbsp;<a href="#">Website</a>&nbsp;&nbsp;&nbsp;<a href="#">Database</a>&nbsp;&nbsp;&nbsp;<a href="#">Interface</a></p>
> -                       </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 -->
> +               </div>
> +
>  <!-- Activity starts -->
> -                       <div id="Activity" class="span4">
> +                       <div id="activity" class="span4">
> +                               <div id="stickyactivity">
>                                <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>
>                </div>
>        </div>
>
> @@ -164,6 +185,8 @@
>     <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-activitysize.js"></script>
> +    <script type="text/javascript" src="js/bloodhound-stickyscroll.js"></script>
>  </body>
>  </html>
>
>
>