adding the navigation

11 years ago · 3c6a4709af
15 changed files with 192 additions and 69 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -17,7 +17,7 @@ module.exports = function(grunt) {
            ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
            ' * Licensed under <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
            ' *\n' +
-            ' * Designed and built by @connors, @dhg, and @fat.\n' +
+            ' * Designed by @connors.\n' +
            ' * =====================================================\n' +
            ' */\n',
    
--- a/dist/android-theme.css
+++ b/dist/android-theme.css
@ -4,7 +4,7 @@
 * Copyright 2014 Connor Sears
 * Licensed under http://www.opensource.org/licenses/MIT
 *
- * Designed and built by @connors, @dhg, and @fat.
+ * Designed by @connors.
 * =====================================================
 */

--- a/dist/ios-theme.css
+++ b/dist/ios-theme.css
@ -4,7 +4,7 @@
 * Copyright 2014 Connor Sears
 * Licensed under http://www.opensource.org/licenses/MIT
 *
- * Designed and built by @connors, @dhg, and @fat.
+ * Designed by @connors.
 * =====================================================
 */

--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@ -4,7 +4,7 @@
 * Copyright 2014 Connor Sears
 * Licensed under http://www.opensource.org/licenses/MIT
 *
- * Designed and built by @connors, @dhg, and @fat.
+ * Designed by @connors.
 * =====================================================
 */

@ -296,11 +296,6 @@ a:active {
  padding-bottom: 94px;
 }

-.container {
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
 .content-padded {
  margin: 10px;
 }
@ -313,6 +308,14 @@ a:active {
  float: right;
 }

+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+
 h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 10px;
--- a/dist/ratchet.js
+++ b/dist/ratchet.js
@ -4,7 +4,7 @@
 * Copyright 2014 Connor Sears
 * Licensed under http://www.opensource.org/licenses/MIT
 *
- * Designed and built by @connors, @dhg, and @fat.
+ * Designed by @connors.
 * =====================================================
 */
 /* ----------------------------------
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@ -4,7 +4,7 @@
 * Copyright 2014 Connor Sears
 * Licensed under http://www.opensource.org/licenses/MIT
 *
- * Designed and built by @connors, @dhg, and @fat.
+ * Designed by @connors.
 * =====================================================
 */

@ -59,7 +59,6 @@ body {

 .docs-masthead {
  position: relative;
-  overflow: hidden;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@ -71,28 +70,56 @@ body {
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 100;
+  z-index: 20;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
 }

+.docs-nav .docs-nav-trigger {
+  color: #fff;
+  cursor: pointer;
+  opacity: .7;
+}
+.docs-nav .docs-nav-trigger.active {
+  opacity: 1;
+}
+.docs-nav .docs-nav-group {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  overflow: hidden;
+  height: 0;
+  background-color: rgba(0, 0, 0, 0.95);
+  opacity: 0;
+}
+.docs-nav .docs-nav-group.active {
+  height: auto;
+  opacity: 1;
+}
+.docs-nav .docs-nav-item {
+  display: block;
+  padding: 20px 15px;
+  font-weight: 100;
+  font-size: 22px;
+}
+
 .docs-title a,
-.docs-nav {
+.docs-nav-item {
  color: #fff;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
 }
-.docs-title a:active,
-.docs-nav:active {
+.docs-title a:active, .docs-title a:focus,
+.docs-nav-item:active,
+.docs-nav-item:focus {
  color: #fff;
  opacity: .5;
 }

-.docs-nav {
-  cursor: pointer;
-}
-
 .docs-header-content {
  position: relative;
  top: 30px;
@ -197,6 +224,7 @@ body {
  padding-top: 55px;
  padding-bottom: 65px;
  color: #fff;
+  text-align: center;
 }
 .docs-sub-content .page-title,
 .docs-sub-content .page-description {
@ -561,6 +589,7 @@ hr {

  .docs-sub-content {
    margin-right: 380px;
+    text-align: left;
  }

  .docs-title {
@ -587,6 +616,27 @@ hr {
    line-height: 60px;
  }

+  .docs-nav {
+    float: right;
+    margin-top: 3px;
+    margin-bottom: -3px;
+  }
+  .docs-nav .docs-nav-trigger {
+    display: none;
+  }
+  .docs-nav .docs-nav-group {
+    position: static;
+    display: block;
+    height: auto;
+    background-color: transparent;
+    opacity: 1;
+  }
+  .docs-nav .docs-nav-item {
+    display: inline-block;
+    padding: 0 15px;
+    font-size: 14px;
+  }
+
  .carbonad {
    width: 330px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
--- a/docs/assets/js/docs.js
+++ b/docs/assets/js/docs.js
@ -22,20 +22,23 @@ $(function() {
    doc                  = $(document);
    bod                  = $(document.body)
    device               = device || $('.js-device');
-    navComponentLinks    = $('.docs-nav');
+    //navComponentLinks    = $('.docs-nav');
    componentsList       = $('.components-list');
    componentLinks       = $('.component-example a');
    contentSection       = $('.component');
    topCache             = contentSection.map(function () { return $(this).offset().top })
    windowHeight         = $(window).height() / 3
+    windowWidth          = $(window).width();
    pageHeight           = $(document).height();
    contentPadding       = parseInt($('.docs-content').css('padding-bottom'));
    footerHeight         = $('.docs-footer').outerHeight(false);

    // Device placment
-    device.initialLeft   = device.offset().left;
-    device.initialTop    = device.initialTop || device.offset().top;
-    device.dockingOffset = ($(window).height() - device.height())/2;
+    if (windowWidth >= 768) {
+      device.initialLeft   = device.offset().left;
+      device.initialTop    = device.initialTop || device.offset().top;
+      device.dockingOffset = ($(window).height() - device.height())/2; 
+    }

    checkDesktopContent();
    calculateScroll();
@ -50,6 +53,15 @@ $(function() {
      e.preventDefault();
    });

+    // Mobile navigation
+    $('.js-docs-nav-trigger').on('click', function () {
+      var nav     = $('.docs-nav-group');
+      var trigger = $('.js-docs-nav-trigger');
+
+      trigger.toggleClass('active');
+      nav.toggleClass('active'); 
+    });
+
    // navComponentLinks.click(function(e) {
    //   e.stopPropagation();
    //   e.preventDefault();
@ -82,7 +94,6 @@ $(function() {
    });

    win.on('scroll', calculateScroll);
-    win.on('scroll', calculateToggle);
  }

  var checkDesktopContent = function () {
@ -136,27 +147,6 @@ $(function() {
    }
  }

-  // Platform toggle
-  var initializeToggle = function () {
-    platformToggle = $('.platform-toggle');
-
-    // Toggle placment
-    toggleTop    = platformToggle.offset().top;
-    toggleHeight = platformToggle.outerHeight();
-
-    calculateToggle();
-  }
-  var calculateToggle = function () {
-    var currentTop = win.scrollTop();
-
-    if(currentTop >= toggleTop) {
-      platformToggle.addClass('fixed');
-    } else if (currentTop <= $('.docs-header').outerHeight()) {
-      platformToggle.removeClass('fixed');
-    }
-  }
-
  $(window).on('load resize', initialize);
-  $(window).on('load', initializeToggle);
  $(window).on('load', function () { new FingerBlast('.device-content'); });
 });
--- a/docs/components.html
+++ b/docs/components.html
@ -1122,17 +1122,17 @@ document
        <div class="slider" id="mySlider">
          <div class="slide-group">
            <div class="slide">
-              <img src="{{ page.base_url }}docs-assets/img/slide-1.jpg">
+              <img src="../assets/img/slide-1.jpg">
              <span class="slide-text">
                <span class="icon icon-left-nav"></span>
                Slide me
              </span>
            </div>
            <div class="slide">
-              <img src="{{ page.base_url }}docs-assets/img/slide-2.jpg">
+              <img src="../assets/img/slide-2.jpg">
            </div>
            <div class="slide">
-              <img src="{{ page.base_url }}docs-assets/img/slide-3.jpg">
+              <img src="../assets/img/slide-3.jpg">
            </div>
          </div>
        </div>
--- a/docs/dist/android-theme.css
+++ b/docs/dist/android-theme.css
@ -4,7 +4,7 @@
 * Copyright 2014 Connor Sears
 * Licensed under http://www.opensource.org/licenses/MIT
 *
- * Designed and built by @connors, @dhg, and @fat.
+ * Designed by @connors.
 * =====================================================
 */

--- a/docs/dist/ios-theme.css
+++ b/docs/dist/ios-theme.css
@ -4,7 +4,7 @@
 * Copyright 2014 Connor Sears
 * Licensed under http://www.opensource.org/licenses/MIT
 *
- * Designed and built by @connors, @dhg, and @fat.
+ * Designed by @connors.
 * =====================================================
 */

--- a/docs/dist/ratchet.css
+++ b/docs/dist/ratchet.css
@ -4,7 +4,7 @@
 * Copyright 2014 Connor Sears
 * Licensed under http://www.opensource.org/licenses/MIT
 *
- * Designed and built by @connors, @dhg, and @fat.
+ * Designed by @connors.
 * =====================================================
 */

@ -296,11 +296,6 @@ a:active {
  padding-bottom: 94px;
 }

-.container {
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
 .content-padded {
  margin: 10px;
 }
@ -313,6 +308,14 @@ a:active {
  float: right;
 }

+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+
 h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 10px;
--- a/docs/dist/ratchet.js
+++ b/docs/dist/ratchet.js
@ -4,7 +4,7 @@
 * Copyright 2014 Connor Sears
 * Licensed under http://www.opensource.org/licenses/MIT
 *
- * Designed and built by @connors, @dhg, and @fat.
+ * Designed by @connors.
 * =====================================================
 */
 /*
@ -13,7 +13,7 @@
 * Copyright 2014 Connor Sears
 * Licensed under http://www.opensource.org/licenses/MIT
 *
- * Designed and built by @connors, @dhg, and @fat.
+ * Designed by @connors.
 * =====================================================
 */
 /* ----------------------------------
--- a/sass/base.scss
+++ b/sass/base.scss
@ -79,10 +79,6 @@ a {
 }

 // Utility classes
-.container {
-  padding-right: 15px;
-  padding-left: 15px;
-}
 .content-padded {
  margin: $bar-side-spacing;
 }
@ -92,3 +88,6 @@ a {
 .pull-right {
  float: right;
 }
+.clearfix {
+  @include clearfix();
+}
--- a/sass/docs.scss
+++ b/sass/docs.scss
@ -1,6 +1,8 @@
@import "variables.scss";
@import "mixins.scss";

+// Clearfix mixin for docs
+
 //
 // Documentation
 // --------------------------------------------------
@ -57,7 +59,6 @@ body {
 // Masthead
 .docs-masthead {
  position: relative;
-  overflow: hidden;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255,255,255,.1);
@ -68,21 +69,49 @@ body {
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 100;
+  z-index: 20;
  @include transform(translateX(-50%));
 }
 .docs-nav {
+  .docs-nav-trigger {
+    color: #fff;
+    cursor: pointer;
+    opacity: .7;
+
+    &.active {
+      opacity: 1;
+    }
+  }
+  .docs-nav-group {
+    position: absolute;
+    top: 40px;
+    left: 0;
+    right: 0;
+    z-index: 20;
+    overflow: hidden;
+    height: 0;
+    background-color: rgba(0,0,0,.95);
+    opacity: 0;
+
+    &.active {
+      height: auto;
+      opacity: 1;
+    }
+  }
  .docs-nav-item {
-    display: inline-block;
-    padding-left: 20px;
-    padding-right: 20px;
+    display: block;
+    padding: 20px 15px;
+    font-weight: 100;
+    font-size: 22px;
  }
 }
 .docs-title a,
-.docs-nav a {
+.docs-nav-item {
  color: #fff;
  @include transition(opacity .2s linear);

-  &:active {
+  &:active,
+  &:focus {
    color: #fff;
    opacity: .5;
  }
@ -185,6 +214,7 @@ body {
  padding-top: 55px; // Visually centers the content.
  padding-bottom: 65px; // Visually centers the content.
  color: #fff;
+  text-align: center;

  .page-title,
  .page-description {
@ -584,7 +614,8 @@ hr {
    @include transform(translateY(-50%) !important);
  }
  .docs-sub-content {
-    margin-right: 380px
+    margin-right: 380px;
+    text-align: left;
  }
  .docs-title {
    position: static;
@ -605,6 +636,29 @@ hr {
    line-height: 60px;
  }

+  // Docs nav
+  .docs-nav {
+    float: right;
+    margin-top: 3px;
+    margin-bottom: -3px;
+
+    .docs-nav-trigger {
+      display: none;
+    }
+    .docs-nav-group {
+      position: static;
+      display: block;
+      height: auto;
+      background-color: transparent;
+      opacity: 1;
+    }
+    .docs-nav-item {
+      display: inline-block;
+      padding: 0 15px;
+      font-size: 14px;
+    }
+  }
+
  // Ads
  .carbonad {
    width: 330px !important;
--- a/sass/mixins.scss
+++ b/sass/mixins.scss
@ -6,6 +6,30 @@
 // General
 // --------------------------------------------------

+// Utilities
+// -------------------------
+
+// Clearfix
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+//    contenteditable attribute is included anywhere else in the document.
+//    Otherwise it causes space to appear at the top and bottom of elements
+//    that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+//    `:before` to contain the top-margins of child elements.
+@mixin clearfix() {
+  &:before,
+  &:after {
+    content: " "; // 1
+    display: table; // 2
+  }
+  &:after {
+    clear: both;
+  }
+}
+
 // Box shadow
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;