Yiliu/master/update mobile sidebar (#204)

* Update sidebar menu for Quicksilver styles Signed-off-by: Eric Poirier <eric.poirier@eclipse-foundation.org> * Create separate layout for the new sidebar Signed-off-by: Eric Poirier <eric.poirier@eclipse-foundation.org> * Add sidebar-block for third-parent page only Signed-off-by: Eric Poirier <eric.poirier@eclipse-foundation.org> * Update mobile sidebar based on Eric sidebar Signed-off-by: Yi Liu <yi.liu@eclipse-foundation.org> * Adjust mobile sidebar based on Eric sidebar block Signed-off-by: Yi Liu <yi.liu@eclipse-foundation.org> * one more fix of paddings Signed-off-by: Yi Liu <yi.liu@eclipse-foundation.org> * Add pre back Signed-off-by: Yi Liu <yi.liu@eclipse-foundation.org> * sync updates from Eric Signed-off-by: Yi Liu <yi.liu@eclipse-foundation.org> * add bottom spacing for children, use offset instead of empty div Signed-off-by: Yi Liu <yi.liu@eclipse-foundation.org> * remove not needed prev., use offset Signed-off-by: Yi Liu <yi.liu@eclipse-foundation.org> * sync if eq current page Signed-off-by: Yi Liu <yi.liu@eclipse-foundation.org> * use cond, and default instead of scratch Signed-off-by: Yi Liu <yi.liu@eclipse-foundation.org> * remove ^ in package, scratch check lower Signed-off-by: Yi Liu <yi.liu@eclipse-foundation.org> * remove home text, make margin-top-20 Signed-off-by: Yi Liu <yi.liu@eclipse-foundation.org> Co-authored-by: Eric Poirier <eric.poirier@eclipse-foundation.org> Co-authored-by: Christopher Guindon <chris.guindon@eclipse-foundation.org>
EclipseFdn · Mar 11, 2021 · 4ad2aad · 4ad2aad
1 parent 9f09ca6
commit 4ad2aad
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 51 deletions.
diff --git a/exampleSite/config/_default/config.toml b/exampleSite/config/_default/config.toml
@@ -24,6 +24,7 @@ googleAnalytics = ""
   table_classes = "table table-bordered"
   hide_cfa_same_page = true
   show_collapsible_menu = true
+  sidebar_layout = "default"
 
 [Author]
   name = "Christopher Guindon"

diff --git a/exampleSite/config/_default/menus.en.toml b/exampleSite/config/_default/menus.en.toml
@@ -253,43 +253,54 @@
     url = "/translations"
     weight = 3
     parent = "home"
+    identifier = "translation-guide"
+
+[[sidebar]]
+    name = "Translation Guide 1" 
+    url = "/translations"
+    weight = 1
+    parent = "translation-guide"
+
+[[sidebar]]
+    name = "Translation Guide 2" 
+    url = "/translations"
+    weight = 1
+    parent = "translation-guide"
 
 [[sidebar]]
     name = "Third parent"
     url = "/third-parent"
     weight = 2
-    pre = "<i class=\"fa fa-github fa-fw\"></i>"
+    pre = "<i class=\"sidebar-menu-icon\" data-feather=\"github\"></i>"
     identifier = "third-parent"
 
 [[sidebar]]
-    name = "test children"
+    name = "Test Children"
     url = "/third-parent/test-children"
     weight = 1
     parent = "third-parent"
     pre = "<i class=\"fa fa-chevron-right fa-fw\"></i>"
     identifier = "test-children"
 
 [[sidebar]]
-    name = "test children 2"
+    name = "Test Children 2"
     url = "/third-parent/test-children-2"
     weight = 1
     parent = "third-parent"
     pre = "<i class=\"fa fa-chevron-right fa-fw\"></i>"
     identifier = "test-children-2"
 
 [[sidebar]]
-    name = "test children's children-1"
+    name = "Test Children Children 1"
     url = "/third-parent/test-children/test-children-children"
     weight = 1
     parent = "test-children"
-    pre = "<i class=\"fa fa-chevron-right fa-fw\"></i>"
 
 [[sidebar]]
-    name = "test children's children-2"
+    name = "Test Children Children 2"
     url = "/third-parent/test-children/test-children-children-2"
     weight = 2
     parent = "test-children"
-    pre = "<i class=\"fa fa-chevron-right fa-fw\"></i>"
 
 [[sidebar]]
     name = "Membership"

diff --git a/exampleSite/config/_default/menus.ru.toml b/exampleSite/config/_default/menus.ru.toml
@@ -244,30 +244,30 @@
     identifier = "third-parent"
 
 [[sidebar]]
-    name = "test children"
+    name = "Test Children"
     url = "/third-parent/test-children"
     weight = 1
     parent = "third-parent"
     pre = "<i class=\"fa fa-chevron-right fa-fw\"></i>"
     identifier = "test-children"
 
 [[sidebar]]
-    name = "test children 2"
+    name = "Test Children 2"
     url = "/third-parent/test-children-2"
     weight = 1
     parent = "third-parent"
     pre = "<i class=\"fa fa-chevron-right fa-fw\"></i>"
     identifier = "test-children-2"
 
 [[sidebar]]
-    name = "test children's children-1"
+    name = "Test Children's children-1"
     url = "/third-parent/test-children/test-children-children"
     weight = 1
     parent = "test-children"
     pre = "<i class=\"fa fa-chevron-right fa-fw\"></i>"
 
 [[sidebar]]
-    name = "test children's children-2"
+    name = "Test Children's children-2"
     url = "/third-parent/test-children/test-children-children-2"
     weight = 2
     parent = "test-children"

diff --git a/exampleSite/content/third-parent/_index.md b/exampleSite/content/third-parent/_index.md
@@ -4,6 +4,7 @@ headline: "headline"
 date: 2018-04-05T16:09:45-04:00
 description: "description"
 hide_sidebar: false
+sidebar_layout: "sidebar_block"
 ---
 
 Third Parent
diff --git a/exampleSite/content/third-parent/test-children-2/_index.md b/exampleSite/content/third-parent/test-children-2/_index.md
@@ -1,5 +1,5 @@
 ---
-title: "Test Children 222"
+title: "Test Children 2"
 headline: "headline"
 date: 2018-04-05T16:09:45-04:00
 description: "description"

diff --git a/exampleSite/content/third-parent/test-children/test-children-children-2/_index.md b/exampleSite/content/third-parent/test-children/test-children-children-2/_index.md
@@ -1,5 +1,5 @@
 ---
-title: "Test Children Children Two"
+title: "Test Children Children 2"
 headline: "headline"
 date: 2018-04-05T16:09:45-04:00
 description: "description"

diff --git a/exampleSite/content/third-parent/test-children/test-children-children/_index.md b/exampleSite/content/third-parent/test-children/test-children-children/_index.md
@@ -1,5 +1,5 @@
 ---
-title: "Test Children Children One"
+title: "Test Children Children 1"
 headline: "headline"
 date: 2018-04-05T16:09:45-04:00
 description: "description"

diff --git a/layouts/partials/collapsible-menu.html b/layouts/partials/collapsible-menu.html
@@ -21,38 +21,55 @@
 {{ end }}
 {{$currentSection := .Scratch.Get "currentSection" }}
 
+<!--- Sidebar layout --->
+{{ $sidebarLayout := .Page.Params.sidebar_layout | default .Site.Params.sidebar_layout | default "default" }}
+{{ $classname := cond (eq $sidebarLayout "sidebar_block") "sidebar-block" "collapsible-menu" }}
+
 <!----------------------- Collapisible start ------------------------------------>
   {{ range .Site.Menus.sidebar }}
     {{$parentItem := . }}
     {{ if and (.HasChildren) (eq $currentSection $parentItem.Identifier) }}
-    <div class="collapsible-menu container hidden-lg hidden-md visible-sm visible-xs">
-      <div class="container collapsible-menu-item related-content">
+    <div class="{{ $classname }} margin-top-20 container hidden-lg hidden-md visible-sm visible-xs">
+      <div class="container padding-left-0 padding-right-0 {{ $classname }}-item related-content">
         <a href="#sidebars-contents" data-toggle="collapse" aria-expanded="false" aria-controls="sidebars-contents">
           <div class="col-xs-6"><i class="fa fa-plus fa-bars"></i></div>
-          <div class="col-xs-18 collapsible-menu-text">Related Content</div>
+          <div class="col-xs-18 {{ $classname }}-text">Related Content</div>
         </a>
-      </div>  
-      <div class="container collapse" id="sidebars-contents">
+      </div>
+      <div class="container collapse {{ if eq $classname "sidebar-block" }} padding-left-0 padding-right-0 {{ end }}" id="sidebars-contents">
+
       {{ range .Children }}
+
         {{ if eq .HasChildren false }}
-          <div class="row collapsible-menu-item{{ if eq $currentPage.Title .Name }} active{{ end }}">
+          <div class="row {{ $classname }}-item{{ if eq $currentPage.Title .Name }} active{{ end }}">
             <a href="{{ .URL }}" {{ if eq $currentPage.Title .Name }}class="active"{{ end }}>
-              <div class="col-xs-18 col-xs-offset-6 collapsible-menu-text">{{ .Name }}</div>
+              <div class="col-xs-6">{{ .Pre }}</div>
+              <div class="col-xs-18 {{ $classname }}-text">{{ .Name }}</div>
             </a>
           </div>
         {{ end }} <!-- if eq .HasChildren false end -->
+
         {{ if .HasChildren }}
-          <div class="row collapsible-menu-item{{ if eq $currentPage.Title .Name }} active{{ end }}">
+          <div class="row {{ $classname }}-item{{ if eq $currentPage.Title .Name }} active{{ end }}">
             <a href="#sub-children-{{ .Identifier }}" data-toggle="collapse" aria-expanded="false" aria-controls="sub-children{{ .Identifier }}" {{ if eq $currentPage.Title .Name }}class="active"{{ end }}>
               <div class="col-xs-6">{{ .Pre }}</div>
-              <div class="col-xs-18 collapsible-menu-text">{{ .Name }}</div>
+              <div class="col-xs-18 {{ $classname }}-text">{{ .Name }}</div>
             </a>
           </div>
-          <div class="row collapsible-menu-sub-items collapse" id="sub-children-{{ .Identifier }}">
+          <div class="row {{ $classname }}-sub-items {{ if eq $classname "sidebar-block" }} margin-bottom-20 {{ end }} collapse" id="sub-children-{{ .Identifier }}">
+            <!-- Check if current parent menu has children and has own url, we should add an entry to goto this parent -->
+            {{ if .URL }}
+              <div class="row {{ $classname }}-sub-item{{ if eq $currentPage.Title .Name }} active{{ end }}">
+                <a href="{{ .URL }}" {{ if eq $currentPage.Title .Name }}class="active"{{ end }}>
+                  <div class="col-xs-18 col-xs-offset-6 {{ $classname }}-text">{{ .Name }}</div>
+                </a>
+              </div>
+            {{ end }}
+
             {{ range .Children }}
-              <div class="row collapsible-menu-sub-item{{ if eq $currentPage.Title .Name }} active{{ end }}">
+              <div class="row {{ $classname }}-sub-item{{ if eq $currentPage.Title .Name }} active{{ end }}">
                 <a href="{{ .URL }}" {{ if eq $currentPage.Title .Name }}class="active"{{ end }}>
-                  <div class="col-xs-18 col-xs-offset-6 collapsible-menu-text">{{ .Name }}</div>
+                  <div class="col-xs-18 col-xs-offset-6 {{ $classname }}-text">{{ .Name }}</div>
                 </a>
               </div>
             {{ end }} <!--Children's Children end-->
@@ -62,7 +79,7 @@
       </div>
     {{ end }}  <!-- if .HasChildren end -->
   {{ end }}  <!-- range .Site.Menus.sidebar end -->
-  </div> <!-- div id="collapsible-menu" end -->
+  </div> <!-- div id="{{ $classname }}" end -->
   <!-------------------- Collapisible end ----------------------------------------->
 
   {{ end }} <!-- if or (eq $currentPage.Params.show_collapsible_menu true) (eq .Site.Params.show_collapsible_menu true) end-->

diff --git a/layouts/partials/main_suffix.html b/layouts/partials/main_suffix.html
@@ -12,9 +12,14 @@
 -->
 
     {{ if ne .Page.Params.hide_sidebar true }} 
+      {{ $sidebarLayout := .Page.Params.sidebar_layout | default .Site.Params.sidebar_layout | default "default" }}
       </div>
         <div class="{{- .Params.main_sidebar_class | default .Site.Params.main_sidebar_class | default "col-md-6  padding-bottom-30"}}">
-          {{ partial "sidebar.html" . }}
+          {{ if eq $sidebarLayout "default" }}
+            {{ partial "sidebar.html" . }}
+          {{ else if eq $sidebarLayout "sidebar_block" }}
+            {{ partial "sidebar-block.html" . }}
+          {{ end }}
         </div>
       </div>
     {{ end }}

diff --git a/layouts/partials/sidebar-block.html b/layouts/partials/sidebar-block.html
@@ -0,0 +1,54 @@
+<!-- 
+  Copyright (c) 2018 Eclipse Foundation, Inc.
+
+  This program and the accompanying materials are made available under the
+  terms of the Eclipse Public License v. 2.0 which is available at
+  http://www.eclipse.org/legal/epl-2.0.
+
+  Contributors:
+    Christopher Guindon <chris.guindon@eclipse-foundation.org>
+
+  SPDX-License-Identifier: EPL-2.0
+-->
+
+{{ if isset .Site.Menus "sidebar" }}
+  {{ $currentPage := . }}
+  {{ .Scratch.Set "currentSection" "home" }}
+  {{ if $currentPage.Section }}
+    {{ .Scratch.Set "currentSection" $currentPage.Section }}
+  {{ end }}
+  {{$currentSection := .Scratch.Get "currentSection" }}
+  {{ range .Site.Menus.sidebar }}
+    {{$parentItem := . }}
+      {{ if and (.HasChildren) (eq $currentSection $parentItem.Identifier) }}
+        <aside class="sidebar-block">
+        {{ range .Children }}
+          {{ if .HasChildren }}
+            <div class="row sidebar-block-item{{ if eq $currentPage.Title .Name }} active{{ end }}">
+              <a href="{{ .URL }}" {{ if eq $currentPage.Title .Name }}class="active"{{ end }}>
+                <div class="col-xs-6">{{ .Pre }}</div>
+                <div class="col-xs-18 sidebar-block-text">{{ .Name }}</div>
+              </a>
+            </div>
+            <div class="row sidebar-block-sub-items margin-bottom-20">
+              {{ range .Children }}
+                <div class="row sidebar-block-sub-item{{ if eq $currentPage.Title .Name }} active{{ end }}">
+                  <a href="{{ .URL }}" {{ if eq $currentPage.Title .Name }}class="active"{{ end }}>
+                    <div class="col-xs-18 col-xs-offset-6 sidebar-block-text">{{ .Name }}</div>
+                  </a>
+                </div>
+              {{ end }}
+            </div>
+          {{ else if or (eq $parentItem.Identifier $currentSection) (eq .Parent $currentSection) }}
+            <div class="row sidebar-block-item{{ if eq $currentPage.Title .Name }} active{{ end }}">
+              <a href="{{ .URL }}" {{ if eq $currentPage.Title .Name }}class="active"{{ end }}>
+                <div class="col-xs-6">{{ .Pre }}</div>
+                <div class="col-xs-18 sidebar-block-text">{{ .Name }}</div>
+              </a>
+            </div>
+          {{ end }}
+        {{ end }}
+        </aside>
+      {{ end }}
+  {{ end }}
+{{ end }}
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
@@ -1,13 +1,10 @@
 <!-- 
   Copyright (c) 2018 Eclipse Foundation, Inc.
-
   This program and the accompanying materials are made available under the
   terms of the Eclipse Public License v. 2.0 which is available at
   http://www.eclipse.org/legal/epl-2.0.
-
   Contributors:
     Christopher Guindon <chris.guindon@eclipse-foundation.org>
-
   SPDX-License-Identifier: EPL-2.0
 -->
 
@@ -42,4 +39,4 @@
         </aside>
       {{ end }}
   {{ end }}
-{{ end }}
+{{ end }}
diff --git a/package-lock.json b/package-lock.json