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/"

layouts/_default/list.html

@@ -10,7 +10,7 @@
 
     <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>
 
@@ -21,7 +21,7 @@
         <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 => {
+  $(document).on('click', '.search-open', (e) => {
-    if (e.which === 27 && $('.container-search').hasClass('open')) {
+    let wrapperId = $(e.currentTarget).data('launch-id');
-      $('.container-search').toggleClass('open');
+    let wrapper = $(`#${wrapperId}`);
-      $('.overlay-search').toggleClass('open');
+
+    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;
       }
     });
 
-  $('header').on('click', '#button-search', () => {
+    // set content
+    content.detach();
+    modal.setContent(content[0]);
 
-    let container = $('.container-search');
+    // add a button
-    let overlay   = $('.overlay-search');
+    let label = wrapper.find('.footer-button-label').data('footer-label');
-
+    if ( label ) {
-    container.toggleClass('open');
+      modal.addFooterBtn(label, 'tingle-btn tingle-btn--primary', function() {
-    overlay.toggleClass('open');
+        // here goes some logic
-
+        modal.close();
-    if (container.hasClass('open')) {
+      });
-      $('input#search-box').focus();
     }
 
-    overlay.css({top: 120});
+    modal.open();
+    setTimeout(function() {
+      $('#search-box').focus();
+    }, 50);
+  });
+
+  //mobile nav toggle
+  $(document).ready(function() {
+    $("body").addClass("js");
+    var $menu = $("#menu"),
+        $menulink = $(".menu-link");
+
+    $menulink.click(function() {
+      $menulink.toggleClass("active");
+      $menu.toggleClass("active");
+      return false;
+    });
   });
 }
 
@@ -100,3 +124,5 @@ $(document).ready(() => {
   bootstrapDocsSearch();
   bootstrapIdLinks();
 });
+
+