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

adding the navigation

pull/253/head
connors 11 years ago
parent
a482e5f954
commit
3c6a4709af
15 changed files with 192 additions and 69 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. 2
      Gruntfile.js
  2. 2
      dist/android-theme.css
  3. 2
      dist/ios-theme.css
  4. 15
      dist/ratchet.css
  5. 2
      dist/ratchet.js
  6. 68
      docs/assets/css/docs.css
  7. 42
      docs/assets/js/docs.js
  8. 6
      docs/components.html
  9. 2
      docs/dist/android-theme.css
  10. 2
      docs/dist/ios-theme.css
  11. 15
      docs/dist/ratchet.css
  12. 4
      docs/dist/ratchet.js
  13. 7
      sass/base.scss
  14. 68
      sass/docs.scss
  15. 24
      sass/mixins.scss

2
Gruntfile.js
Unescape View File

@ -17,7 +17,7 @@ module.exports = function(grunt) {
' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
' * Licensed under <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' + ' * Licensed under <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
' *\n' + ' *\n' +
' * Designed and built by @connors, @dhg, and @fat.\n' + ' * Designed by @connors.\n' +
' * =====================================================\n' + ' * =====================================================\n' +
' */\n', ' */\n',

2
dist/android-theme.css vendored
Unescape View File

@ -4,7 +4,7 @@
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under http://www.opensource.org/licenses/MIT
* *
* Designed and built by @connors, @dhg, and @fat. * Designed by @connors.
* ===================================================== * =====================================================
*/ */

2
dist/ios-theme.css vendored
Unescape View File

@ -4,7 +4,7 @@
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under http://www.opensource.org/licenses/MIT
* *
* Designed and built by @connors, @dhg, and @fat. * Designed by @connors.
* ===================================================== * =====================================================
*/ */

15
dist/ratchet.css vendored
Unescape View File

@ -4,7 +4,7 @@
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under http://www.opensource.org/licenses/MIT
* *
* Designed and built by @connors, @dhg, and @fat. * Designed by @connors.
* ===================================================== * =====================================================
*/ */
@ -296,11 +296,6 @@ a:active {
padding-bottom: 94px; padding-bottom: 94px;
} }
.container {
padding-right: 15px;
padding-left: 15px;
}
.content-padded { .content-padded {
margin: 10px; margin: 10px;
} }
@ -313,6 +308,14 @@ a:active {
float: right; float: right;
} }
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;

2
dist/ratchet.js vendored
Unescape View File

@ -4,7 +4,7 @@
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under http://www.opensource.org/licenses/MIT
* *
* Designed and built by @connors, @dhg, and @fat. * Designed by @connors.
* ===================================================== * =====================================================
*/ */
/* ---------------------------------- /* ----------------------------------

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

@ -4,7 +4,7 @@
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under http://www.opensource.org/licenses/MIT
* *
* Designed and built by @connors, @dhg, and @fat. * Designed by @connors.
* ===================================================== * =====================================================
*/ */
@ -59,7 +59,6 @@ body {
.docs-masthead { .docs-masthead {
position: relative; position: relative;
overflow: hidden;
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@ -71,28 +70,56 @@ body {
margin-bottom: 0; margin-bottom: 0;
font-size: 22px; font-size: 22px;
font-weight: 100; font-weight: 100;
z-index: 20;
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
} }
.docs-nav .docs-nav-trigger {
color: #fff;
cursor: pointer;
opacity: .7;
}
.docs-nav .docs-nav-trigger.active {
opacity: 1;
}
.docs-nav .docs-nav-group {
position: absolute;
top: 40px;
left: 0;
right: 0;
z-index: 20;
overflow: hidden;
height: 0;
background-color: rgba(0, 0, 0, 0.95);
opacity: 0;
}
.docs-nav .docs-nav-group.active {
height: auto;
opacity: 1;
}
.docs-nav .docs-nav-item {
display: block;
padding: 20px 15px;
font-weight: 100;
font-size: 22px;
}
.docs-title a, .docs-title a,
.docs-nav { .docs-nav-item {
color: #fff; color: #fff;
-webkit-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear; transition: opacity 0.2s linear;
} }
.docs-title a:active, .docs-title a:active, .docs-title a:focus,
.docs-nav:active { .docs-nav-item:active,
.docs-nav-item:focus {
color: #fff; color: #fff;
opacity: .5; opacity: .5;
} }
.docs-nav {
cursor: pointer;
}
.docs-header-content { .docs-header-content {
position: relative; position: relative;
top: 30px; top: 30px;
@ -197,6 +224,7 @@ body {
padding-top: 55px; padding-top: 55px;
padding-bottom: 65px; padding-bottom: 65px;
color: #fff; color: #fff;
text-align: center;
} }
.docs-sub-content .page-title, .docs-sub-content .page-title,
.docs-sub-content .page-description { .docs-sub-content .page-description {
@ -561,6 +589,7 @@ hr {
.docs-sub-content { .docs-sub-content {
margin-right: 380px; margin-right: 380px;
text-align: left;
} }
.docs-title { .docs-title {
@ -587,6 +616,27 @@ hr {
line-height: 60px; line-height: 60px;
} }
.docs-nav {
float: right;
margin-top: 3px;
margin-bottom: -3px;
}
.docs-nav .docs-nav-trigger {
display: none;
}
.docs-nav .docs-nav-group {
position: static;
display: block;
height: auto;
background-color: transparent;
opacity: 1;
}
.docs-nav .docs-nav-item {
display: inline-block;
padding: 0 15px;
font-size: 14px;
}
.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;

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

@ -22,20 +22,23 @@ $(function() {
doc = $(document); doc = $(document);
bod = $(document.body) bod = $(document.body)
device = device || $('.js-device'); device = device || $('.js-device');
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
windowWidth = $(window).width();
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 placment // Device placment
device.initialLeft = device.offset().left; if (windowWidth >= 768) {
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;
}
checkDesktopContent(); checkDesktopContent();
calculateScroll(); calculateScroll();
@ -50,6 +53,15 @@ $(function() {
e.preventDefault(); e.preventDefault();
}); });
// Mobile navigation
$('.js-docs-nav-trigger').on('click', function () {
var nav = $('.docs-nav-group');
var trigger = $('.js-docs-nav-trigger');
trigger.toggleClass('active');
nav.toggleClass('active');
});
// navComponentLinks.click(function(e) { // navComponentLinks.click(function(e) {
// e.stopPropagation(); // e.stopPropagation();
// e.preventDefault(); // e.preventDefault();
@ -82,7 +94,6 @@ $(function() {
}); });
win.on('scroll', calculateScroll); win.on('scroll', calculateScroll);
win.on('scroll', calculateToggle);
} }
var checkDesktopContent = function () { var checkDesktopContent = function () {
@ -136,27 +147,6 @@ $(function() {
} }
} }
// Platform toggle
var initializeToggle = function () {
platformToggle = $('.platform-toggle');
// Toggle placment
toggleTop = platformToggle.offset().top;
toggleHeight = platformToggle.outerHeight();
calculateToggle();
}
var calculateToggle = function () {
var currentTop = win.scrollTop();
if(currentTop >= toggleTop) {
platformToggle.addClass('fixed');
} else if (currentTop <= $('.docs-header').outerHeight()) {
platformToggle.removeClass('fixed');
}
}
$(window).on('load resize', initialize); $(window).on('load resize', initialize);
$(window).on('load', initializeToggle);
$(window).on('load', function () { new FingerBlast('.device-content'); }); $(window).on('load', function () { new FingerBlast('.device-content'); });
}); });

6
docs/components.html
Unescape View File

@ -1122,17 +1122,17 @@ document
<div class="slider" id="mySlider"> <div class="slider" id="mySlider">
<div class="slide-group"> <div class="slide-group">
<div class="slide"> <div class="slide">
<img src="{{ page.base_url }}docs-assets/img/slide-1.jpg"> <img src="../assets/img/slide-1.jpg">
<span class="slide-text"> <span class="slide-text">
<span class="icon icon-left-nav"></span> <span class="icon icon-left-nav"></span>
Slide me Slide me
</span> </span>
</div> </div>
<div class="slide"> <div class="slide">
<img src="{{ page.base_url }}docs-assets/img/slide-2.jpg"> <img src="../assets/img/slide-2.jpg">
</div> </div>
<div class="slide"> <div class="slide">
<img src="{{ page.base_url }}docs-assets/img/slide-3.jpg"> <img src="../assets/img/slide-3.jpg">
</div> </div>
</div> </div>
</div> </div>

2
docs/dist/android-theme.css vendored
Unescape View File

@ -4,7 +4,7 @@
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under http://www.opensource.org/licenses/MIT
* *
* Designed and built by @connors, @dhg, and @fat. * Designed by @connors.
* ===================================================== * =====================================================
*/ */

2
docs/dist/ios-theme.css vendored
Unescape View File

@ -4,7 +4,7 @@
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under http://www.opensource.org/licenses/MIT
* *
* Designed and built by @connors, @dhg, and @fat. * Designed by @connors.
* ===================================================== * =====================================================
*/ */

15
docs/dist/ratchet.css vendored
Unescape View File

@ -4,7 +4,7 @@
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under http://www.opensource.org/licenses/MIT
* *
* Designed and built by @connors, @dhg, and @fat. * Designed by @connors.
* ===================================================== * =====================================================
*/ */
@ -296,11 +296,6 @@ a:active {
padding-bottom: 94px; padding-bottom: 94px;
} }
.container {
padding-right: 15px;
padding-left: 15px;
}
.content-padded { .content-padded {
margin: 10px; margin: 10px;
} }
@ -313,6 +308,14 @@ a:active {
float: right; float: right;
} }
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;

4
docs/dist/ratchet.js vendored
Unescape View File

@ -4,7 +4,7 @@
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under http://www.opensource.org/licenses/MIT
* *
* Designed and built by @connors, @dhg, and @fat. * Designed by @connors.
* ===================================================== * =====================================================
*/ */
/* /*
@ -13,7 +13,7 @@
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under http://www.opensource.org/licenses/MIT
* *
* Designed and built by @connors, @dhg, and @fat. * Designed by @connors.
* ===================================================== * =====================================================
*/ */
/* ---------------------------------- /* ----------------------------------

7
sass/base.scss
Unescape View File

@ -79,10 +79,6 @@ a {
} }
// Utility classes // Utility classes
.container {
padding-right: 15px;
padding-left: 15px;
}
.content-padded { .content-padded {
margin: $bar-side-spacing; margin: $bar-side-spacing;
} }
@ -92,3 +88,6 @@ a {
.pull-right { .pull-right {
float: right; float: right;
} }
.clearfix {
@include clearfix();
}

68
sass/docs.scss
Unescape View File

@ -1,6 +1,8 @@
@import "variables.scss"; @import "variables.scss";
@import "mixins.scss"; @import "mixins.scss";
// Clearfix mixin for docs
// //
// Documentation // Documentation
// -------------------------------------------------- // --------------------------------------------------
@ -57,7 +59,6 @@ body {
// Masthead // Masthead
.docs-masthead { .docs-masthead {
position: relative; position: relative;
overflow: hidden;
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1);
@ -68,21 +69,49 @@ body {
margin-bottom: 0; margin-bottom: 0;
font-size: 22px; font-size: 22px;
font-weight: 100; font-weight: 100;
z-index: 20;
@include transform(translateX(-50%)); @include transform(translateX(-50%));
} }
.docs-nav { .docs-nav {
.docs-nav-trigger {
color: #fff;
cursor: pointer;
opacity: .7;
&.active {
opacity: 1;
}
}
.docs-nav-group {
position: absolute;
top: 40px;
left: 0;
right: 0;
z-index: 20;
overflow: hidden;
height: 0;
background-color: rgba(0,0,0,.95);
opacity: 0;
&.active {
height: auto;
opacity: 1;
}
}
.docs-nav-item { .docs-nav-item {
display: inline-block; display: block;
padding-left: 20px; padding: 20px 15px;
padding-right: 20px; font-weight: 100;
font-size: 22px;
} }
} }
.docs-title a, .docs-title a,
.docs-nav a { .docs-nav-item {
color: #fff; color: #fff;
@include transition(opacity .2s linear); @include transition(opacity .2s linear);
&:active { &:active,
&:focus {
color: #fff; color: #fff;
opacity: .5; opacity: .5;
} }
@ -185,6 +214,7 @@ body {
padding-top: 55px; // Visually centers the content. padding-top: 55px; // Visually centers the content.
padding-bottom: 65px; // Visually centers the content. padding-bottom: 65px; // Visually centers the content.
color: #fff; color: #fff;
text-align: center;
.page-title, .page-title,
.page-description { .page-description {
@ -584,7 +614,8 @@ hr {
@include transform(translateY(-50%) !important); @include transform(translateY(-50%) !important);
} }
.docs-sub-content { .docs-sub-content {
margin-right: 380px margin-right: 380px;
text-align: left;
} }
.docs-title { .docs-title {
position: static; position: static;
@ -605,6 +636,29 @@ hr {
line-height: 60px; line-height: 60px;
} }
// Docs nav
.docs-nav {
float: right;
margin-top: 3px;
margin-bottom: -3px;
.docs-nav-trigger {
display: none;
}
.docs-nav-group {
position: static;
display: block;
height: auto;
background-color: transparent;
opacity: 1;
}
.docs-nav-item {
display: inline-block;
padding: 0 15px;
font-size: 14px;
}
}
// Ads // Ads
.carbonad { .carbonad {
width: 330px !important; width: 330px !important;

24
sass/mixins.scss
Unescape View File

@ -6,6 +6,30 @@
// General // General
// -------------------------------------------------- // --------------------------------------------------
// Utilities
// -------------------------
// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
// contenteditable attribute is included anywhere else in the document.
// Otherwise it causes space to appear at the top and bottom of elements
// that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
// `:before` to contain the top-margins of child elements.
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Box shadow // Box shadow
@mixin box-shadow($shadow...) { @mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow; -webkit-box-shadow: $shadow;

Write Preview
Loading…
Cancel
Save