search and list pages

config.toml

@@ -8,7 +8,11 @@ pluralizeListTitles = false
 
 enableRobotsTXT = true
 pygmentsCodeFences = true
-pygmentsCodeFencesGuessSyntax = true
+
+PygmentsStyle = "native"
+
+#pygmentsCodeFencesGuessSyntax = true
+
 
 [permalinks]
   inside-pages = "/:filename/"

content/rancher/v2.x/en/installation/ha/kubernetes-rke/_index.md

@@ -11,15 +11,15 @@ Using the sample below create the `rancher-cluster.yml` file. Replace the IP Add
 
 ```yaml
 nodes:
-    - address: 165.227.114.63
-      user: ubuntu
-      role: [controlplane,worker,etcd]
-    - address: 165.227.116.167
-      user: ubuntu
-      role: [controlplane,worker,etcd]
-    - address: 165.227.127.226
-      user: ubuntu
-      role: [controlplane,worker,etcd]
+  - address: 165.227.114.63
+    user: ubuntu
+    role: [controlplane,worker,etcd]
+  - address: 165.227.116.167
+    user: ubuntu
+    role: [controlplane,worker,etcd]
+  - address: 165.227.127.226
+    user: ubuntu
+    role: [controlplane,worker,etcd]
 ```
 
 #### Common RKE nodes: options

layouts/_default/list.html

@@ -10,18 +10,18 @@
 
     <div class="row m-t-sm">
 
-      <aside class="col-sm-3 col-xs-12 p-l-0">
+      <aside class="col-md-3 col-xs-12 p-l-0">
         {{ partial "docs-side-nav.html" . }}
       </aside>
 
-      <article class="{{ if ($.Scratch.Get "showSidebar") }} col-sm-6 {{else}} col-md-9 p-l-lg {{end}} col-xs-12">
+      <article class="{{ if ($.Scratch.Get "showSidebar") }}col-sm-6{{else}}col-md-9 p-l-lg {{end}}col-xs-12">
 
       {{ with .Params.Title }}
         <h1 class="m-t-0">{{ . }}</h1>
         <hr/>
       {{end}}
 
-      <div class="main-content">
+      <div class="main-content docs-body">
         <!-- this is a test -->
         <!-- {{ partial "page-nav.html" . }} -->
         <!-- end test -->

src/js/app.js

@@ -37,17 +37,6 @@ const bootstrapDocsSearch = function() {
   );
 
 
-  search.addWidget(
-    instantsearch.widgets.searchBox({
-      autofocus: true,
-      loadingIndicator: true,
-      container: '#search-box-mobile',
-      placeholder: 'Search Blog, Events, etc...',
-      magnifier: false,
-      reset: true,
-    })
-  );
-
   search.addWidget(
     instantsearch.widgets.infiniteHits({
       container: '#hits',
@@ -61,26 +50,61 @@ const bootstrapDocsSearch = function() {
 
   search.start();
 
-  $(window).on('keyup', e => {
-    if (e.which === 27 && $('.container-search').hasClass('open')) {
-      $('.container-search').toggleClass('open');
-      $('.overlay-search').toggleClass('open');
+  $(document).on('click', '.search-open', (e) => {
+    let wrapperId = $(e.currentTarget).data('launch-id');
+    let wrapper = $(`#${wrapperId}`);
+
+    let content = wrapper.find('div.content');
+
+    const modal = new tingle.modal({
+      closeMethods: ['overlay', 'button', 'escape'],
+      closeLabel: "Close",
+
+      onOpen: () => {
+        console.log('Search opened');
+      },
+
+      onClose: () => {
+        console.log('Search closed');
+      },
+
+      beforeClose: () => {
+        content.detach()
+        wrapper.append(content);
+        return true;
+      }
+    });
+
+    // set content
+    content.detach();
+    modal.setContent(content[0]);
+
+    // add a button
+    let label = wrapper.find('.footer-button-label').data('footer-label');
+    if ( label ) {
+      modal.addFooterBtn(label, 'tingle-btn tingle-btn--primary', function() {
+        // here goes some logic
+        modal.close();
+      });
     }
+
+    modal.open();
+    setTimeout(function() {
+      $('#search-box').focus();
+    }, 50);
   });
 
-  $('header').on('click', '#button-search', () => {
+  //mobile nav toggle
+  $(document).ready(function() {
+    $("body").addClass("js");
+    var $menu = $("#menu"),
+        $menulink = $(".menu-link");
 
-    let container = $('.container-search');
-    let overlay   = $('.overlay-search');
-
-    container.toggleClass('open');
-    overlay.toggleClass('open');
-
-    if (container.hasClass('open')) {
-      $('input#search-box').focus();
-    }
-
-    overlay.css({top: 120});
+    $menulink.click(function() {
+      $menulink.toggleClass("active");
+      $menu.toggleClass("active");
+      return false;
+    });
   });
 }
 
@@ -100,3 +124,5 @@ $(document).ready(() => {
   bootstrapDocsSearch();
   bootstrapIdLinks();
 });
+
+