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 <mrutk...@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 {