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
Split 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 class="docs-header-content">
<div class="column units-2">
<h2 class="section-title">Components</h2>
<p class="section-description">Design patterns that serve as basic building blocks</p>
</div>
<div class="docs-sub-content">
<h2 class="page-title">Components</h2>
<p class="page-description">Design patterns that serve as basic building blocks</p>
</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="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 class="container">

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

@ -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 {

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

@ -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);
}

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
// --------------------------------------------------
.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;

Write Preview
Loading…
Cancel
Save