mirror of
https://github.com/moparisthebest/android.moparisthebest.org
synced 2024-12-25 00:48:53 -05:00
added ability to collapse layout
This commit is contained in:
parent
0b744bae5e
commit
a55a551566
@ -1,14 +1,13 @@
|
|||||||
window.addEvent('domready', function() {
|
window.addEvent('domready', function() {
|
||||||
$$('div.highlight').each(addExpander);
|
codeblocks = $$('div.highlight');
|
||||||
|
codeblocks.each(addExpander);
|
||||||
|
enableCompressedLayout(codeblocks);
|
||||||
});
|
});
|
||||||
|
|
||||||
function addExpander(div){
|
function addExpander(div){
|
||||||
new Element('span',{
|
new Element('span',{
|
||||||
html: 'expand »',
|
html: 'expand »',
|
||||||
'class': 'pre_expander',
|
'class': 'pre_expander',
|
||||||
'styles': {
|
|
||||||
'display': 'block'
|
|
||||||
},
|
|
||||||
'events': {
|
'events': {
|
||||||
'click': function(){
|
'click': function(){
|
||||||
toggleExpander();
|
toggleExpander();
|
||||||
@ -18,12 +17,26 @@ function addExpander(div){
|
|||||||
}
|
}
|
||||||
function toggleExpander(){
|
function toggleExpander(){
|
||||||
var html = '';
|
var html = '';
|
||||||
if($('main').toggleClass('expanded').hasClass('expanded')){
|
if($('main').toggleClass('expanded').hasClass('expanded'))
|
||||||
html = '« contract';
|
html = '« contract';
|
||||||
} else {
|
else
|
||||||
html = 'expand »';
|
html = 'expand »';
|
||||||
}
|
|
||||||
$$('div.highlight span.pre_expander').each(function(span){
|
$$('div.highlight span.pre_expander').each(function(span){
|
||||||
span.set('html',html);
|
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
|
#page
|
||||||
+clearfix
|
+clearfix
|
||||||
background-color= !page_bg
|
background-color= !page_bg
|
||||||
|
&.collapsed
|
||||||
|
.page_width
|
||||||
|
width= !page_width - !sidebar_width
|
||||||
|
#main
|
||||||
|
width: 100%
|
||||||
|
.pre_expander
|
||||||
|
display: none
|
||||||
|
#sidebar
|
||||||
|
float: none
|
||||||
.page_width
|
.page_width
|
||||||
+clearfix
|
+clearfix
|
||||||
|
position: relative
|
||||||
padding:
|
padding:
|
||||||
top: 25px
|
top: 25px
|
||||||
bottom: 25px
|
bottom: 25px
|
||||||
@ -91,6 +101,20 @@ html body
|
|||||||
&.expanded
|
&.expanded
|
||||||
width: 100%
|
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
|
#footer
|
||||||
position: relative
|
position: relative
|
||||||
z-index: 2
|
z-index: 2
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
@import partials/shared.sass
|
||||||
@import partials/blog.sass
|
@import partials/blog.sass
|
||||||
@import partials/syntax.sass
|
@import partials/syntax.sass
|
||||||
@import partials/search.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
|
#twitter, #delicious
|
||||||
+border-radius
|
+border-radius
|
||||||
background: #f8f8f8
|
background: #f8f8f8
|
||||||
|
Loading…
Reference in New Issue
Block a user