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 b5984b2 updates for index and layout on large sizes (#277) b5984b2 is described below commit b5984b2795ed24dd79bed12e67cea3ccda2bf3ac Author: Matt Rutkowski <mrutk...@us.ibm.com> AuthorDate: Tue Aug 7 13:58:18 2018 -0500 updates for index and layout on large sizes (#277) --- _includes/index/index.js | 26 +++++++++++- _layouts/community.html | 19 ++++----- _layouts/documentation.html | 16 ++++---- _layouts/downloads.html | 17 ++++---- _scss/_base.scss | 75 ++++++++++++++++------------------ _scss/_skin.scss | 34 +++++++-------- _scss/_tablet.scss | 7 +--- _scss/_variables.scss | 38 ++++++++++++----- images/apache-openwhisk-test.png | Bin 7693 -> 0 bytes images/elements/arrow-down-12px.png | Bin 0 -> 17819 bytes images/{ => elements}/arrow-down.svg | 0 images/elements/arrow-right-12px.png | Bin 0 -> 18574 bytes images/{ => elements}/arrow-right.svg | 0 13 files changed, 131 insertions(+), 101 deletions(-) diff --git a/_includes/index/index.js b/_includes/index/index.js index 4f274e5..a85cf49 100644 --- a/_includes/index/index.js +++ b/_includes/index/index.js @@ -4,15 +4,26 @@ function applyCollapsible() { 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() { - this.classList.toggle("active"); var sibling = this.nextElementSibling; - console.log(sibling) + // 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"; } } @@ -20,6 +31,17 @@ function applyCollapsible() { } } +// 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/_layouts/community.html b/_layouts/community.html index 79fe47f..1e4fb2b 100644 --- a/_layouts/community.html +++ b/_layouts/community.html @@ -40,16 +40,15 @@ layout: default </div> <section id="whiskNodes"> - - <div class="content"> - <a class="indexable" id="community"></a> - <h2>Community</h2> - <!-- <h2 class="collapsible-toggle">Community</h2> --> - <div class="collapsible-content"> - <p>The Apache OpenWhisk community attempts to engage its users and developers in as many channels as we are able. Please find and subscribe to the ones that are right for you!</p> - </div> - </div> - + <main id="doc"> + <div class="content"> + <a class="indexable" id="community"></a> + <h2>Community</h2> + <div> + <p>The Apache OpenWhisk community attempts to engage its users and developers in as many channels as we are able. Please find and subscribe to the ones that are right for you!</p> + </div> + </div> + </main> <main id="doc"> <div class="content"> <a class="indexable" id="social"></a> diff --git a/_layouts/documentation.html b/_layouts/documentation.html index 34d14e3..09ce439 100644 --- a/_layouts/documentation.html +++ b/_layouts/documentation.html @@ -103,14 +103,15 @@ layout: default </div> <section id="whiskNodes"> - - <div class="content"> - <a class="indexable" id="documentation"></a> - <h2>Documentation</h2> - <div class="collapsible-content"> - <p>There are many resources for learning about OpenWhisk; this page attempts to organize, describe, index and link to the essential information, wherever it resides, to help users in getting started. In general, much of the best information is in the actual project repositories and we encourage you to seek detailed and in-depth information there.</p> + <main id="doc"> + <div class="content"> + <a class="indexable" id="documentation"></a> + <h2>Documentation</h2> + <div> + <p>There are many resources for learning about OpenWhisk; this page attempts to organize, describe, index and link to the essential information, wherever it resides, to help users in getting started. In general, much of the best information is in the actual project repositories and we encourage you to seek detailed and in-depth information there.</p> + </div> </div> - </div> + </main> <main id="doc"> <div class="content"> @@ -140,6 +141,7 @@ layout: default <div class="content"> <a class="indexable" id="openwhisk_deployment"></a> <h3>OpenWhisk Deployment</h3> + </br> <img width="400px" src="https://raw.githubusercontent.com/apache/incubator-openwhisk/master/docs/images/OpenWhisk_flow_of_processing.png" alt="OpenWhisk Architecture"/> <p> The above diagram depicts the high-level architecture of OpenWhisk. From Nginx to Kafka to Docker, diff --git a/_layouts/downloads.html b/_layouts/downloads.html index cd2c510..a82f243 100644 --- a/_layouts/downloads.html +++ b/_layouts/downloads.html @@ -26,14 +26,15 @@ layout: default </div> <section id="whiskNodes"> - - <div class="content"> - <a class="indexable" id="downloads"></a> - <h2>Downloads</h2> - <div class="collapsible-content"> - <p>This page contains links to the official project source code downloads by release.</p> - </div> - </div> + <main id="doc"> + <div class="content"> + <a class="indexable" id="downloads"></a> + <h2>Downloads</h2> + <div class="collapsible-content"> + <p>This page contains links to the official project source code downloads by release.</p> + </div> + </div> + </main> <main id="doc"> <div class="content"> diff --git a/_scss/_base.scss b/_scss/_base.scss index 031cf4b..b5dc8af 100644 --- a/_scss/_base.scss +++ b/_scss/_base.scss @@ -14,7 +14,7 @@ section, header { main { width: $main-width; // !Important. Home page scrolls horz. without this width constraint (affected by SVG <img> issues) - max-width: $media-size-max-width;; + max-width: $media-size-max-width; } } @@ -79,6 +79,7 @@ pre { border: 0px; padding: 0px; background-color: $color-header-bg-section-logo; + // TODO: make a variable background-image: url(/images/apache-openwhisk.png); background-size: $logo-width $logo-height !important; background-repeat: no-repeat; @@ -89,6 +90,7 @@ pre { .header-section-text-links { display: table-row-group; background: $color-header-bg-section-menu-text; + // TODO: make image sizes variables width: 33%; min-width: 280px; color: white; @@ -162,7 +164,6 @@ pre { } // Header is only shown on the "home" page -// TODO: add padding to title/tag line for small media #whiskHeader { background-color: $color-blue-dark; color: $color-white; @@ -198,6 +199,8 @@ pre { padding-bottom: $whisk-nodes-padding-base-Y; padding-left: $whisk-nodes-padding-base-X; padding-right: $whisk-nodes-padding-base-X; + // YYY + padding-top: 20px; main { display: table; @@ -231,17 +234,11 @@ pre { height: 100%; } } - - h3 { - margin-bottom: $whisk-nodes-h3-margin-bottom; - } } #doc { position: relative; overflow: hidden; - // TODO: evaluate this value's effect - padding-top: 10px; text-align: left; } @@ -257,8 +254,8 @@ pre { } .flow-item-container { + background: $color-white; width: 260px; - background: $color-blue-gray-light; margin: 10px; } @@ -277,9 +274,6 @@ pre { background-color: $color-menu-collapsible-bg; border: 1px solid $color-menuitem-collapsible-border; cursor: pointer; // finger shown to let ppl know you can click it - width: 100%; - outline: none; - padding-left: 10px; } .collapsible-toggle:hover { @@ -333,51 +327,52 @@ a.indexable { // Note: we will turn this off for small/base media, allow other profiles to turn on. display: none; background-color: $color-index-bg; - color: $color-index-fg; width: $index-menu-width; - // Pad the overall index <ul> (and not all the nested <ul>s) - padding: 10px; + // Pad the overall index <div> (and not all the nested <ul>s) + margin: $index-menu-margin; ul { background-color: $color-index-list-bg; - font-size: $index-menu-font-size; - font-weight: 500; - - //list-style-type: square; - //list-style-position: inside; - //list-style-image: url('abc.png') - //list-style: square inside url("abc.png"); list-style-type: none; list-style-position: inside; // Override <ul> defaults: - // default margin: 16px (top and bottom) - // TODO: make variables margin: 0px; - padding-left: 10px; - padding-right: 0px; - padding-top: 2px; - padding-bottom: 2px; + padding: 0px; } li { background-color: $color-index-item-bg; + color: $color-index-fg; border: $index-item-border; font-size: $index-menu-font-size; - font-weight: 500; - // TODO: make variables - padding-left: 4px; - padding-top: 2px; - padding-bottom: 2px; - margin-left: 4px; + font-weight: $index-menu-font-weight; + padding: $index-menuitem-padding; + line-height: $index-menuitem-line-height; + + // Control index-item (anchor) text color regardless by state + a { + color: $color-index-fg; + text-decoration: none; + } + a:hover { + // use different color on index-item hover + color: $color-index-fg-highlight; + } + a:visited { + color:$color-index-fg; + } + a:active { + color: $color-index-fg; + } } - a { - color: $color-index-fg; - text-decoration: none; + li:hover { + background-color: $color-index-bg-highlight; + font-weight: $index-menuitem-font-weight-hover; + a { + color: $color-index-fg-highlight; + } } - a:visited {color:$color-index-fg;} - a:hover {color: $color-index-fg;} - a:active {color: $color-index-fg;} } diff --git a/_scss/_skin.scss b/_scss/_skin.scss index 3d070c0..1ba120b 100644 --- a/_scss/_skin.scss +++ b/_scss/_skin.scss @@ -10,13 +10,8 @@ body { font-family: $font-family-default; } -strong { - //color: $color-blue-dark; -} - h1, h2, h3, h4, h5 { font-weight: $font-weight-bold; - //color: $color-blue-dark; margin: 0; } @@ -63,42 +58,43 @@ p, ul, ol, li { a {color: $color-anchors } a:visited { color: $color-anchors; } -a:hover {color: $color-anchors;} -a:active {color: $color-anchors;} +a:hover { color: $color-anchors; } +a:active { color: $color-anchors; } a.button { color: white; } .button { - color: $color-white; background-color: $color-blue-dark; - border: solid 1px #d0d0d0; border-bottom: solid 3px #b2b1b1; border-radius: 6px; - padding: 0 20px; - box-shadow: inset 0 0 0 1px #f5f5f5; + border: solid 1px $color-gray-percent-82; + box-shadow: inset 0 0 0 1px $color-gray-percent-96; + color: $color-blue-dark; display: inline-block; - font-size: 13px; font-family: $font-family-default; + font-size: 13px; font-weight: 300; + letter-spacing: 0.5px; line-height: 40px; + padding: 0 20px; position: relative; text-align: center; text-decoration: none; - text-shadow: 0 1px 0 #fafafa; + text-shadow: 0 1px 0 rgba($color-blue-dark, 0.6); } .button:hover { - background: $color-blue-hover; - border: solid 1px #c2c2c2; - border-bottom: solid 3px #b2b1b1; - box-shadow: inset 0 0 0 1px #efefef; + background: $color-blue-gray-medium; + border: solid 1px $color-gray-percent-76; + border-bottom: solid 3px $color-gray-percent-70; + box-shadow: inset 0 0 0 1px $color-gray-percent-94; } .button:active { background: #dfdfdf; - border: solid 1px #959595; - box-shadow: inset 0 10px 15px 0 #c4c4c4; + border: solid 1px $color-gray-percent-56; + box-shadow: inset 0 10px 15px 0 $color-gray-percent-78; top:2px; } diff --git a/_scss/_tablet.scss b/_scss/_tablet.scss index b86e704..36c24cc 100644 --- a/_scss/_tablet.scss +++ b/_scss/_tablet.scss @@ -50,7 +50,8 @@ #whiskNodes { display: table-cell; // NOTE: margin does not work here, must use left padding - padding-left: $index-menu-width; + // TODO: make a variable + padding-left: $index-menu-width + 40px; } } @@ -84,9 +85,5 @@ border: $color-bg-tablet-image-wrapper-border; } } - h3 { - text-align: left; - margin-bottom: 18px; - } } } diff --git a/_scss/_variables.scss b/_scss/_variables.scss index 222628b..3fee7be 100644 --- a/_scss/_variables.scss +++ b/_scss/_variables.scss @@ -81,6 +81,13 @@ $color-blue-gray-dark: #131920; $color-blue-gray-light-text: #9da6ab; $color-blue-dark-text: #00091a; $color-white: #fff; +$color-gray-percent-56: #959595; +$color-gray-percent-70: #b2b2b2; +$color-gray-percent-76: #c2c2c2; +$color-gray-percent-78: #c6c6c6; +$color-gray-percent-82: #d0d0d0; +$color-gray-percent-94: #efefef; +$color-gray-percent-96: #f5f5f5; /* * Logo Colors @@ -96,12 +103,12 @@ $color-logo-deeper-aquamarine: #6eedd8; */ $color-fg-base-light-text: ghostwhite; -$color-bg-base-main: white; -$color-bg-base-image-wrapper: white; +$color-bg-base-main: $color-white; +$color-bg-base-image-wrapper: $color-white; $color-bg-base-content: ghostwhite; $color-bg-base-img: transparent; -$color-bg-tablet-main: white; -$color-bg-desktop-main: white; +$color-bg-tablet-main: $color-white; +$color-bg-desktop-main: $color-white; $color-header-bg: $color-blue-dark; $color-header-bg-section-logo: transparent; @@ -202,15 +209,26 @@ $header-base-h5-line-height: $header-tablet-h5-line-height; * Index */ -$index-menu-width: 200px; +$index-menu-width: 220px; // position menu relative to header -$index-menu-top-offset: $header-height + 18px; -$index-menu-left-offset: 0px; -$index-menu-font-size: 10pt; +$index-menu-top-offset: $header-height + 10px; +$index-menu-margin: 10px; -$color-index-bg: $color-white; +// left offset matches main body nodes +$index-menu-left-offset: $whisk-nodes-padding-base-X; +$index-menu-font-size: 12.5px; +$index-menu-font-weight: 500; +$index-menu-font-letter-spacing: 0.5px; + +$index-menuitem-padding: 2px; +$index-menuitem-line-height: normal; +$index-menuitem-font-weight-hover: 400; + +$color-index-bg: $color-bg-base-content; $color-index-fg: $color-blue-gray-dark; +$color-index-bg-highlight: $color-blue-gray-medium; +$color-index-fg-highlight: $color-white; $color-index-border: transparent; $color-index-list-bg: transparent; $color-index-list-border: transparent; @@ -218,7 +236,7 @@ $color-index-item-bg: transparent; $color-index-item-border: transparent; $index-border: 0px solid $color-index-list-border; -$index-item-border: 0px solid $color-index-item-border; +$index-item-border: 2px solid $color-index-item-border; /* * Expandable/Collapsible (WIP) diff --git a/images/apache-openwhisk-test.png b/images/apache-openwhisk-test.png deleted file mode 100644 index 121e546..0000000 Binary files a/images/apache-openwhisk-test.png and /dev/null differ diff --git a/images/elements/arrow-down-12px.png b/images/elements/arrow-down-12px.png new file mode 100644 index 0000000..19e6d52 Binary files /dev/null and b/images/elements/arrow-down-12px.png differ diff --git a/images/arrow-down.svg b/images/elements/arrow-down.svg similarity index 100% rename from images/arrow-down.svg rename to images/elements/arrow-down.svg diff --git a/images/elements/arrow-right-12px.png b/images/elements/arrow-right-12px.png new file mode 100644 index 0000000..b306778 Binary files /dev/null and b/images/elements/arrow-right-12px.png differ diff --git a/images/arrow-right.svg b/images/elements/arrow-right.svg similarity index 100% rename from images/arrow-right.svg rename to images/elements/arrow-right.svg