diff --git a/README.md b/README.md
index a1c45ad..c7f5dd1 100644
--- a/README.md
+++ b/README.md
@@ -133,13 +133,21 @@ To create a custom color scheme, set the `theme` property to `custom` and then d
```
###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
{
"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:
diff --git a/css/daux-blue.css b/css/daux-blue.css
index 83df1c7..788e551 100644
--- a/css/daux-blue.css
+++ b/css/daux-blue.css
@@ -816,6 +816,7 @@ code {
}
pre {
display: block;
+ overflow: hidden;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
@@ -6476,6 +6477,7 @@ body {
.columns .left-column {
background-color: #f7f7f7;
border-right: 1px solid #e7e7e9;
+ overflow-x: hidden;
}
.columns .right-column.span9 {
width: 76.4866339334%;
@@ -6808,6 +6810,9 @@ pre code {
position: absolute;
z-index: -1;
}
+ .hideCode:before {
+ width: 100% !important;
+ }
.float-view .content-page table {
float: left;
clear: left;
@@ -6841,6 +6846,10 @@ pre code {
margin-right: 1.5%;
background-color: white;
}
+ .hideCode2 {
+ width: 900px !important;
+ width: calc(100% - 130px) !important;
+ }
.float-view .content-page .page-header:before,
.float-view .content-page p:before,
.float-view .content-page ul:before,
@@ -6973,6 +6982,9 @@ pre code {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px;
}
+ .hideCode3 {
+ display: none;
+ }
}
table {
width: 100%;
diff --git a/css/daux-green.css b/css/daux-green.css
index 2efadf0..36b0f93 100644
--- a/css/daux-green.css
+++ b/css/daux-green.css
@@ -6476,6 +6476,7 @@ body {
.columns .left-column {
background-color: #f5f5f6;
border-right: 1px solid #e7e7e9;
+ overflow-x: hidden;
}
.columns .right-column.span9 {
width: 76.4866339334%;
@@ -6808,6 +6809,9 @@ pre code {
position: absolute;
z-index: -1;
}
+ .hideCode:before {
+ width:100% !important;
+ }
.float-view .content-page table {
float: left;
clear: left;
@@ -6841,6 +6845,10 @@ pre code {
margin-right: 1.5%;
background-color: white;
}
+ .hideCode2 {
+ width: 900px !important;
+ width: calc(100% - 130px) !important;
+ }
.float-view .content-page .page-header:before,
.float-view .content-page p:before,
.float-view .content-page ul:before,
@@ -6973,6 +6981,9 @@ pre code {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px;
}
+ .hideCode3 {
+ display: none;
+ }
}
table {
width: 100%;
diff --git a/css/daux-navy.css b/css/daux-navy.css
index 29b891e..95b0783 100644
--- a/css/daux-navy.css
+++ b/css/daux-navy.css
@@ -6476,6 +6476,7 @@ body {
.columns .left-column {
background-color: #f5f5f6;
border-right: 1px solid #e7e7e9;
+ overflow-x: hidden;
}
.columns .right-column.span9 {
width: 76.4866339334%;
@@ -6808,6 +6809,9 @@ pre code {
position: absolute;
z-index: -1;
}
+ .hideCode:before {
+ width:100% !important;
+ }
.float-view .content-page table {
float: left;
clear: left;
@@ -6841,6 +6845,10 @@ pre code {
margin-right: 1.5%;
background-color: white;
}
+ .hideCode2 {
+ width: 900px !important;
+ width: calc(100% - 130px) !important;
+ }
.float-view .content-page .page-header:before,
.float-view .content-page p:before,
.float-view .content-page ul:before,
@@ -6973,6 +6981,9 @@ pre code {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px;
}
+ .hideCode3 {
+ display: none;
+ }
}
table {
width: 100%;
diff --git a/css/daux-red.css b/css/daux-red.css
index f0089f4..9c5775e 100644
--- a/css/daux-red.css
+++ b/css/daux-red.css
@@ -6476,6 +6476,7 @@ body {
.columns .left-column {
background-color: #f7f7f7;
border-right: 1px solid #eeeeee;
+ overflow-x: hidden;
}
.columns .right-column.span9 {
width: 76.4866339334%;
@@ -6808,6 +6809,10 @@ pre code {
position: absolute;
z-index: -1;
}
+ .hideCode:before {
+ width:100% !important;
+ }
+
.float-view .content-page table {
float: left;
clear: left;
@@ -6841,6 +6846,10 @@ pre code {
margin-right: 1.5%;
background-color: white;
}
+ .hideCode2 {
+ width: 900px !important;
+ width: calc(100% - 130px) !important;
+ }
.float-view .content-page .page-header:before,
.float-view .content-page p:before,
.float-view .content-page ul:before,
@@ -6973,6 +6982,9 @@ pre code {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px;
}
+ .hideCode3 {
+ display: none;
+ }
}
table {
width: 100%;
diff --git a/docs/config.json b/docs/config.json
index 49697ce..e95dd29 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -5,6 +5,7 @@
"image": "img/app.png",
"theme": "navy",
"template":"default",
+ "toggle_code": true,
"date_modified": true,
"repo": "justinwalsh/daux.io",
"twitter": ["justin_walsh", "todaymade"],
diff --git a/js/custom.js b/js/custom.js
index ae19950..5ffe9d4 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -19,4 +19,47 @@ $(function() {
if ($(window).width() >= 768)
$('#sub-nav-collapse').removeAttr('style');
});
-});
\ No newline at end of file
+});
+
+//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);
+}
\ No newline at end of file
diff --git a/less/import/daux-base.less b/less/import/daux-base.less
index 144ccd5..c57b95e 100644
--- a/less/import/daux-base.less
+++ b/less/import/daux-base.less
@@ -232,6 +232,7 @@ html, body {
.left-column {
background-color: @sidebar-background;
border-right: 1px solid @lines;
+ overflow-x: hidden;
}
.right-column {
&.span9 {
@@ -561,6 +562,9 @@ pre {
z-index: -1;
}
}
+ .hideCode:before {
+ width:100% !important;
+ }
table {
float: left;
clear: left;
@@ -597,6 +601,10 @@ pre {
display: block;
}
}
+ .hideCode2 {
+ width: 900px !important;
+ width: calc(100% - 130px) !important;
+ }
ul,ol {
li {
margin-left: 30px;
@@ -611,6 +619,9 @@ pre {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px;
}
+ hideCode3 {
+ display: none;
+ }
}
}
}
diff --git a/libs/functions.php b/libs/functions.php
index a2e4efa..ce92989 100644
--- a/libs/functions.php
+++ b/libs/functions.php
@@ -46,6 +46,7 @@ function get_options() {
'date_modified' => true,
'float' => true,
'repo' => false,
+ 'toggle_code' => false,
'twitter' => array(),
'links' => array(),
'colors' => false,
diff --git a/template/default.tpl b/template/default.tpl
index 579f226..d3f6627 100644
--- a/template/default.tpl
+++ b/template/default.tpl
@@ -163,6 +163,9 @@
$url) { ?>
+
+ Show Code Blocks Inline
+