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/08/07 18:58:21 UTC
[incubator-openwhisk-website] branch master updated: updates for
index and layout on large sizes (#277)
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 <mr...@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