D3Public/daux.io
8
0
Fork 0
Code Pull Requests Releases Activity

Add Support for Hiding Code Blocks at UI level. Set Overflow of Left-Column to Hidden to remove unnecessary Scrollbar.

Browse Source
This commit is contained in:
Gautham Warrier 2014-02-13 17:51:27 +05:30
parent 75a7d7579f
commit 6239de16be
10 changed files with 115 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -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:

12
css/daux-blue.css
View File

@ -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%;

11
css/daux-green.css
View File

@ -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%;

11
css/daux-navy.css
View File

@ -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%;

12
css/daux-red.css
View File

@ -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%;

1
docs/config.json
View File

@ -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"],

45
js/custom.js
View File

@ -19,4 +19,47 @@ $(function() {
if ($(window).width() >= 768)
$('#sub-nav-collapse').removeAttr('style');
});
});
});
//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);
}

11
less/import/daux-base.less
View File

@ -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;
}
}
}
}

1
libs/functions.php
View File

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

3
template/default.tpl
View File

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