mirror of
https://github.com/til-schneider/slim-wiki.git
synced 2025-03-15 06:49:37 +01:00
Added config option to disable TOC and optimized responsive behaviour (TOC is now only hidden for small screens)
This commit is contained in:
parent
cb13fb33a7
commit
0292f11d81
@ -21,6 +21,10 @@
|
||||
}
|
||||
|
||||
function initToc() {
|
||||
if (! slimwiki.settings.showToc) {
|
||||
return; // Nothing to do
|
||||
}
|
||||
|
||||
var headingSelector = 'h1, h2, h3',
|
||||
nextId = 1,
|
||||
headingsOffset = 80,
|
||||
|
@ -15,4 +15,7 @@ $config['lang'] = 'en'; // 'de' or 'en'
|
||||
// Hide directories having no 'index.md' in breadcrumbs
|
||||
//$config['showCompleteBreadcrumbs'] = false;
|
||||
|
||||
// Hide table of contents
|
||||
//$config['showToc'] = false;
|
||||
|
||||
//$config['footerHtml'] = '© Copyright 2000-'.date('Y').' My name';
|
||||
|
@ -45,7 +45,8 @@ include($themeDir . '/init-theme.php');
|
||||
supportedBrowser: !! document.addEventListener,
|
||||
settings: <?php
|
||||
$settings = array(
|
||||
"mode" => $mode
|
||||
'mode' => $mode,
|
||||
'showToc' => $data['showToc']
|
||||
);
|
||||
if ($mode == 'edit' || $mode == 'createArticle') {
|
||||
$settings['demoMode'] = $data['demoMode'];
|
||||
@ -59,7 +60,7 @@ include($themeDir . '/init-theme.php');
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body class="mode-<?php echo $mode; ?>">
|
||||
<body class="mode-<?php echo $mode; ?> is-toc-<?php echo $data['showToc'] ? 'enabled' : 'disabled'; ?>">
|
||||
|
||||
<?php
|
||||
|
||||
|
@ -32,7 +32,8 @@ class Context {
|
||||
'theme' => 'slim',
|
||||
'demoMode' => false,
|
||||
'openExternalLinksInNewTab' => true,
|
||||
'showCompleteBreadcrumbs' => true
|
||||
'showCompleteBreadcrumbs' => true,
|
||||
'showToc' => true
|
||||
);
|
||||
|
||||
if (file_exists(__DIR__ . '/../../config.php')) {
|
||||
|
@ -119,7 +119,7 @@ class Main {
|
||||
$data['mode'] = $mode;
|
||||
$data['fatalErrorMessage'] = $fatalErrorMessage;
|
||||
|
||||
foreach (array('wikiName', 'theme', 'demoMode', 'footerHtml') as $key) {
|
||||
foreach (array('wikiName', 'theme', 'demoMode', 'showToc', 'footerHtml') as $key) {
|
||||
if (isset($config[$key])) {
|
||||
$data[$key] = $config[$key];
|
||||
}
|
||||
|
@ -6,13 +6,15 @@
|
||||
|
||||
// Screen sizes:
|
||||
// - small: Content takes full width, TOC is hidden
|
||||
// - medium: Content is left, TOC is right or hidden (if width < @screen-size-toc-hidden-max)
|
||||
// - medium: If TOC is enabled: Content is left, TOC is right
|
||||
// If TOC is disabled: Same as large
|
||||
// - large: Content is centered, TOC is right
|
||||
//
|
||||
// NOTE: We need a variable using brackets here, otherwise less won't calculate the width
|
||||
// See: https://github.com/less/less.js/issues/1903
|
||||
@screen-size-small-max: (@contentMaxWidth + 2 * @contentMinMarginX);
|
||||
@screen-size-toc-hidden-max: (@screen-size-small-max + @tocMinWidth);
|
||||
@screen-size-medium-content-shrinks-max: (@screen-size-small-max + @tocMinWidth); // content is dynamic, TOC has fixed width
|
||||
@screen-size-medium-content-full-min: (@screen-size-medium-content-shrinks-max + 1px); // content has fixed width, TOC is dynamic
|
||||
@screen-size-medium-min: (@screen-size-small-max + 1px);
|
||||
@screen-size-medium-max: (@contentMaxWidth + 2 * @tocMinWidth);
|
||||
|
||||
@ -25,9 +27,16 @@
|
||||
margin: 0 @contentMinMarginX;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-size-medium-min) and (max-width: @screen-size-medium-max) {
|
||||
width: @contentMaxWidth;
|
||||
margin: 0 @contentMinMarginX;
|
||||
.is-toc-enabled & {
|
||||
@media (min-width: @screen-size-medium-min) and (max-width: @screen-size-medium-content-shrinks-max) {
|
||||
width: auto;
|
||||
margin-left: @contentMinMarginX;
|
||||
margin-right: @contentMinMarginX + @tocMinWidth;
|
||||
}
|
||||
@media (min-width: @screen-size-medium-content-full-min) and (max-width: @screen-size-medium-max) {
|
||||
width: @contentMaxWidth;
|
||||
margin: 0 @contentMinMarginX;
|
||||
}
|
||||
}
|
||||
@media (max-width: @screen-size-small-max) {
|
||||
width: auto;
|
||||
@ -57,11 +66,15 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-size-medium-min) and (max-width: @screen-size-medium-max) {
|
||||
@media (min-width: @screen-size-medium-min) and (max-width: @screen-size-medium-content-shrinks-max) {
|
||||
width: @tocMinWidth;
|
||||
left: auto;
|
||||
}
|
||||
@media (min-width: @screen-size-medium-content-full-min) and (max-width: @screen-size-medium-max) {
|
||||
left: @contentMinMarginX + @contentMaxWidth + @tocMarginLeft;
|
||||
margin-left: 0;
|
||||
}
|
||||
@media (max-width: @screen-size-toc-hidden-max) {
|
||||
@media (max-width: @screen-size-small-max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
@ -19,4 +19,8 @@ foreach ($data['breadcrumbs'] as $item) {
|
||||
$isFirst = false;
|
||||
}
|
||||
?></div></nav>
|
||||
<nav class="toc-wrapper"></nav>
|
||||
<?php
|
||||
if ($data['showToc']) {
|
||||
?><nav class="toc-wrapper"></nav><?php
|
||||
}
|
||||
?>
|
||||
|
Loading…
x
Reference in New Issue
Block a user