This is an automated email from the ASF dual-hosted git repository. pdesai pushed a commit to branch revert-327-fixlist in repository https://gitbox.apache.org/repos/asf/incubator-openwhisk-website.git
commit 6431e09d6581e7b901c850625e238a0a0fe724d4 Author: Priti Desai <pde...@us.ibm.com> AuthorDate: Wed Sep 5 14:06:38 2018 -0700 Revert "move arrow to the anchor and nest the lists (#327)" This reverts commit 7628f735ba77a43da0d7b44bb92f472a2ffc04a2. --- _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, 160 insertions(+), 166 deletions(-) diff --git a/_includes/index/index.js b/_includes/index/index.js index 69543d1..a85cf49 100644 --- a/_includes/index/index.js +++ b/_includes/index/index.js @@ -1,29 +1,52 @@ + function applyCollapsible() { - var coll = document.getElementsByClassName("collapsible-toggle"); - var i; - 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"); - } + 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"; + } + } + }); + } } +// 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 31f94c0..a6fb6ed 100644 --- a/_layouts/community.html +++ b/_layouts/community.html @@ -6,25 +6,23 @@ layout: default # license agreements; and to You under the Apache License, Version 2.0. --> -<div class="whiskIndexedLayout"> +<div id="whiskIndexedLayout"> <!-- Community Index --> - <div class="whiskIndex"> + <div id="whiskIndex"> <ul> <li><a href="#community">Community</a></li> <!-- Social Media --> - <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> + <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> <!-- Mailing lists --> <li><a href="#mailing-lists">Mailing Lists</a></li> diff --git a/_layouts/documentation.html b/_layouts/documentation.html index f208877..45e4404 100644 --- a/_layouts/documentation.html +++ b/_layouts/documentation.html @@ -6,115 +6,94 @@ layout: default # license agreements; and to You under the Apache License, Version 2.0. --> -<div class="whiskIndexedLayout"> +<div id="whiskIndexedLayout"> <!-- Documentation Index --> - <div class="whiskIndex"> + <div id="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 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> <ul class="collapse-content"> - <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> + <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> <!-- Developers --> - <li class="collapsible-toggle"> - <a href="#developers">Developers</a> + <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> <ul class="collapse-content"> - <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> + <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--> </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> <!-- Contributors --> <li><a href="#contributors">Contributors</a></li> diff --git a/_layouts/downloads.html b/_layouts/downloads.html index 69f8301..5b2b0b4 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 class="whiskIndexedLayout"> +<div id="whiskIndexedLayout"> <!-- Community Index --> - <div class="whiskIndex"> + <div id="whiskIndex"> <ul> <li><a href="#downloads">Downloads</a></li> @@ -16,14 +16,12 @@ layout: default <li><a href="#versioning">Versioning</a></li> <!-- Downloads --> - <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> + <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> </ul> </div> diff --git a/_scss/_base.scss b/_scss/_base.scss index 67d78d9..da2ac1a 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,24 +279,15 @@ footer { cursor: pointer; // finger shown to let ppl know you can click it } -.collapsible-toggle > a { - background: url(../images/elements/arrow-right-12px.png) center left no-repeat; - padding-left: 18px !important; +.collapsible-toggle:hover { + background-color: $color-menu-collapsible-hover-bg; } -.collapsible-toggle.collapsible-toggle-toggled > a { - background-image: url(../images/elements/arrow-down-12px.png); -} - -.collapsible-toggle > .collapse-content { - margin-left: 20px; +.collapse-content { + padding: 0 18px; display: none; overflow: hidden; -} - -.collapsible-toggle.collapsible-toggle.collapsible-toggle-toggled - > .collapse-content { - display: block; + background-color: white; } /* @@ -313,7 +304,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; @@ -336,18 +327,21 @@ 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: 0; + padding: $index-menuitem-padding; 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; - padding: $index-menuitem-padding; + } + a:hover { + // use different color on index-item hover + color: $color-index-fg-highlight; } a:visited { color: $color-index-fg; @@ -355,11 +349,13 @@ a.indexable { a:active { color: $color-index-fg; } - a:hover { - // use different color on index-item hover + } + + li:hover { + background-color: $color-index-bg-highlight; + font-weight: $index-menuitem-font-weight-hover; + a { 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 1cd9622..d492c48 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 45732e0..4c04a54 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; }