Permalink
Browse files

Rough Draft - Table of Contents Sidebar

Sidebar can be enabled for content. This sidebar at the moment contains
no actual data just the placeholder information.
  • Loading branch information...
1 parent dece547 commit a8f4428aeba2a239fa8bc465e62e2b424d65c524 @burtlo burtlo committed Sep 22, 2012
View
@@ -16,7 +16,7 @@ $indented-lists: false !default;
.group { @include pie-clearfix; }
-@mixin collapse-sidebar {
+@mixin collapse-sidebarn {
float: none;
width: auto;
clear: left;
@@ -39,6 +39,7 @@ $indented-lists: false !default;
body {
-webkit-text-size-adjust: none;
max-width: $max-width;
+ height: 100%;
position: relative;
margin: 0 auto;
> header, > nav, > footer, #content > article, #content > div > article, #content > div > section, nav.pagination {
@@ -67,7 +68,7 @@ body {
#content { > div, > article { width: 100%; }}
-aside.sidebar {
+aside.sidebarn {
float: none;
padding: 0 $pad-min 1px;
background-color: lighten($sidebar-bg, 2);
@@ -84,21 +85,21 @@ aside.sidebar {
&.left, &.right { margin-bottom: .8em; }
}
-.toggle-sidebar { &, .no-sidebar & { display: none; }}
+.toggle-sidebarn { &, .no-sidebar & { display: none; }}
-body.sidebar-footer {
+body.sidebarn-footer {
@media only screen and (min-width: 750px) {
- aside.sidebar{ @include collapse-sidebar; }
+ aside.sidebarn{ @include collapse-sidebarn; }
}
#content { margin-right: 0px; }
- .toggle-sidebar { display: none; }
+ .toggle-sidebarn { display: none; }
}
@media only screen and (min-width: 550px) {
body > header { font-size: 1em; }
}
@media only screen and (min-width: 750px) {
- aside.sidebar { @include collapse-sidebar; }
+ aside.sidebarn { @include collapse-sidebarn; }
}
@media only screen and (min-width: 768px) {
body { -webkit-text-size-adjust: auto; }
@@ -113,16 +114,16 @@ body.sidebar-footer {
margin-right: $sidebar-width-medium;
position: relative;
.no-sidebar & { margin-right: 0; border-right: 0; }
- .collapse-sidebar & { margin-right: 20px; }
+ .collapse-sidebarn & { margin-right: 20px; }
> div, > article {
padding-top: $pad-medium/2;
padding-bottom: $pad-medium/2;
float: left;
}
}
- aside.sidebar {
+ aside.sidebarn {
@extend .group;
- width: $sidebar-width-medium - $sidebar-pad-medium*2;
+ width: $sidebar-width-medium - $sidebar-pad-medium*2 - 5;
padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
background: none;
clear: none;
@@ -132,8 +133,8 @@ body.sidebar-footer {
width: auto; margin-left: 0;
&.odd, &.even { float: none; width: auto; margin-left: 0; }
}
- .collapse-sidebar & {
- @include collapse-sidebar;
+ .collapse-sidebarn & {
+ @include collapse-sidebarn;
}
}
}
@@ -147,10 +148,10 @@ body.sidebar-footer {
padding-bottom: $pad-wide/2;
}
}
- aside.sidebar {
- width: $sidebar-width-wide - $sidebar-pad-wide*2;
+ aside.sidebarn {
+ width: $sidebar-width-wide - $sidebar-pad-wide*2 - 61;
padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
- .collapse-sidebar & {
+ .collapse-sidebarn & {
padding: { left: $pad-wide; right: $pad-wide; }
@extend .group;
}
View
@@ -8,7 +8,7 @@ $link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -4) !defaul
$link-color-active: adjust-color($link-color-hover, $lightness: -15) !default;
// Main Section Colors
-$main-bg: #f8f8f8 !default;
+$main-bg: #f2f2f2 !default;
$page-bg: #252525 !default;
$article-border: #eeeeee !default;
@@ -60,7 +60,7 @@ $page-border-bottom: darken($footer-bg, 5) !default;
a {
@include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
}
-aside.sidebar a {
+aside.sidebarn a {
@include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active);
}
a {
View
@@ -1,7 +1,7 @@
// Here you can easily change your sites's layout.
// To give it a try, uncomment some of the lines below, make changes, rebuild your blog, and see how it works.
-$max-width: 900000px;
+$max-width: 1200px;
$link-color: #3a8d34;
$link-color-visited: darken($link-color, 20);
$link-color-hover: lighten($link-color, 10);
View
@@ -3,7 +3,7 @@
//ul, ol { &, ul, ol { margin-left: 3em; }}
$max-w: 920px;
-#main, { max-width: $max-w; }
+main { max-width: $max-w; margin: 0 auto; }
body > footer,
body > nav ul.main-navigation {
margin: 0 auto !important;
@@ -28,7 +28,6 @@ html { background: $noise-bg $main-bg; }
body > nav {
padding: 0 !important;
ul.main-navigation {
- float: none !important;
display: block;
padding: {top: .4em; bottom: .4em;}
a {
@@ -67,11 +66,19 @@ body > nav .subscription,
body > nav form,
figure.code figcaption,
aside.sidebar,
-.toggle-sidebar,
+.toggle-sidebar,
{
display: none;
}
-#content { border: none; margin: 0;}
+
+#content {
+ border: none;
+ overflow: visible;
+ margin: 0;
+}
+
+#main #content article { background: #F8F8F8 url('/images/noise.png') top left; }
+#content > div { padding: 0; }
@media only print {
//.heading, .serif { font-family: "Baskerville"; }
@@ -197,14 +204,15 @@ div.section {
}
div.section div.prime {
- width: 150px;
+ width: 200px;
float: left;
line-height: 40px;
}
div.section div.second {
- width: 600px;
- float: right;
+ min-width: 500px;
+ width: 60%;
+ float: left;
}
@media only screen and (max-device-width: 480px) {
@@ -219,3 +227,5 @@ div.section div.second {
}
}
+aside div { margin-left: 20px; margin-top: 30px; }
+aside div.fixed { position: fixed; }
@@ -1,7 +1,9 @@
.side-shadow-border {
@include box-shadow(lighten($sidebar-bg, 5) 0 1px);
}
-aside.sidebar {
+aside.sidebarn {
+ overflow: hidden;
+
color: $sidebar-color;
text-shadow: lighten($sidebar-bg, 8) 0 1px;
a { @extend .force-wrap; }
@@ -56,9 +58,9 @@ aside.sidebar {
}
@media only screen and (min-width: 768px) {
- .toggle-sidebar {
+ .toggle-sidebarn {
outline: none;
- position: absolute; right: -10px; top: 0; bottom: 0;
+ position: absolute; right: -11px; top: 0; bottom: 0;
display: inline-block;
text-decoration: none;
color: mix($text-color-light, $sidebar-bg);
@@ -82,9 +84,9 @@ aside.sidebar {
content: "\00BB";
text-indent: -1px;
}
- .collapse-sidebar & {
+ .collapse-sidebarn & {
text-indent: 0px;
- right: -20px;
+ right: -19px;
width: 19px;
&:hover {
background: mix($sidebar-border, $sidebar-bg);
@@ -0,0 +1,11 @@
+<span class="toggle-sidebarn"></span>
+
+<aside class="sidebarn">
+ <div>
+ <section>
+ <h2>To be populated</h2>
+ </section>
+ </div>
+</aside>
+
+<script src="{{ root_url }}/javascripts/sidebar.js" type="text/javascript"> </script>
View
@@ -3,43 +3,39 @@
---
<div>
-<article role="article">
- {% if page.title %}
- <header>
- {% if page.section %}
- <h2 class="section-title">{{ page.section }}</h2>
+ <article role="article">
+ {% if page.title %}
+ <header>
+ {% if page.section %}
+ <h2 class="section-title">{{ page.section }}</h2>
+ {% endif %}
+ <h1 class="entry-title">{{ page.title }}</h1>
+ {% if page.date %}<p class="meta">{% include post/date.html %}{{ time }}</p>{% endif %}
+ </header>
{% endif %}
- <h1 class="entry-title">{{ page.title }}</h1>
- {% if page.date %}<p class="meta">{% include post/date.html %}{{ time }}</p>{% endif %}
- </header>
- {% endif %}
- {{ content }}
- {% unless page.footer == false %}
- <footer>
- {% if page.date or page.author %}<p class="meta">
- {% if page.author %}{% include post/author.html %}{% endif %}
- {% include post/date.html %}{% if updated %}{{ updated }}{% else %}{{ time }}{% endif %}
- {% if page.categories %}{% include post/categories.html %}{% endif %}
- </p>{% endif %}
- {% unless page.sharing == false %}
- {% include post/sharing.html %}
- {% endunless %}
- </footer>
- {% endunless %}
-</article>
+ {{ content }}
+ {% unless page.footer == false %}
+ <footer>
+ {% if page.date or page.author %}<p class="meta">
+ {% if page.author %}{% include post/author.html %}{% endif %}
+ {% include post/date.html %}{% if updated %}{{ updated }}{% else %}{{ time }}{% endif %}
+ {% if page.categories %}{% include post/categories.html %}{% endif %}
+ </p>{% endif %}
+ {% unless page.sharing == false %}
+ {% include post/sharing.html %}
+ {% endunless %}
+ </footer>
+ {% endunless %}
+ </article>
{% if site.disqus_short_name and page.comments == true %}
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite">{% include post/disqus_thread.html %}</div>
</section>
{% endif %}
+
</div>
-{% unless page.sidebar == false %}
-<aside class="sidebar">
- {% if site.page_asides.size %}
- {% include_array page_asides %}
- {% else %}
- {% include_array default_asides %}
- {% endif %}
-</aside>
-{% endunless %}
+
+{% if page.sidebar %}
+ {% include asides/sidebar.html %}
+{% endif %}
@@ -0,0 +1,70 @@
+$(function() {
+
+ var JSLSidebar = function() {
+
+ $("#content").css('margin-right','240px');
+ $("#content div:first").css('border-right','1px solid #E0E0E0');
+
+ function _addToggler() {
+ $('.toggle-sidebarn').bind('click', function(e) {
+ e.preventDefault();
+ if ($('body').hasClass('collapse-sidebarn')) {
+ $("#content").css('margin-right','240px');
+ $('body').removeClass('collapse-sidebarn');
+
+ } else {
+ $("#content").css('margin-right','20px');
+ $('body').addClass('collapse-sidebarn');
+ }
+ });
+
+ var sections = $('aside.sidebarn > section');
+ if (sections.length > 1) {
+ sections.each(function(section, index){
+ if ((sections.length >= 3) && index % 3 === 0) {
+ $(section).addClass("first");
+ }
+ var count = ((index +1) % 2) ? "odd" : "even";
+ $(section).addClass(count);
+ });
+ }
+ if (sections.length >= 3){ $('aside.sidebarn').addClass('thirds'); }
+ }
+
+ function _followingContent() {
+
+ var topSection = $("aside.sidebarn div:first");
+
+ var topPosition = topSection.offset().top - parseFloat(topSection.css('margin-top').replace(/auto/, 0));
+
+ $(window).scroll(function(event) {
+ var y = $(this).scrollTop();
+
+ if (y >= topPosition) {
+ topSection.addClass('fixed');
+
+ if (topSection.height() > $(this).height()) {
+ var contentDifference = $(this).height() - topSection.height() + (y - topPosition)
+ if (contentDifference > 40) { contentDifference = 20; }
+
+ topSection.css('bottom',contentDifference)
+ } else {
+ topSection.css('top','20')
+ }
+
+ } else {
+ topSection.removeClass('fixed')
+ }
+
+ });
+
+ }
+
+ _addToggler();
+ _followingContent();
+
+ }
+
+ var sidebar = new JSLSidebar();
+
+})
@@ -1,6 +1,7 @@
---
layout: page
title: Object Oriented Javascript
+sidebar: true
---
So far, our charting library has been very functionally organised. We have top level functions on the main area of the page, and they all reference each other in a disorganized way. In this chapter, we're going to revisit our core functions and organize them into object-oriented classes.

0 comments on commit a8f4428

Please sign in to comment.