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

including a jump menu

pull/253/head
connors 11 years ago
parent
4366221784
commit
4a71db4fe7
4 changed files with 221 additions and 33 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. 93
      docs/assets/css/docs.css
  2. 27
      docs/assets/js/docs.js
  3. 48
      docs/components.html
  4. 86
      sass/docs.scss

93
docs/assets/css/docs.css
Unescape View File

@ -106,6 +106,11 @@ body {
font-size: 22px; font-size: 22px;
} }
.docs-jump-menu,
.docs-component-group {
display: none;
}
.docs-title a, .docs-title a,
.docs-nav-item { .docs-nav-item {
color: #fff; color: #fff;
@ -375,7 +380,7 @@ body {
color: #777; color: #777;
} }
.platform-toggle { .docs-component-toolbar {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
position: fixed; position: fixed;
@ -384,6 +389,7 @@ body {
left: 0; left: 0;
right: 0; right: 0;
z-index: 20; z-index: 20;
height: 52px;
background-color: #fff; background-color: #fff;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
-webkit-transform: translate3d(0, -55px, 0); -webkit-transform: translate3d(0, -55px, 0);
@ -393,7 +399,7 @@ body {
-moz-transition: -webkit-transform 0.5s; -moz-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s;
} }
.platform-toggle.visible { .docs-component-toolbar.visible {
-webkit-transform: translateY(0); -webkit-transform: translateY(0);
-ms-transform: translateY(0); -ms-transform: translateY(0);
transform: translateY(0); transform: translateY(0);
@ -401,11 +407,16 @@ body {
-ms-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.platform-toggle .segmented-control { .docs-component-toolbar .segmented-control {
max-width: 300px; position: absolute;
margin: 0 auto; 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; cursor: pointer;
} }
@ -628,11 +639,81 @@ hr {
opacity: 1; opacity: 1;
} }
.docs-nav .docs-nav-item { .docs-nav .docs-nav-item {
position: relative;
display: inline-block; display: inline-block;
padding: 0 15px; padding: 0 15px;
font-size: 14px; 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 { .carbonad {
width: 330px !important; width: 330px !important;
border-right: 1px solid rgba(255, 255, 255, 0.1) !important; border-right: 1px solid rgba(255, 255, 255, 0.1) !important;

27
docs/assets/js/docs.js
Unescape View File

@ -8,13 +8,13 @@ $(function() {
var pageHeight; var pageHeight;
var contentPadding; var contentPadding;
var footerHeight; var footerHeight;
var componentsList;
var navComponentLinks; var navComponentLinks;
var componentsList;
var contentSection; var contentSection;
var currentActive; var currentActive;
var topCache; var topCache;
var eventListeners; var eventListeners;
var platformToggle; var toolbarToggle;
var toggleTop; var toggleTop;
var toggleHeight; var toggleHeight;
@ -26,8 +26,8 @@ $(function() {
doc = $(document); doc = $(document);
bod = $(document.body) bod = $(document.body)
device = device || $('.js-device'); device = device || $('.js-device');
//navComponentLinks = $('.docs-nav'); navComponentLinks = $('.js-jump-menu');
componentsList = $('.components-list'); componentsList = $('.js-component-group');
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 })
@ -36,7 +36,7 @@ $(function() {
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);
platformToggle = $('.js-platform-toggle'); toolbarToggle = $('.js-docs-component-toolbar');
// Device placement // Device placement
if (windowWidth >= 768) { if (windowWidth >= 768) {
@ -68,11 +68,11 @@ $(function() {
nav.toggleClass('active'); nav.toggleClass('active');
}); });
// navComponentLinks.click(function(e) { navComponentLinks.click(function(e) {
// e.stopPropagation(); e.stopPropagation();
// e.preventDefault(); e.preventDefault();
// componentsList.toggleClass('active'); componentsList.toggleClass('active');
// }) })
doc.on('click', function () { doc.on('click', function () {
componentsList.removeClass('active'); componentsList.removeClass('active');
@ -154,15 +154,16 @@ $(function() {
} }
} }
// Platform toggle // Toolbar toggle
var calculateToggle = function () { var calculateToggle = function () {
var currentTop = win.scrollTop(); var currentTop = win.scrollTop();
var headerHeight = $('.docs-sub-header').outerHeight(); var headerHeight = $('.docs-sub-header').outerHeight();
if(currentTop >= headerHeight) { if(currentTop >= headerHeight) {
platformToggle.addClass('visible'); toolbarToggle.addClass('visible');
} else if (currentTop <= headerHeight) { } else if (currentTop <= headerHeight) {
platformToggle.removeClass('visible'); toolbarToggle.removeClass('visible');
componentsList.removeClass('active');
} }
} }

48
docs/components.html
Unescape View File

@ -18,17 +18,43 @@ title: Components &middot; Ratchet
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
</div> </div>
<div class="platform-toggle js-platform-toggle"> <div class="docs-component-toolbar js-docs-component-toolbar">
<div class="segmented-control"> <div class="container">
<a class="platform-switch control-item active" data-platform=""> <div class="column units-2">
Base
</a> <span class="docs-jump-menu pull-left js-jump-menu">
<a class="platform-switch control-item" data-platform="platform-ios"> <span class="icon icon-list"></span>
iOS Jump to
</a> <span class="icon icon-caret"></span>
<a class="platform-switch control-item" data-platform="platform-android"> </span>
Android
</a> <div class="docs-component-group js-component-group">
<a class="docs-component-item" href="#" data-ignore="push">Bars</a>
<a class="docs-component-item" href="#" data-ignore="push">Typography</a>
<a class="docs-component-item" href="#" data-ignore="push">Table views</a>
<a class="docs-component-item" href="#" data-ignore="push">Buttons</a>
<a class="docs-component-item" href="#" data-ignore="push">Segmented controls</a>
<a class="docs-component-item" href="#" data-ignore="push">Badges</a>
<a class="docs-component-item" href="#" data-ignore="push">Forms</a>
<a class="docs-component-item" href="#" data-ignore="push">Toggles</a>
<a class="docs-component-item" href="#" data-ignore="push">Popovers</a>
<a class="docs-component-item" href="#" data-ignore="push">Modals</a>
<a class="docs-component-item" href="#" data-ignore="push">Sliders</a>
<a class="docs-component-item" href="#" data-ignore="push">Push</a>
</div>
<div class="segmented-control">
<a class="platform-switch control-item active" data-platform="">
Base
</a>
<a class="platform-switch control-item" data-platform="platform-ios">
iOS
</a>
<a class="platform-switch control-item" data-platform="platform-android">
Android
</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

86
sass/docs.scss
Unescape View File

@ -105,6 +105,10 @@ body {
font-size: 22px; font-size: 22px;
} }
} }
.docs-jump-menu,
.docs-component-group{
display: none;
}
.docs-title a, .docs-title a,
.docs-nav-item { .docs-nav-item {
color: #fff; color: #fff;
@ -385,7 +389,7 @@ body {
// Platform toggle // Platform toggle
// -------------------------------------------------- // --------------------------------------------------
.platform-toggle { .docs-component-toolbar {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
position: fixed; position: fixed;
@ -394,6 +398,7 @@ body {
left: 0; left: 0;
right: 0; right: 0;
z-index: 20; z-index: 20;
height: 52px;
background-color: #fff; background-color: #fff;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
@include transform(translate3d(0, -55px, 0)); @include transform(translate3d(0, -55px, 0));
@ -405,8 +410,11 @@ body {
} }
.segmented-control { .segmented-control {
max-width: 300px; position: absolute;
margin: 0 auto; left: 50%;
width: 300px;
margin: 0;
@include transform(translateX(-50%));
.control-item { .control-item {
cursor: pointer; cursor: pointer;
@ -642,12 +650,84 @@ hr {
opacity: 1; opacity: 1;
} }
.docs-nav-item { .docs-nav-item {
position: relative;
display: inline-block; display: inline-block;
padding: 0 15px; padding: 0 15px;
font-size: 14px; 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 // Ads
.carbonad { .carbonad {
width: 330px !important; width: 330px !important;

Write Preview
Loading…
Cancel
Save