You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openwhisk.apache.org by pd...@apache.org on 2018/09/05 19:54:49 UTC
[incubator-openwhisk-website] branch master updated: move arrow to
the anchor and nest the lists (#327)
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 <Ju...@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;
}