diff --git a/website/www/site/assets/icons/close-icon.svg b/website/www/site/assets/icons/close-icon.svg new file mode 100644 index 000000000000..7a07561031f1 --- /dev/null +++ b/website/www/site/assets/icons/close-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/edit-icon.svg b/website/www/site/assets/icons/edit-icon.svg new file mode 100644 index 000000000000..0832bba986b7 --- /dev/null +++ b/website/www/site/assets/icons/edit-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/search-icon.svg b/website/www/site/assets/icons/search-icon.svg new file mode 100644 index 000000000000..d01a19658e8e --- /dev/null +++ b/website/www/site/assets/icons/search-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass index 5d8367e45a7c..9c62feea862d 100644 --- a/website/www/site/assets/scss/_global.sass +++ b/website/www/site/assets/scss/_global.sass @@ -26,17 +26,22 @@ body .body background: #fff margin: 0 auto - + .no__padding + padding: 0 &:not(.body--index) .body__contained @media (max-width: $ak-breakpoint-lg) padding: 0 padding: 0 30px max-width: 1280px - + figure img width: 100% + .center + margin: 0 auto + .content-up + margin-top: -20px !important .section &:not(.section--wide) @@ -52,6 +57,20 @@ body a color: $color-brand +.body__section-no-nav + margin-left: 256px + //width: calc(100% - 380px) + + > [id]:before + content: '' + display: block + height: 82px // fixed header height + margin: -82px 0 0 // negative fixed header height + + @media (max-width: $ak-breakpoint-lg) + margin-left: 0 + width: 100% + .body__section-nav margin-left: 256px width: calc(100% - 492px) @@ -69,11 +88,70 @@ body .container-main-content @media (max-width: $ak-breakpoint-lg) padding: 0 24px - + min-height: 100vh padding: 0 22px position: relative background-color: #fff - margin-top: 85px + margin-top: 64px - @media (min-width: $tablet) + @media (min-width: $tablet) margin-top: 0 +.desktop + @media (max-width: $ak-breakpoint-lg) + display: none !important +.mobile + display: none + @media (max-width: $ak-breakpoint-lg) + display: block + +.code-snippet, pre + background:rgba(255, 109, 0, 0.03) !important + border-radius: 8px + border-top-left-radius: 0; + border: solid 0.6px #ff6d05 + font-family: Menlo + font-size: 16px + font-weight: normal + line-height: 1.63 + letter-spacing: 0.43px + padding: 24px + max-width: 848px + position: relative + + pre + border: none + padding: 0 + margin-top: 36px + a + float: right + margin-left: 12px + img + &:hover + opacity: 0.7 + filter: alpha(opacity=70) + cursor: pointer + +.snippet + max-width: 848px + margin-bottom: 40px + .git-link + float: right + font-size: 16px + font-weight: normal + line-height: 1.63 + letter-spacing: 0.43px + color: #8c8b8e + .without_switcher + border-top-left-radius: 8px + pre + background: initial !important + +table + margin-top: 24px + margin-bottom: 24px + th + min-width: 80px + padding-right: 12px + +.underline + text-decoration: underline diff --git a/website/www/site/assets/scss/_hero-mobile.scss b/website/www/site/assets/scss/_hero-mobile.scss index 343c279f4c90..b3db3d1cd4b9 100644 --- a/website/www/site/assets/scss/_hero-mobile.scss +++ b/website/www/site/assets/scss/_hero-mobile.scss @@ -21,7 +21,9 @@ position: relative; margin-bottom: 0; display: none; - + width: 100%; + height: calc(100% - 96px); + min-height: 300px; .hero-content { position: absolute; z-index: 1; diff --git a/website/www/site/assets/scss/_lists.scss b/website/www/site/assets/scss/_lists.scss index c2bdc03d6ef6..38763e5fd33c 100644 --- a/website/www/site/assets/scss/_lists.scss +++ b/website/www/site/assets/scss/_lists.scss @@ -14,272 +14,284 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@import "media"; + @import "media"; -.arrow-list { - margin-top: 26px; - h3 { - max-width: 555px; - } - ul { - font-size: 16px; - font-weight: normal; - line-height: 1.63; - letter-spacing: 0.43px; - position: relative; - padding-left: 26px; - li::marker { - content: "\2192"; - color: #ff6d05; - font-size: 24px; - } - li { - list-style-type: none; - list-style-position: outside; - padding-left: 8px; - margin-bottom: -2px; - } - li:last-of-type { - margin-bottom: 25px; - } - } - figure { - width: 112px; - height: 112px; - margin-top: 64px; - } - a { - color: #333333; - } -} + .arrow-list { + margin-top: 26px; + h3 { + max-width: 555px; + } + ul { + font-size: 16px; + font-weight: normal; + line-height: 1.63; + letter-spacing: 0.43px; + position: relative; + padding-left: 26px; + li::marker { + content: "\2192"; + color: #ff6d05; + font-size: 24px; + } + li { + list-style-type: none; + list-style-position: outside; + padding-left: 8px; + margin-bottom: -2px; + } + li:last-of-type { + margin-bottom: 25px; + } + } + figure { + width: 112px; + height: 112px; + margin-top: 64px; + } + a { + color: #333333; + } + } -.arrow-list-header { - color: #333333; - text-decoration: none; - display: flex; - max-height: 40px; - margin-bottom: 74px; - &:hover { - cursor: default; - text-decoration: none; - } - @media (max-width: $mobile) { - margin-bottom: 50px; - &:hover { - cursor: pointer; - text-decoration: underline; - } - h2 { - font-size: 24px; - line-height: 1.25; - font-weight: 500; - letter-spacing: normal; - margin-top: 46px; - } - } - figure { - margin-top: 40px; - margin-right: 5px; - width: auto; - height: auto; - @media (min-width: $mobile) { - display: none; - } - img { - width: 18px; - height: 18px; - padding-right: 16px; - transform: rotate(-90deg); - } - } -} -.rotate { - img { - transform: rotate(0deg) !important; - margin-top: 10px; - } -} -.list { - margin-top: 32px; - max-width: 640px; -} -.icon-list { - .list-item { - display: flex; - margin-bottom: 38px; - position: relative; + .arrow-list-header { + color: #333333; + text-decoration: none; + display: flex; + max-height: 40px; + margin-bottom: 74px; + &:hover { + cursor: default; + text-decoration: none; + } + @media (max-width: $mobile) { + margin-bottom: 50px; + &:hover { + cursor: pointer; + text-decoration: underline; + } + h2 { + font-size: 24px; + line-height: 1.25; + font-weight: 500; + letter-spacing: normal; + margin-top: 46px; + } + } + figure { + margin-top: 40px; + margin-right: 5px; + width: auto; + height: auto; + @media (min-width: $mobile) { + display: none; + } + img { + width: 18px; + height: 18px; + padding-right: 16px; + transform: rotate(-90deg); + } + } + } + .rotate { + img { + transform: rotate(0deg) !important; + margin-top: 10px; + } + } + .icon-list { + .list-item { + display: flex; + margin-bottom: 8px; + position: relative; + @media (max-width: $tablet) { + margin-bottom: 43px; + } + img { + position: absolute; + top: 7px; + z-index: 2; + } + .reverse { + transform: rotate(-180deg); + } - img { - position: absolute; - top: 7px; - z-index: 2; - } - .reverse { - transform: rotate(-180deg); - } + .cirkle { + width: 24px; + height: 24px; + background: #ff6d05; + border-radius: 50%; + text-align: center; + z-index: 5; + position: relative; + i { + vertical-align: bottom; + color: #fff; + } + } + .list-item-icon { + width: 44px; + height: 44px; + display: block; + margin-right: 25px; + } + .list-item-header { + font-size: 22px; + font-weight: 500; + letter-spacing: normal; + line-height: 1.36; + margin-top: 10px; + a { + color: #333333; + } + @media (max-width: $mobile) { + font-weight: 500; + } + } + .list-item-description { + @media (max-width: $mobile) { + position: absolute; + left: 55px; + } + } + } + .pillars-item { + display: flex; + align-items: center; + margin-bottom: 14px; + .pillars-item-icon { + margin-right: 28px; + } - .cirkle { - width: 24px; - height: 24px; - background: #ff6d05; - border-radius: 50%; - text-align: center; - z-index: 5; - position: relative; - i { - vertical-align: bottom; - color: #fff; - } - } - .list-item-icon { - width: 44px; - height: 44px; - display: block; - margin-right: 25px; - } - .list-item-header { - font-size: 22px; - font-weight: 500; - letter-spacing: normal; - line-height: 1.36; - margin-top: 10px; - a { - color: #333333; - } - @media (max-width: $mobile) { - font-weight: 500; - } - } - .list-item-description { - @media (max-width: $mobile) { - position: absolute; - left: 55px; - } - } - } - .pillars-item { - display: flex; - align-items: center; - margin-bottom: 14px; - .pillars-item-icon { - margin-right: 28px; - } + .pillars-item-description { + width: 100%; + max-width: 684px; - .pillars-item-description { - width: 100%; - max-width: 684px; + .pillars-item-header { + font-size: 16px; + font-weight: bold; + line-height: 1.2; + letter-spacing: 0.43px; + margin-bottom: 6px; + margin-top: 10px; + } - .pillars-item-header { - font-size: 16px; - font-weight: bold; - line-height: 1.2; - letter-spacing: 0.43px; - margin-bottom: 6px; - margin-top: 10px; - } + .pillars-item-text { + font-size: 14px; + font-weight: normal; + line-height: 1.57; + letter-spacing: 0.43px; + } + } + } + } + .documentation-list { + padding-left: 12px; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + max-width: 895px; + .row { + display: flex; + flex-direction: column; + margin-top: 63px; + @media (max-width: $mobile) { + max-width: 260px; + } - .pillars-item-text { - font-size: 14px; - font-weight: normal; - line-height: 1.57; - letter-spacing: 0.43px; - } - } - } -} -.documentation-list { - padding-left: 12px; - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - max-width: 895px; - .row { - display: flex; - flex-direction: column; - margin-top: 63px; - @media (max-width: $mobile) { - max-width: 260px; - } + .item-icon { + height: 93px; + max-width: 260px; + display: flex; + align-items: center; + @media (max-width: $mobile) { + justify-content: center; + } + } + a { + font-size: 16px; + font-weight: bold; + line-height: 1.63; + letter-spacing: 0.43px; + color: #333333; + } + .item-description { + max-width: 260px; + margin-right: 32px; + margin-top: 20px; + @media (max-width: $mobile) { + margin-right: 0; + width: auto; + } + } + } + } + .sdks { + max-width: 635px; + .column { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .row { + margin-top: 48px; + .item-description { + margin-right: 0; + } + } + } + .collapsable-list { + margin: 52px 0; + a { + font-size: 14px; + font-weight: bold; + font-stretch: normal; + font-style: normal; + line-height: 1.14; + letter-spacing: 0.6px; + color: #f26628; + } + li { + a { + font-size: 16px; + line-height: 1.63; + letter-spacing: 0.43px; + color: #333333; + } + } + } + .mobile-column { + @media (max-width: $mobile) { + flex-direction: column; + align-items: center; + text-align: center; + } + } + .margin-50 { + margin-top: 50px; + } + @media (min-width: 768px) { + .arrow-list { + .collapse.dont-collapse-sm { + display: block; + height: auto !important; + visibility: visible; + } + } + } + .beam-list { + margin-top: 32px; + .beam-title { + margin-bottom: 4px; + font-weight: bold; + } + .beam-description { + margin: 0; + font-size: 14px; + line-height: 22px; + height: 44px; + } + } - .item-icon { - height: 93px; - max-width: 260px; - display: flex; - align-items: center; - @media (max-width: $mobile) { - justify-content: center; - } - } - a { - font-size: 16px; - font-weight: bold; - line-height: 1.63; - letter-spacing: 0.43px; - color: #333333; - } - .item-description { - max-width: 260px; - margin-right: 32px; - margin-top: 20px; - @media (max-width: $mobile) { - margin-right: 0; - width: auto; - } - } - } -} -.sdks { - max-width: 635px; - .column { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } - .row { - margin-top: 48px; - .item-description { - margin-right: 0; - } - } -} -.collapsable-list { - margin: 52px 0; - a { - font-size: 14px; - font-weight: bold; - font-stretch: normal; - font-style: normal; - line-height: 1.14; - letter-spacing: 0.6px; - color: #f26628; - } - li { - a { - font-size: 16px; - line-height: 1.63; - letter-spacing: 0.43px; - color: #333333; - } - } -} -.mobile-column { - @media (max-width: $mobile) { - flex-direction: column; - align-items: center; - text-align: center; - } -} -.margin-50 { - margin-top: 50px; -} -@media (min-width: 768px) { - .arrow-list { - .collapse.dont-collapse-sm { - display: block; - height: auto !important; - visibility: visible; - } - } -} diff --git a/website/www/site/assets/scss/_media.scss b/website/www/site/assets/scss/_media.scss index b1146a520163..0365663590e7 100644 --- a/website/www/site/assets/scss/_media.scss +++ b/website/www/site/assets/scss/_media.scss @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -$mobile: 640px; -$tablet: 1280px; -$fullhd: 1920px; + + $mobile: 640px; + $tablet: 1024px; + $fullhd: 1920px; diff --git a/website/www/site/assets/scss/_navbar-mobile.sass b/website/www/site/assets/scss/_navbar-mobile.sass index 198ced5f9443..4c9a2a528808 100644 --- a/website/www/site/assets/scss/_navbar-mobile.sass +++ b/website/www/site/assets/scss/_navbar-mobile.sass @@ -25,9 +25,9 @@ .navbar-nav > li > a text-transform: uppercase .navbar-link - font-size: 16px - font-weight: 500 - line-height: normal + font-size: 16px; + font-weight: 500; + line-height: normal; letter-spacing: normal .navbar-header float: none diff --git a/website/www/site/assets/scss/_page-nav.sass b/website/www/site/assets/scss/_page-nav.sass deleted file mode 100644 index 542a4222b20a..000000000000 --- a/website/www/site/assets/scss/_page-nav.sass +++ /dev/null @@ -1,62 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.page-nav - border-left: 3px solid $color-brand - overflow-y: auto - max-height: calc(100vh - 130px) - padding: 0 15px - position: fixed - width: 240px - - li - display: block - width: 100% - - a - color: $color-dark - display: block - font-size: 12px - padding: 5px - - span - font-size: 12 - - ul - padding-left: 20px - - .nav - > li.active - a - text-decoration: underline - - @media (max-width: $ak-breakpoint-lg) - margin-top: 0 - max-height: initial - right: 0 - padding: 0 30px - position: relative - width: 100% - - #TableOfContents - > ul - padding-left: 0 - margin-bottom: 0 - ul - padding-left: 20 - ul - display: none diff --git a/website/www/site/assets/scss/_page-nav.scss b/website/www/site/assets/scss/_page-nav.scss new file mode 100644 index 000000000000..579da31f2b54 --- /dev/null +++ b/website/www/site/assets/scss/_page-nav.scss @@ -0,0 +1,103 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + @import "media"; + +.page-nav { + overflow-y: auto; + max-height: calc(100vh - 130px); + position: fixed; + width: 248px; + margin-left: 30px; + li { + display: block; + width: 100%; + min-height: 36px; + a { + color: #37424b; + display: block; + font-size: 12px; + padding: 5px; + letter-spacing: .43px; + } + span { + font-size: 12px; + } + ul { + padding-left: 20px; + } + } + .nav { + img { + height: 14px; + width: 10px; + vertical-align: text-bottom; + transition: .3s; + margin-right: 8px; + } + .rotate { + transform: rotate(-90deg); + transition: .3s; + } + >li { + padding: 0 15px; + border-left: 3px solid #d8d8d8; + } + .chosen { + position: relative; + ::before { + content: ''; + position: absolute; + top: -1px; + left: -18px; + height: 100%; + min-height: 36px; + border-left: 3px solid #ff6d05; + } + a { + text-decoration: underline; + font-weight: 500; + } + } + .active .chosen ::before { + left: -38px; + } + } + #TableOfContents>ul { + margin-bottom: 0; + } +} + +.page-nav .nav>li>:hover { + border-radius: 8px +} + +.page-nav .nav>li>ul>li>:hover { + border-radius: 8px; + background-color: #f2f2f2; + text-decoration: none +} + +@media(max-width: $ak-breakpoint-lg) { + .page-nav { + margin-top: 0; + max-height: initial; + right: 0; + padding: 0 30px; + position: relative; + width: 100% + } +} diff --git a/website/www/site/assets/scss/_search.scss b/website/www/site/assets/scss/_search.scss index a035df1566eb..3da3c40fdb00 100644 --- a/website/www/site/assets/scss/_search.scss +++ b/website/www/site/assets/scss/_search.scss @@ -12,70 +12,70 @@ limitations under the License. */ .searchBar { - width: 297px; - margin-right: 30px; - display: flex; - align-items: center; - table { - margin: 0; - } - div { - padding: 0; - svg { - padding-top: 2px; - } - } - .gsc-search-button { - display: none; - } - #__gcse_1 { - max-width: 213px; - } - .gsib_b { - display: none; - } - .gsc-input-box { - border-radius: 100px; - background-color: #f1f1f2; - table { - margin: 0; - } - input { - background-color: #f1f1f2; - min-width: 213px; - font-size: 12px; - font-weight: 400; - line-height: 1.83; - letter-spacing: normal; - } - } + width: 297px; + margin-right: 30px; + display: flex; + align-items: center; + table { + margin: 0; + } + div { + padding: 0; + svg { + padding-top: 2px; + } + } + .gsc-search-button { + display: none; + } + #__gcse_1 { + max-width: 213px; + } + .gsib_b { + display: none; + } + .gsc-input-box { + border-radius: 100px; + background-color: #f1f1f2; + table { + margin: 0; + } + input { + background-color: #f1f1f2; + min-width: 213px; + font-size: 12px; + font-weight: 400; + line-height: 1.83; + letter-spacing: normal; + } + } } .disappear { - display: none !important; + display: none !important; } .searchBar-mobile { - width: 100%; - table { - margin: 0; - } - .gsc-input-box { - border-radius: 100px; - max-height: 36px; - background-color: #f1f1f2; - padding-top: 2px; - input { - background-color: #f1f1f2; - transform: translateY(-2px); - } - } - .gsc-search-button { - background-color: #fff; - border: none; - svg { - fill: #ff6d00; - } - &:focus { - background-color: #fff; - } - } + width: 100%; + table { + margin: 0; + } + .gsc-input-box { + border-radius: 100px; + max-height: 36px; + background-color: #f1f1f2; + padding-top: 2px; + input { + background-color: #f1f1f2; + transform: translateY(-2px); + } + } + .gsc-search-button { + background-color: #fff; + border: none; + svg { + fill: #ff6d00; + } + &:focus { + background-color: #fff; + } + } } diff --git a/website/www/site/assets/scss/_section-nav.scss b/website/www/site/assets/scss/_section-nav.scss new file mode 100644 index 000000000000..8e1e897285e8 --- /dev/null +++ b/website/www/site/assets/scss/_section-nav.scss @@ -0,0 +1,144 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +.section-nav { + max-width: 250px; + position: absolute; + width: 100%; + overflow-y: auto; + background-color: #fbfbfb; + border-radius: 8px; + .section-nav-list-main-title { + margin-top: 33px; + } + .section-nav-back { + padding: 23px 0 23px 31px; + background-color: #fbfbfb; + &:before { + height: 18px; + color: #ff6d00; + } + } + nav { + padding: 15px; + ul { + list-style: none; + } + li { + margin-bottom: 5px; + &:last-child { + margin-bottom: 0; + } + } + .section-nav-list { + padding-left: 16px; + } + a { + font-size: 12px; + color: #757575; + font-weight: 500; + line-height: 1.83; + letter-spacing: .43px; + } + .active { + text-decoration: underline; + border-radius: 8px; + background-color: #f2f2f2; + } + } + .expanded { + >span { + &:before { + transform: rotate(90deg); + } + } + } +} +.section-nav-back { + display: none; + padding: 15px; +} +.section-nav-list-title { + display: block; + font-size: 12px; + position: relative; + margin-bottom: 5px; + font-weight: 700; + line-height: 1.83; + letter-spacing: .43px; +} +.section-nav-list-title--collapsible { + cursor: pointer; +} +.section-nav-list-main-title { + display: block; + font-size: 18px; + font-weight: 700; + line-height: normal; + letter-spacing: 1px; + margin-bottom: 32px; + text-transform: uppercase; +} +.section-nav-item--collapsible { + cursor: pointer; + .section-nav-list { + display: none; + } + span { + &:before { + content: ""; + position: absolute; + top: 4px; + left: -16px; + border-style: solid; + border-width: 5px 0 5px 8px; + border-color: transparent transparent transparent #ff6d00; + transform: rotate(0deg); + transition: .3s; + } + } +} +@media (max-width:1024px) { + .section-nav { + nav { + background-color: #fff; + max-height: 100vh; + height: calc(100vh - 44px); + overflow-y: auto; + } + background-color: #f7f7f7; + bottom: 0; + right: 0; + max-width: 303px; + position: fixed; + top: 0; + transition: transform 100ms linear; + transition: transform 100ms linear, -webkit-transform 100ms linear, -o-transform 100ms linear; + width: calc(100% - 72px); + border-radius: 0; + z-index: 10000; + padding: 0; + } + .section-nav-back { + display: block; + } + .section-nav.closed { + transform: translateX(100%); + } + .section-nav.open { + transform: translateX(0); + } +} diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss index b38b7e8a9736..654adbcdd637 100644 --- a/website/www/site/assets/scss/main.scss +++ b/website/www/site/assets/scss/main.scss @@ -39,11 +39,11 @@ @import "_hero-mobile.scss"; @import "_logos.scss"; @import "_pillars.scss"; -@import "_section-nav.sass"; -@import "_page-nav.sass"; +@import "_section-nav.scss"; +@import "_page-nav.scss"; @import "_table-wrapper.scss"; @import "_calendar.scss"; -@import "_lists.scss"; @import "_quotes.scss"; @import "_navbar-desktop.scss"; +@import "_lists.scss"; @import "_search.scss"; diff --git a/website/www/site/content/en/community/join-beam.md b/website/www/site/content/en/community/join-beam.md new file mode 100644 index 000000000000..db65498f1307 --- /dev/null +++ b/website/www/site/content/en/community/join-beam.md @@ -0,0 +1,46 @@ +--- +title: "Join Beam Community" +aliases: + - /community/ + - /use/issue-tracking/ + - /use/mailing-lists/ + - /get-started/support/ +--- + + + +# Join Beam Community! + +We’re so glad you want to join the Apache Beam community. Here’s a pathway you can follow to help you get started. This is not the only way to join, but it’s the recommended progression so you’re successful at reaching your objectives. + +## Join the Conversation + +{{< community/join_beam_columns number-of-data="0" >}} + +## Contribute to the Project + +{{< community/join_beam_columns number-of-data="1" >}} + +## Become a committer + +{{< community/join_beam_columns number-of-data="2" >}} + +## Become a PMC member + +{{< community/join_beam_columns number-of-data="3" >}} + +## Still have questions? + +Send us a note at user@beam.apache.org OR mention @ApacheBeam on Twitter OR ask us in the #beam slack channel. We look forward to seeing you in the community! diff --git a/website/www/site/data/en/join_beam.yaml b/website/www/site/data/en/join_beam.yaml new file mode 100644 index 000000000000..380b4d92b1ff --- /dev/null +++ b/website/www/site/data/en/join_beam.yaml @@ -0,0 +1,29 @@ +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +- list: + - { title: Mailing Lists, description: 'Join the official Apache Beam user and developer mailing lists. Learn how here' } + - { title: Slack Channel, description: 'For real-time communication, join us on the #beam channel in the ASF workspace.' } + - { title: Twitter account, description: 'Follow @ApacheBeam on Twitter for the most recent news on the project and community!' } + - { title: YouTube channel, description: 'Follow our YouTube channel for the latest training and use cases.' } + - { title: StackOverflow, description: 'Ask your Beam questions in StackOverflow using the apache-beam tag.' } + - { title: Events, description: 'Follow our calendar in the homepage which has the latest events organized by the community.' } +- list: + - { title: Read our Contribution Guide and Policies, description: 'Get familiar with our contribution guide and policies.' } + - { title: Create a Jira account, description: 'Create a Jira account and send an email to dev@beam.apache.org to request comitter permissions.' } + - { title: Find an area to contribute, description: 'Beam recognizes code and non-code contributions. Check out this Jira board for some inspiration.' } + - { title: Contribute, description: 'To contribute code, you need to sign an Individual Contributor License Agreement (ICLA). Learn more here.' } + - { title: Stay engaged!, description: Finds ways to stay engaged in the project and community and help us shape it’s strategy and vision. } +- list: + - { title: Learn about Apache Beam Committers, description: 'Read how to become a committer to learn about ways to get nominated for committership.' } +- list: + - { title: Learn about the Project Management Committee (PMC), description: 'The Project Management Committee (PMC) is the highest recognition in Apache projects. If you’re interested in becoming part of it, learn more about it here.' } diff --git a/website/www/site/layouts/partials/head.html b/website/www/site/layouts/partials/head.html index c017268175e8..06862d76a911 100644 --- a/website/www/site/layouts/partials/head.html +++ b/website/www/site/layouts/partials/head.html @@ -1,4 +1,4 @@ -{{/* +{{/* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -9,16 +9,16 @@ See the License for the specific language governing permissions and limitations under the License. See accompanying LICENSE file. */}} - + {{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }} - + - + {{ $scssMain := "scss/main.scss"}} {{ if .Site.IsServer }} {{ $css := resources.Get $scssMain | toCSS (dict "enableSourceMap" true) | postCSS }} @@ -45,7 +45,7 @@ - + \ No newline at end of file + + + + diff --git a/website/www/site/layouts/partials/section-menu/en/community.html b/website/www/site/layouts/partials/section-menu/en/community.html index 2034d12c8b62..cd5104ea4313 100644 --- a/website/www/site/layouts/partials/section-menu/en/community.html +++ b/website/www/site/layouts/partials/section-menu/en/community.html @@ -10,6 +10,7 @@ limitations under the License. See accompanying LICENSE file. */}}
  • Community
    • +
  • Join Beam Communnity
  • Integrations
  • Contact Us
  • Policies
    • diff --git a/website/www/site/layouts/shortcodes/community/join_beam_columns.html b/website/www/site/layouts/shortcodes/community/join_beam_columns.html new file mode 100644 index 000000000000..bc0d7a091d91 --- /dev/null +++ b/website/www/site/layouts/shortcodes/community/join_beam_columns.html @@ -0,0 +1,44 @@ +{{/* + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. + */}} + {{ $index := .Get "number-of-data" }} + {{ $data := index $.Site.Data .Site.Language.Lang }} +
    + {{ range $i, $array := $data.join_beam }} + {{ if eq ( int $index) $i }} +
    + {{ $count := len $array.list }} + {{ range $index, $item := $array.list }} +
    +
    +
    + +
    + {{ if ne $index (sub $count 1) }} + {{ if modBool $index 2 }} + elipse icon + elipse icon + {{ else }} + elipse icon + elipse icon + {{ end }} + {{ end }} +
    +
    +

    {{ .title | markdownify }}

    +

    {{ .description | safeHTML }}

    +
    +
    + {{ end }} +
    + {{ end }} + {{ end }} +
    diff --git a/website/www/site/static/images/arrow-expandable.svg b/website/www/site/static/images/arrow-expandable.svg new file mode 100644 index 000000000000..6bcef73bfa12 --- /dev/null +++ b/website/www/site/static/images/arrow-expandable.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/images/ellipse-mobile.svg b/website/www/site/static/images/ellipse-mobile.svg new file mode 100644 index 000000000000..015a1720ee9f --- /dev/null +++ b/website/www/site/static/images/ellipse-mobile.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/images/ellipse.svg b/website/www/site/static/images/ellipse.svg new file mode 100644 index 000000000000..5e0b429aeca9 --- /dev/null +++ b/website/www/site/static/images/ellipse.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/js/hero/hero-mobile.js b/website/www/site/static/js/hero/hero-mobile.js index 979a5ec9dccc..eb6641988c65 100644 --- a/website/www/site/static/js/hero/hero-mobile.js +++ b/website/www/site/static/js/hero/hero-mobile.js @@ -9,9 +9,9 @@ // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the // License for the specific language governing permissions and limitations under // the License. - -var animationData = {"v":"5.7.1","fr":30,"ip":0,"op":120,"w":375,"h":462,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[1635.5,319,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":82,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-35],"e":[-20]},{"t":56}],"ix":10},"p":{"a":0,"k":[-2082.5,375,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.341176470588,0.043137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-53],"e":[-34]},{"t":76}],"ix":10},"p":{"a":0,"k":[-1990.5,983,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-6,"s":[-46],"e":[20]},{"t":67}],"ix":10},"p":{"a":0,"k":[1117.5,959,0],"ix":2},"a":{"a":0,"k":[1171.735,-35.884,0],"ix":1},"s":{"a":0,"k":[100,78.683,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":20,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[0.759]},"t":-5,"s":[2],"e":[-27]},{"t":56}],"ix":10},"p":{"a":0,"k":[-484.5,1051,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 8","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-7,"s":[2],"e":[-43]},{"t":56}],"ix":10},"p":{"a":0,"k":[-542.5,1281,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,81.692,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-152.112,163.925],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":9,"ty":1,"nm":"Orange Solid 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,231,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#ff570b","ip":0,"op":720,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":1,"nm":"Medium Orange Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,231,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#f87924","ip":0,"op":720,"st":0,"bm":0}],"markers":[]}; - +height = screen.height - 96; +width = screen.width; +var animationData = {"v":"5.7.1","fr":30,"ip":0,"op":120,"w":width,"h":height,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[1649,406,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":82,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-35],"e":[-20]},{"t":56}],"ix":10},"p":{"a":0,"k":[-1947,378,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.341176470588,0.043137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-53],"e":[-34]},{"t":76}],"ix":10},"p":{"a":0,"k":[-1857,994,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-6,"s":[-46],"e":[20]},{"t":67}],"ix":10},"p":{"a":0,"k":[1119,1224,0],"ix":2},"a":{"a":0,"k":[1171.735,-35.884,0],"ix":1},"s":{"a":0,"k":[100,78.683,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":20,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[0.759]},"t":-5,"s":[2],"e":[-27]},{"t":56}],"ix":10},"p":{"a":0,"k":[-463,1308,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 8","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-7,"s":[2],"e":[-43]},{"t":56}],"ix":10},"p":{"a":0,"k":[-505,1530,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,81.692,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-152.112,163.925],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":9,"ty":1,"nm":"Orange Solid 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[207,448,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[152,152,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#ff570b","ip":0,"op":720,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":1,"nm":"Medium Orange Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[207,448,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[152,152,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#f87924","ip":0,"op":720,"st":0,"bm":0}],"markers":[]} var animation = bodymovin.loadAnimation({ container: document.getElementById("hero-mobile"), renderer: "svg", diff --git a/website/www/site/static/js/page-nav.js b/website/www/site/static/js/page-nav.js index 1e8f6eaa1843..c31a1bd60867 100644 --- a/website/www/site/static/js/page-nav.js +++ b/website/www/site/static/js/page-nav.js @@ -17,9 +17,33 @@ $(document).ready(function() { var CONST = { DESKTOP_BREAKPOINT: 1024, - PAGENAV_WIDTH: 240 + PAGENAV_WIDTH: 248 + }; + function checkList () { + var items = $(".page-nav > #TableOfContents li"); + if (items && items.length > 0) { + for(var i=0; i a',items[i]).length>0){ + if(!items[i].querySelector('a').getAttribute('aria-expanded') || items[i].querySelector('a').getAttribute('aria-expanded') == 'false'){ + items[i].classList.add('chosen'); + } + } + } + } + if($('#TableOfContents .active').length === 0 || $('#TableOfContents .chosen').length===0){ + if($('#TableOfContents li').first().children('a').length === 0){ + $('#TableOfContents li').first().children('ul').children('li')[0].classList.add('chosen'); + $('#TableOfContents li')[0].classList.add('active'); + } + else + $('#TableOfContents li')[0].classList.add('chosen'); + } + } }; - return { "idPageNav": idPageNav, "idMainContainer": idMainContainer, @@ -39,6 +63,14 @@ $(document).ready(function() { left: 0 }); } + if($('#TableOfContents .active').length === 0){ + if($('#TableOfContents li').first().children('a').length === 0){ + $('#TableOfContents li').first().children('ul').children('li')[0].classList.add('chosen'); + $('#TableOfContents li')[0].classList.add('active'); + } + else + $('#TableOfContents li')[0].classList.add('chosen'); + } }, "bindEvents": function() { @@ -48,10 +80,44 @@ $(document).ready(function() { _self.setPageNav(); }); }, + "setActiveItemClassEvent": function () { + $("." + idSectionNav + " a").click(function (e) { + var currentItem = document.querySelector(classNavActiveItem); + if (currentItem) + currentItem.classList.remove(CONST.ACTIVE_CLASS); + e.target.classList.add(CONST.ACTIVE_CLASS); + }); + }, + + "displayActiveItem": function () { + document.querySelector(".page-nav > #TableOfContents").addEventListener('click', function(){ + setTimeout(checkList,50) + }); + document.addEventListener('scroll', checkList); + var items = $(".page-nav > #TableOfContents li"); + var img = document.createElement("img"); + img.src = "/images/arrow-expandable.svg"; + img.classList="rotate"; + for(i=0; i