rancher-docs/layouts/_default/list.html

{{ define "title" }}
  {{ .Title }} – {{ .Site.Title }}
{{ end }}

{{ define "hero" }}
{{ end }}

{{ define "main" }}
  <section class="docs-container">
    <div class="grid-container">
      <div class="row max-sized set-lines set-ground">
        <div class="col-4"></div>
        <div class="col-4"></div>
        <div class="col-4"></div>
      </div>

      <div class="head-blank"></div>

      <div class="row max-sized contents-container background-base-gray-side">
        <div class="
        col-xl-3 
        col-lg-4 
        col-md-4 
        col-sm-12 
        col-xs-12 
        col-12 
        side-menus">
        <div class="search-container">
          <input class="search input" placeholder="SEARCH" />
        </div>

        
        <!-- <div class="side-menus-wrap jquery-accordion-menu"> -->
        {{ partial "docs-side-nav.html" . }}
        <!-- </div> -->
      </div>
      <div class="
        col-xl-9 
        col-lg-8 
        col-md-8 
        col-sm-12 
        col-xs-12 
        col-12 
        texts-container">
        <div class="docs-wrap">
            {{ with .Params.Title }}
            <h1 class="m-t-0">{{ . }}</h1>
            <hr/>
          {{end}}
    
          {{ if .Params.ctaBanner }}
            {{ with index .Site.Data.cta .Params.ctaBanner }}
              <div class="docs-banner">
                <h3 class="">{{ .header }}</h3>

                <div class="buttons-container">
                  <a href="{{ .link }}" target="_blank" class="btn border-btn">
                    <button class="button has-icon-right">
                      <span>{{ .button }}</span>
                      <svg class="icon right" enable-background="new 0 0 34 34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">
                        <g>
                          <path class="svg-linear" d="m19.5 12 5 5-5 5"></path>
                          <path class="svg-linear" d="m24.5 17h-15"></path>
                        </g>
                      </svg>
                    </button>
                  </a>
                </div>
              </div>
            {{ end }}
          {{ end }}
    
          <div class="main-content docs-body">
            <!-- this is a test -->
            <!-- {{ partial "page-nav.html" . }} -->
            <!-- end test -->
            {{ .Content }}
    
            {{ $paginator := .Scratch.Get "paginator" }}
            {{ range $paginator.Pages }}
              <div class="box m-b-md">
                <div class="p-a-sm">
                  <h3><a href="{{.URL}}">{{.Title}}</a></h3>
    
                  {{ if .Params.Image }}
                    <div class="thumbnail"><img src="{{ .Params.Image }}" alt="{{ .Params.Title }}"></div>
                  {{end}}
    
                  <p>{{ .Summary | safeHTML }}</p>
                  {{ if .Truncated }}
                  <div>
                    <a href="{{ .RelPermalink }}">Read More…</a>
                  </div>
                  {{ end }}
                </div>
                <div class="bg-default">
                  <div class="row">
    
                    {{ with .Params.Author }}
                      <div class="p-h-sm p-v-xs"><i class="material-icons">person_outline</i> By: {{ . }}</div>
                    {{end}}
    
                    {{ if eq .Section "events" }}
                      {{ with .Params.EventDate }}
                        <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ . }}</div>
                      {{end}}
    
                    {{ else }}
    
                      {{ with .Params.Date }}
                        <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ .Format "January 2, 2006" }}</div>
                      {{end}}
                    {{end}}
    
                    {{ if eq .Section "blog" }}
                      <div class="p-h-sm p-v-xs"><i class="material-icons">timer</i> Read Time: {{.ReadingTime}} minutes</div>
                    {{end}}
    
                    {{ with .Params.Location }}
                      <div class="p-h-sm p-v-xs"><i class="material-icons">location_on</i> {{ . }}</div>
                      {{end}}
    
                  </div>
                </div>
              </div>
              {{ end }}
            </div>
            {{ template "_internal/pagination.html" . }}
    
            <div class="p-v-xs">{{ partial "page-edit.html" . }}</div>
          </article>
          <!-- {{ with .TableOfContents }}
            <div class="offset-watch invisible"></div>
            <aside class="col-sm-2 col-xs-12 unstyled toc-container hidden-md">
              <h4 class="m-b-0">On this page</h4>
              {{ . }}
            </aside>
          {{ end }} -->
        </div>
      </div>
    </div>
  </section>


  <script>
      $(document).ready(function() {
        // Side menu script
        ;(function ( $, window, document, undefined ) {
          var pluginName = "jqueryAccordionMenu";
          var defaults = {
            speed: 300,
            showDelay: 0,
            hideDelay: 0,
            singleOpen: true,
            clickEffect: true
          };

          function Plugin ( element, options ) {
            this.element = element;
            this.settings = $.extend( {}, defaults, options );
            this._defaults = defaults;
            this._name = pluginName;
            this.init();
          };
            
          $.extend(Plugin.prototype, {
            
            init: function () {
              this.openSubmenu();
              this.submenuIndicators();
              if(this.settings.clickEffect){
                this.addClickEffect();
              }
            },
            
            openSubmenu: function () {
              var opts = this.settings; //to differ from local variable "this"
              $(this.element).children("ul").find("li").bind("click touchstart", function(e){
                e.stopPropagation(); 
                e.preventDefault();

                if ($(this).attr('class') === 'back-to-the-top') {
                  $('.mobile-header-container').scrollTop(0);
                }

                if($(this).children(".submenu").length > 0) {
                  if($(this).children(".submenu").css("display") == "none") {
                    $(this).children(".submenu").delay(opts.showDelay).slideDown(opts.speed);
                    $(this).children(".submenu").siblings("a").addClass("submenu-indicator-minus");
                    $(this).addClass("activate");
                    if(opts.singleOpen){
                      $(this).siblings().children(".submenu").slideUp(opts.speed);
                      $(this).siblings().children(".submenu").siblings("a").removeClass("submenu-indicator-minus");
                      $(this).removeClass("activate");
                    }
                    return false;
                  } else {
                    $(this).children(".submenu").delay(opts.hideDelay).slideUp(opts.speed);
                    $(this).removeClass("activate");
                  }
                  if($(this).children(".submenu").siblings("a").hasClass("submenu-indicator-minus")){
                    $(this).children(".submenu").siblings("a").removeClass("submenu-indicator-minus");
                  }
                }
                window.location.href = $(this).children("a").attr("href");
              });
            },
            
            submenuIndicators: function () {
              if($(this.element).find(".submenu").length > 0){
                $(this.element).find(".submenu").siblings("a").append("<span class='submenu-indicator'><span class='object1'></span><span class='object2'></span><span class='object3'></span></span>");
              }
            },
            
            addClickEffect: function () {
              var ink, d, x, y;
              $(this.element).find("a").bind("click touchstart", function(e){
                $(".ink").remove();
                
                if($(this).children(".ink").length === 0){
                  $(this).prepend("<span class='ink'></span>");
                }
                
                ink = $(this).find(".ink");
                ink.removeClass("animate-ink");
                
                if(!ink.height() && !ink.width()){
                  d = Math.max($(this).outerWidth(), $(this).outerHeight());
                  ink.css({height: d, width: d});
                }
                
                x = e.pageX - $(this).offset().left - ink.width()/2;
                y = e.pageY - $(this).offset().top - ink.height()/2;
    
                ink.css({top: y+'px', left: x+'px'}).addClass("animate-ink");
              });
            }
          });

          $.fn[ pluginName ] = function ( options ) {
            this.each(function() {
              if ( !$.data( this, "plugin_" + pluginName ) ) {
                $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
              }
            });
            return this;
          };
        })( jQuery, window, document );

        var sideNavMenus = $('.side-menus-container');

        sideNavMenus.jqueryAccordionMenu();
      });
  </script>








  <div class="wrapper">

    <div class="row m-t-sm">

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

      {{ with .Params.Title }}
        <h1 class="m-t-0">{{ . }}</h1>
        <hr/>
      {{end}}

      {{ if .Params.ctaBanner }}
        {{ with index .Site.Data.cta .Params.ctaBanner }}
          <div class="row center-xs middle-xs bg-info shadow rounded-corners">
            <h3 class="m-v-sm m-r-sm text-white">{{ .header }}</h3>
            <a href="{{ .link }}" target="_blank" class="btn border-btn">{{ .button }}</a>
          </div>
        {{ end }}
      {{ end }}

      <div class="main-content docs-body">
        <!-- this is a test -->
        <!-- {{ partial "page-nav.html" . }} -->
        <!-- end test -->
        {{ .Content }}

        {{ $paginator := .Scratch.Get "paginator" }}
        {{ range $paginator.Pages }}
          <div class="box m-b-md">
            <div class="p-a-sm">
              <h3><a href="{{.URL}}">{{.Title}}</a></h3>

              {{ if .Params.Image }}
                <div class="thumbnail"><img src="{{ .Params.Image }}" alt="{{ .Params.Title }}"></div>
              {{end}}

              <p>{{ .Summary | safeHTML }}</p>
              {{ if .Truncated }}
              <div>
                <a href="{{ .RelPermalink }}">Read More…</a>
              </div>
              {{ end }}
            </div>
            <div class="bg-default">
              <div class="row">

                {{ with .Params.Author }}
                  <div class="p-h-sm p-v-xs"><i class="material-icons">person_outline</i> By: {{ . }}</div>
                {{end}}

                {{ if eq .Section "events" }}
                  {{ with .Params.EventDate }}
                    <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ . }}</div>
                  {{end}}

                {{ else }}

                  {{ with .Params.Date }}
                    <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ .Format "January 2, 2006" }}</div>
                  {{end}}
                {{end}}

                {{ if eq .Section "blog" }}
                  <div class="p-h-sm p-v-xs"><i class="material-icons">timer</i> Read Time: {{.ReadingTime}} minutes</div>
                {{end}}

                {{ with .Params.Location }}
                  <div class="p-h-sm p-v-xs"><i class="material-icons">location_on</i> {{ . }}</div>
                  {{end}}

              </div>
            </div>
          </div>
          {{ end }}
        </div>
        {{ template "_internal/pagination.html" . }}

        <div class="p-v-xs">{{ partial "page-edit.html" . }}</div>
      </article>
      <!-- {{ with .TableOfContents }}
        <div class="offset-watch invisible"></div>
        <aside class="col-sm-2 col-xs-12 unstyled toc-container hidden-md">
          <h4 class="m-b-0">On this page</h4>
          {{ . }}
        </aside>
      {{ end }} -->
    </div>
  </div>
{{ end }}