Docs wide layout (#65)

* - changed default layout to wide mode
* - added switcher that will change layout mode and save mode into cookie
* - layout mode switcher will be available only for desktop version

Author: vmechkauskas-github

Gemfile

@@ -5,7 +5,7 @@ gem 'wdm', '>= 0.1.0' if Gem.win_platform?
 gem 'jekyll-admin', group: :jekyll_plugins
 
 group :development, :test do
-  gem 'jekyll', '~> 3.7.2'
+  gem 'jekyll', '~> 3.8.3'
   gem 'jekyll-redirect-from', '~> 0.13.0'
   gem 'jekyll-sitemap', '~> 1.1.1'
   gem 'jekyll-feed'

Gemfile.lock

@@ -1,16 +1,16 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (4.2.10)
-      i18n (~> 0.7)
+    activesupport (5.2.0)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 0.7, < 2)
       minitest (~> 5.1)
-      thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
     addressable (2.5.2)
       public_suffix (>= 2.0.2, < 4.0)
-    autoprefixer-rails (8.0.0)
+    autoprefixer-rails (9.0.0)
       execjs
-    backports (3.11.1)
+    backports (3.11.3)
     bootstrap (4.0.0)
       autoprefixer-rails (>= 6.0.3)
       popper_js (>= 1.12.9, < 2)
@@ -20,22 +20,20 @@ GEM
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
-    eventmachine (1.2.5)
-    eventmachine (1.2.5-x64-mingw32)
+    eventmachine (1.2.7-x64-mingw32)
     execjs (2.7.0)
-    faraday (0.14.0)
+    faraday (0.15.2)
       multipart-post (>= 1.2, < 3)
-    ffi (1.9.21)
-    ffi (1.9.21-x64-mingw32)
+    ffi (1.9.25-x64-mingw32)
     forwardable-extended (2.6.0)
     gemoji (3.0.0)
-    html-pipeline (2.7.1)
+    html-pipeline (2.8.3)
       activesupport (>= 2)
       nokogiri (>= 1.4)
     http_parser.rb (0.6.0)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    jekyll (3.7.2)
+    jekyll (3.8.3)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -48,12 +46,12 @@ GEM
       pathutil (~> 0.9)
       rouge (>= 1.7, < 4)
       safe_yaml (~> 1.0)
-    jekyll-admin (0.7.0)
+    jekyll-admin (0.8.1)
       addressable (~> 2.4)
       jekyll (~> 3.3)
       sinatra (~> 1.4)
       sinatra-contrib (~> 1.4)
-    jekyll-feed (0.9.3)
+    jekyll-feed (0.10.0)
       jekyll (~> 3.3)
     jekyll-github-metadata (2.9.4)
       jekyll (~> 3.1)
@@ -66,12 +64,11 @@ GEM
       jekyll (~> 3.3)
     jekyll-watch (2.0.0)
       listen (~> 3.0)
-    jemoji (0.9.0)
-      activesupport (~> 4.0, >= 4.2.9)
+    jemoji (0.10.0)
       gemoji (~> 3.0)
       html-pipeline (~> 2.2)
       jekyll (~> 3.0)
-    kramdown (1.16.2)
+    kramdown (1.17.0)
     liquid (4.0.0)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -82,28 +79,26 @@ GEM
     minitest (5.11.3)
     multi_json (1.13.1)
     multipart-post (2.0.0)
-    nokogiri (1.8.2)
-      mini_portile2 (~> 2.3.0)
-    nokogiri (1.8.2-x64-mingw32)
+    nokogiri (1.8.4-x64-mingw32)
       mini_portile2 (~> 2.3.0)
-    octokit (4.8.0)
+    octokit (4.9.0)
       sawyer (~> 0.8.0, >= 0.5.3)
     pathutil (0.16.1)
       forwardable-extended (~> 2.6)
     popper_js (1.12.9)
     public_suffix (3.0.2)
-    rack (1.6.8)
-    rack-protection (1.5.3)
+    rack (1.6.10)
+    rack-protection (1.5.5)
       rack
-    rack-test (0.8.2)
+    rack-test (1.0.0)
       rack (>= 1.0, < 3)
-    rb-fsevent (0.10.2)
+    rb-fsevent (0.10.3)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
     rouge (3.1.1)
     ruby_dep (1.5.0)
     safe_yaml (1.0.4)
-    sass (3.5.5)
+    sass (3.5.7)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -126,20 +121,21 @@ GEM
     tilt (2.0.8)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
+    wdm (0.1.1)
 
 PLATFORMS
-  ruby
   x64-mingw32
 
 DEPENDENCIES
   bootstrap (~> 4.0.0)
-  jekyll (~> 3.7.2)
+  jekyll (~> 3.8.3)
   jekyll-admin
   jekyll-feed
   jekyll-github-metadata (~> 2.9.4)
   jekyll-redirect-from (~> 0.13.0)
   jekyll-sitemap (~> 1.1.1)
   jemoji
+  wdm (>= 0.1.0)
 
 BUNDLED WITH
-   1.16.1
+   1.16.3

_config.yml

@@ -106,6 +106,7 @@ defaults:
     values:
       layout: docs
       toc: true
+      wide: true
 
 # Custom variables
 repo:                 "https://github.com/codefresh-io/docs.codefresh.io"

_includes/header.html

@@ -23,6 +23,7 @@
 {% if page.layout == "docs" %} {% endif %}
 
 <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i|Source+Code+Pro:400,500,600" rel="stylesheet">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
 
 <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
 

_includes/scripts.html

@@ -22,7 +22,7 @@
   <script src="{{ site.baseurl }}/assets/js/vendor/clipboard.min.js"></script>
   <script src="{{ site.baseurl }}/assets/js/vendor/holder.min.js"></script>
   <script src="{{ site.baseurl }}/assets/js/vendor/jquery.smooth-scroll.min.js"></script>
-
+  <script src="{{ site.baseurl }}/assets/js/vendor/js.cookie.min.js"></script>
 
   <script src="{{ site.baseurl }}/assets/js/src/application.js"></script>
   <script src="{{ site.baseurl }}/assets/js/src/ie-emulation-modes-warning.js"></script>

_layouts/docs.html

@@ -16,24 +16,43 @@
 
     {% include docs-navbar.html %}
 
-    <div class="container docs-layout">
+    {% if page.wide %}
+    <div class="container-fluid docs-layout" data-layout-mode="{% if page.wide == true %}wide{% else %}boxed{% endif%}">
+    {% else %}
+    <div class="container docs-layout" data-layout-mode="{% if page.wide == true %}wide{% else %}boxed{% endif%}">
+    {% endif %}
       <div class="row flex-xl-nowrap">
         <div class="col-12 col-md-4 col-xl-3 col-xxl-3 bd-sidebar">
           {% include docs-sidebar.html.twig %}
         </div>
 
         {% if page.toc %}
-        <div class="d-none d-xl-block col-xl-3 col-xxl-3 bd-toc">
+        <div class="d-none d-xl-block col-xl-2 col-xxl-2 bd-toc">
           <div class="toc-inner">
             {% include docs-toc.html.twig sanitize=true html=content h_min=2 h_max=4 class="section-nav" item_class="toc-entry nav" item_link_class="nav-link" %}
           </div>
         </div>
         {% endif %}
 
-        <main class="col-12 col-md-8 {% if page.toc == true %}col-xl-6 col-xxl-6{% else %}col-xl-9 col-xxl-9{% endif%} py-3 pl-3 bd-content" role="main">
+        <main class="col-12 col-md-8 {% if page.toc == true %}col-xl-8 col-xxl-8{% else %}col-xl-10 col-xxl-10{% endif%} py-3 pl-3 bd-content" role="main">
           <div class="bd-content-inner py-md-3 pl-4 pl-md-5 pr-4 pr-md-5">
             <h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
             <p class="bd-lead">{{ page.description | smartify }}</p>
+            <div class="bd-content-top-controls">
+              <div class="btn-group dropleft">
+                <button type="button" class="btn dropdown-toggle btn-control-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="fas fa-cog"></i>
+                </button>
+                <div class="dropdown-menu">
+                  <div class="form-group">
+                    <span class="switch switch-sm">
+                      <input type="checkbox" class="switch" id="layoutModeSwitcher">
+                      <label for="layoutModeSwitcher">Wide layout</label>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
             {{ content }}
           </div>
         </main>

assets/css/docs.min.css

@@ -1,11 +1,3 @@
-/*!
- * JavaScript for Bootstrap's docs (https://getbootstrap.com)
- * Copyright 2011-2017 The Bootstrap Authors
- * Copyright 2011-2017 Twitter, Inc.
- * Licensed under the Creative Commons Attribution 3.0 Unported License. For
- * details, see https://creativecommons.org/licenses/by/3.0/.
- */
-
 /* global Clipboard: false, anchors: false, Holder: false */
 
 (function ($) {
@@ -191,5 +183,49 @@
       font: 'Helvetica',
       fontweight: 'normal'
     })
+
+    function changeLayout(wide) {
+      var $docsLayout = $('.docs-layout')
+      // eslint-disable-next-line no-unused-vars
+      // var $bdContext = $('.bd-content')
+      // var $bdToc = $('bd-toc')
+      if (wide) {
+        $docsLayout.removeClass('container').addClass('container-fluid')
+      } else {
+        $docsLayout.removeClass('container-fluid').addClass('container')
+      }
+    }
+
+    $('#layoutModeSwitcher')
+      .on('change', function () {
+        var chckd = this.checked ? '1' : '0'
+        changeLayout(this.checked)
+        window.Cookies.set('layoutMode', chckd)
+        $(this).next().html(this.checked ? 'Wide layout' : 'Boxed layout')
+      })
+      .each(function () {
+        var layoutMode = window.Cookies.get('layoutMode')
+        // eslint-disable-next-line no-undefined
+        if (layoutMode === undefined) {
+          var defaultMode = $('.docs-layout').data('layout-mode')
+          if (defaultMode === 'wide') {
+            changeLayout(true)
+            $(this).prop('checked', true)
+            $(this).next().html('Wide layout')
+          } else if (defaultMode === 'boxed') {
+            changeLayout(false)
+            $(this).prop('checked', false)
+            $(this).next().html('Boxed layout')
+          }
+        } else if (Number(layoutMode) === 1) {
+          $(this).prop('checked', true)
+          changeLayout(true)
+          $(this).next().html('Wide layout')
+        } else if (Number(layoutMode) === 0) {
+          $(this).prop('checked', false)
+          changeLayout(false)
+          $(this).next().html('Boxed layout')
+        }
+      })
   })
 }(jQuery))