incubator-bloodhound-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Joachim Dreimann <joachim.dreim...@wandisco.com>
Subject Status bar for Version and Milestone view
Date Wed, 04 Apr 2012 17:41:40 GMT
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,  <jdreimann@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>
>
>
>

Mime
View raw message