brooklyn-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From henev...@apache.org
Subject [4/9] incubator-brooklyn git commit: fix top menu and add feather
Date Mon, 12 Jan 2015 14:52:20 GMT
fix top menu and add feather

fixed so that sidebar items (the octocat and twitbird) don't vanish off to the side
if responsiveness is such that the container has very little margin;
instead, in such situation, it squeezes the menu bar (but as nicely as possible)

also adding an apache feather at left


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

Branch: refs/heads/master
Commit: 6f5a32268f2665a282f77143341f4d94bd375db0
Parents: 28c7116
Author: Alex Heneveld <alex.heneveld@cloudsoftcorp.com>
Authored: Sat Jan 10 01:38:17 2015 +0000
Committer: Alex Heneveld <alex.heneveld@cloudsoftcorp.com>
Committed: Sat Jan 10 17:24:59 2015 +0000

----------------------------------------------------------------------
 docs/_includes/topmenu.html |  40 +++++++++++++++----------
 docs/style/css/base.scss    |  62 +++++++++++++++++++++++++++++++++++++--
 docs/style/img/feather.png  | Bin 0 -> 40042 bytes
 3 files changed, 83 insertions(+), 19 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/6f5a3226/docs/_includes/topmenu.html
----------------------------------------------------------------------
diff --git a/docs/_includes/topmenu.html b/docs/_includes/topmenu.html
index c15f0df..f2c1e05 100644
--- a/docs/_includes/topmenu.html
+++ b/docs/_includes/topmenu.html
@@ -1,18 +1,12 @@
 <nav class="navbar navbar-default navbar-fixed-top" id="header" role="navigation">
-    <div class="container">
+    <div class="container-and-sidebars">
 
-            <div id="navbar-icons-extra">
-              <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"/>
-              <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"/>
-              <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"/>
-              <!-- extra a element seems needed else landing page first menu item copies
an icon above (!?) -->
-              <a style="width: 0px; height: 0px;"></a>
-            </div>
-            
-        <div class="container-fluid">
+        <div class="container-sidebar-left">
+          <img src="{{ site.path.style }}/img/feather.png" width="80" class="flip navbar-feather">
+        </div>
+
+        <div class="container container-between-sidebars">
+          <div class="container-fluid">
             <!-- Brand and toggle get grouped for better mobile display -->
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
@@ -57,7 +51,21 @@
                   {% endfor %}
                 </ul>
             </div><!-- /.navbar-collapse -->
-            
-        </div><!-- /.container-fluid -->
-    </div>
+          </div><!-- /.container-fluid -->
+        </div><!-- /.container -->
+        
+        <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"/>
+            <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"/>
+            <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"/>
+            <!-- extra a element seems needed as landing page seems to copy the last element
here (!?) -->
+            <a href="." style="width: 0px; height: 0px;"></a>
+         </div>
+      </div>
+      
+  </div>
 </nav>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/6f5a3226/docs/style/css/base.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/base.scss b/docs/style/css/base.scss
index 74308df..79e79e0 100644
--- a/docs/style/css/base.scss
+++ b/docs/style/css/base.scss
@@ -59,10 +59,53 @@ a[id]:empty, a[name]:empty {
     @include icon('irc');
 }
 
-#navbar-icons-extra {
-    float: right;
-    margin-right: -114px;
+/* 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;
+}
+.container-between-sidebars {
+  flex: 10 1 100%;
+  display: inline-block;
+  width: auto;
+  margin-left: auto;
+  margin-right: auto;
+}
+.container-sidebar {
+  flex: 0 0 auto;
+}
+.container-sidebar-right { 
+  @extend .container-sidebar; 
+  text-align: left;
+  padding-right: 10px;
+} 
+.container-sidebar-left {
+  @extend .container-sidebar;
+  text-align: right;
+  padding-left: 10px;
+}
+
+@media (min-width: 768px) {
+  .container-sidebar { min-width: calc((100% - 750px)/2); }
+}
+@media (min-width: 992px) {
+  .container-sidebar { min-width: calc((100% - 970px)/2); }
+}
+@media (min-width: 1200px) {
+  .container-sidebar { min-width: calc((100% - 1170px)/2); }
+}
+
+
+.navbar-feather {
+  padding-top: 12px; 
+  margin-right: -6px;
+}
+.navbar-sidebar-right-icons {
     padding-top: 10px;
+    margin-left: -6px;
+    white-space: nowrap;
     a {
       display: inline-block;
       width: 32px;
@@ -225,3 +268,16 @@ code {
     height: 99px;
     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";
+}
+
+.flip {
+  @include flip;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/6f5a3226/docs/style/img/feather.png
----------------------------------------------------------------------
diff --git a/docs/style/img/feather.png b/docs/style/img/feather.png
new file mode 100644
index 0000000..7b596e6
Binary files /dev/null and b/docs/style/img/feather.png differ


Mime
View raw message