playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

fixing up the toggle and device placment

pull/249/head
connors 11 years ago
parent
bcc86667c8
commit
ef745ccb93
4 changed files with 110 additions and 58 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      components.html
  2. 35
      docs-assets/css/docs.css
  3. 58
      docs-assets/js/docs.js
  4. 40
      lib/sass/docs.scss

35
components.html
Unescape View File

@ -15,25 +15,24 @@ base_url: "../"
</div> </div>
</div> </div>
<div class="docs-header-content"> <div class="docs-sub-content">
<div class="column units-2"> <h2 class="page-title">Components</h2>
<h2 class="section-title">Components</h2> <p class="page-description">Design patterns that serve as basic building blocks</p>
<p class="section-description">Design patterns that serve as basic building blocks</p> </div>
</div>
<div class="platform-toggle">
<ul class="segmented-controller">
<li class="platform-switch selected" data-platform="">
<a>Base</a>
</li>
<li class="platform-switch" data-platform="platform-ios">
<a>iOS</a>
</li>
<li class="platform-switch" data-platform="platform-android">
<a>Android</a>
</li>
</ul>
</div> </div>
</div>
<div class="platform-toggle">
<ul class="segmented-controller">
<li class="platform-switch selected" data-platform="">
<a>Base</a>
</li>
<li class="platform-switch" data-platform="platform-ios">
<a>iOS</a>
</li>
<li class="platform-switch" data-platform="platform-android">
<a>Android</a>
</li>
</ul>
</div> </div>
<div class="container"> <div class="container">

35
docs-assets/css/docs.css
Unescape View File

@ -729,6 +729,25 @@ body {
line-height: 34px; 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 { .docs-section {
padding-top: 80px; padding-top: 80px;
padding-bottom: 80px; padding-bottom: 80px;
@ -792,7 +811,7 @@ body {
display: block; display: block;
width: 80px; width: 80px;
height: 80px; height: 80px;
margin: 0 auto 40px; margin: 0 auto 30px;
border: 1px solid #eee; border: 1px solid #eee;
border-radius: 40px; border-radius: 40px;
} }
@ -861,11 +880,8 @@ body {
} }
.platform-toggle { .platform-toggle {
padding-top: 20px; padding-top: 15px;
padding-bottom: 70px; padding-bottom: 80px;
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;
} }
.platform-toggle.fixed { .platform-toggle.fixed {
position: fixed; position: fixed;
@ -876,12 +892,15 @@ body {
z-index: 3; z-index: 3;
padding-top: 8px; padding-top: 8px;
padding-bottom: 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 { .platform-toggle .segmented-controller {
max-width: 300px; max-width: 300px;
margin: 0 auto; margin: 0 auto;
border-color: #fff; border-color: #fff;
background-color: #1eb0e9; background-color: transparent;
} }
.platform-toggle .segmented-controller li { .platform-toggle .segmented-controller li {
cursor: pointer; cursor: pointer;
@ -897,7 +916,7 @@ body {
background-color: #fff; background-color: #fff;
} }
.platform-toggle .segmented-controller li.selected a { .platform-toggle .segmented-controller li.selected a {
color: #1eb0e9; color: #254456;
} }
.component { .component {

58
docs-assets/js/docs.js
Unescape View File

@ -17,27 +17,35 @@ $(function() {
var eventListeners; var eventListeners;
var initialize = function () { var initialize = function () {
currentActive = 0; currentActive = 0;
topCache = []; topCache = [];
win = $(window); win = $(window);
doc = $(document); doc = $(document);
bod = $(document.body) bod = $(document.body)
device = device || $('.device'); device = device || $('.device');
platformToggle = $('.platform-toggle'); platformToggle = $('.platform-toggle');
noticeBanner = $('.notice-banner'); noticeBanner = $('.notice-banner');
navComponentLinks = $('.docs-nav'); navComponentLinks = $('.docs-nav');
componentsList = $('.components-list'); componentsList = $('.components-list');
componentLinks = $('.component-example a'); componentLinks = $('.component-example a');
contentSection = $('.component'); contentSection = $('.component');
topCache = contentSection.map(function () { return $(this).offset().top }) topCache = contentSection.map(function () { return $(this).offset().top })
windowHeight = $(window).height() / 3 windowHeight = $(window).height() / 3
pageHeight = $(document).height(); pageHeight = $(document).height();
contentPadding = parseInt($('.docs-content').css('padding-bottom')); contentPadding = parseInt($('.docs-content').css('padding-bottom'));
footerHeight = $('.docs-footer').outerHeight(false); footerHeight = $('.docs-footer').outerHeight(false);
device.initialLeft = device.offset().left; // Device placment
device.initialTop = device.initialTop || device.offset().top; device.initialLeft = device.offset().left;
device.dockingOffset = ($(window).height() - device.height())/2; 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(); checkDesktopContent();
calculateScroll(); calculateScroll();
@ -107,7 +115,7 @@ $(function() {
var contentSectionItem; var contentSectionItem;
var currentTop = win.scrollTop(); var currentTop = win.scrollTop();
if((device.initialTop - currentTop) <= device.dockingOffset + 113) { if((device.initialTop - currentTop) <= device.dockingOffset) {
device[0].className = "device device-fixed"; device[0].className = "device device-fixed";
device.css({top: device.dockingOffset}) device.css({top: device.dockingOffset})
} else { } else {
@ -115,10 +123,10 @@ $(function() {
device[0].setAttribute('style','') device[0].setAttribute('style','')
} }
if(currentTop >= $('.docs-masthead').outerHeight()) { if(currentTop >= toggleTop) {
platformToggle.addClass('fixed'); platformToggle.addClass('fixed');
$('.docs-components').css('padding-top', platformToggle.outerHeight()); $('.docs-components').css('padding-top', toggleHeight);
} else { } else if (currentTop <= $('.docs-header').outerHeight()) {
platformToggle.removeClass('fixed'); platformToggle.removeClass('fixed');
$('.docs-components').css('padding-top', 0); $('.docs-components').css('padding-top', 0);
} }

40
lib/sass/docs.scss
Unescape View File

@ -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 // Content sections
// -------------------------------------------------- // --------------------------------------------------
.docs-section { .docs-section {
@ -190,7 +213,7 @@ body {
display: block; display: block;
width: 80px; width: 80px;
height: 80px; height: 80px;
margin: 0 auto 40px; margin: 0 auto 30px;
border: 1px solid #eee; border: 1px solid #eee;
border-radius: 40px; border-radius: 40px;
@ -270,10 +293,8 @@ body {
// -------------------------------------------------- // --------------------------------------------------
.platform-toggle { .platform-toggle {
padding-top: 20px; padding-top: 15px;
padding-bottom: 70px; padding-bottom: 80px;
background-color: #1eb0e9;
@include transition(padding-top .2s linear, padding-bottom .2s linear);
&.fixed { &.fixed {
position: fixed; position: fixed;
@ -284,13 +305,15 @@ body {
z-index: 3; z-index: 3;
padding-top: 8px; padding-top: 8px;
padding-bottom: 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 { .segmented-controller {
max-width: 300px; max-width: 300px;
margin: 0 auto; margin: 0 auto;
border-color: #fff; border-color: #fff;
background-color: #1eb0e9; background-color: transparent;
li { li {
cursor: pointer; cursor: pointer;
@ -306,7 +329,7 @@ body {
background-color: #fff; background-color: #fff;
a { a {
color: #1eb0e9; color: #254456;
} }
} }
} }
@ -316,6 +339,9 @@ body {
// Components // Components
// -------------------------------------------------- // --------------------------------------------------
.docs-components {
// @include transition(padding-top .2s linear);
}
.component { .component {
padding: 50px 15px; padding: 50px 15px;
margin-left: -15px; margin-left: -15px;

Write Preview
Loading…
Cancel
Save