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 7628f73 move arrow to the anchor and nest the lists (#327) 7628f73 is described below commit 7628f735ba77a43da0d7b44bb92f472a2ffc04a2 Author: Justin Halsall <juic...@users.noreply.github.com> AuthorDate: Wed Sep 5 15:54:47 2018 -0400 move arrow to the anchor and nest the lists (#327) --- _includes/index/index.js | 59 +++++---------- _layouts/community.html | 24 +++--- _layouts/documentation.html | 173 +++++++++++++++++++++++++------------------- _layouts/downloads.html | 18 +++-- _scss/_base.scss | 44 ++++++----- _scss/_desktop.scss | 4 +- _scss/_tablet.scss | 4 +- 7 files changed, 166 insertions(+), 160 deletions(-) diff --git a/_includes/index/index.js b/_includes/index/index.js index a85cf49..69543d1 100644 --- a/_includes/index/index.js +++ b/_includes/index/index.js @@ -1,52 +1,29 @@ - function applyCollapsible() { + var coll = document.getElementsByClassName("collapsible-toggle"); + var i; - var coll = document.getElementsByClassName("collapsible-toggle"); - var i; - - // Apply exapandable (arrows) to all menuitems with a sibling - for (i = 0; i < coll.length; i++) { - var sibling = coll[i].nextElementSibling; - - if(sibling!==null){ - coll[i].style.listStyleImage = "url('../images/elements/arrow-right-12px.png')"; - // (top right bottom left) - sibling.style.padding = "0px 0px 0px 20px"; - } - - // Set "click" event listener on all menuitems - coll[i].addEventListener("click", function() { - var sibling = this.nextElementSibling; - // alternate menu open/close states - if(sibling!==null){ - if (sibling.style.display === "block") { - this.style.listStyleImage = "url('../images/elements/arrow-right-12px.png')"; - sibling.style.display = "none"; - } else { - this.style.listStyleImage = "url('../images/elements/arrow-down-12px.png')"; - sibling.style.display = "block"; - } + for (i = 0; i < coll.length; i++) { + // Set "click" event listener on all menuitems + coll[i].querySelector("a").addEventListener("click", function() { + var parent = this.parentElement; + var sibling = this.nextElementSibling; + // alternate menu open/close states + if (sibling !== null) { + if (parent.classList.contains("collapsible-toggle-toggled")) { + parent.classList.remove("collapsible-toggle-toggled"); + } else { + parent.classList.add("collapsible-toggle-toggled"); } - }); - } + } + }); + } } -// 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") + console.log("openIndex"); document.getElementById("index").style.display = "block"; } function closeIndex() { - console.log("closeIndex") + console.log("closeIndex"); document.getElementById("index").style.display = "none"; } diff --git a/_layouts/community.html b/_layouts/community.html index a6fb6ed..31f94c0 100644 --- a/_layouts/community.html +++ b/_layouts/community.html @@ -6,23 +6,25 @@ layout: default # license agreements; and to You under the Apache License, Version 2.0. --> -<div id="whiskIndexedLayout"> +<div class="whiskIndexedLayout"> <!-- Community Index --> - <div id="whiskIndex"> + <div class="whiskIndex"> <ul> <li><a href="#community">Community</a></li> <!-- Social Media --> - <li class="collapsible-toggle"><a href="#social">Media</a></li> - <ul class="collapse-content"> - <li><a href="#github">GitHub</a></li> - <li><a href="#slack">Slack</a></li> - <li><a href="#twitter">Twitter</a></li> - <li><a href="#youtube">YouTube</a></li> - <li><a href="#stackoverflow">Stack Overflow</a></li> - <li><a href="#slideshare">Slideshare</a></li> - </ul> + <li class="collapsible-toggle"> + <a href="#social">Media</a> + <ul class="collapse-content"> + <li><a href="#github">GitHub</a></li> + <li><a href="#slack">Slack</a></li> + <li><a href="#twitter">Twitter</a></li> + <li><a href="#youtube">YouTube</a></li> + <li><a href="#stackoverflow">Stack Overflow</a></li> + <li><a href="#slideshare">Slideshare</a></li> + </ul> + </li> <!-- Mailing lists --> <li><a href="#mailing-lists">Mailing Lists</a></li> diff --git a/_layouts/documentation.html b/_layouts/documentation.html index 45e4404..f208877 100644 --- a/_layouts/documentation.html +++ b/_layouts/documentation.html @@ -6,94 +6,115 @@ layout: default # license agreements; and to You under the Apache License, Version 2.0. --> -<div id="whiskIndexedLayout"> +<div class="whiskIndexedLayout"> <!-- Documentation Index --> - <div id="whiskIndex"> + <div class="whiskIndex"> <ul> <li><a href="#documentation">Documentation</a></li> <li><a href="#project-structure">Project Structure</a></li> <!-- Operators --> - <li class="collapsible-toggle"><a href="#operators">Operators</a></li> - <ul class="collapse-content"> - <li class="collapsible-toggle"><a href="#openwhisk_deployment">OpenWhisk Deployment</a></li> + <li class="collapsible-toggle"> + <a href="#operators">Operators</a> <ul class="collapse-content"> - <li><a href="#deploy_docker_compose">Docker Compose</a></li> - <li><a href="#deploy_kubernetes">Kubernetes</a></li> - <li><a href="#deploy_mesos">Mesos</a></li> - <li><a href="#deploy_openshift">OpenShift</a></li> - <li><a href="#deploy_ansible">Ansible</a></li> - <li><a href="#deploy_vagrant">Vagrant</a></li> + <li class="collapsible-toggle"><a href="#openwhisk_deployment">OpenWhisk Deployment</a> + <ul class="collapse-content"> + <li><a href="#deploy_docker_compose">Docker Compose</a></li> + <li><a href="#deploy_kubernetes">Kubernetes</a></li> + <li><a href="#deploy_mesos">Mesos</a></li> + <li><a href="#deploy_openshift">OpenShift</a></li> + <li><a href="#deploy_ansible">Ansible</a></li> + <li><a href="#deploy_vagrant">Vagrant</a></li> + </ul> + </li> + <li><a href="#deployment_admin">Administrative Operations</a></li> + <li><a href="#operators_resources">Operators Resources</a></li> </ul> - <li><a href="#deployment_admin">Administrative Operations</a></li> - <li><a href="#operators_resources">Operators Resources</a></li> - </ul> + </li> <!-- Developers --> - <li class="collapsible-toggle"><a href="#developers">Developers</a></li> - <ul class="collapse-content"> - <li><a href="#pre-requisites">Pre-requisites</a></li> - <li class="collapsible-toggle"><a href="#using-openwhisk">Using OpenWhisk</a></li> + <li class="collapsible-toggle"> + <a href="#developers">Developers</a> <ul class="collapse-content"> - <li><a href="#wsk-cli-install">Installing wsk CLI</a></li> - <li><a href="#wsk-cli">Configuring wsk CLI</a></li> - <li><a href="#wskdeploy">Deployment Tool - wskdeploy</a></li> - <li><a href="#rest-api">OpenWhisk REST API</a></li> - <li><a href="#openwhisk-clients">OpenWhisk Clients</a></li> - </ul> - <li class="collapsible-toggle"><a href="#actions">Actions</a></li> - <ul class="collapse-content"> - <li class="collapsible-toggle"><a href="#nodejs">NodeJS</a></li> - <ul class="collapse-content"> - <li><a href="#nodejs-actions">Creating and Invoking Sample Action</a></li> - <li><a href="#nodejs-runtime">NodeJS Runtime</a></li> - <li><a href="#nodejs-additional-resources">Additional Resources</a></li> - </ul> - <li class="collapsible-toggle"><a href="#python">Python</a></li> - <ul class="collapse-content"> - <li><a href="#python-actions">Creating and Invoking Sample Action</a></li> - <li><a href="#python-runtime">Python Runtime</a></li> - <li><a href="#python-additional-resources">Additional Resources</a></li> - </ul> - <!--li><a href="#docker">Docker</a></li> - <ul> - <li>Zip Action</li> - <li>SDK (Writing Your Own Runtime)</li> - <li>Other Resources</li> - </ul--> - <li class="collapsible-toggle"><a href="#go">Go</a></li> - <ul class="collapse-content"> - <li><a href="#go-actions">Creating and Invoking Action</a></li> - <li><a href="#go-runtime">Go Runtime</a></li> - <li><a href="#go-additional-resources">Additional Resources</a></li> - </ul> - <li class="collapsible-toggle"><a href="#java">Java</a></li> - <ul class="collapse-content"> - <li><a href="#java-actions">Creating and Invoking Action</a></li> - <li><a href="#java-runtime">Java Runtime</a></li> - <li><a href="#java-additional-resources">Additional Resources</a></li> - </ul> - <li class="collapsible-toggle"><a href="#php">PHP</a></li> - <ul class="collapse-content"> - <li><a href="#php-actions">Creating and Invoking Action</a></li> - <li><a href="#php-runtime">PHP Runtime</a></li> - <li><a href="#php-additional-resources">Additional Resources</a></li> - </ul> - <!--li class="collapsible-toggle"><a href="#swift">Swift</a></li> - <ul class="collapse-content"> - <li><a href="#swift-actions">Creating and Invoking Action</a></li> - <li><a href="#swift-runtime">Swift Runtime</a></li> - <li><a href="#swift-additional-resources">Additional Resources</a></li> - </ul--> + <li><a href="#pre-requisites">Pre-requisites</a></li> + <li class="collapsible-toggle"> + <a href="#using-openwhisk">Using OpenWhisk</a> + <ul class="collapse-content"> + <li><a href="#wsk-cli-install">Installing wsk CLI</a></li> + <li><a href="#wsk-cli">Configuring wsk CLI</a></li> + <li><a href="#wskdeploy">Deployment Tool - wskdeploy</a></li> + <li><a href="#rest-api">OpenWhisk REST API</a></li> + <li><a href="#openwhisk-clients">OpenWhisk Clients</a></li> + </ul> + </li> + <li class="collapsible-toggle"> + <a href="#actions">Actions</a> + <ul class="collapse-content"> + <li class="collapsible-toggle"> + <a href="#nodejs">NodeJS</a> + <ul class="collapse-content"> + <li><a href="#nodejs-actions">Creating and Invoking Sample Action</a></li> + <li><a href="#nodejs-runtime">NodeJS Runtime</a></li> + <li><a href="#nodejs-additional-resources">Additional Resources</a></li> + </ul> + </li> + <li class="collapsible-toggle"> + <a href="#python">Python</a> + <ul class="collapse-content"> + <li><a href="#python-actions">Creating and Invoking Sample Action</a></li> + <li><a href="#python-runtime">Python Runtime</a></li> + <li><a href="#python-additional-resources">Additional Resources</a></li> + </ul> + </li> + <!--li><a href="#docker">Docker</a> + <ul> + <li>Zip Action</li> + <li>SDK (Writing Your Own Runtime)</li> + <li>Other Resources</li> + </ul></li>--> + <li class="collapsible-toggle"> + <a href="#go">Go</a> + <ul class="collapse-content"> + <li><a href="#go-actions">Creating and Invoking Action</a></li> + <li><a href="#go-runtime">Go Runtime</a></li> + <li><a href="#go-additional-resources">Additional Resources</a></li> + </ul> + </li> + <li class="collapsible-toggle"> + <a href="#java">Java</a> + <ul class="collapse-content"> + <li><a href="#java-actions">Creating and Invoking Action</a></li> + <li><a href="#java-runtime">Java Runtime</a></li> + <li><a href="#java-additional-resources">Additional Resources</a></li> + </ul> + </li> + <li class="collapsible-toggle"> + <a href="#php">PHP</a> + <ul class="collapse-content"> + <li><a href="#php-actions">Creating and Invoking Action</a></li> + <li><a href="#php-runtime">PHP Runtime</a></li> + <li><a href="#php-additional-resources">Additional Resources</a></li> + </ul> + </li> + <!--li class="collapsible-toggle"> + <a href="#swift">Swift</a> + <ul class="collapse-content"> + <li><a href="#swift-actions">Creating and Invoking Action</a></li> + <li><a href="#swift-runtime">Swift Runtime</a></li> + <li><a href="#swift-additional-resources">Additional Resources</a></li> + </ul> + </li>--> + </ul> + </li> + <li><a href="#managing_actions_with_openwhisk_packages">Managing Actions with OpenWhisk Packages</a></li> + <li><a href="#connecting_actions_to_event_sources">Connecting Actions to Event Sources</a></li> + <li><a href="#using_openwhisk_enabled_services">Using OpenWhisk Enabled Services</a></li> + <!--li><a href="#exposing_apis_from_actions">Exposing APIs from Actions</a></li--> + <li><a href="#sample_openwhisk_applications">Sample OpenWhisk Applications</a></li> + <li><a href="#tutorial_and_workshop">Tutorial And Workshop</a></li> + <li><a href="#development_tools">Development Tools</a></li> </ul> - <li><a href="#managing_actions_with_openwhisk_packages">Managing Actions with OpenWhisk Packages</a></li> - <li><a href="#connecting_actions_to_event_sources">Connecting Actions to Event Sources</a></li> - <li><a href="#using_openwhisk_enabled_services">Using OpenWhisk Enabled Services</a></li> - <!--li><a href="#exposing_apis_from_actions">Exposing APIs from Actions</a></li--> - <li><a href="#sample_openwhisk_applications">Sample OpenWhisk Applications</a></li> - <li><a href="#tutorial_and_workshop">Tutorial And Workshop</a></li> - <li><a href="#development_tools">Development Tools</a></li> - </ul> + </li> <!-- Contributors --> <li><a href="#contributors">Contributors</a></li> diff --git a/_layouts/downloads.html b/_layouts/downloads.html index 5b2b0b4..69f8301 100644 --- a/_layouts/downloads.html +++ b/_layouts/downloads.html @@ -5,10 +5,10 @@ layout: default # Licensed to the Apache Software Foundation (ASF) under one or more contributor # license agreements; and to You under the Apache License, Version 2.0. --> -<div id="whiskIndexedLayout"> +<div class="whiskIndexedLayout"> <!-- Community Index --> - <div id="whiskIndex"> + <div class="whiskIndex"> <ul> <li><a href="#downloads">Downloads</a></li> @@ -16,12 +16,14 @@ layout: default <li><a href="#versioning">Versioning</a></li> <!-- Downloads --> - <li class="collapsible-toggle"><a href="#releases">Releases</a></li> - <ul class="collapse-content"> - <li><a href="#verifying">Verifying</a></li> - <li><a href="#keys">Keys</a></li> - <li><a href="#versions">Versions</a></li> - </ul> + <li class="collapsible-toggle"> + <a href="#releases">Releases</a> + <ul class="collapse-content"> + <li><a href="#verifying">Verifying</a></li> + <li><a href="#keys">Keys</a></li> + <li><a href="#versions">Versions</a></li> + </ul> + </li> </ul> </div> diff --git a/_scss/_base.scss b/_scss/_base.scss index da2ac1a..67d78d9 100644 --- a/_scss/_base.scss +++ b/_scss/_base.scss @@ -81,11 +81,11 @@ footer { #whiskFooter { } -#whiskIndexedLayout { +.whiskIndexedLayout { display: table; padding-top: $whisk-header-base-padding-top; - #whiskIndex { + .whiskIndex { //vertical-align: top; // position menu relative to header display: float; @@ -279,15 +279,24 @@ footer { cursor: pointer; // finger shown to let ppl know you can click it } -.collapsible-toggle:hover { - background-color: $color-menu-collapsible-hover-bg; +.collapsible-toggle > a { + background: url(../images/elements/arrow-right-12px.png) center left no-repeat; + padding-left: 18px !important; } -.collapse-content { - padding: 0 18px; +.collapsible-toggle.collapsible-toggle-toggled > a { + background-image: url(../images/elements/arrow-down-12px.png); +} + +.collapsible-toggle > .collapse-content { + margin-left: 20px; display: none; overflow: hidden; - background-color: white; +} + +.collapsible-toggle.collapsible-toggle.collapsible-toggle-toggled + > .collapse-content { + display: block; } /* @@ -304,7 +313,7 @@ a.indexable { visibility: hidden; } -#whiskIndex { +.whiskIndex { // Note: we will turn this off for small/base media, allow other profiles to turn on. display: none; background-color: $color-index-bg; @@ -327,21 +336,18 @@ a.indexable { li { background-color: $color-index-item-bg; color: $color-index-fg; - border: $index-item-border; font-size: $index-menu-font-size; font-weight: $index-menu-font-weight; - padding: $index-menuitem-padding; + padding: 0; line-height: $index-menuitem-line-height; // Control index-item (anchor) text color regardless by state a { + border: $index-item-border; color: $color-index-fg; text-decoration: none; display: block; - } - a:hover { - // use different color on index-item hover - color: $color-index-fg-highlight; + padding: $index-menuitem-padding; } a:visited { color: $color-index-fg; @@ -349,13 +355,11 @@ a.indexable { a:active { color: $color-index-fg; } - } - - li:hover { - background-color: $color-index-bg-highlight; - font-weight: $index-menuitem-font-weight-hover; - a { + a:hover { + // use different color on index-item hover color: $color-index-fg-highlight; + background-color: $color-index-bg-highlight; + font-weight: $index-menuitem-font-weight-hover; } } } diff --git a/_scss/_desktop.scss b/_scss/_desktop.scss index d492c48..1cd9622 100644 --- a/_scss/_desktop.scss +++ b/_scss/_desktop.scss @@ -15,11 +15,11 @@ padding-top: $whisk-header-desktop-padding-top; } - #whiskIndexedLayout { + .whiskIndexedLayout { // This padding applies to all content pages (no banner) padding-top: $whisk-header-desktop-padding-top; - #whiskIndex { + .whiskIndex { top: $index-menu-top-offset-desktop; } diff --git a/_scss/_tablet.scss b/_scss/_tablet.scss index 4c04a54..45732e0 100644 --- a/_scss/_tablet.scss +++ b/_scss/_tablet.scss @@ -19,11 +19,11 @@ } // "Turn on" left index in this profile, as we have width to support it - #whiskIndexedLayout { + .whiskIndexedLayout { padding-top: $whisk-header-tablet-padding-top; // Show the index area - #whiskIndex { + .whiskIndex { display: block; }