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
Split 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;
}
.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;

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

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

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>
<div class="platform-toggle js-platform-toggle">
<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 class="docs-component-toolbar js-docs-component-toolbar">
<div class="container">
<div class="column units-2">
<span class="docs-jump-menu pull-left js-jump-menu">
<span class="icon icon-list"></span>
Jump to
<span class="icon icon-caret"></span>
</span>
<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>

86
sass/docs.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save