[incubator-openwhisk-website] branch master updated: FIx index to allow full width click-select of list items (#333)

[pd...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

pdesai pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-openwhisk-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 19f25d9  FIx index to allow full width click-select of list items (#333)
19f25d9 is described below

commit 19f25d9c606a454802528e2de91cb55b1b7a677b
Author: Matt Rutkowski <mr...@us.ibm.com>
AuthorDate: Fri Sep 7 16:06:37 2018 -0500

    FIx index to allow full width click-select of list items (#333)
---
 _includes/index/index.js | 14 ++------------
 _scss/_base.scss         | 33 +++++++++++++++++++++++++++++++++
 _scss/_skin.scss         |  4 ++--
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/_includes/index/index.js b/_includes/index/index.js
index a85cf49..50f8535 100644
--- a/_includes/index/index.js
+++ b/_includes/index/index.js
@@ -17,7 +17,7 @@ function applyCollapsible() {
       // Set "click" event listener on all menuitems
       coll[i].addEventListener("click", function() {
         var sibling = this.nextElementSibling;
-        // alternate menu open/close states
+        // toggle menu open/close states
         if(sibling!==null){
           if (sibling.style.display === "block") {
             this.style.listStyleImage = "url('../images/elements/arrow-right-12px.png')";
@@ -27,21 +27,11 @@ function applyCollapsible() {
             sibling.style.display = "block";
           }
         }
+
       });
     }
 }
 
-// If sizing of arrows becomes an issue, we can use background approach instead
-// li
-// {
-//     background: url(../images/arrow_icon.gif) no-repeat 4px 4px transparent;
-//     background-image: url("x.png");
-//     list-style-type: none;
-//     margin: 0;
-//     padding: 2px;
-//     vertical-align: middle;
-// }
-
 function openIndex() {
           console.log("openIndex")
   document.getElementById("index").style.display = "block";
diff --git a/_scss/_base.scss b/_scss/_base.scss
index b7cabbb..aacc213 100644
--- a/_scss/_base.scss
+++ b/_scss/_base.scss
@@ -95,6 +95,39 @@ footer {
     width: $index-menu-width;
     border: $index-border;
     z-index: 6888;
+
+    ul{
+      display: flex-direction;
+    }
+
+    li:not(.collapsible-toggle) {
+      a {
+        display: inline-flex;
+        width: 100%;
+        height: 100%;
+        padding-right: auto;
+      }
+    }
+
+    li.collapsible-toggle {
+
+      // TODO: try to render our own bullet/images so we can control layout
+      /** the image will be vertically aligned in the center **/
+      //background: url(../img/bullet.png) left center no-repeat;
+      /** move the text to the right **/
+      //padding-left: 20px;
+
+      height: 24px;
+      a {
+        display: inline-flex;
+        position: relative;
+        left: 20px;
+        top: -16px;
+        width: 100%;
+        height: 100%;
+        max-width: 180px;
+      }
+    }
   }
 
   #whiskNodes {
diff --git a/_scss/_skin.scss b/_scss/_skin.scss
index 9925382..1d010ab 100644
--- a/_scss/_skin.scss
+++ b/_scss/_skin.scss
@@ -9,8 +9,8 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    font-weight: $font-weight-bold;
-    margin: 0;
+  font-weight: $font-weight-bold;
+  margin: 0;
 }
 
 h1 {