diff --git a/website/www/site/assets/icons/commercial-icon.svg b/website/www/site/assets/icons/commercial-icon.svg new file mode 100644 index 000000000000..916237de46cc --- /dev/null +++ b/website/www/site/assets/icons/commercial-icon.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/beam-logo-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/beam-logo-icon.svg new file mode 100644 index 000000000000..587667d29cc9 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/beam-logo-icon.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/code-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/code-icon.svg new file mode 100644 index 000000000000..338acf8e8de1 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/code-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/diamond-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/diamond-icon.svg new file mode 100644 index 000000000000..50930d56bf94 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/diamond-icon.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/file-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/file-icon.svg new file mode 100644 index 000000000000..a198565b15a4 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/file-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/messages-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/messages-icon.svg new file mode 100644 index 000000000000..0f710d68e9f6 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/messages-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/tool-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/tool-icon.svg new file mode 100644 index 000000000000..46e30c82ab1a --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/tool-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/beam-icon.svg b/website/www/site/assets/icons/documentation/runners/beam-icon.svg new file mode 100644 index 000000000000..a28c653d9d2b --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/beam-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/dataflow-icon.svg b/website/www/site/assets/icons/documentation/runners/dataflow-icon.svg new file mode 100644 index 000000000000..8bf98f238451 --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/dataflow-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/flink-icon.svg b/website/www/site/assets/icons/documentation/runners/flink-icon.svg new file mode 100644 index 000000000000..40c77f112dc1 --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/flink-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/nemo-icon.svg b/website/www/site/assets/icons/documentation/runners/nemo-icon.svg new file mode 100644 index 000000000000..d6ddbc517578 --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/nemo-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/samza-icon.svg b/website/www/site/assets/icons/documentation/runners/samza-icon.svg new file mode 100644 index 000000000000..4627df1be7bf --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/samza-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/spark-icon.svg b/website/www/site/assets/icons/documentation/runners/spark-icon.svg new file mode 100644 index 000000000000..61ee67f363ef --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/spark-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/sdks/go-icon.svg b/website/www/site/assets/icons/documentation/sdks/go-icon.svg new file mode 100644 index 000000000000..46f43820bb3a --- /dev/null +++ b/website/www/site/assets/icons/documentation/sdks/go-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/sdks/java-icon.svg b/website/www/site/assets/icons/documentation/sdks/java-icon.svg new file mode 100644 index 000000000000..a2991e307ca3 --- /dev/null +++ b/website/www/site/assets/icons/documentation/sdks/java-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/sdks/python-icon.svg b/website/www/site/assets/icons/documentation/sdks/python-icon.svg new file mode 100644 index 000000000000..f539aa3a62aa --- /dev/null +++ b/website/www/site/assets/icons/documentation/sdks/python-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/extensible-icon.svg b/website/www/site/assets/icons/extensible-icon.svg new file mode 100644 index 000000000000..02ba07c0ccd1 --- /dev/null +++ b/website/www/site/assets/icons/extensible-icon.svg @@ -0,0 +1,26 @@ + + + + + + + + + diff --git a/website/www/site/assets/icons/extensive-icon.svg b/website/www/site/assets/icons/extensive-icon.svg deleted file mode 100644 index 76e680da8216..000000000000 --- a/website/www/site/assets/icons/extensive-icon.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - diff --git a/website/www/site/assets/icons/open_source-icon.svg b/website/www/site/assets/icons/open_source-icon.svg new file mode 100644 index 000000000000..1505a32429e5 --- /dev/null +++ b/website/www/site/assets/icons/open_source-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/scss/_blog.scss b/website/www/site/assets/scss/_blog.scss new file mode 100644 index 000000000000..e6c1ad567008 --- /dev/null +++ b/website/www/site/assets/scss/_blog.scss @@ -0,0 +1,238 @@ +/*! + * 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"; + + .blog-content { + //padding: 0 24px 0 24px; + margin-top: 64px; + .tf-filter-item { + display: none !important; + } + h2 { + text-align: center; + margin-bottom: 70px !important; + padding-top: 57px; + } + + .category-buttons { + display: flex; + align-items: center; + justify-content: center; + + flex-wrap: wrap-reverse; + margin: 0 auto; + margin-bottom: 80px; + + @media (max-width: $tablet) { + max-width: 100%; + flex-wrap: wrap; + } + + .category-button { + margin: 0 6px 12px 6px; + padding: 10px 20px; + border-radius: 100px; + background-color: #f6f6f6; + text-transform: uppercase; + border: 0; + font-weight: bold; + line-height: 1.14; + letter-spacing: 0.6px; + &:focus { + outline: 0; + } + &:hover { + background-color: #f2804d; + color: #fff; + } + } + + .active { + background-color: #f26628; + color: #fff; + &:hover { + background-color: #f2804d; + } + } + } + .category-buttons_poweredBy { + justify-content: flex-start; + margin-top: 84px; + } + .restricted { + max-width: 60%; + @media (max-width: $mobile) { + max-width: 100%; + } + } + } + .load-button { + padding: 15px 51px 15px 52px; + border-radius: 100px; + background-color: #f26628; + text-transform: uppercase; + font-weight: bold; + line-height: normal; + letter-spacing: 0.39px; + color: #ffffff; + border: 0; + margin-top: 104px; + width: 184px; + height: 46px; + &:hover { + background-color: #f2804d; + } + } + + .posts-list { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + + .show-item { + display: inline-block !important; + } + + @media (max-width: $tablet) { + justify-content: space-evenly; + } + .post-card { + width: 381px; + height: 468px; + padding: 24px 24px 128.9px; + border-radius: 16px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + background-color: #ffffff; + margin-bottom: 36px; + color: #333333; + overflow: hidden; + + &:hover { + text-decoration: none; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } + @media (max-width: $tablet) { + width: 327px; + height: 216px; + padding: 24px 20px; + margin-bottom: 24px; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .post-title { + font-size: 24px; + font-weight: 500; + line-height: 1.25; + letter-spacing: normal; + margin-bottom: 24px; + overflow: hidden; + -webkit-box-orient: vertical; + @media (max-width: $tablet) { + font-size: 18px; + font-weight: normal; + line-height: 1.6; + letter-spacing: 0.43px; + } + } + + .post-summary { + overflow: hidden; + line-height: 1.57; + letter-spacing: 0.43px; + display: -webkit-box; + -webkit-line-clamp: 9; + -webkit-box-orient: vertical; + @media (max-width: $tablet) { + display: none; + } + } + } + } + .post-info { + display: flex; + justify-content: space-between; + font-size: 16px; + font-weight: 500; + line-height: 1.63; + letter-spacing: 0.43px; + color: #8c8b8e; + margin-bottom: 38px; + @media (max-width: $tablet) { + margin-bottom: 0; + } + p { + text-transform: uppercase; + } + } + .post-category { + font-size: 14px; + font-weight: normal; + margin-top: 8px; + } + .post { + .post-content { + max-width: 853px; + margin: 0 auto; + margin-bottom: 120px; + padding-top: 55px; + @media (max-width: $tablet) { + padding: 35px 24px; + word-break: break-word; + margin-top: 85px; + } + } + + .post-header { + border-bottom: 2px solid rgba(255, 109, 5, 0.24); + margin-bottom: 24px; + padding-bottom: 26px; + } + .post-card { + width: 381px; + height: 216px; + padding: 24px; + display: flex; + flex-direction: column; + justify-content: space-between; + @media (max-width: $tablet) { + width: 327px; + height: 216px; + padding: 24px 19.2px 24.7px 20px; + } + } + .post-info { + margin: 0; + p { + font-size: 14px; + font-weight: bold; + line-height: normal; + letter-spacing: 2px; + } + } + .post-title { + margin-bottom: 12px !important; + font-size: 18px !important; + line-height: 1.6 !important; + letter-spacing: 0.43px !important; + text-overflow: ellipsis; + max-height: 4.8em; + } + } diff --git a/website/www/site/assets/scss/_calendar.scss b/website/www/site/assets/scss/_calendar.scss index c78c16081571..824c0312d8e9 100644 --- a/website/www/site/assets/scss/_calendar.scss +++ b/website/www/site/assets/scss/_calendar.scss @@ -56,11 +56,13 @@ } } - .calendar-card-big-left:hover { - box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), - 0 4px 6px 0 rgba(0, 0, 0, 0.24); + .calendar-card-big-left { + padding: 0 !important; + &:hover { + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } } - // Middle cards .calendar-card-box { margin: 0 37px; @@ -68,23 +70,64 @@ display: flex; flex-direction: column; justify-content: space-between; - - .calendar-card-small { - width: 100%; - max-width: 381px; + .show-item { + display: inline-block; + } + .post-card { + width: 381px; height: 216px; + padding: 24px; border-radius: 16px; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), 0 4px 4px 0 rgba(0, 0, 0, 0.06); - background-color: $color-white; - padding: 32px 24px; - transition: 0.2s; - - .calendar-card-small-title { - @extend .component-small-header; + background-color: #ffffff; + margin-bottom: 36px; + color: #333333; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; + @media (max-width: $tablet) { + width: 327px; + height: 216px; + padding: 24px 19.2px 24.7px 20px; + margin-bottom: 24px; + } + &:hover { + text-decoration: none; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } - margin-top: 40px; + .post-title { + font-size: 18px; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.43px; margin-bottom: 12px; + text-overflow: ellipsis; + word-wrap: break-word; + overflow: hidden; + max-height: 4.8em; + + @media (max-width: $tablet) { + font-size: 18px; + font-weight: normal; + line-height: 1.6; + letter-spacing: 0.43px; + } + } + + .post-summary { + overflow: hidden; + line-height: 1.57; + letter-spacing: 0.43px; + display: -webkit-box; + -webkit-line-clamp: 9; + -webkit-box-orient: vertical; + @media (max-width: $tablet) { + display: none; + } } } @@ -103,7 +146,17 @@ .calendar-card-events { margin-top: 30px; margin-bottom: 70px; - + .calendar-desktop { + @media (max-width: $tablet) { + display: none; + } + } + .calendar-mobile { + display: none; + @media (max-width: $tablet) { + display: block; + } + } .calendar-event { display: flex; padding: 14px; @@ -191,7 +244,7 @@ .calendar-content { flex-direction: column; align-items: center; - margin-top: 64px; + margin-top: 70px; .calendar-card-big { max-width: 327px; @@ -205,11 +258,12 @@ } .calendar-card-box { - margin: 24px 0px; + margin-bottom: 0; + margin-top: 24px; min-height: 456px; .calendar-card-small { - width: 327px; + max-width: 327px; height: 216px; padding: 24px 20px; diff --git a/website/www/site/assets/scss/_ctas.sass b/website/www/site/assets/scss/_ctas.sass index 325d4f1b07cc..d334a8834a1f 100644 --- a/website/www/site/assets/scss/_ctas.sass +++ b/website/www/site/assets/scss/_ctas.sass @@ -16,13 +16,59 @@ */ .ctas - text-align: center - margin: $pad-xl 0 + display: flex + justify-content: center + align-items: center + width: 100% + height: 96px + position: fixed + z-index: 1020 + bottom: 0 + box-shadow: 0 -4px 16px 0 rgba(0, 0, 0, 0.06); + background-color: #ffffff + margin-top: -5px - .ctas__ctas - &--top - margin-bottom: $pad + @media (max-width: $ak-breakpoint-lg) + flex-wrap: nowrap + width: auto + justify-content: flex-start + left: 0 + right: 0 + overflow-y: hidden + overflow-x: auto - .ctas__title - +type-h2 - margin-bottom: $pad + + &_row + margin: 0 0 0 91px + max-width: 184px + transform: translate3d(0px, 0px, 0px) + &:first-of-type + margin: 0 + @media (max-width: $ak-breakpoint-lg) + margin-left: 24px + &:first-of-type + margin-left: 24px + + &_button + width: 184px + height: 46px + border-radius: 100px + background-color: #f26628 + font-size: 14px + font-weight: bold + line-height: normal + letter-spacing: 0.39px + color: #ffffff + text-transform: uppercase + display: flex + align-items: center + justify-content: center + + img + margin-right: 12px + height: 20px + width: 20px + &:hover + text-decoration: none + color: #ffffff + background-color: #f2804d diff --git a/website/www/site/assets/scss/_footer.sass b/website/www/site/assets/scss/_footer.sass index a52ba8d115a5..ce99da118e58 100644 --- a/website/www/site/assets/scss/_footer.sass +++ b/website/www/site/assets/scss/_footer.sass @@ -17,34 +17,32 @@ .footer background: $color-dark - padding: 40px 0 - margin-top: 70px + padding-top: 40px + margin-top: 128px @at-root .body--index & margin-top: 0 color: #fff .footer__contained +contained - + padding: 0 30px a color: #fff .footer__cols display: flex justify-content: space-around + @media (max-width: $ak-breakpoint-lg) + display: block + .footer__cols__col__logos + padding-right: 120px + @media (max-width: $ak-breakpoint-lg) + display: flex .footer__cols__col padding: 5px box-sizing: border-box - &:first-child - +md - width: 20% - - &--md - +md - width: 20% - .footer__cols__col__title color: #fff font-weight: $font-weight-bold @@ -55,7 +53,46 @@ .footer__cols__col__logo margin-bottom: $pad + @media (max-width: $ak-breakpoint-lg) + margin-right: 50px + + .footer__flex_mobile + display: flex + flex-direction: row + justify-content: space-between + @media (max-width: $ak-breakpoint-lg) + flex-direction: column + + .wrapper-grid + display: grid + padding-bottom: 30px + grid-template-columns: repeat(4, 1fr) + grid-gap: 52px + grid-auto-rows: minmax(200px, auto) + @media (max-width: $ak-breakpoint-lg) + grid-template-columns: repeat(2, 1fr) + + .footer-wrapper + padding: 0 56px + @media (max-width: $ak-breakpoint-lg) + padding: 0 + + .footer__bottom + line-height: 1.57 + letter-spacing: 0.43px + color: #bfbfbf + padding-bottom: 38px + padding-right: 25px + margin-right: 76px + a + color: #bfbfbf + @media (max-width: $ak-breakpoint-lg) + padding-bottom: 77px + padding-right: 0 + margin-right: 0 - .footer__bottom - margin-top: $pad-md - text-align: center +.main-padding + padding-bottom: 48px + background: #37424B; + @media (max-width: $ak-breakpoint-lg) + padding-bottom: 100px diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass index 9c62feea862d..fbc02977971b 100644 --- a/website/www/site/assets/scss/_global.sass +++ b/website/www/site/assets/scss/_global.sass @@ -122,6 +122,7 @@ body border: none padding: 0 margin-top: 36px + background: initial !important a float: right margin-left: 12px diff --git a/website/www/site/assets/scss/_graphic.sass b/website/www/site/assets/scss/_graphic.sass deleted file mode 100644 index cd171f7db00b..000000000000 --- a/website/www/site/assets/scss/_graphic.sass +++ /dev/null @@ -1,29 +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. - */ - -.graphic - padding: $pad-l $pad - - .graphic__image - text-align: center - line-height: 0 - - img - max-width: 100% - margin: 0 auto - max-height: 500px - border: 1px solid #efefef diff --git a/website/www/site/assets/scss/_graphic.scss b/website/www/site/assets/scss/_graphic.scss new file mode 100644 index 000000000000..336f1f422516 --- /dev/null +++ b/website/www/site/assets/scss/_graphic.scss @@ -0,0 +1,91 @@ +/*! + * 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"; + +.graphic { + text-align: center; + h2 { + @extend .component-title; + } + .images { + max-width: 868px; + margin: 0 auto; + height: 60px; + } + .margin { + margin-top: 84px; + margin-bottom: 84px; + @media (max-width: $mobile) { + margin-top: 0; + margin-bottom: 64px; + } + } + .row { + display: flex; + justify-content: space-between; + @media (max-width: $mobile) { + flex-direction: column; + align-items: center; + } + .logos-row { + display: flex; + align-items: center; + margin-top: 20px; + max-height: 73px; + @media (max-width: $mobile) { + margin-top: 64px; + } + img { + height: auto; + width: 112px; + } + } + .first_logo { + margin-right: 18px; + } + .column { + display: flex; + flex-direction: column; + align-items: center; + max-width: 306px; + + h4 { + margin-top: 32px; + } + .more { + margin-top: 32px; + font-size: 14px; + font-weight: bold; + line-height: 16px; + letter-spacing: 0.6px; + color: #f26628; + } + } + .icon { + width: 34px; + height: 44px; + margin-top: 16px; + @media (max-width: $mobile) { + margin-top: 64px; + } + } + img { + max-width: 306px; + height: 42px; + } + } +} diff --git a/website/www/site/assets/scss/_layout.scss b/website/www/site/assets/scss/_layout.scss index 0c3b1c3132d0..9f8f2b4de15b 100644 --- a/website/www/site/assets/scss/_layout.scss +++ b/website/www/site/assets/scss/_layout.scss @@ -16,241 +16,235 @@ * Site header */ .site-header { - border-top: 5px solid $grey-color-dark; - border-bottom: 1px solid $grey-color-light; - min-height: 56px; + border-top: 5px solid $grey-color-dark; + border-bottom: 1px solid $grey-color-light; + min-height: 56px; - // Positioning context for the mobile navigation icon - position: relative; + // Positioning context for the mobile navigation icon + position: relative; } .site-title { - font-size: 26px; - font-weight: 300; - line-height: 56px; - letter-spacing: -1px; - margin-bottom: 0; - float: left; - - &, - &:visited { - color: $grey-color-dark; - } + font-size: 26px; + font-weight: 300; + line-height: 56px; + letter-spacing: -1px; + margin-bottom: 0; + float: left; + + &, + &:visited { + color: $grey-color-dark; + } } .site-nav { - float: right; - line-height: 56px; + float: right; + line-height: 56px; - .menu-icon { - display: none; - } + .menu-icon { + display: none; + } - .page-link { - color: $text-color; - line-height: $base-line-height; + .page-link { + color: $text-color; + line-height: $base-line-height; - // Gaps between nav items, but not on the last one - &:not(:last-child) { - margin-right: 20px; - } + // Gaps between nav items, but not on the last one + &:not(:last-child) { + margin-right: 20px; } + } - @include media-query($on-palm) { - position: absolute; - top: 9px; - right: $spacing-unit / 2; - background-color: $background-color; - border: 1px solid $grey-color-light; - border-radius: 5px; - text-align: right; - - .menu-icon { - display: block; - float: right; - width: 36px; - height: 26px; - line-height: 0; - padding-top: 10px; - text-align: center; - - > svg { - width: 18px; - height: 15px; - - path { - fill: $grey-color-dark; - } - } - } + @include media-query($on-palm) { + position: absolute; + top: 9px; + right: $spacing-unit / 2; + background-color: $background-color; + border: 1px solid $grey-color-light; + border-radius: 5px; + text-align: right; - .trigger { - clear: both; - display: none; - } - - &:hover .trigger { - display: block; - padding-bottom: 5px; + .menu-icon { + display: block; + float: right; + width: 36px; + height: 26px; + line-height: 0; + padding-top: 10px; + text-align: center; + + > svg { + width: 18px; + height: 15px; + + path { + fill: $grey-color-dark; } + } + } - .page-link { - display: block; - padding: 5px 10px; + .trigger { + clear: both; + display: none; + } - &:not(:last-child) { - margin-right: 0; - } - margin-left: 20px; - } + &:hover .trigger { + display: block; + padding-bottom: 5px; } -} + .page-link { + display: block; + padding: 5px 10px; + &:not(:last-child) { + margin-right: 0; + } + margin-left: 20px; + } + } +} /** - * Site footer - */ + * Site footer + */ .site-footer { - border-top: 1px solid $grey-color-light; - padding: $spacing-unit 0; + border-top: 1px solid $grey-color-light; + padding: $spacing-unit 0; } .footer-heading { - font-size: 18px; - margin-bottom: $spacing-unit / 2; + font-size: 18px; + margin-bottom: $spacing-unit / 2; } .contact-list, .social-media-list { - list-style: none; - margin-left: 0; + list-style: none; + margin-left: 0; } .footer-col-wrapper { - font-size: 15px; - color: $grey-color; - margin-left: -$spacing-unit / 2; - @extend %clearfix; + font-size: 15px; + color: $grey-color; + margin-left: -$spacing-unit / 2; + @extend %clearfix; } .footer-col { - float: left; - margin-bottom: $spacing-unit / 2; - padding-left: $spacing-unit / 2; + float: left; + margin-bottom: $spacing-unit / 2; + padding-left: $spacing-unit / 2; } .footer-col-1 { - width: -webkit-calc(35% - (#{$spacing-unit} / 2)); - width: calc(35% - (#{$spacing-unit} / 2)); + width: -webkit-calc(35% - (#{$spacing-unit} / 2)); + width: calc(35% - (#{$spacing-unit} / 2)); } .footer-col-2 { - width: -webkit-calc(20% - (#{$spacing-unit} / 2)); - width: calc(20% - (#{$spacing-unit} / 2)); + width: -webkit-calc(20% - (#{$spacing-unit} / 2)); + width: calc(20% - (#{$spacing-unit} / 2)); } .footer-col-3 { - width: -webkit-calc(45% - (#{$spacing-unit} / 2)); - width: calc(45% - (#{$spacing-unit} / 2)); + width: -webkit-calc(45% - (#{$spacing-unit} / 2)); + width: calc(45% - (#{$spacing-unit} / 2)); } @include media-query($on-laptop) { - .footer-col-1, - .footer-col-2 { - width: -webkit-calc(50% - (#{$spacing-unit} / 2)); - width: calc(50% - (#{$spacing-unit} / 2)); - } + .footer-col-1, + .footer-col-2 { + width: -webkit-calc(50% - (#{$spacing-unit} / 2)); + width: calc(50% - (#{$spacing-unit} / 2)); + } - .footer-col-3 { - width: -webkit-calc(100% - (#{$spacing-unit} / 2)); - width: calc(100% - (#{$spacing-unit} / 2)); - } + .footer-col-3 { + width: -webkit-calc(100% - (#{$spacing-unit} / 2)); + width: calc(100% - (#{$spacing-unit} / 2)); + } } @include media-query($on-palm) { - .footer-col { - float: none; - width: -webkit-calc(100% - (#{$spacing-unit} / 2)); - width: calc(100% - (#{$spacing-unit} / 2)); - } + .footer-col { + float: none; + width: -webkit-calc(100% - (#{$spacing-unit} / 2)); + width: calc(100% - (#{$spacing-unit} / 2)); + } } - - /** - * Page content - */ + * Page content + */ .page-content { - padding: $spacing-unit 0; + padding: $spacing-unit 0; } .page-heading { - font-size: 20px; + font-size: 20px; } .post-list { - margin-left: 0; - list-style: none; + margin-left: 0; + list-style: none; - > li { - margin-bottom: $spacing-unit; - } + > li { + margin-bottom: $spacing-unit; + } } .post-meta { - font-size: $small-font-size; - color: $grey-color; + font-size: $small-font-size; + color: $grey-color; } .post-link { - display: block; - font-size: 24px; + display: block; + font-size: 24px; } - - /** - * Posts - */ + * Posts + */ .post-header { - margin-bottom: $spacing-unit; + margin-bottom: $spacing-unit; } .post-title { - font-size: 42px; - letter-spacing: -1px; - line-height: 1; + font-size: 42px; + letter-spacing: -1px; + line-height: 1; - @include media-query($on-laptop) { - font-size: 36px; - } + @include media-query($on-laptop) { + font-size: 36px; + } } .post-content { - margin-bottom: $spacing-unit; + margin-bottom: $spacing-unit; - h2 { - font-size: 32px; + h2 { + font-size: 32px; - @include media-query($on-laptop) { - font-size: 28px; - } + @include media-query($on-laptop) { + font-size: 28px; } + } - h3 { - font-size: 26px; + h3 { + font-size: 26px; - @include media-query($on-laptop) { - font-size: 22px; - } + @include media-query($on-laptop) { + font-size: 22px; } + } - h4 { - font-size: 20px; + h4 { + font-size: 20px; - @include media-query($on-laptop) { - font-size: 18px; - } + @include media-query($on-laptop) { + font-size: 18px; } + } } diff --git a/website/www/site/assets/scss/_lists.scss b/website/www/site/assets/scss/_lists.scss index 38763e5fd33c..b175081e1e25 100644 --- a/website/www/site/assets/scss/_lists.scss +++ b/website/www/site/assets/scss/_lists.scss @@ -50,6 +50,7 @@ } a { color: #333333; + text-decoration: underline; } } @@ -99,6 +100,10 @@ margin-top: 10px; } } + .list { + margin-top: 32px; + max-width: 640px; + } .icon-list { .list-item { display: flex; @@ -191,7 +196,7 @@ flex-direction: row; justify-content: space-between; flex-wrap: wrap; - max-width: 895px; + max-width: 855px; .row { display: flex; flex-direction: column; diff --git a/website/www/site/assets/scss/_quotes.scss b/website/www/site/assets/scss/_quotes.scss index 6d59798289f0..31ef263ae789 100644 --- a/website/www/site/assets/scss/_quotes.scss +++ b/website/www/site/assets/scss/_quotes.scss @@ -55,7 +55,8 @@ } img { - width: 172px; + max-height: 118px; + max-width: 320px; } } @@ -63,7 +64,7 @@ margin-right: 0; } } - + // Sliding feature is only displayed on mobile version .keen-slider { display: none; @@ -135,13 +136,16 @@ .quotes-title { margin-bottom: 64px; } - + h2 { + margin-bottom: 0 !important; + } .quotes-desktop { display: none; } .keen-slider { display: flex; + width: 100%; } .dots { diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss index 654adbcdd637..81181e2cab8c 100644 --- a/website/www/site/assets/scss/main.scss +++ b/website/www/site/assets/scss/main.scss @@ -33,7 +33,7 @@ // Modules. @import "_ctas.sass"; @import "_footer.sass"; -@import "_graphic.sass"; +@import "_graphic.scss"; @import "_header.sass"; @import "_hero.scss"; @import "_hero-mobile.scss"; @@ -44,6 +44,7 @@ @import "_table-wrapper.scss"; @import "_calendar.scss"; @import "_quotes.scss"; -@import "_navbar-desktop.scss"; +@import "_blog.scss"; @import "_lists.scss"; +@import "_navbar-desktop.scss"; @import "_search.scss"; diff --git a/website/www/site/config.toml b/website/www/site/config.toml index b7e6b831d04c..add55d7b4d12 100644 --- a/website/www/site/config.toml +++ b/website/www/site/config.toml @@ -37,7 +37,7 @@ pygmentsUseClassic = false # See https://help.farbox.com/pygments.html pygmentsStyle = "tango" -summaryLength = "unlimited" +summaryLength = "30" canonifyURLs = true diff --git a/website/www/site/content/en/documentation/_index.md b/website/www/site/content/en/documentation/_index.md index ffd6c21e7989..36812d53b630 100644 --- a/website/www/site/content/en/documentation/_index.md +++ b/website/www/site/content/en/documentation/_index.md @@ -4,6 +4,7 @@ aliases: - /learn/ - /docs/learn/ --- + + + + diff --git a/website/www/site/static/images/beam_logo_navbar_mobile.png b/website/www/site/static/images/beam_logo_navbar_mobile.png index bbc0ffe0edc7..51a3bd91ad59 100644 Binary files a/website/www/site/static/images/beam_logo_navbar_mobile.png and b/website/www/site/static/images/beam_logo_navbar_mobile.png differ diff --git a/website/www/site/static/images/code-icon.svg b/website/www/site/static/images/code-icon.svg new file mode 100644 index 000000000000..4fc8d4cfedce --- /dev/null +++ b/website/www/site/static/images/code-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/images/community/beam-logo-icon.svg b/website/www/site/static/images/community/beam-logo-icon.svg new file mode 100644 index 000000000000..587667d29cc9 --- /dev/null +++ b/website/www/site/static/images/community/beam-logo-icon.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/static/images/community/diamond-icon.svg b/website/www/site/static/images/community/diamond-icon.svg new file mode 100644 index 000000000000..50930d56bf94 --- /dev/null +++ b/website/www/site/static/images/community/diamond-icon.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/static/images/community/messages-icon.svg b/website/www/site/static/images/community/messages-icon.svg new file mode 100644 index 000000000000..0f710d68e9f6 --- /dev/null +++ b/website/www/site/static/images/community/messages-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/static/images/copy-icon.svg b/website/www/site/static/images/copy-icon.svg new file mode 100644 index 000000000000..6ca68a74562d --- /dev/null +++ b/website/www/site/static/images/copy-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/static/images/elipse.svg b/website/www/site/static/images/elipse.svg new file mode 100644 index 000000000000..5e0b429aeca9 --- /dev/null +++ b/website/www/site/static/images/elipse.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/images/github-icon.svg b/website/www/site/static/images/github-icon.svg new file mode 100644 index 000000000000..f5429eb423dc --- /dev/null +++ b/website/www/site/static/images/github-icon.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + diff --git a/website/www/site/static/images/info_icon.svg b/website/www/site/static/images/info_icon.svg new file mode 100644 index 000000000000..1828e45fcd90 --- /dev/null +++ b/website/www/site/static/images/info_icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/static/images/logos/full-color/nameless/eBay.png b/website/www/site/static/images/logos/full-color/nameless/eBay.png new file mode 100644 index 000000000000..95df6eb4b2d4 Binary files /dev/null and b/website/www/site/static/images/logos/full-color/nameless/eBay.png differ diff --git a/website/www/site/static/images/logos/full-color/nameless/klio.png b/website/www/site/static/images/logos/full-color/nameless/klio.png new file mode 100644 index 000000000000..2ddab743d9b4 Binary files /dev/null and b/website/www/site/static/images/logos/full-color/nameless/klio.png differ diff --git a/website/www/site/static/images/logos/full-color/nameless/mozilla.png b/website/www/site/static/images/logos/full-color/nameless/mozilla.png new file mode 100644 index 000000000000..e07961378c89 Binary files /dev/null and b/website/www/site/static/images/logos/full-color/nameless/mozilla.png differ diff --git a/website/www/site/static/images/logos/powered-by/eBay.png b/website/www/site/static/images/logos/powered-by/eBay.png new file mode 100644 index 000000000000..95df6eb4b2d4 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/eBay.png differ diff --git a/website/www/site/static/images/logos/powered-by/goga.png b/website/www/site/static/images/logos/powered-by/goga.png new file mode 100644 index 000000000000..278d4190ccf8 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/goga.png differ diff --git a/website/www/site/static/images/logos/powered-by/klio.png b/website/www/site/static/images/logos/powered-by/klio.png new file mode 100644 index 000000000000..2ddab743d9b4 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/klio.png differ diff --git a/website/www/site/static/images/logos/powered-by/mozilla.png b/website/www/site/static/images/logos/powered-by/mozilla.png new file mode 100644 index 000000000000..e07961378c89 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/mozilla.png differ diff --git a/website/www/site/static/images/logos/powered-by/neo4j.png b/website/www/site/static/images/logos/powered-by/neo4j.png new file mode 100644 index 000000000000..58c25b633fa5 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/neo4j.png differ diff --git a/website/www/site/static/images/logos/powered-by/oriel.png b/website/www/site/static/images/logos/powered-by/oriel.png new file mode 100644 index 000000000000..e158bbcbd448 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/oriel.png differ diff --git a/website/www/site/static/images/logos/powered-by/ricardo.png b/website/www/site/static/images/logos/powered-by/ricardo.png new file mode 100644 index 000000000000..7ed17b925673 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/ricardo.png differ diff --git a/website/www/site/static/images/logos/powered-by/scio.png b/website/www/site/static/images/logos/powered-by/scio.png new file mode 100644 index 000000000000..cb9c0737c6b1 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/scio.png differ diff --git a/website/www/site/static/images/logos/runners/flink.png b/website/www/site/static/images/logos/runners/flink.png index e847bfa2337b..33d51a8fbb84 100644 Binary files a/website/www/site/static/images/logos/runners/flink.png and b/website/www/site/static/images/logos/runners/flink.png differ diff --git a/website/www/site/static/images/logos/runners/spark.png b/website/www/site/static/images/logos/runners/spark.png index 113c316e9d91..f39302913cb2 100644 Binary files a/website/www/site/static/images/logos/runners/spark.png and b/website/www/site/static/images/logos/runners/spark.png differ diff --git a/website/www/site/static/images/logos/sdks/python-logo.png b/website/www/site/static/images/logos/sdks/python-logo.png new file mode 100644 index 000000000000..aec7e448fcc0 Binary files /dev/null and b/website/www/site/static/images/logos/sdks/python-logo.png differ diff --git a/website/www/site/static/images/model-ellipse.svg b/website/www/site/static/images/model-ellipse.svg new file mode 100644 index 000000000000..b9c8e39d7c8c --- /dev/null +++ b/website/www/site/static/images/model-ellipse.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/images/model-processing-icon.svg b/website/www/site/static/images/model-processing-icon.svg new file mode 100644 index 000000000000..ee9950ddced8 --- /dev/null +++ b/website/www/site/static/images/model-processing-icon.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/static/images/model-sinks-icon.svg b/website/www/site/static/images/model-sinks-icon.svg new file mode 100644 index 000000000000..c814061153c7 --- /dev/null +++ b/website/www/site/static/images/model-sinks-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/static/images/model-sources-icon.svg b/website/www/site/static/images/model-sources-icon.svg new file mode 100644 index 000000000000..2fc344867d3b --- /dev/null +++ b/website/www/site/static/images/model-sources-icon.svg @@ -0,0 +1,25 @@ + + + + + + + + diff --git a/website/www/site/static/images/run-icon.svg b/website/www/site/static/images/run-icon.svg new file mode 100644 index 000000000000..f976e01a31e3 --- /dev/null +++ b/website/www/site/static/images/run-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/js/calendar.js b/website/www/site/static/js/calendar.js new file mode 100644 index 000000000000..7c5588ca9f6d --- /dev/null +++ b/website/www/site/static/js/calendar.js @@ -0,0 +1,21 @@ +// 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. + +$(document).ready(function() { + function setSize() { + var height = $('.calendar-card-big-right').height(); + var width = $('.calendar-card-big-right').width(); + $('#calendar').height = height-100; + $('#calendar').width = width-100; + } + setSize(); +}); diff --git a/website/www/site/static/js/categories-filter.js b/website/www/site/static/js/categories-filter.js new file mode 100644 index 000000000000..339ceb4bd7c5 --- /dev/null +++ b/website/www/site/static/js/categories-filter.js @@ -0,0 +1,292 @@ +// 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. + +/** + * Copyright (c) + * @name 'Hugo Tags Filter' + * @version 1.2.2 + * @license MIT + * @author PointyFar + */ + +class CategoriesFilter { + constructor(config) { + var defaultFilters = [ + { + name: 'categories', + prefix: 'category-', + buttonClass: 'category-button', + allSelector: '#selectAllAuthors', + attrName: 'data-categories', + } + ] + this.FILTERS = (config && config.filters) ? config.filters : defaultFilters; + this.showItemClass = (config && config.showItemClass) ? config.showItemClass : "tf-show"; + this.activeButtonClass = (config && config.activeButtonClass) ? config.activeButtonClass : "active"; + this.filterItemClass = (config && config.filterItemClass) ? config.filterItemClass : "tf-filter-item"; + this.populateCount = (config && config.populateCount) ? config.populateCount : false; + this.setDisabledButtonClass = (config && config.setDisabledButtonClass) ? config.setDisabledButtonClass : false; + this.longList = 1; + this.numberToView = (config && config.numberToView) ? config.numberToView : 6; + this.filterItems = document.getElementsByClassName(this.filterItemClass); + this.numberOfItems = 0; + this.filterValues = {}; + for( var i = 0; i < this.FILTERS.length; i++) { + this.FILTERS[i]['buttonTotal'] = document.getElementsByClassName(this.FILTERS[i]['buttonClass']).length; + this.FILTERS[i]['selected'] = []; + this.FILTERS[i]['values'] = []; + var fv = document.getElementsByClassName(this.FILTERS[i]['buttonClass']); + + /** + * Build index of all filter values and their counts + */ + this.filterValues[this.FILTERS[i]['name']] = []; + for( var j = 0; j < fv.length; j++ ){ + var v = fv[j].id.replace(this.FILTERS[i]["prefix"], ''); + this.filterValues[this.FILTERS[i]['name']][v] = {count:0, selected:0}; + } + } + this.showCheck(this.FILTERS[0]['name'], true); + } + + initFilterCount(fvc, isInitial){ + + /** + * Initialise count = selected + */ + if(isInitial) { + for( var k in fvc ) { + for( var x = 0; x < this.filterItems.length; x++) { + var attrs = this.getAttrs(k, this.filterItems[x]); + if(attrs !== undefined){ + for(var l = 0; l 0 + }); + return response; + } + catch{ + return elem.getAttribute('data-'+ attr ) + .filter(function(el){ + return el.length > 0 + }); + }} +} + + + showAll(filter) { + for( var i = 0; i < this.FILTERS.length; i++) { + if(filter) { + if(this.FILTERS[i]['name'] === filter) { + this.FILTERS[i]['selected'] = []; + } + } else { + this.FILTERS[i]['selected'] = []; + } + } + this.showCheck(filter) + } + + checkFilter(tag, tagType) { + /* Selects clicked button.*/ + var selectedBtn = document.querySelector(`#${tagType}${tag}`); + this.numberOfItems=0; + for ( var i = 0; i < this.FILTERS.length; i++ ) { + if ( this.FILTERS[i]['prefix'] === tagType ) { + if ( this.FILTERS[i]['selected'].indexOf(tag) >= 0 || selectedBtn.classList.contains(this.activeButtonClass)) { + /* already selected, deselect tag */ + this.FILTERS[i]['selected'].splice(tag,1); + this.delClassIfPresent(selectedBtn, this.activeButtonClass); + } else { + /* add tag to selected list */ + this.FILTERS[i]['selected'].push(tag); + this.addClassIfMissing(selectedBtn, this.activeButtonClass); + } + //this.delClassIfPresent(document.querySelector(this.FILTERS[i]['allSelector']), this.activeButtonClass); + this.showCheck(this.FILTERS[i]['name']); + } + } + this.checkButton(); + + } + checkButton(){ + var button = document.getElementById("load-button"); + if( this.numberOfItems>this.numberToView*this.longList ){ + this.delClassIfPresent(button, this.filterItemClass); + } + else{ + this.addClassIfMissing(button, this.filterItemClass); + } + } + showMore(){ + this.longList ++; + this.numberOfItems = 0; + } + resetCount(){ + this.longList = 1; + } + /** + * showCheck - Applies "show" class to items containing selected tags + */ + showCheck(filter, isInitial) { + + /* If no tags/licenses selected, or all tags selected, SHOW ALL and DESELECT ALL BUTTONS. */ + for ( var i = 0; i < this.FILTERS.length; i++ ) { + if( this.FILTERS[i]['name'] === filter ) { + if( (this.FILTERS[i]['selected'].length === 0) || + (this.FILTERS[i]['selected'].length === this.FILTERS[i]['buttonTotal']) ) + { + var iBtns = document.getElementsByClassName(this.FILTERS[i]['buttonClass']); + for ( var j = 0; j < iBtns.length; j++ ) { + this.delClassIfPresent(iBtns[j], this.activeButtonClass) + } + //this.addClassIfMissing(document.querySelector(this.FILTERS[i]['allSelector']), this.activeButtonClass) + } + } + } + for ( var i = 0; i < this.filterItems.length; i++ ) { + /* First remove "show" class */ + this.delClassIfPresent(this.filterItems[i], this.showItemClass); + + var visibility = 0; + /* show item only if visibility is true for all filters */ + for ( var j = 0; j < this.FILTERS.length; j++ ) { + if ( this.checkVisibility(this.FILTERS[j]['selected'], this.filterItems[i].getAttribute(this.FILTERS[j]['attrName'])) ) { + visibility++; + } + } + /* Then check if "show" class should be applied */ + if ( visibility === this.FILTERS.length ) { + + if ( !this.filterItems[i].classList.contains(this.showItemClass) ) { + this.numberOfItems++; + if(this.numberOfItems<=this.numberToView*this.longList) + this.addClassIfMissing(this.filterItems[i], this.showItemClass); + } + + } + } + this.checkButton(); + this.checkButtonCounts(isInitial) + } + + + checkButtonCounts(isInitial){ + this.filterValues = this.initFilterCount(this.filterValues, isInitial); + this.populateCounters(this.filterValues); + + } + + + /** + * checkVisibility - Tests if attribute is included in list. + */ + checkVisibility(list, dataAttr) { + /* Returns TRUE if list is empty or attribute is in list */ + if (list.length > 0) { + for(var v = 0; v < list.length; v++){ + if(dataAttr){ + try{ + var arr = dataAttr.split(" ") + .filter(function(el){return el.length > 0}); + } + catch{ + var arr = dataAttr.filter(function(el){return el.length > 0}); + } + + if(arr.indexOf(list[v]) >=0 ) { + return true + } + } + else + return false + } + return false + } else { + return true + } + } + + addClassIfMissing(el, cn) { + if(!el.classList.contains(cn)) { + el.classList.add(cn); + } + } + + delClassIfPresent(el, cn) { + if(el.classList.contains(cn)) { + el.classList.remove(cn) + } + } +} + +window['CategoriesFilter'] = CategoriesFilter;