update mobile codes.

content/_index.html

@@ -7,7 +7,14 @@ layout: "no-hero"
 <section class="docs-screen1">
     <div class="grid-container">
         <div class="row max-sized">
-            <div class="col-xl-7 texts-container">
+            <div class="
+              col-xl-7 
+              col-lg-7 
+              col-md-8 
+              col-sm-10 
+              col-xs-10 
+              col-10 
+              texts-container">
                 <div class="texts-wrap">
                     <h1 class="title-label">Rancher docs</h1>
 
@@ -17,7 +24,7 @@ layout: "no-hero"
         </div>
 
         <div class="row">
-            <div class="col-xl-12 lower-container">
+            <div class="col-12 lower-container">
                 <div class="decoration ground">
                     <img class="ground-lower" src="/imgs/docs/screen1-background-ground-lower.svg">
                     <img class="ground-upper" src="/imgs/docs/screen1-background-ground-upper.svg">
@@ -28,30 +35,46 @@ layout: "no-hero"
 </section>
 
 <section class="docs-note-item floating">
-    <div class="grid-container contents-container">
+  <div class="grid-container contents-container">
-        <div class="row max-sized set-lines contents-wrap">
+    <div class="row max-sized set-lines contents-wrap">
-            <div class="decoration floating">
+      <div class="decoration floating">
-                <img class="document" src="/imgs/docs/icon-document-for-note.svg">
+        <img class="document" src="/imgs/docs/icon-document-for-note.svg">
-            </div>
+      </div>
 
-            <div class="col-xl-8"></div>
+      <div class="
-            <div class="col-xl-4 texts-container background-white background-white-side-right">
+        col-xl-8 
-                <div class="icon-container">
+        col-lg-8 
-                    <img class="icon" src="/imgs/docs/icon-document.svg">
+        col-md-8 
-                </div>
+        col-sm-7 
-                <div class="texts-wrap">
+        col-xs-7 
-                    <div class="label">Featured resource</div>
+        hide-sm-down  
-                    <p class="description-label">Read about how to migrate from Rancher v1.6 Cattle to v2.x</p>
+        "></div>
-                </div>
+      <div class="
-
+        col-xl-4 offset-xl-0 
-                <div class="buttons-container">
+        col-lg-4 offset-lg-0 
-                    <button class="button text">
+        col-md-4 offset-md-0 
-                        <span>Read the report</span>
+        col-sm-10 offset-sm-1 
-                    </button>
+        col-xs-10 offset-xs-1 
-                </div>
+        col-12 offset-0 
-            </div>
+        texts-container background-white background-white-side-right">
+        <div class="icon-container">
+          <img class="icon" src="/imgs/docs/icon-document.svg">
         </div>
+        <div class="texts-wrap">
+          <div class="label">Featured resource</div>
+          <p class="description-label">Read about how to migrate from Rancher v1.6 Cattle to v2.x</p>
+        </div>
+
+        <div class="buttons-container">
+          <a href="{{< baseurl >}}/rancher/v2.x/en/v1.6-migration/">
+            <button class="button text">
+                <span>Read the report</span>
+            </button>
+          </a>
+        </div>
+      </div>
     </div>
+  </div>
 </section>
 
 <section class="docs-screen2">
@@ -63,9 +86,16 @@ layout: "no-hero"
         </div>
 
         <div class="row max-sized cards-container">
-            <div class="col-xl-12 cards-wrap">
+            <div class="col-12 cards-wrap">
                 <div class="row card-items-wrap">
-                    <div class="col-xl-6 card-item">
+                    <div class="
+                      col-xl-6 
+                      col-lg-6 
+                      col-md-6 
+                      col-sm-12 
+                      col-xs-12 
+                      col-12 
+                      card-item">
                         <div class="card-wrap">
                             <h3 class="title-label">
                                 <span class="background">2.x</span>
@@ -85,7 +115,14 @@ layout: "no-hero"
                             </div>
                         </div>
                     </div>
-                    <div class="col-xl-6 card-item">
+                    <div class="
+                      col-xl-6 
+                      col-lg-6 
+                      col-md-6 
+                      col-sm-12 
+                      col-xs-12 
+                      col-12 
+                      card-item">
                         <div class="card-wrap">
                             <h3 class="title-label">
                                 <span class="background">1.6</span>
@@ -105,7 +142,14 @@ layout: "no-hero"
                             </div>
                         </div>
                     </div>
-                    <div class="col-xl-6 card-item">
+                    <div class="
+                      col-xl-6 
+                      col-lg-6 
+                      col-md-6 
+                      col-sm-12 
+                      col-xs-12 
+                      col-12 
+                      card-item">
                         <div class="card-wrap">
                             <h3 class="title-label">
                                 <span class="background">OS</span>
@@ -125,7 +169,14 @@ layout: "no-hero"
                             </div>
                         </div>
                     </div>
-                    <div class="col-xl-6 card-item">
+                    <div class="
+                      col-xl-6 
+                      col-lg-6 
+                      col-md-6 
+                      col-sm-12 
+                      col-xs-12 
+                      col-12 
+                      card-item">
                         <div class="card-wrap">
                             <h3 class="title-label">
                                 <span class="background">RKE</span>
@@ -164,8 +215,8 @@ layout: "no-hero"
               <p>Rancher manages all of your Kubernetes clusters everywhere, unifies them under centralized RBAC, monitors them and lets you easily deploy and manage workloads through an intuitive user interface.</p>
             </div>
             <div class="border-top p-t-xs m-t-sm">
-            <p>Read about how to <a href="{{< baseurl >}}/rancher/v2.x/en/v1.6-migration/">migrate from Rancher v1.6 Cattle to v2.x</a></p>
+              <p>Read about how to <a href="{{< baseurl >}}/rancher/v2.x/en/v1.6-migration/">migrate from Rancher v1.6 Cattle to v2.x</a></p>
-            <a href="{{< baseurl >}}/rancher/v2.x/en/" class="btn bg-link">Read the Docs</a>
+              <a href="{{< baseurl >}}/rancher/v2.x/en/" class="btn bg-link">Read the Docs</a>
             </div>
             </div>
         </div>

layouts/_default/list.html

@@ -180,7 +180,7 @@
                 e.preventDefault();
 
                 if ($(this).attr('class') === 'back-to-the-top') {
-                  $('.mobile-header-container').scrollTop(0);
+                  $('.side-menus-container').scrollTop(0);
                 }
 
                 if($(this).children(".submenu").length > 0) {
@@ -248,108 +248,16 @@
         })( jQuery, window, document );
 
         var sideNavMenus = $('.side-menus-container');
-
         sideNavMenus.jqueryAccordionMenu();
+
+        var sideNavMenusMobile = $('.docs-container .side-menus');
+        $('.guide-menus-activator').click(function() {
+          if (sideNavMenusMobile.hasClass('show')) {
+            sideNavMenusMobile.removeClass('show');
+          } else {
+            sideNavMenusMobile.addClass('show');
+          }
+        });
       });
   </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 }}

layouts/partials/docs-side-nav.html

@@ -59,6 +59,19 @@
 <div class="side-menus-container guide-menus jquery-accordion-menu">
   <ul class="side-menus-wrap second">
     {{ template "section-tree-nav" ($.Scratch.Get "topLevel") }}
+
+    <li class="back-to-the-top">
+      <a href="#" class="submenu-indicator-close">
+        Back to the top 
+        <svg class="svg-icon" enable-background="new 0 0 34 34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">
+          <g class="svg-linear" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
+              <path d="m12 14.5 5-5 5 5"></path><path d="m17 9.5v15"></path>
+          </g>
+        </svg>
+
+        <span class="submenu-indicator"><span class="object1"></span><span class="object2"></span><span class="object3"></span></span>
+      </a>
+    </li>
   </ul>
 </div>
 

layouts/partials/page-edit.html

@@ -1,5 +1,5 @@
 <div class="buttons-container">
-    <a href="{{.Site.Params.ghdocsrepo}}/edit/master/content/{{.File.Path}}" class="btn bg-link"></a>
+    <a href="{{.Site.Params.ghdocsrepo}}/edit/master/content/{{.File.Path}}" class="btn bg-link">
         <button class="button has-icon-right">
             <span>Edit this page</span>
             <svg class="icon right" enable-background="new 0 0 34 34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">