Author: jdreimann
Date: Fri Nov 9 18:05:58 2012
New Revision: 1407565
URL: http://svn.apache.org/viewvc?rev=1407565&view=rev
Log:
Further small steps towards #240 (responsive layout).
Refactored some code, improve local-nav and added TODO comments to show
outstanding work.
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/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=1407565&r1=1407564&r2=1407565&view=diff
==============================================================================
--- incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css
(original)
+++ incubator/bloodhound/trunk/doc/html-templates/css/bloodhound-custom.css Fri
Nov 9 18:05:58 2012
@@ -17,22 +17,41 @@
under the License.
*/
+body {
+ background-color: rgb(75%, 75%, 75%);
+}
+
+.container {
+ 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)
+}
+
/* @group Sticky Status */
#stickyStatus {
position: relative;
- top: 0px;
-
background-color: white;
z-index: 20;
- border-bottom: 1px solid black;
- box-shadow: 0px 5px 3px -3px #888;
+}
+
+.sticky {
+ position: fixed !important;
+ top: 0px;
+ border-bottom: 1px solid rgb(60%, 60%, 60%);
+ box-shadow: 0px 8px 8px -5px #888;
}
#belowStatus {
position: relative;
}
+.offsetSticky {
+ height: 130px;
+}
+
/* @end */
/* @group OOCSS */
@@ -77,10 +96,10 @@ ul.oocss h6 {
}
.local-nav {
+ display: inline-block;
list-style: none;
- border: 1px solid #888;
+ border: 1px solid rgb(70%, 70%, 70%);
border-radius: 5px;
- display: inline-block;
background-color: rgb(240, 240, 240);
margin-top: 10px;
margin-left: auto;
@@ -95,11 +114,13 @@ ul.oocss h6 {
.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: 2px 5px;
+ padding: 3px 7px;
+ border-right: 1px solid rgb(70%, 70%, 70%);
}
.local-nav li:hover {
@@ -107,21 +128,54 @@ ul.oocss h6 {
}
.comment {
- border-top: 1px solid #888;
+ border-top: 1px solid rgb(80%, 80%, 80%);
margin-bottom: 10px;
+ padding-top: 5px;
}
.comment-meta {
font-weight: 900;
}
+.add-comment textarea {
+ height: 100px;
+ border: 1px solid #eee;
+ color: lightgray;
+ display: block;
+}
+
+
+@media (max-width: 767px) {
+
+ body {
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+
+
+ .local-nav li {
+ padding: 8px 15px;
+ }
+}
+
@media (max-width: 480px) {
+
+ body {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+
h1 {
font-size: 30px;
margin-bottom: 0px;
line-height: 1;
}
+ .container {
+ border-left: 0px solid white;
+ border-right: 0px solid white;
+ }
+
#stickyStatus {
width: 100%;
}
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=1407565&r1=1407564&r2=1407565&view=diff
==============================================================================
--- incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-stickyscroll.js
(original)
+++ incubator/bloodhound/trunk/doc/html-templates/js/bloodhound-stickyscroll.js
Fri Nov 9 18:05:58 2012
@@ -25,16 +25,18 @@ $(document).ready(function stickyStatus(
var elemTop = $("header").offset().top;
var elemBottom = elemTop + $("header").height();
+
+ var stickyHeight = $("#stickyStatus").outerHeight();
if (docViewTop > elemBottom) {
// $("#stickyActivity").css({'position': 'fixed', 'top':
'0'});
- $("#stickyStatus").css({'position': 'fixed'});
- $("#whitebox").css({'border-bottom': '2px solid
#A4A4A4'});
+ $("#stickyStatus").addClass("sticky");
+ $("#stickyOffset").css("height", stickyHeight + "px");
}
else {
// $("#stickyActivity").css({'position': '', 'top': ''});
- $("#stickyStatus").css({'position': ''});
- $("#whitebox").css({'border-bottom': ''});
+ $("#stickyStatus").removeClass("sticky");
+ $("#stickyOffset").css("height", "0px");
}
});
});
Modified: incubator/bloodhound/trunk/doc/html-templates/ticket.html
URL:
http://svn.apache.org/viewvc/incubator/bloodhound/trunk/doc/html-templates/ticket.html?rev=1407565&r1=1407564&r2=1407565&view=diff
==============================================================================
--- incubator/bloodhound/trunk/doc/html-templates/ticket.html (original)
+++ incubator/bloodhound/trunk/doc/html-templates/ticket.html Fri Nov 9
18:05:58 2012
@@ -18,13 +18,13 @@
specific language governing permissions and limitations
under the License.
-->
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
-<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" />
-<link rel="stylesheet" type="text/css" href="css/bloodhound-custom.css" />
<html>
<head>
<title>wiki-5476 - Apache Bloodhound</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
+ <link rel="stylesheet" type="text/css"
href="css/bootstrap-responsive.css" />
+ <link rel="stylesheet" type="text/css" href="css/bloodhound-custom.css"
/>
</head>
<body>
<div class="container">
@@ -42,6 +42,7 @@
<button class="btn btn-primary" href="#"
style="margin-left: 20px;">Create Ticket</button>
</div>
<!-- Main navigation tabs -->
+ <!-- TODO: Fix navigation on all resolutions -->
<div class="span4">
<ul class="nav nav-tabs pull-right
hidden-phone" style="margin-bottom:0px; border-bottom: 0px;">
<li class="active"><a
href="dashboard.html">Tickets</a></li>
@@ -74,7 +75,7 @@
</ul>
</div>
</div>
- </header>
+ </header>
<!-- # Header ends
# Main body begins -->
@@ -83,24 +84,25 @@
<!-- Main element starts -->
<div class="span8" id="content">
<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>
+ <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>
+ <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>
+ </div>
+ </div>
</div>
<!-- Local navigation -->
- <div id="belowStatus">
- <div>
- <ul class="local-nav">
- <li><a href=""><i
class="icon-tasks"></i> <span class="hidden-phone">Description</span></a></li>
- <li><a href=""><i
class="icon-file"></i> <span class="hidden-phone">Attachments</span></a></li>
- <li><a href=""><i
class="icon-comment"></i> <span class="hidden-phone">Comments</span></a></li>
- <li><a href=""><i
class="icon-plus"></i> <span class="hidden-phone">Add comment</span></a></li>
- <li
class="hidden-desktop"><a href=""><i class="icon-user"></i> <span
class="hidden-phone">Activity</span></a></li>
- </ul>
- </div>
<!-- Status -->
- <div class="row">
+ <div id="belowStatus" class="row">
+ <div id="stickyOffset"></div>
<div class="span4">
<table class="span4
status-overview">
<tr>
@@ -131,90 +133,117 @@
</div>
</div>
<!-- Description -->
- <div id="description" class="well">
- <div>
+ <div id="description" class="row">
+ <div class="span8">
<p><i class="icon-tags"></i> <a
href="#">bloodhound</a>, <a href="#">design</a>, <a href="#">SQL</a></p>
</div>
- <p id="full_description">
- What you're reading now is the
description. While doing a GET operation on /, Trac issued an internal
error.<br>
- Request parameters:<br>
- <q>{} User agent: Mozilla/5.0
(Macintosh; U; Intel Mac OS X 10_6_6; ko-kr) AppleWebKit/533.19.4 (KHTML, like
Gecko) Version/5.0.3 Safari/533.19.4</q></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 class="span8">
+ <p id="full_description">
+ What you're reading now is the
description. While doing a GET operation on /, Trac issued an internal
error.<br>
+ Request parameters:<br>
+ <q>{} User agent: Mozilla/5.0
(Macintosh; U; Intel Mac OS X 10_6_6; ko-kr) AppleWebKit/533.19.4 (KHTML, like
Gecko) Version/5.0.3 Safari/533.19.4</q></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>
+
+<!-- TODO: Add attachments section -->
+
<!-- Comments -->
- <div id="comments">
- <h3>Comments</h3>
- <div id="comment1" class="row comment">
- <div class="comment-meta span1">
- <span>comment:1</span>
- <span>15 Jan</span>
- <span>Karl
Krombacher</span>
- </div>
- <div class="comment-content
span7">
- <p>Wow - It's too late!
I realized right after i typed above that the file I edited was the unzipped
file - NOT the file in the .egg! So I moved the 12.2 egg and reran easy_install
\-Z against trac12.2-stable and now I'm running Trac 0.12.3dev-r10609</p>
+ <!-- TODO: Fix comment-meta overlap with comments body -->
+ <div id="comments" class="row">
+ <div class="span8">
+ <h3>Comments</h3>
+ <div id="comment1" class="row">
+ <div class="comment
span8">
+ <div
class="row">
+ <div
class="span1 comment-meta">
+
<span>comment:1</span>
+
<span>15 Jan</span>
+
<span>Karl Krombacher</span>
+ </div>
+ <div
class="span7 comment-content">
+
<p>Wow - It's too late! I realized right after i typed above that the file I
edited was the unzipped file - NOT the file in the .egg! So I moved the 12.2
egg and reran easy_install \-Z against trac12.2-stable and now I'm running Trac
0.12.3dev-r10609</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="comment2" class="row">
+ <div class="comment
span8">
+ <div
class="row">
+ <div
class="span1 comment-meta">
+
<span>comment:2</span>
+
<span>18 Jan</span>
+
<span>Warren Worcester</span>
+ </div>
+ <div
class="span7 comment-content">
+
<p>Just tested this on the windows server 2008.
+
<ul>
+
<li>11.10 was installed.</li>
+
<li>Purchased/installed Jenkins</li>
+
<li>updated conf file to have ump and update server details</li>
+
<li>restarted uber</li>
+
<li>updated directly to 11.12</li>
+
<li>After the update, I can't get to the ui.</li>
+
</ul>
+
</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="comment3" class="row">
+ <div class="comment
span8">
+ <div
class="row">
+ <div
class="comment-meta span1">
+
<span>comment:3</span>
+
<span>Yesterday</span>
+
<span>Fred Feuerstein</span>
+ </div>
+ <div
class="comment-content span7">
+
<p>Wow - It's too late! I realized right after i typed above that the file I
edited was the unzipped file - NOT the file in the .egg! So I moved the 12.2
egg and reran easy_install \-Z against trac12.2-stable and now I'm running Trac
0.12.3dev-r10609</p>
+ <!-- TODO: Show more clearly that files are attached to
tickets but potentially displayed in tandem with a comment -->
+
<ul class="unstyled" id="attachment" style="position: relative;">
+
<li><a href="#"><i class="icon-file"></i>placekitten.jpg</a></li>
+
<li><a href="#"><i class="icon-file"></i>proposal.doc</a></li>
+
</ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="comment4" class="row">
+ <div class="comment
span8">
+ <div
class="row">
+ <div
class="comment-meta span1">
+
<span>comment:4</span>
+
<span>2 hours</span>
+
<span>Rudolf Rotnase</span>
+ </div>
+ <div
class="comment-content span7">
+
<p>Just tested this on the windows server 2008.
+
<ul>
+
<li>11.10 was installed.</li>
+
<li>Purchased/installed Jenkins</li>
+
<li>updated conf file to have ump and update server details</li>
+
<li>restarted uber</li>
+
<li>updated directly to 11.12</li>
+
<li>After the update, I can't get to the ui.</li>
+
</ul>
+
</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="add-comment"
class="row">
+ <div class="span8">
+ <h3
style="margin-top: 20px;">Add comment</h3>
+
<textarea></textarea>
+ <button
class="btn" style="margin-top: 2px;"><i class="icon-comment"></i> Add
comment</button>
+ </div>
</div>
</div>
- <div id="comment2" class="row comment">
- <div class="comment-meta span1">
- <span>comment:2</span>
- <span>18 Jan</span>
- <span>Warren
Worcester</span>
- </div>
- <div class="comment-content
span7">
- <p>Just tested this on
the windows server 2008.
- <ul>
-
<li>11.10 was installed.</li>
-
<li>Purchased/installed Jenkins</li>
-
<li>updated conf file to have ump and update server details</li>
-
<li>restarted uber</li>
-
<li>updated directly to 11.12</li>
-
<li>After the update, I can't get to the ui.</li>
- </ul>
- </p>
- </div>
- </div>
- <div id="comment3" class="row comment">
- <div class="comment-meta span1">
- <span>comment:3</span>
- <span>Yesterday</span>
- <span>Fred
Feuerstein</span>
- </div>
- <div class="comment-content
span7">
- <p>Wow - It's too late!
I realized right after i typed above that the file I edited was the unzipped
file - NOT the file in the .egg! So I moved the 12.2 egg and reran easy_install
\-Z against trac12.2-stable and now I'm running Trac 0.12.3dev-r10609</p>
- <ul class="unstyled"
id="attachment" style="position: relative;">
- <li><a
href="#"><i class="icon-file"></i>placekitten.jpg</a></li>
- <li><a
href="#"><i class="icon-file"></i>proposal.doc</a></li>
- </ul>
- </div>
- </div>
- <div id="comment4" class="row comment">
- <div class="comment-meta span1">
- <span>comment:4</span>
- <span>2 hours</span>
- <span>Rudolf
Rotnase</span>
- </div>
- <div class="comment-content
span7">
- <p>Just tested this on
the windows server 2008.
- <ul>
-
<li>11.10 was installed.</li>
-
<li>Purchased/installed Jenkins</li>
-
<li>updated conf file to have ump and update server details</li>
-
<li>restarted uber</li>
-
<li>updated directly to 11.12</li>
-
<li>After the update, I can't get to the ui.</li>
- </ul>
- </p>
- </div>
- </div>
- <div id="add-comment" class="row">
- <h3 style="margin-top:
20px;">Add comment</h3>
- <textarea style="height: 100px;
border: 1px solid #eee; color: lightgray; display: block;">-Empty comment box
here with 100% width-</textarea>
- <button class="btn"
style="margin-top: 2px;"><i class="icon-comment"></i> Add comment</button>
- </div>
- </div>
- </div>
+ </div>
</div>
<!-- Activity starts -->
+ <!-- TODO: Make this drop below in tablet sizes-->
<div id="activity" class="span4">
<div id="stickyActivity">
<h1>Activity</h1>
