You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@bloodhound.apache.org by jd...@apache.org on 2012/11/19 16:48:13 UTC
svn commit: r1411257 - in /incubator/bloodhound/trunk/doc/html-templates:
css/bloodhound-custom.css js/bloodhound-stickyscroll.js
placeholders/activity.html placeholders/header.html ticket.html
Author: jdreimann
Date: Mon Nov 19 15:48:12 2012
New Revision: 1411257
URL: http://svn.apache.org/viewvc?rev=1411257&view=rev
Log:
Further responsive improvements (particularly the sticky status for mobile devices) and some visual improvements. Towards #240.
Modified:
incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css
incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-stickyscroll.js
incubator/bloodhound/trunk/doc/html-templates/placeholders/activity.html
incubator/bloodhound/trunk/doc/html-templates/placeholders/header.html
incubator/bloodhound/trunk/doc/html-templates/ticket.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=1411257&r1=1411256&r2=1411257&view=diff
==============================================================================
--- incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css (original)
+++ incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css Mon Nov 19 15:48:12 2012
@@ -18,34 +18,57 @@
*/
body {
- background-color: rgb(75%, 75%, 75%);
+ background-color: rgb(92%, 91%, 88%);
}
-.container {
+.container:first-child {
background-color: rgb(100%, 100%, 100%);
padding: 5px 20px;
- border-left: 1px solid rgb(40%, 40%, 40%);
- border-right: 1px solid rgb(40%, 40%, 40%);
- box-shadow: 0px 0px 10px 4px rgba(20%, 20%, 20%, 0.4)
+ border-left: 1px solid rgb(70%, 70%, 70%);
+ border-right: 1px solid rgb(70%, 70%, 70%);
+ border-bottom: 1px solid rgb(70%, 70%, 70%);
+ box-shadow: 0px 0px 10px 2px rgba(50%, 50%, 50%, 0.4);
+ border-bottom-left-radius: 7px;
+ border-bottom-right-radius: 7px;
}
/* @group Sticky Status */
-#stickyStatus {
+#stickyStatus,
+#mobileStickyStatus {
position: relative;
background-color: white;
z-index: 20;
}
-.sticky {
+/* The box-shadow overhanging to the left and right are hacks only.
+ We should look for a better solution for production code. */
+#stickyStatus.sticky,
+#mobileStickyStatus.sticky {
position: fixed !important;
top: 0px;
- border-bottom: 1px solid rgb(60%, 60%, 60%);
- box-shadow: 0px 8px 8px -5px #888;
+ opacity: 1;
+ background-color: rgb(93%, 93%, 93%);
+ border-bottom: 1px solid rgb(75%, 75%, 75%);
+ box-shadow: 0px 6px 5px -4px rgba(50%, 50%, 50%, 0.5),
+ -20px 0px 0px rgb(93%, 93%, 93%),
+ 20px 0px 0px rgb(93%, 93%, 93%);
+ -webkit-transition: all 0.3s ease-out;
+ -moz-transition: all 0.3s ease-out;
+ -o-transition: all 0.3s ease-out;
+ -ms-transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out;
+}
+
+#mobileStickyStatus {
+ opacity: 0;
+ padding: 7px;
+ padding-right: 50px;
}
#belowStatus {
position: relative;
+ margin-top: 35px;
}
.offsetSticky {
@@ -95,36 +118,21 @@ ul.oocss h6 {
text-align: right;
}
+#stickyStatus h2,
+#stickyStatus ul {
+ margin-bottom: 3px;
+}
+
+#stickyStatus h2 {
+ line-height: 30px;
+}
+
.local-nav {
- display: inline-block;
- list-style: none;
- border: 1px solid rgb(70%, 70%, 70%);
- border-radius: 5px;
- background-color: rgb(240, 240, 240);
- margin-top: 10px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.local-nav:first-child {
- border-top-left-radius: 5px;
- border-bottom-left-radius: 5px;
-}
-
-.local-nav:last-child {
- border-top-right-radius: 5px;
- border-bottom-right-radius: 5px;
- border-right: 0px solid black;
-}
-
-.local-nav li {
- display: inline-block;
- padding: 3px 7px;
- border-right: 1px solid rgb(70%, 70%, 70%);
+ margin-left: 25px;
}
-.local-nav li:hover {
- background-color: rgb(225, 225, 225);
+.ownership {
+ padding-left: 25px;
}
.comment {
@@ -155,9 +163,17 @@ ul.oocss h6 {
display: block;
}
+footer {
+ margin: 20px 0px;
+ color: #565656;
+}
+
+@media (min-width: 768px) {
+
+}
@media (min-width: 979px) and (max-width: 1199px) {
- .main-nav {
+ .main-nav ul {
background-color: red;
}
}
@@ -170,11 +186,6 @@ ul.oocss h6 {
padding-right: 8px;
}
-
- .local-nav li {
- padding: 8px 15px;
- }
-
.comment-meta {
margin-bottom: 5px;
}
@@ -183,6 +194,18 @@ ul.oocss h6 {
.comment-meta .date {
text-align: right;
}
+
+ .sticky {
+ width: 100%;
+ position: relative;
+ left: 0px;
+ padding-left: 29px;
+ }
+
+ #belowStatus {
+ margin-top: 5px;
+ }
+
}
@media (max-width: 480px) {
@@ -198,23 +221,23 @@ ul.oocss h6 {
line-height: 1;
}
- .container {
+ .container:first-child {
border-left: 0px solid white;
border-right: 0px solid white;
padding: 0px;
}
- header, #belowStatus, #activity, #stickyStatus, #footer-container {
+ header, #belowStatus, #activity,
+ #stickyStatus, #footer-container {
padding-left: 7px;
padding-right: 7px;
}
- #stickyStatus {
- width: 100%;
+ .local-nav {
+ margin-left: 15px;
}
- .local-nav {
- margin-top: 4px;
- margin-bottom: 3px;
+ .ownership {
+ padding-left: 15px;
}
}
\ No newline at end of file
Modified: 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=1411257&r1=1411256&r2=1411257&view=diff
==============================================================================
--- incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-stickyscroll.js (original)
+++ incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-stickyscroll.js Mon Nov 19 15:48:12 2012
@@ -1,42 +1,67 @@
/*
- Licensed to the Apache Software Foundation (ASF) under one
- or more contributor license agreements. See the NOTICE file
- distributed with this work for additional information
- regarding copyright ownership. The ASF licenses this file
- to you under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance
- with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing,
- software distributed under the License is distributed on an
- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- KIND, either express or implied. See the License for the
- specific language governing permissions and limitations
- under the License.
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied. See the License for the
+ specific language governing permissions and limitations
+ under the License.
*/
$(document).ready(function stickyStatus() {
+
+
$(window).scroll(function onScroll() {
- var docViewTop = $(window).scrollTop();
- var docViewBottom = docViewTop + $(window).height();
+ var windowWidth = $(window).width();
+
+ var docViewTop = $(window).scrollTop();
+ var docViewBottom = docViewTop + $(window).height();
+
+ var headerTop = $("header").offset().top;
+ var headerBottom = headerTop + $("header").height();
- var elemTop = $("header").offset().top;
- var elemBottom = elemTop + $("header").height();
+ var statusTop = $("#stickyStatus").offset().top;
+ var statusBottom = statusTop + $("#stickyStatus").height();
- var stickyHeight = $("#stickyStatus").outerHeight();
-
- if (docViewTop > elemBottom) {
-// $("#stickyActivity").css({'position': 'fixed', 'top': '0'});
- $("#stickyStatus").addClass("sticky");
- $("#stickyOffset").css("height", stickyHeight + "px");
- }
+ var desktopStickyHeight = $("#stickyStatus").outerHeight();
+
+ var mobileStickyHeight = $("#mobileStickyStatus").outerHeight();
+
+ if(windowWidth >= 768) {
+ if (docViewTop > headerBottom) {
+ $("#stickyStatus").addClass("sticky");
+ $(".stickyOffset").css("height", desktopStickyHeight + "px");
+ console.log("I'm sticky");
+ }
+ else {
+ $("#stickyStatus").removeClass("sticky");
+ $(".stickyOffset").css("height", "0px");
+ }
+ }
else {
-// $("#stickyActivity").css({'position': '', 'top': ''});
- $("#stickyStatus").removeClass("sticky");
- $("#stickyOffset").css("height", "0px");
+ if (docViewTop > statusBottom) {
+ $("#mobileStickyStatus").addClass("sticky");
+ $(".stickyOffset").css("height", mobileStickyHeight + "px");
+
+ console.log("Mobile sticky");
}
+
+ else {
+ $("#mobileStickyStatus").removeClass("sticky");
+ $(".stickyOffset").css("height", "0px");
+ console.log("Mobile unsticky");
+ };
+
+ };
});
});
Modified: incubator/bloodhound/trunk/doc/html-templates/placeholders/activity.html
URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/placeholders/activity.html?rev=1411257&r1=1411256&r2=1411257&view=diff
==============================================================================
--- incubator/bloodhound/trunk/doc/html-templates/placeholders/activity.html (original)
+++ incubator/bloodhound/trunk/doc/html-templates/placeholders/activity.html Mon Nov 19 15:48:12 2012
@@ -16,7 +16,7 @@
specific language governing permissions and limitations
under the License.
-->
-
+<div class="stickyOffset"></div>
<table class="table">
<thead>
<tr><th>Today</th></tr>
Modified: incubator/bloodhound/trunk/doc/html-templates/placeholders/header.html
URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/placeholders/header.html?rev=1411257&r1=1411256&r2=1411257&view=diff
==============================================================================
--- incubator/bloodhound/trunk/doc/html-templates/placeholders/header.html (original)
+++ incubator/bloodhound/trunk/doc/html-templates/placeholders/header.html Mon Nov 19 15:48:12 2012
@@ -33,7 +33,7 @@
</div>
-<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>
+<footer class="span12">
+ <div>Powered by <a href="#">Bloodhound</a>. Standing on the shoulders of <a href="#">Trac 0.13</a>.</div>
</div>
</footer>
Modified: incubator/bloodhound/trunk/doc/html-templates/ticket.html
URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/ticket.html?rev=1411257&r1=1411256&r2=1411257&view=diff
==============================================================================
--- incubator/bloodhound/trunk/doc/html-templates/ticket.html (original)
+++ incubator/bloodhound/trunk/doc/html-templates/ticket.html Mon Nov 19 15:48:12 2012
@@ -51,7 +51,7 @@
<li><a href="wiki.html">Wiki</a></li>
<li><a href="source.html">Source</a></li>
<li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">Apps<b class="caret"></b></a>
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">More<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">SuperAdmin</a></li>
<li><a href="#">Tag Cloud</a></li>
@@ -71,7 +71,7 @@
<li class="hidden-phone"><a href="product.html">MultiSite</a> <span class="divider">/</span></li>
<li class="hidden-phone"><a href="version.html">14.3</a> <span class="divider">/</span></li>
<li><a href="milestone.html">Milestone 2</a> <span class="divider">/</span></li>
- <li class="active"><a href="#">AP-5476</a></li>
+ <li class="active">AP-5476</li>
<li class="pull-right hidden-phone"><a href="#">Custom Query</a><a href="#" style="margin-left:15px;">Reports</a></li>
<li class="pull-right visible-phone">≡ Nav</li>
</ul>
@@ -82,29 +82,39 @@
<!-- # Header ends
# Main body begins -->
+ <!-- Local navigation -->
<div class="row">
-<!-- Main element starts -->
- <div class="span8" id="content">
+ <div id="stickyStatus" class="span12">
<div class="row">
- <div id="stickyStatus" class="span8">
- <h1>☆ SQL report realm/id decoration</h1>
- <span><a href="">Ticket 25</a> - Due in <time datetime="2012-04-27"><a href="#">2 days</a></time>, assigned to <a href="profile.html">Fred Feuerstein</a></span>
+ <div class="span8">
+ <h2>☆ SQL report realm/id decoration</h2>
+ <span class="ownership"><a href="">Ticket 25</a> - Due in <time datetime="2012-04-27"><a href="#">2 days</a></time>, assigned to <a href="profile.html">Fred Feuerstein</a></span>
<div>
- <ul class="local-nav">
- <li><a href="#description"><i class="icon-tasks"></i> <span class="hidden-phone">Description</span></a></li>
- <li><a href="#attachments"><i class="icon-file"></i> <span class="hidden-phone hidden-tablet">Attachments</span></a></li>
- <li><a href="#comments"><i class="icon-comment"></i> <span class="hidden-phone">Comments</span></a></li>
- <li><a href="#newComment"><i class="icon-plus"></i> <span class="hidden-phone hidden-tablet">Add comment</span></a></li>
- <li class="hidden-desktop"><a href="#activity"><i class="icon-user"></i> <span class="hidden-phone">Activity</span></a></li>
- <li><a href="#edit"><i class="icon-edit"></i> <span class="hidden-phone">Edit</span></a></li>
+ <ul class="btn-group local-nav" style="display: inline-block;">
+ <li class="btn"><a href="#description"><i class="icon-tasks"></i> <span class="hidden-phone">Description</span></a></li>
+ <li class="btn"><a href="#attachments"><i class="icon-file"></i> <span class="hidden-phone hidden-tablet">Attachments</span></a></li>
+ <li class="btn"><a href="#comments"><i class="icon-comment"></i> <span class="hidden-phone">Comments</span></a></li>
+ <li class="btn"><a href="#newComment"><i class="icon-plus"></i> <span class="hidden-phone hidden-tablet">Add comment</span></a></li>
+ <li class="btn hidden-tablet hidden-desktop"><a href="#activity"><i class="icon-user"></i> <span class="hidden-phone">Activity</span></a></li>
+ <li class="btn"><a href="#edit"><i class="icon-edit"></i> <span class="hidden-phone">Edit</span></a></li>
</ul>
</div>
</div>
+ <div class="span4 hidden-phone">
+ <h2>Activity</h2>
+ </div>
</div>
-<!-- Local navigation -->
+ </div>
+ <div id="mobileStickyStatus" class="visible-phone">
+ <a href="" style="margin-left: 10px;">Top</a><a href="" style="margin-left: 25%;">Ticket 25</a><span class="pull-right" style="margin-right: 20px;">≡ Nav</span>
+ </div>
+ </div>
+ <div class="row">
+<!-- Main element starts -->
+ <div class="span8" id="content">
<!-- Status -->
<div id="belowStatus">
- <div id="stickyOffset"></div>
+ <div class="stickyOffset"></div>
<div class="row">
<div class="span4">
<table class="span4 status-overview">
@@ -249,16 +259,20 @@
<!-- Activity starts -->
<!-- TODO: Make this drop below in tablet sizes-->
<div id="activity" class="span4">
- <div id="stickyActivity">
- <h1>Activity</h1>
+ <div class="visible-phone">
+ <h2>Activity</h2>
</div>
<div id="activity-container"></div>
</div>
</div>
+ </div>
<!-- Footer -->
+ </div>
+ <div class="container">
<div class="row" id="footer-container"></div>
-
</div>
+
+
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="js/bootstrap-button.js"></script>