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 <[email protected]> Authored: Tue Jan 13 14:19:29 2015 +0000 Committer: Alex Heneveld <[email protected]> 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%; + } +}
![https://incubator.apache.org/images/egg-logo.png"](https://incubator.apache.org/images/egg-logo.png"){kind=link}