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() {
      $('.guide-menus-activator').click(function() {
        $('.docs-container .side-menus').toggleClass('show');
      });

      // anchor click control.
      $("a[href*='#']").click(function(e) {
      // e.preventDefault();

        if ($(this).attr('data-target') === undefined && $(this).attr('href').length > 1) {
          var hash = $(this).attr('href').substring(1),
              objt = $('#' + hash),
              objt_mt = Number(objt.css('margin-top').replace(/[^0-9]/g,"")),
              depth = 80,
              scrn = $(window).width();
              scrn_check = 1025;

          if (scrn < scrn_check) {
            depth = 120;
          }

          if (objt_mt > 0) {
            depth = depth + objt_mt
          }

          if ($(this).attr('href').charAt(0) === '#') {
            var objectTop = $($(this).attr('href')).offset().top;

            setTimeout(function() {
              $('html').scrollTop(objectTop - depth);
            }, 100);
          }
        }
      });
    });
  </script>
{{ end }}