From ef745ccb9324f014d5514943253bb75636d9e75b Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 18 Jan 2014 18:10:50 -0800 Subject: [PATCH] fixing up the toggle and device placment --- components.html | 35 ++++++++++++------------ docs-assets/css/docs.css | 35 ++++++++++++++++++------ docs-assets/js/docs.js | 58 +++++++++++++++++++++++----------------- lib/sass/docs.scss | 40 ++++++++++++++++++++++----- 4 files changed, 110 insertions(+), 58 deletions(-) diff --git a/components.html b/components.html index 5b56ea5..77e3f9a 100644 --- a/components.html +++ b/components.html @@ -15,25 +15,24 @@ base_url: "../" -
-
-

Components

-

Design patterns that serve as basic building blocks

-
+
+

Components

+

Design patterns that serve as basic building blocks

+
+ +
+
-
-
-
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css index 332ac45..92352fb 100644 --- a/docs-assets/css/docs.css +++ b/docs-assets/css/docs.css @@ -729,6 +729,25 @@ body { line-height: 34px; } +.docs-sub-content { + padding-top: 50px; + color: #fff; + text-align: center; +} +.docs-sub-content .page-title, +.docs-sub-content .page-description { + margin-top: 0; + margin-bottom: 0; + font-weight: 300; +} +.docs-sub-content .page-title { + font-size: 40px; +} +.docs-sub-content .page-description { + font-size: 24px; + opacity: .7; +} + .docs-section { padding-top: 80px; padding-bottom: 80px; @@ -792,7 +811,7 @@ body { display: block; width: 80px; height: 80px; - margin: 0 auto 40px; + margin: 0 auto 30px; border: 1px solid #eee; border-radius: 40px; } @@ -861,11 +880,8 @@ body { } .platform-toggle { - padding-top: 20px; - padding-bottom: 70px; - background-color: #1eb0e9; - -webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear; - transition: padding-top 0.2s linear, padding-bottom 0.2s linear; + padding-top: 15px; + padding-bottom: 80px; } .platform-toggle.fixed { position: fixed; @@ -876,12 +892,15 @@ body { z-index: 3; padding-top: 8px; padding-bottom: 8px; + background-image: linear-gradient(45deg, #336f90 0%, #254456 100%); + -webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear; + transition: padding-top 0.2s linear, padding-bottom 0.2s linear; } .platform-toggle .segmented-controller { max-width: 300px; margin: 0 auto; border-color: #fff; - background-color: #1eb0e9; + background-color: transparent; } .platform-toggle .segmented-controller li { cursor: pointer; @@ -897,7 +916,7 @@ body { background-color: #fff; } .platform-toggle .segmented-controller li.selected a { - color: #1eb0e9; + color: #254456; } .component { diff --git a/docs-assets/js/docs.js b/docs-assets/js/docs.js index 933e76b..ddc5eca 100644 --- a/docs-assets/js/docs.js +++ b/docs-assets/js/docs.js @@ -17,27 +17,35 @@ $(function() { var eventListeners; var initialize = function () { - currentActive = 0; - topCache = []; - win = $(window); - doc = $(document); - bod = $(document.body) - device = device || $('.device'); - platformToggle = $('.platform-toggle'); - noticeBanner = $('.notice-banner'); - navComponentLinks = $('.docs-nav'); - componentsList = $('.components-list'); - componentLinks = $('.component-example a'); - contentSection = $('.component'); - topCache = contentSection.map(function () { return $(this).offset().top }) - windowHeight = $(window).height() / 3 - pageHeight = $(document).height(); - contentPadding = parseInt($('.docs-content').css('padding-bottom')); - footerHeight = $('.docs-footer').outerHeight(false); - - device.initialLeft = device.offset().left; - device.initialTop = device.initialTop || device.offset().top; - device.dockingOffset = ($(window).height() - device.height())/2; + currentActive = 0; + topCache = []; + win = $(window); + doc = $(document); + bod = $(document.body) + device = device || $('.device'); + platformToggle = $('.platform-toggle'); + noticeBanner = $('.notice-banner'); + navComponentLinks = $('.docs-nav'); + componentsList = $('.components-list'); + componentLinks = $('.component-example a'); + contentSection = $('.component'); + topCache = contentSection.map(function () { return $(this).offset().top }) + windowHeight = $(window).height() / 3 + 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; + + console.log(device.dockingOffset); + + // Toggle placment + toggleTop = platformToggle.offset().top; + toggleHeight = platformToggle.outerHeight(); + checkDesktopContent(); calculateScroll(); @@ -107,7 +115,7 @@ $(function() { var contentSectionItem; var currentTop = win.scrollTop(); - if((device.initialTop - currentTop) <= device.dockingOffset + 113) { + if((device.initialTop - currentTop) <= device.dockingOffset) { device[0].className = "device device-fixed"; device.css({top: device.dockingOffset}) } else { @@ -115,10 +123,10 @@ $(function() { device[0].setAttribute('style','') } - if(currentTop >= $('.docs-masthead').outerHeight()) { + if(currentTop >= toggleTop) { platformToggle.addClass('fixed'); - $('.docs-components').css('padding-top', platformToggle.outerHeight()); - } else { + $('.docs-components').css('padding-top', toggleHeight); + } else if (currentTop <= $('.docs-header').outerHeight()) { platformToggle.removeClass('fixed'); $('.docs-components').css('padding-top', 0); } diff --git a/lib/sass/docs.scss b/lib/sass/docs.scss index dfdc2c9..03f7d3b 100644 --- a/lib/sass/docs.scss +++ b/lib/sass/docs.scss @@ -120,6 +120,29 @@ body { } +// Subpage Header +// -------------------------------------------------- +.docs-sub-content { + padding-top: 50px; + color: #fff; + text-align: center; + + .page-title, + .page-description { + margin-top: 0; + margin-bottom: 0; + font-weight: 300; + } + .page-title { + font-size: 40px; + } + .page-description { + font-size: 24px; + opacity: .7; + } +} + + // Content sections // -------------------------------------------------- .docs-section { @@ -190,7 +213,7 @@ body { display: block; width: 80px; height: 80px; - margin: 0 auto 40px; + margin: 0 auto 30px; border: 1px solid #eee; border-radius: 40px; @@ -270,10 +293,8 @@ body { // -------------------------------------------------- .platform-toggle { - padding-top: 20px; - padding-bottom: 70px; - background-color: #1eb0e9; - @include transition(padding-top .2s linear, padding-bottom .2s linear); + padding-top: 15px; + padding-bottom: 80px; &.fixed { position: fixed; @@ -284,13 +305,15 @@ body { z-index: 3; padding-top: 8px; padding-bottom: 8px; + background-image: linear-gradient(45deg, #336f90 0%, #254456 100%); + @include transition(padding-top .2s linear, padding-bottom .2s linear); } .segmented-controller { max-width: 300px; margin: 0 auto; border-color: #fff; - background-color: #1eb0e9; + background-color: transparent; li { cursor: pointer; @@ -306,7 +329,7 @@ body { background-color: #fff; a { - color: #1eb0e9; + color: #254456; } } } @@ -316,6 +339,9 @@ body { // Components // -------------------------------------------------- +.docs-components { + // @include transition(padding-top .2s linear); +} .component { padding: 50px 15px; margin-left: -15px;