Remove ability to have code floating on the side
This commit is contained in:
Stéphane Goetz
parent
ac6e71030b
commit
ef496e9381
@ -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`.
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
"breadcrumb_separator": "Chevrons",
|
||||
"toggle_code": true,
|
||||
"date_modified": true,
|
||||
"float": true,
|
||||
"inherit_index": true,
|
||||
|
||||
"repo": "dauxio/daux.io",
|
||||
|
||||
@ -119,7 +119,6 @@
|
||||
"breadcrumb_separator": "Chevrons",
|
||||
"toggle_code": true,
|
||||
"date_modified": false,
|
||||
"float": false,
|
||||
"auto_landing": true,
|
||||
"search": true,
|
||||
"auto_toc": false,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
);
|
||||
};
|
||||
|
||||
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);
|
||||
setCodeBlockStyle(!ev.target.checked);
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
let hidden = false;
|
||||
try {
|
||||
hidden = localStorage.getItem(LOCAL_STORAGE_KEY);
|
||||
|
||||
if (hidden === "false") {
|
||||
hidden = false;
|
||||
} else if (hidden === "true") {
|
||||
hidden = true;
|
||||
}
|
||||
|
||||
let codeBlockState = null;
|
||||
try {
|
||||
codeBlockState = localStorage.getItem("codeBlockState");
|
||||
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) {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -37,19 +37,10 @@
|
||||
<?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 } ?>
|
||||
|
||||
@ -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'); ?>
|
||||
|
||||
@ -72,7 +72,6 @@ class TranslateTest extends TestCase
|
||||
|
||||
$config['html'] = [
|
||||
'search' => '',
|
||||
'float' => false,
|
||||
'toggle_code' => false,
|
||||
'piwik_analytics' => '',
|
||||
'google_analytics' => '',
|
||||
|
||||
2
themes/daux/css/theme-blue.min.css
vendored
2
themes/daux/css/theme-blue.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
themes/daux/css/theme-green.min.css
vendored
2
themes/daux/css/theme-green.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
themes/daux/css/theme-navy.min.css
vendored
2
themes/daux/css/theme-navy.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
themes/daux/css/theme-red.min.css
vendored
2
themes/daux/css/theme-red.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
themes/daux/js/daux.min.js
vendored
2
themes/daux/js/daux.min.js
vendored
@ -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
Loading…
Reference in New Issue
Block a user