added ability to collapse layout

This commit is contained in:
B Mathis 2009-11-12 11:57:01 -06:00
parent 0b744bae5e
commit a55a551566
5 changed files with 58 additions and 22 deletions

View File

@ -1,14 +1,13 @@
window.addEvent('domready', function() {
$$('div.highlight').each(addExpander);
codeblocks = $$('div.highlight');
codeblocks.each(addExpander);
enableCompressedLayout(codeblocks);
});
function addExpander(div){
new Element('span',{
html: 'expand »',
'class': 'pre_expander',
'styles': {
'display': 'block'
},
'events': {
'click': function(){
toggleExpander();
@ -18,12 +17,26 @@ function addExpander(div){
}
function toggleExpander(){
var html = '';
if($('main').toggleClass('expanded').hasClass('expanded')){
if($('main').toggleClass('expanded').hasClass('expanded'))
html = '« contract';
} else {
else
html = 'expand »';
}
$$('div.highlight span.pre_expander').each(function(span){
span.set('html',html);
});
}
function enableCompressedLayout(codeblocks){
if(!codeblocks.length) return;
new Element('span',{
html: 'Collapse layout',
'id': 'collapser',
'events': {
'click': function(){
if($('page').toggleClass('collapsed').hasClass('collapsed'))
this.set('html','Expand layout');
else
this.set('html','Collapse layout');
}
}
}).inject($('main'), 'top');
}

View File

@ -75,8 +75,18 @@ html body
#page
+clearfix
background-color= !page_bg
&.collapsed
.page_width
width= !page_width - !sidebar_width
#main
width: 100%
.pre_expander
display: none
#sidebar
float: none
.page_width
+clearfix
position: relative
padding:
top: 25px
bottom: 25px
@ -91,6 +101,20 @@ html body
&.expanded
width: 100%
#sidebar
float: left
width= !sidebar_width
margin-left= !sidebar_margin
font-size: 80%
line-height: 1.625em
h4
margin: 20px 0 0
&:first-child
margin-top: 10px
.small
+sans-font
font-size: 50%
#footer
position: relative
z-index: 2

View File

@ -1,3 +1,4 @@
@import partials/shared.sass
@import partials/blog.sass
@import partials/syntax.sass
@import partials/search.sass

View File

@ -0,0 +1,13 @@
#collapser
+sans-font
display: block
cursor: pointer
background: #f8f8f8
color: #888
padding: 5px 10px
font-size: 10px
line-height: 150%
cursor: pointer
position: absolute
top: 0
right: 0

View File

@ -1,18 +1,3 @@
#sidebar
float: left
width= !sidebar_width
margin-left= !sidebar_margin
h4
margin: 20px 0 0
&:first-child
margin-top: 10px
.small
+sans-font
font-size: 50%
font-size: 80%
line-height: 1.625em
#twitter, #delicious
+border-radius
background: #f8f8f8