From 0292f11d81c6310815aa015ef9b0e775b40615d8 Mon Sep 17 00:00:00 2001 From: til-schneider Date: Wed, 25 May 2016 17:39:23 +0200 Subject: [PATCH] Added config option to disable TOC and optimized responsive behaviour (TOC is now only hidden for small screens) --- src/client/js/app-view.js | 4 ++++ src/config-example.php | 3 +++ src/server/layout/page.php | 5 +++-- src/server/logic/Context.php | 3 ++- src/server/logic/Main.php | 2 +- src/server/theme/slim/less/_layout.less | 27 ++++++++++++++++++------- src/server/theme/slim/page-header.php | 6 +++++- 7 files changed, 38 insertions(+), 12 deletions(-) diff --git a/src/client/js/app-view.js b/src/client/js/app-view.js index 284a22e..0abaea2 100644 --- a/src/client/js/app-view.js +++ b/src/client/js/app-view.js @@ -21,6 +21,10 @@ } function initToc() { + if (! slimwiki.settings.showToc) { + return; // Nothing to do + } + var headingSelector = 'h1, h2, h3', nextId = 1, headingsOffset = 80, diff --git a/src/config-example.php b/src/config-example.php index 92d63b5..3668f78 100644 --- a/src/config-example.php +++ b/src/config-example.php @@ -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'; diff --git a/src/server/layout/page.php b/src/server/layout/page.php index a488854..eecf95e 100644 --- a/src/server/layout/page.php +++ b/src/server/layout/page.php @@ -45,7 +45,8 @@ include($themeDir . '/init-theme.php'); supportedBrowser: !! document.addEventListener, settings: $mode + 'mode' => $mode, + 'showToc' => $data['showToc'] ); if ($mode == 'edit' || $mode == 'createArticle') { $settings['demoMode'] = $data['demoMode']; @@ -59,7 +60,7 @@ include($themeDir . '/init-theme.php'); - + 'slim', 'demoMode' => false, 'openExternalLinksInNewTab' => true, - 'showCompleteBreadcrumbs' => true + 'showCompleteBreadcrumbs' => true, + 'showToc' => true ); if (file_exists(__DIR__ . '/../../config.php')) { diff --git a/src/server/logic/Main.php b/src/server/logic/Main.php index 064bac7..d1fcdec 100644 --- a/src/server/logic/Main.php +++ b/src/server/logic/Main.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]; } diff --git a/src/server/theme/slim/less/_layout.less b/src/server/theme/slim/less/_layout.less index 366abbd..40e881f 100644 --- a/src/server/theme/slim/less/_layout.less +++ b/src/server/theme/slim/less/_layout.less @@ -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; } } diff --git a/src/server/theme/slim/page-header.php b/src/server/theme/slim/page-header.php index 4695ac0..92a8d6c 100644 --- a/src/server/theme/slim/page-header.php +++ b/src/server/theme/slim/page-header.php @@ -19,4 +19,8 @@ foreach ($data['breadcrumbs'] as $item) { $isFirst = false; } ?> - +