Remove ability to have code floating on the side

Cette révision appartient à :
Stéphane Goetz 2019-09-21 22:00:00 +02:00
Parent ac6e71030b
révision ef496e9381
19 fichiers modifiés avec 54 ajouts et 361 suppressions

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Voir le fichier

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

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues