added ability to collapse layout
This commit is contained in:
parent
0b744bae5e
commit
a55a551566
@ -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');
|
||||
}
|
@ -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
|
||||
|
@ -1,3 +1,4 @@
|
||||
@import partials/shared.sass
|
||||
@import partials/blog.sass
|
||||
@import partials/syntax.sass
|
||||
@import partials/search.sass
|
||||
|
13
stylesheets/partials/_shared.sass
Normal file
13
stylesheets/partials/_shared.sass
Normal 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
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user