Remove ability to have code floating on the side

This commit is contained in:
Stéphane Goetz 2019-09-21 22:00:00 +02:00
parent ac6e71030b
commit ef496e9381
19 changed files with 54 additions and 361 deletions

View File

@ -60,16 +60,6 @@ You can *optionally* specify the separator used for breadcrumbs.
}
```
## Code Floating
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
{
"html": { "float": false }
}
```
## Date Modified
By default, daux.io will display the last modified time as reported by the system underneath the title for each document.
To disable this, change the option in your config.json to `false`.

View File

@ -16,7 +16,6 @@
"breadcrumb_separator": "Chevrons",
"toggle_code": true,
"date_modified": true,
"float": true,
"inherit_index": true,
"repo": "dauxio/daux.io",

View File

@ -119,7 +119,6 @@
"breadcrumb_separator": "Chevrons",
"toggle_code": true,
"date_modified": false,
"float": false,
"auto_landing": true,
"search": true,
"auto_toc": false,

View File

@ -62,53 +62,6 @@ Components
}
}
.ButtonGroup {
position: relative;
display: inline-block;
vertical-align: middle; // match .Button alignment given font-size hack above
.Button + .Button {
margin-left: -1px;
}
> .Button {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus {
z-index: 2;
}
&:active,
&.Button--active {
z-index: 3;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
// Set corners individually because sometimes
// a single button can be in a .ButtonGroup
// and we need :first-child and :last-child to both match
&:first-child {
margin-left: 0;
}
&:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
}
}
.Brand {
display: block;
background-color: var(--brand-background);
@ -338,6 +291,11 @@ Components
}
.TableOfContentsContainer {
float: right;
min-width: 300px;
max-width: 25%;
padding-left: 1em;
&__title {
border-bottom: 4px solid #efefef;
margin-bottom: 0 !important;
@ -345,6 +303,7 @@ Components
&__content > .TableOfContents {
margin-top: 0;
border-right: 2px solid #efefef;
}
}
@ -360,34 +319,17 @@ ul.TableOfContents {
a {
text-decoration: none;
display: block;
border-bottom: 1px solid #ddd;
padding: 0.2em 0;
}
.TableOfContents {
border-left-width: 0;
}
}
.Columns__right--full .TableOfContentsContainer {
float: right;
min-width: 300px;
max-width: 25%;
padding-left: 1em;
.TableOfContentsContainer__content > .TableOfContents {
border-right: 2px solid #efefef;
}
.TableOfContents {
list-style-type: none;
padding-left: 0;
}
a {
display: block;
border-bottom: 1px solid #ddd;
padding: 0.2em 0;
}
li a {
padding-left: 0.75em;
}

View File

@ -252,132 +252,3 @@ h6 {
color: inherit;
}
}
//Content pages float view
@media (min-width: 1150px) {
.Columns__right--float .Columns__right__content {
height: 100%;
overflow: auto;
padding: 0 !important;
background-color: transparent !important;
position: relative;
article {
width: 100%;
min-height: 100%;
overflow: auto;
position: relative;
z-index: 1;
}
article:before {
content: "";
width: 50%;
min-height: 100%;
overflow: auto;
background-color: white;
display: block;
margin: 0;
position: absolute;
z-index: -1;
}
}
.Columns__right--float {
.Pager,
.Page__header,
.s-content blockquote,
.s-content p,
.s-content ul,
.s-content ol,
.s-content dl,
.s-content h2,
.s-content h3,
.s-content h4,
.s-content h5,
.s-content h6,
.s-content hr,
.s-content table {
float: left;
clear: left;
width: 47%;
margin-left: 1.5%;
margin-right: 1.5%;
}
}
.Columns__right--float .s-content {
table {
background-color: white;
white-space: normal;
pre,
code {
white-space: normal;
}
}
blockquote,
p,
ul,
ol,
dl,
h2,
h3,
h4,
h5,
h6,
hr {
&:before {
width: 100%;
height: 10px;
display: block;
clear: both;
}
p,
ul,
ol,
dl,
h2,
h3,
h4,
h5,
h6,
pre,
hr {
width: auto;
float: none;
display: block;
}
}
hr {
border-color: #ddd;
}
// Paragraphs and code inside lists and
// blockquotes should have 100% width
li,
blockquote {
p,
pre {
width: 100%;
}
}
pre {
float: left;
clear: right;
width: 50%;
border: none;
border-left: 10px solid white;
margin: 0 0 10px;
padding: 0;
code {
padding: 0 0.5em;
}
}
}
}

View File

@ -1,147 +1,49 @@
const codeBlocks = document.querySelectorAll(".s-content pre");
const toggleCodeSection = document.querySelector(".CodeToggler");
function setCodeBlockStyle(
codeBlockState,
toggleCodeBlockBtnList,
toggleCodeBlockBtnFloat,
toggleCodeBlockBtnBelow,
toggleCodeBlockBtnHide,
codeBlockView
) {
for (let a = 0; a < toggleCodeBlockBtnList.length; a++) {
toggleCodeBlockBtnList[a].classList.remove("Button--active");
}
let hidden;
switch (codeBlockState) {
case true: // Show code blocks below (flowed); checkbox
hidden = false;
break;
case false: // Hidden code blocks; checkbox
hidden = true;
break;
case 2: // Show code blocks inline (floated)
toggleCodeBlockBtnFloat.classList.add("Button--active");
codeBlockView.classList.add("Columns__right--float");
codeBlockView.classList.remove("Columns__right--full");
hidden = false;
break;
case 1: // Show code blocks below (flowed)
case "checked":
toggleCodeBlockBtnBelow.classList.add("Button--active");
codeBlockView.classList.remove("Columns__right--float");
codeBlockView.classList.add("Columns__right--full");
hidden = false;
break;
case 0: // Hidden code blocks
default:
toggleCodeBlockBtnHide.classList.add("Button--active");
codeBlockView.classList.remove("Columns__right--float");
codeBlockView.classList.add("Columns__right--full");
hidden = true;
break;
}
const LOCAL_STORAGE_KEY = "daux_code_blocks_hidden";
function setCodeBlockStyle(hidden) {
for (let a = 0; a < codeBlocks.length; a++) {
if (hidden) {
codeBlocks[a].classList.add("Hidden");
} else {
codeBlocks[a].classList.remove("Hidden");
}
codeBlocks[a].classList.toggle("Hidden", hidden);
}
try {
localStorage.setItem("codeBlockState", +codeBlockState);
localStorage.setItem(LOCAL_STORAGE_KEY, hidden);
} catch (e) {
// local storage operations can fail with the file:// protocol
}
}
function enableToggler() {
const toggleCodeBlockBtnList = toggleCodeSection.querySelectorAll(
".CodeToggler__button"
);
const toggleCodeBlockBtnSet = toggleCodeSection.querySelector(
".CodeToggler__button--main"
); // available when floating is disabled
const toggleCodeBlockBtnHide = toggleCodeSection.querySelector(
".CodeToggler__button--hide"
);
const toggleCodeBlockBtnBelow = toggleCodeSection.querySelector(
".CodeToggler__button--below"
);
const toggleCodeBlockBtnFloat = toggleCodeSection.querySelector(
".CodeToggler__button--float"
);
const codeBlockView = document.querySelector(".Columns__right");
const floating = document.body.classList.contains("with-float");
const setStyle = style => {
setCodeBlockStyle(
style,
toggleCodeBlockBtnList,
toggleCodeBlockBtnFloat,
toggleCodeBlockBtnBelow,
toggleCodeBlockBtnHide,
codeBlockView
);
};
toggleCodeBlockBtnSet.addEventListener(
"change",
ev => {
setCodeBlockStyle(!ev.target.checked);
},
false
);
if (floating) {
toggleCodeBlockBtnHide.addEventListener(
"click",
() => {
setStyle(0);
},
false
);
toggleCodeBlockBtnBelow.addEventListener(
"click",
() => {
setStyle(1);
},
false
);
toggleCodeBlockBtnFloat.addEventListener(
"click",
() => {
setStyle(2);
},
false
);
} else {
toggleCodeBlockBtnSet.addEventListener(
"change",
ev => {
setStyle(ev.target.checked);
},
false
);
}
let codeBlockState = null;
let hidden = false;
try {
codeBlockState = localStorage.getItem("codeBlockState");
hidden = localStorage.getItem(LOCAL_STORAGE_KEY);
if (hidden === "false") {
hidden = false;
} else if (hidden === "true") {
hidden = true;
}
if (hidden) {
setCodeBlockStyle(!!hidden);
toggleCodeBlockBtnSet.checked = !hidden;
}
} catch (e) {
// local storage operations can fail with the file:// protocol
}
if (codeBlockState) {
codeBlockState = parseInt(codeBlockState, 10);
} else {
codeBlockState = floating ? 2 : 1;
}
if (!floating) {
codeBlockState = !!codeBlockState;
}
setCodeBlockStyle(
codeBlockState,
toggleCodeBlockBtnList,
toggleCodeBlockBtnFloat,
toggleCodeBlockBtnBelow,
toggleCodeBlockBtnHide,
codeBlockView
);
}
if (toggleCodeSection) {

View File

@ -47,7 +47,7 @@
<link href="<?= $base_url; ?>_libraries/search.css" rel="stylesheet">
<?php } ?>
</head>
<body class="<?= $params['html']['float'] ? 'with-float' : ''; ?> <?= $this->section('classes'); ?>">
<body class="<?= $this->section('classes'); ?>">
<?= $this->section('content'); ?>
<?php

View File

@ -35,23 +35,14 @@
</div>
<?php if ($params['html']['toggle_code']) { ?>
<div class="CodeToggler">
<hr/>
<?php if ($params['html']['float']) { ?>
<span class="CodeToggler__text"><?=$this->translate("CodeBlocks_title") ?></span>
<div class="ButtonGroup" role="group">
<button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--hide"><?=$this->translate("CodeBlocks_hide") ?></button>
<button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--below"><?=$this->translate("CodeBlocks_below") ?></button>
<button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--float"><?=$this->translate("CodeBlocks_inline") ?></button>
</div>
<?php } else { ?>
<label class="Checkbox"><?=$this->translate("CodeBlocks_show") ?>
<input type="checkbox" class="CodeToggler__button--main" checked="checked"/>
<div class="Checkbox__indicator"></div>
</label>
<?php } ?>
</div>
<?php } ?>
<div class="CodeToggler">
<hr/>
<label class="Checkbox"><?=$this->translate("CodeBlocks_show") ?>
<input type="checkbox" class="CodeToggler__button--main" checked="checked"/>
<div class="Checkbox__indicator"></div>
</label>
</div>
<?php } ?>
<?php if (!empty($params['html']['twitter'])) { ?>
<div class="Twitter">
@ -72,7 +63,7 @@
<?php } ?>
</div>
</aside>
<div class="Columns__right <?= $params['html']['float'] ? 'Columns__right--float' : 'Columns__right--full'; ?>">
<div class="Columns__right">
<div class="Columns__right__content">
<div class="doc_content">
<?= $this->section('content'); ?>

View File

@ -72,7 +72,6 @@ class TranslateTest extends TestCase
$config['html'] = [
'search' => '',
'float' => false,
'toggle_code' => false,
'piwik_analytics' => '',
'google_analytics' => '',

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
var e=document.querySelectorAll(".s-content pre"),t=document.querySelector(".CodeToggler");function a(t,a,o,l,n,s){for(var c=0;c<a.length;c++)a[c].classList.remove("Button--active");var i;switch(t){case!0:i=!1;break;case!1:i=!0;break;case 2:o.classList.add("Button--active"),s.classList.add("Columns__right--float"),s.classList.remove("Columns__right--full"),i=!1;break;case 1:case"checked":l.classList.add("Button--active"),s.classList.remove("Columns__right--float"),s.classList.add("Columns__right--full"),i=!1;break;case 0:default:n.classList.add("Button--active"),s.classList.remove("Columns__right--float"),s.classList.add("Columns__right--full"),i=!0}for(var r=0;r<e.length;r++)i?e[r].classList.add("Hidden"):e[r].classList.remove("Hidden");try{localStorage.setItem("codeBlockState",+t)}catch(e){}}t&&(e.length?function(){var e=t.querySelectorAll(".CodeToggler__button"),o=t.querySelector(".CodeToggler__button--main"),l=t.querySelector(".CodeToggler__button--hide"),n=t.querySelector(".CodeToggler__button--below"),s=t.querySelector(".CodeToggler__button--float"),c=document.querySelector(".Columns__right"),i=document.body.classList.contains("with-float"),r=function(t){a(t,e,s,n,l,c)};i?(l.addEventListener("click",(function(){r(0)}),!1),n.addEventListener("click",(function(){r(1)}),!1),s.addEventListener("click",(function(){r(2)}),!1)):o.addEventListener("change",(function(e){r(e.target.checked)}),!1);var d=null;try{d=localStorage.getItem("codeBlockState")}catch(e){}d=d?parseInt(d,10):i?2:1,i||(d=!!d),a(d,e,s,n,l,c)}():t.classList.add("Hidden"));var o=document.querySelector(".Collapsible__trigger");if(o){var l=document.querySelector(".Collapsible__content");o.addEventListener("click",(function(e){l.classList.contains("Collapsible__content--open")?(l.style.height=0,l.classList.remove("Collapsible__content--open")):(l.style.transitionDuration="".concat(Math.max(l.scrollHeight,150),"ms"),l.style.height="".concat(l.scrollHeight,"px"),l.classList.add("Collapsible__content--open"))}))}var n=document.querySelectorAll("pre > code:not(.hljs)");if(n.length){var s=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.async=!0,c.src="".concat(window.base_url,"_libraries/highlight.pack.js"),c.onload=function(e){[].forEach.call(n,window.hljs.highlightBlock)},s.appendChild(c)}function i(e){"0px"!==e.target.style.height&&(e.target.style.height="auto"),e.target.removeEventListener("transitionend",i)}function r(e){void 0!==e.preventDefault&&e.preventDefault();var t=e.target.parentNode.parentNode,a=t.querySelector("ul.Nav");void 0!==e.preventDefault&&t.classList.contains("Nav__item--open")?(a.style.height="".concat(a.scrollHeight,"px"),a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.style.height="0px",t.classList.remove("Nav__item--open")):void 0===e.preventDefault?a.style.height="auto":(a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.addEventListener("transitionend",i),a.style.height="".concat(a.scrollHeight,"px"),t.classList.add("Nav__item--open"))}for(var d,u=document.querySelectorAll(".Nav__item.has-children i.Nav__arrow"),h=u.length-1;h>=0;h--)(d=u[h]).addEventListener("click",r),d.parentNode.parentNode.classList.contains("Nav__item--open")&&r({target:d});
var e=document.querySelectorAll(".s-content pre"),t=document.querySelector(".CodeToggler"),a="daux_code_blocks_hidden";function n(t){for(var n=0;n<e.length;n++)e[n].classList.toggle("Hidden",t);try{localStorage.setItem(a,t)}catch(e){}}t&&(e.length?function(){var e=t.querySelector(".CodeToggler__button--main");e.addEventListener("change",(function(e){n(!e.target.checked)}),!1);var o=!1;try{"false"===(o=localStorage.getItem(a))?o=!1:"true"===o&&(o=!0),o&&(n(!!o),e.checked=!o)}catch(e){}}():t.classList.add("Hidden"));var o=document.querySelector(".Collapsible__trigger");if(o){var l=document.querySelector(".Collapsible__content");o.addEventListener("click",(function(e){l.classList.contains("Collapsible__content--open")?(l.style.height=0,l.classList.remove("Collapsible__content--open")):(l.style.transitionDuration="".concat(Math.max(l.scrollHeight,150),"ms"),l.style.height="".concat(l.scrollHeight,"px"),l.classList.add("Collapsible__content--open"))}))}var c=document.querySelectorAll("pre > code:not(.hljs)");if(c.length){var i=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="".concat(window.base_url,"_libraries/highlight.pack.js"),r.onload=function(e){[].forEach.call(c,window.hljs.highlightBlock)},i.appendChild(r)}function s(e){"0px"!==e.target.style.height&&(e.target.style.height="auto"),e.target.removeEventListener("transitionend",s)}function d(e){void 0!==e.preventDefault&&e.preventDefault();var t=e.target.parentNode.parentNode,a=t.querySelector("ul.Nav");void 0!==e.preventDefault&&t.classList.contains("Nav__item--open")?(a.style.height="".concat(a.scrollHeight,"px"),a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.style.height="0px",t.classList.remove("Nav__item--open")):void 0===e.preventDefault?a.style.height="auto":(a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.addEventListener("transitionend",s),a.style.height="".concat(a.scrollHeight,"px"),t.classList.add("Nav__item--open"))}for(var h,g=document.querySelectorAll(".Nav__item.has-children i.Nav__arrow"),u=g.length-1;u>=0;u--)(h=g[u]).addEventListener("click",d),h.parentNode.parentNode.classList.contains("Nav__item--open")&&d({target:h});
//# sourceMappingURL=daux.min.js.map

File diff suppressed because one or more lines are too long