sidebar
This commit is contained in:
captainill
parent
434397381d
commit
2c2cb837b4
|
|
@ -23,7 +23,7 @@ use Rack::Deflater
|
|||
# to do.
|
||||
use Rack::StaticCache,
|
||||
:root => "build",
|
||||
:urls => ["/assets"],
|
||||
:urls => ["/assets", "/javascripts"],
|
||||
:duration => 2,
|
||||
:versioning => false
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
(function(){
|
||||
|
||||
// Quick and dirty IE detection
|
||||
var isIE = (function(){
|
||||
if (window.navigator.userAgent.match('Trident')) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})();
|
||||
|
||||
// isIE = true;
|
||||
|
||||
var Init = {
|
||||
|
||||
start: function(){
|
||||
var id = document.body.id.toLowerCase();
|
||||
|
||||
if (this.Pages[id]) {
|
||||
this.Pages[id]();
|
||||
}
|
||||
//always init sidebar
|
||||
Init.initializeSidebar();
|
||||
},
|
||||
|
||||
initializeSidebar: function(){
|
||||
new Sidebar();
|
||||
},
|
||||
|
||||
Pages: {}
|
||||
|
||||
};
|
||||
|
||||
Init.start();
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
(function(){
|
||||
|
||||
Sidebar = Base.extend({
|
||||
|
||||
$body: null,
|
||||
$overlay: null,
|
||||
$sidebar: null,
|
||||
$sidebarHeader: null,
|
||||
$sidebarImg: null,
|
||||
$toggleButton: null,
|
||||
|
||||
constructor: function(){
|
||||
this.$body = $('body');
|
||||
this.$overlay = $('.sidebar-overlay');
|
||||
this.$sidebar = $('#sidebar');
|
||||
this.$sidebarHeader = $('#sidebar .sidebar-header');
|
||||
this.$toggleButton = $('.navbar-toggle');
|
||||
this.sidebarImg = this.$sidebarHeader.css('background-image');
|
||||
|
||||
this.addEventListeners();
|
||||
},
|
||||
|
||||
addEventListeners: function(){
|
||||
var _this = this;
|
||||
|
||||
_this.$toggleButton.on('click', function() {
|
||||
_this.$sidebar.toggleClass('open');
|
||||
if ((_this.$sidebar.hasClass('sidebar-fixed-left') || _this.$sidebar.hasClass('sidebar-fixed-right')) && _this.$sidebar.hasClass('open')) {
|
||||
_this.$overlay.addClass('active');
|
||||
_this.$body.css('overflow', 'hidden');
|
||||
} else {
|
||||
_this.$overlay.removeClass('active');
|
||||
_this.$body.css('overflow', 'auto');
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
_this.$overlay.on('click', function() {
|
||||
$(this).removeClass('active');
|
||||
_this.$body.css('overflow', 'auto');
|
||||
_this.$sidebar.removeClass('open');
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
window.Sidebar = Sidebar;
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
//= require jquery
|
||||
|
||||
//= require lib/Base
|
||||
|
||||
//= require docs
|
||||
//= require app/Sidebar
|
||||
////= require app/Init
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function(){
|
||||
|
||||
var Init = {
|
||||
|
||||
start: function(){
|
||||
var classname = this.hasClass(document.body, 'page-sub');
|
||||
|
||||
if (classname) {
|
||||
this.addEventListeners();
|
||||
}
|
||||
},
|
||||
|
||||
hasClass: function (elem, className) {
|
||||
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
|
||||
},
|
||||
|
||||
addEventListeners: function(){
|
||||
var _this = this;
|
||||
//console.log(document.querySelectorAll('.navbar-static-top')[0]);
|
||||
window.addEventListener('resize', _this.resizeImage, false);
|
||||
|
||||
this.resizeImage();
|
||||
},
|
||||
|
||||
resizeImage: function(){
|
||||
|
||||
var header = document.getElementById('header'),
|
||||
footer = document.getElementById('footer'),
|
||||
main = document.getElementById('main-content'),
|
||||
vp = window.innerHeight,
|
||||
bodyHeight = document.body.clientHeight,
|
||||
hHeight = header.clientHeight,
|
||||
fHeight = footer.clientHeight,
|
||||
withMinHeight = hHeight + fHeight + 830;
|
||||
|
||||
if(withMinHeight < vp && bodyHeight < vp){
|
||||
var newHeight = (vp - (hHeight+fHeight)) + 'px';
|
||||
main.style.height = newHeight;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Init.start();
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
/*
|
||||
Based on Base.js 1.1a (c) 2006-2010, Dean Edwards
|
||||
Updated to pass JSHint and converted into a module by Kenneth Powers
|
||||
License: http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
/*global define:true module:true*/
|
||||
/*jshint eqeqeq:true*/
|
||||
(function (name, global, definition) {
|
||||
if (typeof module !== 'undefined') {
|
||||
module.exports = definition();
|
||||
} else if (typeof define !== 'undefined' && typeof define.amd === 'object') {
|
||||
define(definition);
|
||||
} else {
|
||||
global[name] = definition();
|
||||
}
|
||||
})('Base', this, function () {
|
||||
// Base Object
|
||||
var Base = function () {};
|
||||
|
||||
// Implementation
|
||||
Base.extend = function (_instance, _static) { // subclass
|
||||
var extend = Base.prototype.extend;
|
||||
// build the prototype
|
||||
Base._prototyping = true;
|
||||
var proto = new this();
|
||||
extend.call(proto, _instance);
|
||||
proto.base = function () {
|
||||
// call this method from any other method to invoke that method's ancestor
|
||||
};
|
||||
delete Base._prototyping;
|
||||
// create the wrapper for the constructor function
|
||||
//var constructor = proto.constructor.valueOf(); //-dean
|
||||
var constructor = proto.constructor;
|
||||
var klass = proto.constructor = function () {
|
||||
if (!Base._prototyping) {
|
||||
if (this._constructing || this.constructor === klass) { // instantiation
|
||||
this._constructing = true;
|
||||
constructor.apply(this, arguments);
|
||||
delete this._constructing;
|
||||
} else if (arguments[0] !== null) { // casting
|
||||
return (arguments[0].extend || extend).call(arguments[0], proto);
|
||||
}
|
||||
}
|
||||
};
|
||||
// build the class interface
|
||||
klass.ancestor = this;
|
||||
klass.extend = this.extend;
|
||||
klass.forEach = this.forEach;
|
||||
klass.implement = this.implement;
|
||||
klass.prototype = proto;
|
||||
klass.toString = this.toString;
|
||||
klass.valueOf = function (type) {
|
||||
return (type === 'object') ? klass : constructor.valueOf();
|
||||
};
|
||||
extend.call(klass, _static);
|
||||
// class initialization
|
||||
if (typeof klass.init === 'function') klass.init();
|
||||
return klass;
|
||||
};
|
||||
|
||||
Base.prototype = {
|
||||
extend: function (source, value) {
|
||||
if (arguments.length > 1) { // extending with a name/value pair
|
||||
var ancestor = this[source];
|
||||
if (ancestor && (typeof value === 'function') && // overriding a method?
|
||||
// the valueOf() comparison is to avoid circular references
|
||||
(!ancestor.valueOf || ancestor.valueOf() !== value.valueOf()) && /\bbase\b/.test(value)) {
|
||||
// get the underlying method
|
||||
var method = value.valueOf();
|
||||
// override
|
||||
value = function () {
|
||||
var previous = this.base || Base.prototype.base;
|
||||
this.base = ancestor;
|
||||
var returnValue = method.apply(this, arguments);
|
||||
this.base = previous;
|
||||
return returnValue;
|
||||
};
|
||||
// point to the underlying method
|
||||
value.valueOf = function (type) {
|
||||
return (type === 'object') ? value : method;
|
||||
};
|
||||
value.toString = Base.toString;
|
||||
}
|
||||
this[source] = value;
|
||||
} else if (source) { // extending with an object literal
|
||||
var extend = Base.prototype.extend;
|
||||
// if this object has a customized extend method then use it
|
||||
if (!Base._prototyping && typeof this !== 'function') {
|
||||
extend = this.extend || extend;
|
||||
}
|
||||
var proto = {
|
||||
toSource: null
|
||||
};
|
||||
// do the "toString" and other methods manually
|
||||
var hidden = ['constructor', 'toString', 'valueOf'];
|
||||
// if we are prototyping then include the constructor
|
||||
for (var i = Base._prototyping ? 0 : 1; i < hidden.length; i++) {
|
||||
var h = hidden[i];
|
||||
if (source[h] !== proto[h])
|
||||
extend.call(this, h, source[h]);
|
||||
}
|
||||
// copy each of the source object's properties to this object
|
||||
for (var key in source) {
|
||||
if (!proto[key]) extend.call(this, key, source[key]);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
// initialize
|
||||
Base = Base.extend({
|
||||
constructor: function () {
|
||||
this.extend(arguments[0]);
|
||||
}
|
||||
}, {
|
||||
ancestor: Object,
|
||||
version: '1.1',
|
||||
forEach: function (object, block, context) {
|
||||
for (var key in object) {
|
||||
if (this.prototype[key] === undefined) {
|
||||
block.call(context, object[key], key, object);
|
||||
}
|
||||
}
|
||||
},
|
||||
implement: function () {
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
if (typeof arguments[i] === 'function') {
|
||||
// if it's a function, call it
|
||||
arguments[i](this.prototype);
|
||||
} else {
|
||||
// add the interface using the extend method
|
||||
this.prototype.extend(arguments[i]);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
toString: function () {
|
||||
return String(this.valueOf());
|
||||
}
|
||||
});
|
||||
|
||||
// Return Base implementation
|
||||
return Base;
|
||||
});
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
#sidebar,
|
||||
#sidebar-docs,
|
||||
.docs-body{
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
@media (max-width: 992px) {
|
||||
#main-content{
|
||||
#sidebar{
|
||||
#sidebar-docs{
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
|
|
@ -20,13 +20,13 @@
|
|||
#main-content{
|
||||
flex-direction: column;
|
||||
|
||||
#sidebar,
|
||||
#sidebar-docs,
|
||||
.docs-body{
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
#sidebar{
|
||||
#sidebar-docs{
|
||||
li {
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
body{
|
||||
&.page-Community{
|
||||
.edit-page-link{
|
||||
position: absolute;
|
||||
top: -70px;
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-page-link{
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#sidebar {
|
||||
#sidebar-docs {
|
||||
min-height: 100%;
|
||||
max-width: 420px;
|
||||
$border: 1px solid $gray-dark;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ $project-logo-pad-left: 8px;
|
|||
// Mixins
|
||||
@mixin project-a-style{
|
||||
color: $green;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
|
||||
&:hover{
|
||||
|
|
@ -21,7 +21,7 @@ $project-logo-pad-left: 8px;
|
|||
|
||||
@mixin project-footer-a-style{
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover{
|
||||
color: $green;
|
||||
|
|
@ -34,7 +34,7 @@ $project-logo-pad-left: 8px;
|
|||
|
||||
@mixin project-footer-a-subpage-style{
|
||||
color: $white;
|
||||
font-weight: 300;
|
||||
font-weight: 400;
|
||||
|
||||
svg path{
|
||||
fill: $white;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<!-- Overlay for fixed sidebar -->
|
||||
<div class="sidebar-overlay"></div>
|
||||
|
||||
<!-- Material sidebar -->
|
||||
<aside id="sidebar" class="sidebar sidebar-default sidebar-fixed-right" role="navigation">
|
||||
<!-- Sidebar header -->
|
||||
<div class="sidebar-header header-cover">
|
||||
<!-- Sidebar brand image -->
|
||||
<div class="sidebar-image">
|
||||
<img src="<%= image_path('logo-header@2x.png') %>" width="24px" height="34px">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<ul class="main nav sidebar-nav">
|
||||
<li class="first"><a href="/intro">Intro</a></li>
|
||||
<li><a href="/docs">Docs</a></li>
|
||||
<li><a href="/community">Community</a></li>
|
||||
</ul>
|
||||
<div class="divider"></div>
|
||||
<!-- Sidebar navigation 2-->
|
||||
<ul class="external nav sidebar-nav">
|
||||
<li class="first"><a class="v-btn gray sml" href="/downloads.html"><%= partial "layouts/svg/svg-download" %>Download</a></li>
|
||||
<li class=""><a class="v-btn gray sml" href="https://github.com/mitchellh/packer"><%= partial "layouts/svg/svg-github" %>GitHub</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<% wrap_layout :layout do %>
|
||||
<div id="main-content" class="docs-wrapper">
|
||||
<div id="sidebar" class="col-sm-3 col-md-3">
|
||||
<div id="sidebar-docs" class="col-sm-3 col-md-3">
|
||||
<%= yield_content :sidebar %>
|
||||
</div>
|
||||
<div class="docs-body col-sm-9 col-md-9">
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%= partial "layouts/sidebar" %>
|
||||
|
||||
<%= yield %>
|
||||
<div class="clearfix"></div>
|
||||
|
|
@ -73,9 +74,9 @@
|
|||
<% end %>
|
||||
<div class="footer-links clearfix">
|
||||
<ul class="main-links white nav navbar-nav">
|
||||
<li><a href="/intro/index.html">Intro</a></li>
|
||||
<li><a href="/docs/index.html">Docs</a></li>
|
||||
<li><a href="/community.html">Community</a></li>
|
||||
<li><a href="/intro">Intro</a></li>
|
||||
<li><a href="/docs">Docs</a></li>
|
||||
<li><a href="/community">Community</a></li>
|
||||
</ul>
|
||||
<ul class="external-links white nav navbar-nav">
|
||||
<li class="first download">
|
||||
|
|
@ -101,6 +102,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<%= javascript_include_tag "application" %>
|
||||
<%= partial "layouts/google-analytics.html" %>
|
||||
<%= partial "layouts/adroll.html" %>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue