From 4a71db4fe7438ba427388bb3125bdd2d6f7378c7 Mon Sep 17 00:00:00 2001 From: connors Date: Sun, 23 Feb 2014 21:45:48 -0800 Subject: [PATCH] including a jump menu --- docs/assets/css/docs.css | 93 +++++++++++++++++++++++++++++++++++++--- docs/assets/js/docs.js | 27 ++++++------ docs/components.html | 48 ++++++++++++++++----- sass/docs.scss | 86 +++++++++++++++++++++++++++++++++++-- 4 files changed, 221 insertions(+), 33 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 137ada9..88531a7 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -106,6 +106,11 @@ body { font-size: 22px; } +.docs-jump-menu, +.docs-component-group { + display: none; +} + .docs-title a, .docs-nav-item { color: #fff; @@ -375,7 +380,7 @@ body { color: #777; } -.platform-toggle { +.docs-component-toolbar { padding-top: 12px; padding-bottom: 12px; position: fixed; @@ -384,6 +389,7 @@ body { left: 0; right: 0; z-index: 20; + height: 52px; background-color: #fff; border-bottom: 1px solid #ddd; -webkit-transform: translate3d(0, -55px, 0); @@ -393,7 +399,7 @@ body { -moz-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; } -.platform-toggle.visible { +.docs-component-toolbar.visible { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); @@ -401,11 +407,16 @@ body { -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } -.platform-toggle .segmented-control { - max-width: 300px; - margin: 0 auto; +.docs-component-toolbar .segmented-control { + position: absolute; + left: 50%; + width: 300px; + margin: 0; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); } -.platform-toggle .segmented-control .control-item { +.docs-component-toolbar .segmented-control .control-item { cursor: pointer; } @@ -628,11 +639,81 @@ hr { opacity: 1; } .docs-nav .docs-nav-item { + position: relative; display: inline-block; padding: 0 15px; font-size: 14px; } + .docs-jump-menu { + display: block; + color: #777; + cursor: pointer; + -webkit-transition: opacity 0.2 linear; + -moz-transition: opacity 0.2 linear; + transition: opacity 0.2 linear; + } + .docs-jump-menu:hover { + color: #428bca; + } + .docs-jump-menu:active { + opacity: .5; + } + .docs-jump-menu .icon-list { + font-size: 16px; + margin-right: 3px; + } + .docs-jump-menu .icon-caret { + position: relative; + top: 4px; + } + + .docs-component-group { + position: absolute; + top: 35px; + left: 30px; + padding-top: 10px; + padding-bottom: 10px; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 3px; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); + } + .docs-component-group.active { + display: block; + } + .docs-component-group:before, .docs-component-group:after { + position: absolute; + left: 30px; + width: 0; + height: 0; + content: ''; + } + .docs-component-group:before { + top: -11px; + margin-left: -11px; + border-right: 11px solid transparent; + border-bottom: 11px solid rgba(0, 0, 0, 0.3); + border-left: 11px solid transparent; + } + .docs-component-group:after { + top: -10px; + margin-left: -10px; + border-right: 10px solid transparent; + border-bottom: 10px solid #fff; + border-left: 10px solid transparent; + } + .docs-component-group .docs-component-item { + display: block; + padding: 10px 20px; + color: #777; + } + .docs-component-group .docs-component-item:hover { + color: #fff; + background-color: #428bca; + } + .carbonad { width: 330px !important; border-right: 1px solid rgba(255, 255, 255, 0.1) !important; diff --git a/docs/assets/js/docs.js b/docs/assets/js/docs.js index f29dfee..b016137 100644 --- a/docs/assets/js/docs.js +++ b/docs/assets/js/docs.js @@ -8,13 +8,13 @@ $(function() { var pageHeight; var contentPadding; var footerHeight; - var componentsList; var navComponentLinks; + var componentsList; var contentSection; var currentActive; var topCache; var eventListeners; - var platformToggle; + var toolbarToggle; var toggleTop; var toggleHeight; @@ -26,8 +26,8 @@ $(function() { doc = $(document); bod = $(document.body) device = device || $('.js-device'); - //navComponentLinks = $('.docs-nav'); - componentsList = $('.components-list'); + navComponentLinks = $('.js-jump-menu'); + componentsList = $('.js-component-group'); componentLinks = $('.component-example a'); contentSection = $('.component'); topCache = contentSection.map(function () { return $(this).offset().top }) @@ -36,7 +36,7 @@ $(function() { pageHeight = $(document).height(); contentPadding = parseInt($('.docs-content').css('padding-bottom')); footerHeight = $('.docs-footer').outerHeight(false); - platformToggle = $('.js-platform-toggle'); + toolbarToggle = $('.js-docs-component-toolbar'); // Device placement if (windowWidth >= 768) { @@ -68,11 +68,11 @@ $(function() { nav.toggleClass('active'); }); - // navComponentLinks.click(function(e) { - // e.stopPropagation(); - // e.preventDefault(); - // componentsList.toggleClass('active'); - // }) + navComponentLinks.click(function(e) { + e.stopPropagation(); + e.preventDefault(); + componentsList.toggleClass('active'); + }) doc.on('click', function () { componentsList.removeClass('active'); @@ -154,15 +154,16 @@ $(function() { } } - // Platform toggle + // Toolbar toggle var calculateToggle = function () { var currentTop = win.scrollTop(); var headerHeight = $('.docs-sub-header').outerHeight(); if(currentTop >= headerHeight) { - platformToggle.addClass('visible'); + toolbarToggle.addClass('visible'); } else if (currentTop <= headerHeight) { - platformToggle.removeClass('visible'); + toolbarToggle.removeClass('visible'); + componentsList.removeClass('active'); } } diff --git a/docs/components.html b/docs/components.html index c4d360b..d686ccc 100644 --- a/docs/components.html +++ b/docs/components.html @@ -18,17 +18,43 @@ title: Components · Ratchet
-
-
- - Base - - - iOS - - - Android - +
+
+
+ + + + Jump to + + + +
+ Bars + Typography + Table views + Buttons + Segmented controls + Badges + Forms + Toggles + Popovers + Modals + Sliders + Push +
+ +
+ + Base + + + iOS + + + Android + +
+
diff --git a/sass/docs.scss b/sass/docs.scss index b779b04..e1e6998 100644 --- a/sass/docs.scss +++ b/sass/docs.scss @@ -105,6 +105,10 @@ body { font-size: 22px; } } +.docs-jump-menu, +.docs-component-group{ + display: none; +} .docs-title a, .docs-nav-item { color: #fff; @@ -385,7 +389,7 @@ body { // Platform toggle // -------------------------------------------------- -.platform-toggle { +.docs-component-toolbar { padding-top: 12px; padding-bottom: 12px; position: fixed; @@ -394,6 +398,7 @@ body { left: 0; right: 0; z-index: 20; + height: 52px; background-color: #fff; border-bottom: 1px solid #ddd; @include transform(translate3d(0, -55px, 0)); @@ -405,8 +410,11 @@ body { } .segmented-control { - max-width: 300px; - margin: 0 auto; + position: absolute; + left: 50%; + width: 300px; + margin: 0; + @include transform(translateX(-50%)); .control-item { cursor: pointer; @@ -642,12 +650,84 @@ hr { opacity: 1; } .docs-nav-item { + position: relative; display: inline-block; padding: 0 15px; font-size: 14px; } } + // Component jump menu + .docs-jump-menu { + display: block; + color: #777; + cursor: pointer; + @include transition(opacity .2 linear); + + &:hover { + color: $primary-color; + } + &:active { + opacity: .5; + } + .icon-list { + font-size: 16px; + margin-right: 3px; + } + .icon-caret { + position: relative; + top: 4px; + } + } + .docs-component-group { + position: absolute; + top: 35px; + left: 30px; + padding-top: 10px; + padding-bottom: 10px; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0,0,0,.2); + border-radius: 3px; + box-shadow: 0 0 8px rgba(0,0,0,.05); + + &.active { + display: block; + } + &:before, + &:after { + position: absolute; + left: 30px; + width: 0; + height: 0; + content: ''; + } + &:before { + top: -11px; + margin-left: -11px; + border-right: 11px solid transparent; + border-bottom: 11px solid rgba(0,0,0,.3); + border-left: 11px solid transparent; + } + &:after { + top: -10px; + margin-left: -10px; + border-right: 10px solid transparent; + border-bottom: 10px solid #fff; + border-left: 10px solid transparent + } + .docs-component-item { + display: block; + padding: 10px 20px; + color: #777; + + &:hover { + color: #fff; + background-color: $primary-color; + } + } + } + // Ads .carbonad { width: 330px !important;