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
bovenliggende ac6e71030b
commit ef496e9381
19 gewijzigde bestanden met toevoegingen van 54 en 361 verwijderingen

Bestand weergeven

@ -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`.

Bestand weergeven

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

Bestand weergeven

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

Bestand weergeven

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

Bestand weergeven

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

Bestand weergeven

@ -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) {

Bestand weergeven

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

Bestand weergeven

@ -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'); ?>

Bestand weergeven

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

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand weergeven

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

Bestand-diff onderdrukt omdat een of meer regels te lang zijn