Browse code
added ability to collapse layout
B Mathis authored on 12/11/2009 at 17:57:01Showing 5 changed files
- source/javascripts/octopress.js
- stylesheets/_layout.sass
- stylesheets/_partials.sass
- stylesheets/partials/_shared.sass
- stylesheets/partials/_sidebar.sass
| ... | ... |
@@ -1,14 +1,13 @@ |
| 1 | 1 |
window.addEvent('domready', function() {
|
| 2 |
- $$('div.highlight').each(addExpander);
|
|
| 2 |
+ codeblocks = $$('div.highlight');
|
|
| 3 |
+ codeblocks.each(addExpander); |
|
| 4 |
+ enableCompressedLayout(codeblocks); |
|
| 3 | 5 |
}); |
| 4 | 6 |
|
| 5 | 7 |
function addExpander(div){
|
| 6 | 8 |
new Element('span',{
|
| 7 | 9 |
html: 'expand »', |
| 8 | 10 |
'class': 'pre_expander', |
| 9 |
- 'styles': {
|
|
| 10 |
- 'display': 'block' |
|
| 11 |
- }, |
|
| 12 | 11 |
'events': {
|
| 13 | 12 |
'click': function(){
|
| 14 | 13 |
toggleExpander(); |
| ... | ... |
@@ -18,12 +17,26 @@ function addExpander(div){
|
| 18 | 18 |
} |
| 19 | 19 |
function toggleExpander(){
|
| 20 | 20 |
var html = ''; |
| 21 |
- if($('main').toggleClass('expanded').hasClass('expanded')){
|
|
| 21 |
+ if($('main').toggleClass('expanded').hasClass('expanded'))
|
|
| 22 | 22 |
html = '« contract'; |
| 23 |
- } else {
|
|
| 23 |
+ else |
|
| 24 | 24 |
html = 'expand »'; |
| 25 |
- } |
|
| 26 | 25 |
$$('div.highlight span.pre_expander').each(function(span){
|
| 27 | 26 |
span.set('html',html);
|
| 28 | 27 |
}); |
| 28 |
+} |
|
| 29 |
+function enableCompressedLayout(codeblocks){
|
|
| 30 |
+ if(!codeblocks.length) return; |
|
| 31 |
+ new Element('span',{
|
|
| 32 |
+ html: 'Collapse layout', |
|
| 33 |
+ 'id': 'collapser', |
|
| 34 |
+ 'events': {
|
|
| 35 |
+ 'click': function(){
|
|
| 36 |
+ if($('page').toggleClass('collapsed').hasClass('collapsed'))
|
|
| 37 |
+ this.set('html','Expand layout');
|
|
| 38 |
+ else |
|
| 39 |
+ this.set('html','Collapse layout');
|
|
| 40 |
+ } |
|
| 41 |
+ } |
|
| 42 |
+ }).inject($('main'), 'top');
|
|
| 29 | 43 |
} |
| 30 | 44 |
\ No newline at end of file |
| ... | ... |
@@ -75,8 +75,18 @@ html body |
| 75 | 75 |
#page |
| 76 | 76 |
+clearfix |
| 77 | 77 |
background-color= !page_bg |
| 78 |
+ &.collapsed |
|
| 79 |
+ .page_width |
|
| 80 |
+ width= !page_width - !sidebar_width |
|
| 81 |
+ #main |
|
| 82 |
+ width: 100% |
|
| 83 |
+ .pre_expander |
|
| 84 |
+ display: none |
|
| 85 |
+ #sidebar |
|
| 86 |
+ float: none |
|
| 78 | 87 |
.page_width |
| 79 | 88 |
+clearfix |
| 89 |
+ position: relative |
|
| 80 | 90 |
padding: |
| 81 | 91 |
top: 25px |
| 82 | 92 |
bottom: 25px |
| ... | ... |
@@ -91,6 +101,20 @@ html body |
| 91 | 91 |
&.expanded |
| 92 | 92 |
width: 100% |
| 93 | 93 |
|
| 94 |
+#sidebar |
|
| 95 |
+ float: left |
|
| 96 |
+ width= !sidebar_width |
|
| 97 |
+ margin-left= !sidebar_margin |
|
| 98 |
+ font-size: 80% |
|
| 99 |
+ line-height: 1.625em |
|
| 100 |
+ h4 |
|
| 101 |
+ margin: 20px 0 0 |
|
| 102 |
+ &:first-child |
|
| 103 |
+ margin-top: 10px |
|
| 104 |
+ .small |
|
| 105 |
+ +sans-font |
|
| 106 |
+ font-size: 50% |
|
| 107 |
+ |
|
| 94 | 108 |
#footer |
| 95 | 109 |
position: relative |
| 96 | 110 |
z-index: 2 |
| 4 | 5 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,13 @@ |
| 0 |
+#collapser |
|
| 1 |
+ +sans-font |
|
| 2 |
+ display: block |
|
| 3 |
+ cursor: pointer |
|
| 4 |
+ background: #f8f8f8 |
|
| 5 |
+ color: #888 |
|
| 6 |
+ padding: 5px 10px |
|
| 7 |
+ font-size: 10px |
|
| 8 |
+ line-height: 150% |
|
| 9 |
+ cursor: pointer |
|
| 10 |
+ position: absolute |
|
| 11 |
+ top: 0 |
|
| 12 |
+ right: 0 |
|
| 0 | 13 |
\ No newline at end of file |
| ... | ... |
@@ -1,18 +1,3 @@ |
| 1 |
-#sidebar |
|
| 2 |
- float: left |
|
| 3 |
- width= !sidebar_width |
|
| 4 |
- margin-left= !sidebar_margin |
|
| 5 |
- |
|
| 6 |
- h4 |
|
| 7 |
- margin: 20px 0 0 |
|
| 8 |
- &:first-child |
|
| 9 |
- margin-top: 10px |
|
| 10 |
- .small |
|
| 11 |
- +sans-font |
|
| 12 |
- font-size: 50% |
|
| 13 |
- font-size: 80% |
|
| 14 |
- line-height: 1.625em |
|
| 15 |
- |
|
| 16 | 1 |
#twitter, #delicious |
| 17 | 2 |
+border-radius |
| 18 | 3 |
background: #f8f8f8 |