brooklyn-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From henev...@apache.org
Subject [01/18] incubator-brooklyn git commit: misc visual docs tidy up
Date Wed, 14 Jan 2015 10:32:09 GMT
Repository: incubator-brooklyn
Updated Branches:
  refs/heads/master 895fb9acc -> 97db77428


misc visual docs tidy up

fonts, spacing, tooltip colours and positioning


Project: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/commit/74618fbe
Tree: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/tree/74618fbe
Diff: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/diff/74618fbe

Branch: refs/heads/master
Commit: 74618fbe619f0703e7775a271435c209cd7fb0c3
Parents: a5d99ad
Author: Alex Heneveld <alex.heneveld@cloudsoftcorp.com>
Authored: Tue Jan 13 14:19:29 2015 +0000
Committer: Alex Heneveld <alex.heneveld@cloudsoftcorp.com>
Committed: Tue Jan 13 15:36:30 2015 +0000

----------------------------------------------------------------------
 docs/_includes/base-scss.scss      |   2 +
 docs/_includes/footer.html         |   6 +-
 docs/_includes/list-children.html  |   6 +-
 docs/_includes/sidemenu.html       |  45 +++++-----
 docs/_includes/topmenu.html        |  12 +--
 docs/_layouts/base.html            |   2 +-
 docs/_layouts/website-landing.html |   9 +-
 docs/style/css/base.scss           | 141 +++++++++++++++++++++++++-------
 8 files changed, 157 insertions(+), 66 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/74618fbe/docs/_includes/base-scss.scss
----------------------------------------------------------------------
diff --git a/docs/_includes/base-scss.scss b/docs/_includes/base-scss.scss
index 85ab671..f6d850f 100644
--- a/docs/_includes/base-scss.scss
+++ b/docs/_includes/base-scss.scss
@@ -1,4 +1,6 @@
 
+$fonts: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
 $text_color: #393939;
 
 /* this green is approx what is in the logo (taken from image picker) */

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/74618fbe/docs/_includes/footer.html
----------------------------------------------------------------------
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index f9121cf..a821b5e 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -10,8 +10,10 @@
             </div>
             <div class="col-md-2">
                 <a class="btn btn-sm btn-default" href="https://github.com/apache/incubator-brooklyn/edit/master/docs/{{
page.path }}">Edit This Page</a>
-                <br />
-                <a href="{{ site.url_root }}{{ site.path.website }}/community/how-to-contribute-docs.html">help
with editing</a>
+                <a href="{{ site.url_root }}{{ site.path.website }}/community/how-to-contribute-docs.html"
+                    data-toggle="tooltip" data-placement="top" title="How to Edit Documentation"
data-delay="400"/>
+                  <span class="octicon octicon-question octicon-footer"></span>
+                </a>
             </div>
         </div>
     </div>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/74618fbe/docs/_includes/list-children.html
----------------------------------------------------------------------
diff --git a/docs/_includes/list-children.html b/docs/_includes/list-children.html
index 68f8b5c..0c327f3 100644
--- a/docs/_includes/list-children.html
+++ b/docs/_includes/list-children.html
@@ -2,6 +2,8 @@
 TODO style this much better
 {% endcomment %}
 
+<div class="list-children"><ul>
 {% for item in page.menu %}
-* [{{ item.title }}]({{ item.url }})
-{% endfor %}
\ No newline at end of file
+<li> <a href="{{ item.url }}">{{ item.title }}</a> </li>
+{% endfor %}
+</ul></div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/74618fbe/docs/_includes/sidemenu.html
----------------------------------------------------------------------
diff --git a/docs/_includes/sidemenu.html b/docs/_includes/sidemenu.html
index 354fe78..8947b24 100644
--- a/docs/_includes/sidemenu.html
+++ b/docs/_includes/sidemenu.html
@@ -69,10 +69,13 @@ $(sidemenu_x_sizer);
 $(window).resize(sidemenu_x_sizer);
 
 {% comment %} 
-also ensure the y-height of the screen is big enough, else revert to non-floating menu
+also ensure the screen is big enough, else revert to non-floating menu:
+check y-height, and check widths (in case it was moved to after the other column)
 {% endcomment %} 
 sidemenu_y_nonfloater=function(){
-  if ($('#side-menu').outerHeight(true) + $('#header').outerHeight(true) + $('#footer').outerHeight(true)
> window.innerHeight) {
+  console.log( $('#side-menu') );
+  if ($('#side-menu').outerHeight(true) + $('#header').outerHeight(true) + $('#footer').outerHeight(true)
> window.innerHeight ||
+      $('#side-menu').width() >= $('#content_container').width()/2) {
     $('#side-menu').css('position', 'inherit');
   } else {
     // restore if screen has grown
@@ -82,8 +85,10 @@ sidemenu_y_nonfloater=function(){
 $(sidemenu_y_nonfloater);
 $(window).resize(sidemenu_y_nonfloater);
 
+{% comment %} 
+auto-advance "sections" in menu on scroll
+{% endcomment %} 
 
-// Cache selectors
 var sideMenu = $("#side-menu"),
     sideItems = sideMenu.find("a"),
     // Anchors corresponding to menu items
@@ -101,17 +106,8 @@ var highlight_section = function(data) {
    var highlight_section_new_bottom = highlight_section_new_top + $(window).height();
    var scroll_advancing = (highlight_section_new_top > highlight_section_last_top);
 
-   // if initial, look if there was a link supplied
-
-   // if scrolling advance, pick up a section when title is fully visible
-   
-   // if scrolling back, pick up a section as soon as the title is visible,
-   // of if the next title is below the halfway point
-   
-   // when scrolling up
-   // Get id of all scroll items above the current position
    var last_item = null, active_item = $("#side-menu a.section#active");
-   var cur = scrollItems.map(function(itemI){
+   var displayable_items = scrollItems.map(function(itemI){
      item = $(scrollItems[itemI]);
      if (item && item.length) {
        if (scroll_advancing) {
@@ -132,7 +128,7 @@ var highlight_section = function(data) {
            return item;
          // or if title is before the 2/3 point
          // (not sure about this, probably want also to have 
-         // "AND the id.top is <= current_active_it.top" so we don't jump FORWARD a section
+         // "AND the id.top is <= displayable_itemsrent_active_it.top" so we don't jump
FORWARD a section
          // when scrolling BACK, with lots of tiny sections) 
          if ((item.offset().top < highlight_section_new_top + 2*$(window).height()/3)
              && (!active_item || !active_item.offset() || active_item.offset().top
>= item.offset().top))
@@ -142,16 +138,19 @@ var highlight_section = function(data) {
        last_item = item;
      }
    });
-   // Get the id of the current element
-   cur = cur[cur.length-1];
-   var id = cur && cur.length ? cur[0].id : "";
-   // Set/remove active class
-   new_active = $("#side-menu a.section").filter("[section-target='#"+id+"']");
-   if (new_active.hasClass("active")) {
-     // nothing needed
-   } else {
+   if (!displayable_items.length) {
      $("#side-menu a.section").removeClass("active");
-     $("#side-menu a.section").filter("[section-target='#"+id+"']").addClass("active");
+   } else {
+     displayable_items = displayable_items[displayable_items.length-1];
+     var id = displayable_items && displayable_items.length ? displayable_items[0].id
: "";
+   // Set/remove active class
+     new_active = $("#side-menu a.section").filter("[section-target='#"+id+"']");
+     if (new_active.hasClass("active")) {
+       // nothing needed
+     } else {
+       $("#side-menu a.section").removeClass("active");
+       $("#side-menu a.section").filter("[section-target='#"+id+"']").addClass("active");
+     }
    }
    
    highlight_section_last_top = highlight_section_new_top;

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/74618fbe/docs/_includes/topmenu.html
----------------------------------------------------------------------
diff --git a/docs/_includes/topmenu.html b/docs/_includes/topmenu.html
index b9d8e6f..3bc7db6 100644
--- a/docs/_includes/topmenu.html
+++ b/docs/_includes/topmenu.html
@@ -1,8 +1,10 @@
 <nav class="navbar navbar-default navbar-fixed-top" id="header" role="navigation">
     <div class="container-and-sidebars">
 
-        <div class="container-sidebar-left">
-          <img src="{{ site.path.style }}/img/feather.png" alt="[feather]" width="80"
class="flip navbar-feather">
+        <div class="container-sidebar-left feather{% if page.landing %} landing{% endif
%}">
+          <a href="http://www.apache.org/">
+            <img src="{{ site.path.style }}/img/feather.png" alt="[Apache]" width="80"
class="flip navbar-feather">
+          </a>
         </div>
 
         <div class="container container-between-sidebars top-menu">
@@ -57,11 +59,11 @@
         <div class="container-sidebar-right">
           <div class="navbar-sidebar-right-icons">
             <a href="https://github.com/apache/incubator-brooklyn" class="navbar-icon
navbar-icon-shift icon-github"
-              data-toggle="tooltip" data-placement="bottom" title="GitHub: apache/incubator-brooklyn"
data-delay="400"/>
+              data-toggle="tooltip" data-placement="bottom" title="GitHub: apache/incubator-brooklyn"/>
             <a href="https://twitter.com/#!/search?q=brooklyncentral" class="navbar-icon
navbar-icon-shift icon-twitter"
-              data-toggle="tooltip" data-placement="bottom" title="Twitter: @brooklyncentral"
data-delay="400"/>
+              data-toggle="tooltip" data-placement="bottom" title="Twitter: @brooklyncentral"/>
             <a href="http://webchat.freenode.net/?channels=brooklyncentral" class="navbar-icon
icon-irc"
-              data-toggle="tooltip" data-placement="bottom" title="IRC: freenode #brooklyncentral"
data-delay="400"/>
+              data-toggle="tooltip" data-placement="bottom" title="IRC: freenode #brooklyncentral"/>
             <!-- extra a element seems needed as landing page seems to copy the last element
here (!?) -->
             <a href="." style="width: 0px; height: 0px;"></a>
          </div>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/74618fbe/docs/_layouts/base.html
----------------------------------------------------------------------
diff --git a/docs/_layouts/base.html b/docs/_layouts/base.html
index 1741ef0..6f92efa 100644
--- a/docs/_layouts/base.html
+++ b/docs/_layouts/base.html
@@ -33,7 +33,7 @@ under the License.
     $(window).load(fix_padding_function);
     
     $(function () {
-        $('[data-toggle="tooltip"]').tooltip()
+        $('[data-toggle="tooltip"]').tooltip({ delay: { show: 600, hide: 100 }})
     });
 </script>
 

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/74618fbe/docs/_layouts/website-landing.html
----------------------------------------------------------------------
diff --git a/docs/_layouts/website-landing.html b/docs/_layouts/website-landing.html
index a3ae36a..7c1bb8b 100644
--- a/docs/_layouts/website-landing.html
+++ b/docs/_layouts/website-landing.html
@@ -32,14 +32,17 @@ layout: website-base
                 infrastructure, communications, and decision making process have stabilized
in a manner consistent with other
                 successful ASF projects. While incubation status is not necessarily a reflection
of the completeness or stability of
                 the code, it does indicate that the project has yet to be fully endorsed
by the ASF.
+                <p>
                 Apache Brooklyn is distributed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache
License v2.0</a>.
             </div>
             <div class="col-md-3">
                 <p><img src="https://incubator.apache.org/images/egg-logo.png" alt="Apache
Incubator" /></p>
                 <p>
-                    <a class="btn btn-sm btn-default" href="https://github.com/apache/incubator-brooklyn/edit/master/docs/{{
page.path }}">Edit This Page</a>
-                    <br />
-                    <a href="https://brooklyn.incubator.apache.org/community/how-to-contribute-docs.html">help
with editing</a>
+                <a class="btn btn-sm btn-default" href="https://github.com/apache/incubator-brooklyn/edit/master/docs/{{
page.path }}">Edit This Page</a>
+                <a href="{{ site.url_root }}{{ site.path.website }}/community/how-to-contribute-docs.html"
+                    data-toggle="tooltip" data-placement="top" title="How to Edit Documentation"
data-delay="400"/>
+                  <span class="octicon octicon-question octicon-footer"></span>
+                </a>
                 </p>
             </div>
         </div>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/74618fbe/docs/style/css/base.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/base.scss b/docs/style/css/base.scss
index 6448e0f..8643f26 100644
--- a/docs/style/css/base.scss
+++ b/docs/style/css/base.scss
@@ -7,14 +7,14 @@
    ----------------------------------------------------------------------- */
 body {
     margin: 0px; 
-    padding: 10px 0px 20px 0px; 
-    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    padding: 60px 0px 20px 0px; 
+    font-family: $fonts;
     font-weight: 300;
     font-size: 17px; 
     background-color: #ffffff; 
     color: $text_color; 
 }
-h1, h2, h3, h4, h5, h6 {}
+h1, h2, h3, h4, h5, h6 { font-family: Avenir, $fonts; }
 input, select, textarea {}
 p, li, label, td, th,input, select, textarea {}
 p, input, label, li {}
@@ -34,7 +34,57 @@ a[id]:empty, a[name]:empty {
 .dropdown-menu > li > a {
   font-weight: 300;
 }
+.btn-default {
+    text-shadow: none;
+    color: #666;
+    font-weight: 300;
+}
+
+/* GENERAL UTILS
+   ----------------------------------------------------------------------- */
+   
+@mixin flip() {
+  transform: scaleX(-1);
+  filter: FlipH;
+  -webkit-transform: scaleX(-1);
+  -moz-transform: scaleX(-1);
+  -o-transform: scaleX(-1);
+  -ms-filter: "FlipH";
+}
 
+.flip {
+  @include flip;
+}
+
+/* CUSTOM HEADINGS 
+   ----------------------------------------------------------------------- */
+
+#content_container h1 {
+  max-width: 95%;
+  font-variant: normal;
+  margin-top: 48px;
+  padding-bottom: 6px;
+  margin-bottom: 24px;
+  border-bottom: 1px dotted #aaa;
+  font-weight: 300;
+  font-size: 36px;
+  text-transform: uppercase;
+}
+
+/* TOOLTIPS
+   ----------------------------------------------------------------------- */
+   
+.tooltip .tooltip-inner {
+    color: $text_color;
+    background-color: #ccc;
+    font-weight: 500;
+}
+.tooltip.top .tooltip-arrow { 
+    border-top-color: #ccc;
+}
+.tooltip.bottom .tooltip-arrow { 
+    border-bottom-color: #ccc;
+}
 
 /* WEBSITE MENUS
    ----------------------------------------------------------------------- */
@@ -64,32 +114,40 @@ a[id]:empty, a[name]:empty {
     @include icon('irc');
 }
 
+.navbar .tooltip .tooltip-inner {
+    position: relative;
+    right: 40%;
+    // include calc for those browsers which support it
+    right: calc(50% - 25px);
+    max-width: 300px;
+}
+
 /* special container with sidebar where if sidebar is squeezed
    (under "responsiveness") the text keeps at least its "auto" size,
    squashing the main container instead */
 .container-and-sidebars {
-  width: 100%;
-  display: flex;
+    width: 100%;
+    display: flex;
 }
 .container-between-sidebars {
-  flex: 10 1 100%;
-  display: inline-block;
-  width: auto;
-  margin-left: auto;
-  margin-right: auto;
+    flex: 10 1 100%;
+    display: inline-block;
+    width: auto;
+    margin-left: auto;
+    margin-right: auto;
 }
 .container-sidebar {
-  flex: 0 0 auto;
+    flex: 0 0 auto;
 }
 .container-sidebar-right { 
-  @extend .container-sidebar; 
-  text-align: left;
-  padding-right: 10px;
+    @extend .container-sidebar; 
+    text-align: left;
+    padding-right: 10px;
 } 
 .container-sidebar-left {
-  @extend .container-sidebar;
-  text-align: right;
-  padding-left: 10px;
+    @extend .container-sidebar;
+    text-align: right;
+    padding-left: 10px;
 }
 
 @media (min-width: 768px) {
@@ -152,6 +210,7 @@ a[id]:empty, a[name]:empty {
 
 /* side menu */
 .side-menu {
+  font-family: Avenir, $fonts;
   font-size: 14px;
   font-weight: 400;
   position: fixed;
@@ -171,7 +230,7 @@ a[id]:empty, a[name]:empty {
     border-top-left-radius: 0;
     border-top: 0;
   }
-  a, a.breadcrumb.breadcrumb0 { padding-left: 15px; }
+  a, a.breadcrumb.breadcrumb0 { padding-left: 15px; padding-top: 8px; padding-bottom: 6px;
}
   a.breadcrumb.breadcrumb1 { padding-left: 30px; }
   a.breadcrumb.breadcrumb2 { padding-left: 45px; }
   a.breadcrumb.breadcrumb3 { padding-left: 60px; }
@@ -252,15 +311,25 @@ html {
     }
 }
 
-#footer {
+div#footer {
     position: absolute;
     bottom: 0;
     width: 100%;
-    /* Set the fixed height of the footer here */
     padding-top: 1em;
     padding-bottom: 1em;
     background-color: #f5f5f5;
     text-align: center;
+    font-size: 80%;
+}
+.octicon-footer {
+    color: #777;
+    font-size: 130%;
+    position: relative;
+    top: 2px;
+    padding-left: 6px;
+}
+a:hover .octicon-footer {
+    color: $brooklyn_green;
 }
 
 
@@ -308,6 +377,10 @@ code {
 /* LANDING PAGE
    ----------------------------------------------------------------------- */
 
+.jumbotron {
+    margin-top: 18px;
+}
+
 #apachebrooklynbanner {
     background-image: url("../img/apache-brooklyn-logo-817px-wide.png");
     background-repeat: no-repeat;
@@ -317,15 +390,23 @@ code {
     margin-bottom: 50px;
 }
 
-@mixin flip() {
-  transform: scaleX(-1);
-  filter: FlipH;
-  -webkit-transform: scaleX(-1);
-  -moz-transform: scaleX(-1);
-  -o-transform: scaleX(-1);
-  -ms-filter: "FlipH";
+div.feather.landing {
+    overflow: visible;
+    max-height: 10px;
+    img {
+        width: 200px;
+        margin-left: 40px;
+        margin-top: 0px;
+    }
 }
 
-.flip {
-  @include flip;
-}
\ No newline at end of file
+
+/* MAIN CONTAINER
+   ----------------------------------------------------------------------- */
+
+#content_container {
+  padding-bottom: 48px;
+  img {
+    max-width: 100%;
+  }
+}


Mime
View raw message