Merge pull request #117 from Gautham/Dev

Add Support for Hiding or inlining Code Blocks at UI level.
This commit is contained in:
Denis Kisselev 2014-02-14 02:20:24 -08:00
commit 504e4f472c
10 changed files with 118 additions and 2 deletions

View File

@ -133,13 +133,21 @@ To create a custom color scheme, set the `theme` property to `custom` and then d
``` ```
###Code Floating: ###Code Floating:
By deafult your code blocks will be floated to a column on the right side of your content. To disable this feature, set the `float` property to `false`. By default your code blocks will be floated to a column on the right side of your content. To disable this feature, set the `float` property to `false`.
```json ```json
{ {
"float": false "float": false
} }
``` ```
###Toggling Code Blocks
Some users might wish to hide the code blocks & view just the documentation. By setting the `toggle_code` property to `true`, you can offer a toggle button on the page.
```json
{
"toggle_code": true
}
```
###GitHub Repo: ###GitHub Repo:

View File

@ -816,6 +816,7 @@ code {
} }
pre { pre {
display: block; display: block;
overflow: hidden;
padding: 9.5px; padding: 9.5px;
margin: 0 0 10px; margin: 0 0 10px;
font-size: 13px; font-size: 13px;
@ -6476,6 +6477,7 @@ body {
.columns .left-column { .columns .left-column {
background-color: #f7f7f7; background-color: #f7f7f7;
border-right: 1px solid #e7e7e9; border-right: 1px solid #e7e7e9;
overflow-x: hidden;
} }
.columns .right-column.span9 { .columns .right-column.span9 {
width: 76.4866339334%; width: 76.4866339334%;
@ -6808,6 +6810,9 @@ pre code {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }
.hideCode:before {
width: 100% !important;
}
.float-view .content-page table { .float-view .content-page table {
float: left; float: left;
clear: left; clear: left;
@ -6841,6 +6846,10 @@ pre code {
margin-right: 1.5%; margin-right: 1.5%;
background-color: white; background-color: white;
} }
.hideCode2 {
width: 900px !important;
width: calc(100% - 130px) !important;
}
.float-view .content-page .page-header:before, .float-view .content-page .page-header:before,
.float-view .content-page p:before, .float-view .content-page p:before,
.float-view .content-page ul:before, .float-view .content-page ul:before,
@ -6973,6 +6982,9 @@ pre code {
margin: 0px 0px 10px 0px; margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px; padding: 0px 0px 0px 10px;
} }
.hideCode3 {
display: none;
}
} }
table { table {
width: 100%; width: 100%;

View File

@ -6476,6 +6476,7 @@ body {
.columns .left-column { .columns .left-column {
background-color: #f5f5f6; background-color: #f5f5f6;
border-right: 1px solid #e7e7e9; border-right: 1px solid #e7e7e9;
overflow-x: hidden;
} }
.columns .right-column.span9 { .columns .right-column.span9 {
width: 76.4866339334%; width: 76.4866339334%;
@ -6808,6 +6809,9 @@ pre code {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }
.hideCode:before {
width:100% !important;
}
.float-view .content-page table { .float-view .content-page table {
float: left; float: left;
clear: left; clear: left;
@ -6841,6 +6845,10 @@ pre code {
margin-right: 1.5%; margin-right: 1.5%;
background-color: white; background-color: white;
} }
.hideCode2 {
width: 900px !important;
width: calc(100% - 130px) !important;
}
.float-view .content-page .page-header:before, .float-view .content-page .page-header:before,
.float-view .content-page p:before, .float-view .content-page p:before,
.float-view .content-page ul:before, .float-view .content-page ul:before,
@ -6973,6 +6981,9 @@ pre code {
margin: 0px 0px 10px 0px; margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px; padding: 0px 0px 0px 10px;
} }
.hideCode3 {
display: none;
}
} }
table { table {
width: 100%; width: 100%;

View File

@ -6476,6 +6476,7 @@ body {
.columns .left-column { .columns .left-column {
background-color: #f5f5f6; background-color: #f5f5f6;
border-right: 1px solid #e7e7e9; border-right: 1px solid #e7e7e9;
overflow-x: hidden;
} }
.columns .right-column.span9 { .columns .right-column.span9 {
width: 76.4866339334%; width: 76.4866339334%;
@ -6808,6 +6809,9 @@ pre code {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }
.hideCode:before {
width:100% !important;
}
.float-view .content-page table { .float-view .content-page table {
float: left; float: left;
clear: left; clear: left;
@ -6841,6 +6845,10 @@ pre code {
margin-right: 1.5%; margin-right: 1.5%;
background-color: white; background-color: white;
} }
.hideCode2 {
width: 900px !important;
width: calc(100% - 130px) !important;
}
.float-view .content-page .page-header:before, .float-view .content-page .page-header:before,
.float-view .content-page p:before, .float-view .content-page p:before,
.float-view .content-page ul:before, .float-view .content-page ul:before,
@ -6973,6 +6981,9 @@ pre code {
margin: 0px 0px 10px 0px; margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px; padding: 0px 0px 0px 10px;
} }
.hideCode3 {
display: none;
}
} }
table { table {
width: 100%; width: 100%;

View File

@ -6476,6 +6476,7 @@ body {
.columns .left-column { .columns .left-column {
background-color: #f7f7f7; background-color: #f7f7f7;
border-right: 1px solid #eeeeee; border-right: 1px solid #eeeeee;
overflow-x: hidden;
} }
.columns .right-column.span9 { .columns .right-column.span9 {
width: 76.4866339334%; width: 76.4866339334%;
@ -6808,6 +6809,10 @@ pre code {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }
.hideCode:before {
width:100% !important;
}
.float-view .content-page table { .float-view .content-page table {
float: left; float: left;
clear: left; clear: left;
@ -6841,6 +6846,10 @@ pre code {
margin-right: 1.5%; margin-right: 1.5%;
background-color: white; background-color: white;
} }
.hideCode2 {
width: 900px !important;
width: calc(100% - 130px) !important;
}
.float-view .content-page .page-header:before, .float-view .content-page .page-header:before,
.float-view .content-page p:before, .float-view .content-page p:before,
.float-view .content-page ul:before, .float-view .content-page ul:before,
@ -6973,6 +6982,9 @@ pre code {
margin: 0px 0px 10px 0px; margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px; padding: 0px 0px 0px 10px;
} }
.hideCode3 {
display: none;
}
} }
table { table {
width: 100%; width: 100%;

View File

@ -5,6 +5,7 @@
"image": "img/app.png", "image": "img/app.png",
"theme": "navy", "theme": "navy",
"template":"default", "template":"default",
"toggle_code": true,
"date_modified": true, "date_modified": true,
"repo": "justinwalsh/daux.io", "repo": "justinwalsh/daux.io",
"twitter": ["justin_walsh", "todaymade"], "twitter": ["justin_walsh", "todaymade"],

View File

@ -19,4 +19,50 @@ $(function() {
if ($(window).width() >= 768) if ($(window).width() >= 768)
$('#sub-nav-collapse').removeAttr('style'); $('#sub-nav-collapse').removeAttr('style');
}); });
}); });
//Fix GitHub Ribbon overlapping Scrollbar
if ($('article')[0].scrollHeight > $('.right-column').height()) $('#github-ribbon')[0].style.right = '16px'
//Toggle Code Block Visibility
function toggleCodeBlocks() {
var t = localStorage.getItem("toggleCodeStats")
t = (t + 1) % 3;
localStorage.setItem("toggleCodeStats", t);
var a = $('.content-page article');
var b = a.children();
var c = b.filter('pre');
var d = $('.right-column');
if (d.hasClass('float-view')) {
d.removeClass('float-view');
$('#toggleCodeBlockBtn')[0].innerHTML = "Hide Code Blocks";
} else {
if (a.hasClass('hideCode')) {
d.addClass('float-view');
a.removeClass('hideCode');
b.removeClass('hideCode2');
c.removeClass('hideCode3');
$('#toggleCodeBlockBtn')[0].innerHTML = "Show Code Blocks Inline";
} else {
a.addClass('hideCode');
b.addClass('hideCode2');
c.addClass('hideCode3');
$('#toggleCodeBlockBtn')[0].innerHTML = "Show Code Blocks";
}
}
}
if (localStorage.getItem("toggleCodeStats") >= 0) {
var t = localStorage.getItem("toggleCodeStats");
if (t == 1) {
toggleCodeBlocks();
localStorage.setItem("toggleCodeStats", 1);
}
if (t == 2) {
toggleCodeBlocks();
toggleCodeBlocks();
localStorage.setItem("toggleCodeStats", 2);
}
} else {
localStorage.setItem("toggleCodeStats", 0);
}

View File

@ -232,6 +232,7 @@ html, body {
.left-column { .left-column {
background-color: @sidebar-background; background-color: @sidebar-background;
border-right: 1px solid @lines; border-right: 1px solid @lines;
overflow-x: hidden;
} }
.right-column { .right-column {
&.span9 { &.span9 {
@ -561,6 +562,9 @@ pre {
z-index: -1; z-index: -1;
} }
} }
.hideCode:before {
width:100% !important;
}
table { table {
float: left; float: left;
clear: left; clear: left;
@ -597,6 +601,10 @@ pre {
display: block; display: block;
} }
} }
.hideCode2 {
width: 900px !important;
width: calc(100% - 130px) !important;
}
ul,ol { ul,ol {
li { li {
margin-left: 30px; margin-left: 30px;
@ -611,6 +619,9 @@ pre {
margin: 0px 0px 10px 0px; margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px; padding: 0px 0px 0px 10px;
} }
hideCode3 {
display: none;
}
} }
} }
} }

View File

@ -46,6 +46,7 @@ function get_options() {
'date_modified' => true, 'date_modified' => true,
'float' => true, 'float' => true,
'repo' => false, 'repo' => false,
'toggle_code' => false,
'twitter' => array(), 'twitter' => array(),
'links' => array(), 'links' => array(),
'colors' => false, 'colors' => false,

View File

@ -163,6 +163,9 @@
<?php foreach($options['links'] as $name => $url) { ?> <?php foreach($options['links'] as $name => $url) { ?>
<a href="<?php echo $url;?>" target="_blank"><?php echo $name;?></a><br> <a href="<?php echo $url;?>" target="_blank"><?php echo $name;?></a><br>
<?php } ?> <?php } ?>
<?php if ($options['toggle_code']) { ?>
<a href="#" id="toggleCodeBlockBtn" onclick="toggleCodeBlocks();">Show Code Blocks Inline</a><br>
<?php } ?>
<!-- Twitter --> <!-- Twitter -->
<?php foreach($options['twitter'] as $handle) { ?> <?php foreach($options['twitter'] as $handle) { ?>
<div class="twitter"> <div class="twitter">