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 14:23:03 UTC
Ticket view scroll behaviour
With Gary's help yesterday and today I was able to figure out how to
provide the proper scroll behaviour on the ticket view page using
jquery.
Go on, have a play:
https://svn.apache.org/repos/asf/incubator/bloodhound/trunk/doc/html-templates/ticket.html
I've also fixed the <button>Create Ticket</a> problem in milestone.html.
- Joe
On 4 April 2012 13:17, <jd...@apache.org> wrote:
> Author: jdreimann
> Date: Wed Apr 4 12:17:55 2012
> New Revision: 1309355
>
> URL: http://svn.apache.org/viewvc?rev=1309355&view=rev
> Log:
> In ticket.thml: Added JS to fix posisition of activity pane and ticket status after scrolling past header. Also added JS to set the activity pane height to window height minus header. Finally, fixed <button> </a> error in milestone.html
>
> Modified:
> incubator/bloodhound/trunk/doc/html-templates/milestone.html
> incubator/bloodhound/trunk/doc/html-templates/ticket.html
>
> Modified: incubator/bloodhound/trunk/doc/html-templates/milestone.html
> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/milestone.html?rev=1309355&r1=1309354&r2=1309355&view=diff
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/milestone.html (original)
> +++ incubator/bloodhound/trunk/doc/html-templates/milestone.html Wed Apr 4 12:17:55 2012
> @@ -30,7 +30,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/ticket.html
> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/ticket.html?rev=1309355&r1=1309354&r2=1309355&view=diff
> ==============================================================================
> --- incubator/bloodhound/trunk/doc/html-templates/ticket.html (original)
> +++ incubator/bloodhound/trunk/doc/html-templates/ticket.html Wed Apr 4 12:17:55 2012
> @@ -72,39 +72,42 @@
> <div class="row">
> <!-- Main element starts -->
> <div class="span8" id="content">
> - <div style="position: relative;">
> - <hgroup style="display:inline; position: absolute; left: 60px;">
> - <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>
> - </hgroup>
> -<!-- Status Bar -->
> - <div style="position: absolute; 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;">
> - <p style="margin-bottom:-4px;">Priority</p>
> - <p style="font-size:150%;"><a href="#">High</a></p>
> + <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 style="position: absolute; z-index: 20;">
> + <hgroup style="position: absolute; left: 60px;">
> + <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>
> + </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;">
> + <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;">
> + <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;">
> + <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;">
> + <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;">
> + <p style="margin-bottom:-4px;">Projects</p>
> + <p style="font-size:150%;"><a href="#" style="color: grey;">+ Assign</a></p>
> + </div>
> </div>
> - <div id="status" style="float: left; margin-left: 50px;">
> - <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;">
> - <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;">
> - <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;">
> - <p style="margin-bottom:-4px;">Projects</p>
> - <p style="font-size:150%;"><a href="#" style="color: grey;">+ Assign</a></p>
> - </div>
> - </div>
> + </div>
> </div>
> -
> <!-- Description -->
> - <div id="description" style="position: relative; top: 125px;" class="well">
> + <div id="afterstatus" style="position: relative; top: 135px;" >
> + <div id="description" class="well">
> <h3>SQL report realm/id decoration</h3>
> <div>
> <p><i class="icon-tags"></i> <a href="#">bloodhound</a>, <a href="#">design</a>, <a href="#">SQL</a></p>
> @@ -116,7 +119,7 @@
> <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>
> <!-- Comments -->
> - <div id="comments" style="position: relative; top: 125px; left: 60px; width: 520px;">
> + <div id="comments" style="position: relative; top: 0px; left: 60px; width: 520px;" >
> <h3 style="margin-bottom: 10px;">Comments</h3>
> <div id="comment1" style="position: relative;">
> <hgroup style="position: relative;">
> @@ -172,16 +175,16 @@
> </div>
> <div style="height:140px;"></div>
> </div>
> + </div>
> <!-- Activity starts -->
> <div id="activity" class="span4">
> - <div style="position: fixed;">
> + <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: 480px; width: 100%;"></iframe>
> </div>
> </div>
> </div>
> <!-- Activity ends -->
> -
> <div class="row">
> <footer style="border-top: 1px solid #EEE; margin-top:20px;">
> <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>
> @@ -189,10 +192,40 @@
> </footer>
> </div>
> </div>
> - <br />
> <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>
> +
> </body>
> </html>
>
>
>
Re: Ticket view scroll behaviour
Posted by Gary <ga...@wandisco.com>.
Excellent - I notice that the YESTERDAY and 2 HOURS AGO are not quite as
covered as perhaps they should as you scroll past them.
There also seems to be something odd going on with the position of the
footer. In firefox 11 at least, there is a large gap beneath it when you
scroll all the way down. I'm assuming that the height of the activity
should allow space for the size of the footer.
Cheers,
Gary
On 04/04/2012 01:23 PM, Joachim Dreimann wrote:
> With Gary's help yesterday and today I was able to figure out how to
> provide the proper scroll behaviour on the ticket view page using
> jquery.
> Go on, have a play:
> https://svn.apache.org/repos/asf/incubator/bloodhound/trunk/doc/html-templates/ticket.html
>
> I've also fixed the<button>Create Ticket</a> problem in milestone.html.
>
> - Joe
>
> On 4 April 2012 13:17,<jd...@apache.org> wrote:
>> Author: jdreimann
>> Date: Wed Apr 4 12:17:55 2012
>> New Revision: 1309355
>>
>> URL: http://svn.apache.org/viewvc?rev=1309355&view=rev
>> Log:
>> In ticket.thml: Added JS to fix posisition of activity pane and ticket status after scrolling past header. Also added JS to set the activity pane height to window height minus header. Finally, fixed<button> </a> error in milestone.html
>>
>> Modified:
>> incubator/bloodhound/trunk/doc/html-templates/milestone.html
>> incubator/bloodhound/trunk/doc/html-templates/ticket.html
>>
>> Modified: incubator/bloodhound/trunk/doc/html-templates/milestone.html
>> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/milestone.html?rev=1309355&r1=1309354&r2=1309355&view=diff
>> ==============================================================================
>> --- incubator/bloodhound/trunk/doc/html-templates/milestone.html (original)
>> +++ incubator/bloodhound/trunk/doc/html-templates/milestone.html Wed Apr 4 12:17:55 2012
>> @@ -30,7 +30,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/ticket.html
>> URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/ticket.html?rev=1309355&r1=1309354&r2=1309355&view=diff
>> ==============================================================================
>> --- incubator/bloodhound/trunk/doc/html-templates/ticket.html (original)
>> +++ incubator/bloodhound/trunk/doc/html-templates/ticket.html Wed Apr 4 12:17:55 2012
>> @@ -72,39 +72,42 @@
>> <div class="row">
>> <!-- Main element starts -->
>> <div class="span8" id="content">
>> -<div style="position: relative;">
>> -<hgroup style="display:inline; position: absolute; left: 60px;">
>> -<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>
>> -</hgroup>
>> -<!-- Status Bar -->
>> -<div style="position: absolute; 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;">
>> -<p style="margin-bottom:-4px;">Priority</p>
>> -<p style="font-size:150%;"><a href="#">High</a></p>
>> +<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 style="position: absolute; z-index: 20;">
>> +<hgroup style="position: absolute; left: 60px;">
>> +<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>
>> +</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;">
>> +<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;">
>> +<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;">
>> +<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;">
>> +<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;">
>> +<p style="margin-bottom:-4px;">Projects</p>
>> +<p style="font-size:150%;"><a href="#" style="color: grey;">+ Assign</a></p>
>> +</div>
>> </div>
>> -<div id="status" style="float: left; margin-left: 50px;">
>> -<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;">
>> -<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;">
>> -<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;">
>> -<p style="margin-bottom:-4px;">Projects</p>
>> -<p style="font-size:150%;"><a href="#" style="color: grey;">+ Assign</a></p>
>> -</div>
>> -</div>
>> +</div>
>> </div>
>> -
>> <!-- Description -->
>> -<div id="description" style="position: relative; top: 125px;" class="well">
>> +<div id="afterstatus" style="position: relative; top: 135px;">
>> +<div id="description" class="well">
>> <h3>SQL report realm/id decoration</h3>
>> <div>
>> <p><i class="icon-tags"></i> <a href="#">bloodhound</a>,<a href="#">design</a>,<a href="#">SQL</a></p>
>> @@ -116,7 +119,7 @@
>> <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>
>> <!-- Comments -->
>> -<div id="comments" style="position: relative; top: 125px; left: 60px; width: 520px;">
>> +<div id="comments" style="position: relative; top: 0px; left: 60px; width: 520px;">
>> <h3 style="margin-bottom: 10px;">Comments</h3>
>> <div id="comment1" style="position: relative;">
>> <hgroup style="position: relative;">
>> @@ -172,16 +175,16 @@
>> </div>
>> <div style="height:140px;"></div>
>> </div>
>> +</div>
>> <!-- Activity starts -->
>> <div id="activity" class="span4">
>> -<div style="position: fixed;">
>> +<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: 480px; width: 100%;"></iframe>
>> </div>
>> </div>
>> </div>
>> <!-- Activity ends -->
>> -
>> <div class="row">
>> <footer style="border-top: 1px solid #EEE; margin-top:20px;">
>> <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>
>> @@ -189,10 +192,40 @@
>> </footer>
>> </div>
>> </div>
>> -<br />
>> <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>
>> +
>> </body>
>> </html>
>>
>>
>>