You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2019/10/22 13:39:41 UTC
[airflow-site] branch aip-11 updated: [depends on #84] Add video
component (#85)
This is an automated email from the ASF dual-hosted git repository.
kamilbregula pushed a commit to branch aip-11
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
The following commit(s) were added to refs/heads/aip-11 by this push:
new d17ee44 [depends on #84] Add video component (#85)
d17ee44 is described below
commit d17ee44b86b21a4fc39893988f04a95d99047d17
Author: Kamil BreguĊa <mi...@users.noreply.github.com>
AuthorDate: Tue Oct 22 15:39:36 2019 +0200
[depends on #84] Add video component (#85)
Co-Authored-By: Kamil Gabryjelski <ka...@polidea.com>
---
.../site/assets/icons/ask-question-icon.svg | 16 ++++
landing-pages/site/assets/icons/bug-icon.svg | 31 ++++++++
.../site/assets/icons/join-devlist-icon.svg | 16 ++++
landing-pages/site/assets/icons/play-icon.svg | 5 ++
landing-pages/site/assets/scss/_accordion.scss | 20 +++--
landing-pages/site/assets/scss/_video.scss | 90 ++++++++++++++++++++++
landing-pages/site/assets/scss/main-custom.scss | 1 +
landing-pages/site/content/en/examples/_index.html | 21 +++--
landing-pages/site/data/videos.json | 56 ++++++++++++++
landing-pages/site/layouts/examples/list.html | 2 +
.../site/layouts/partials/video-section.html | 42 ++++++++++
.../accordion.html => partials/youtube.html} | 14 +---
.../site/layouts/shortcodes/accordion.html | 19 ++++-
landing-pages/src/index.js | 2 +
.../js/handleActiveVideo.js} | 32 ++++----
15 files changed, 327 insertions(+), 40 deletions(-)
diff --git a/landing-pages/site/assets/icons/ask-question-icon.svg b/landing-pages/site/assets/icons/ask-question-icon.svg
new file mode 100644
index 0000000..33916d3
--- /dev/null
+++ b/landing-pages/site/assets/icons/ask-question-icon.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="55.876" viewBox="0 0 60 55.876">
+ <g id="Group_1432" data-name="Group 1432" transform="translate(1047.912 -646.062)">
+ <g id="Group_1428" data-name="Group 1428">
+ <path id="Path_1218" d="M-1002.844 701.938a.607.607 0 0 1-.432-.181l-11.713-11.849h-29.177a3.75 3.75 0 0 1-3.746-3.747v-36.352a3.75 3.75 0 0 1 3.746-3.747h52.507a3.751 3.751 0 0 1 3.747 3.747v36.352a3.751 3.751 0 0 1-3.747 3.747h-10.577v11.422a.608.608 0 0 1-.377.562.6.6 0 0 1-.231.046zm-41.322-54.66a2.533 2.533 0 0 0-2.53 2.531v36.352a2.533 2.533 0 0 0 2.53 2.53h29.431a.613.613 0 0 1 .433.181l10.85 10.978V689.3a.609.609 0 0 1 .608-.609h11.185a2.534 2.534 0 0 0 2.531-2.53v-36 [...]
+ </g>
+ <g id="Group_1429" data-name="Group 1429">
+ <path id="Path_1219" d="M-998.821 658.262H-1037a.608.608 0 0 1-.608-.608.608.608 0 0 1 .608-.608h38.183a.609.609 0 0 1 .609.608.609.609 0 0 1-.613.608z" fill="#017cee" data-name="Path 1219"/>
+ </g>
+ <g id="Group_1430" data-name="Group 1430">
+ <path id="Path_1220" d="M-998.821 667.678H-1037a.608.608 0 0 1-.608-.608.609.609 0 0 1 .608-.609h38.183a.609.609 0 0 1 .609.609.609.609 0 0 1-.613.608z" fill="#017cee" data-name="Path 1220"/>
+ </g>
+ <g id="Group_1431" data-name="Group 1431">
+ <path id="Path_1221" d="M-1008.759 677.093H-1037a.609.609 0 0 1-.608-.609.608.608 0 0 1 .608-.608h28.245a.608.608 0 0 1 .608.608.609.609 0 0 1-.612.609z" fill="#017cee" data-name="Path 1221"/>
+ </g>
+ </g>
+</svg>
diff --git a/landing-pages/site/assets/icons/bug-icon.svg b/landing-pages/site/assets/icons/bug-icon.svg
new file mode 100644
index 0000000..7bfb35b
--- /dev/null
+++ b/landing-pages/site/assets/icons/bug-icon.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="54.425" height="60" viewBox="0 0 54.425 60">
+ <g id="Group_1427" data-name="Group 1427" transform="translate(1175.26 -644)">
+ <g id="Group_1418" data-name="Group 1418">
+ <path id="Path_1210" d="M-1148.047 704a16.589 16.589 0 0 1-16.571-16.571v-18.75a.608.608 0 0 1 .608-.608h31.925a.609.609 0 0 1 .609.608v18.75A16.59 16.59 0 0 1-1148.047 704zm-15.355-34.713v18.142a15.372 15.372 0 0 0 15.355 15.355 15.372 15.372 0 0 0 15.354-15.355v-18.142z" fill="#017cee" data-name="Path 1210"/>
+ </g>
+ <g id="Group_1419" data-name="Group 1419">
+ <path id="Path_1211" d="M-1135.784 668.679H-1137V665.2a8.054 8.054 0 0 0-8.045-8.044h-6.005a8.054 8.054 0 0 0-8.045 8.044v3.475h-1.216V665.2a9.272 9.272 0 0 1 9.261-9.261h6.005a9.271 9.271 0 0 1 9.261 9.261z" fill="#017cee" data-name="Path 1211"/>
+ </g>
+ <g id="Group_1420" data-name="Group 1420">
+ <path id="Path_1212" d="M-1143.993 657.252a.608.608 0 0 1-.608-.608A12.657 12.657 0 0 1-1131.958 644a.608.608 0 0 1 .608.608.608.608 0 0 1-.608.608 11.441 11.441 0 0 0-11.427 11.428.608.608 0 0 1-.608.608z" fill="#017cee" data-name="Path 1212"/>
+ </g>
+ <g id="Group_1421" data-name="Group 1421">
+ <path id="Path_1213" d="M-1151.975 657.252a.608.608 0 0 1-.608-.608 11.441 11.441 0 0 0-11.427-11.428.608.608 0 0 1-.608-.608.608.608 0 0 1 .608-.608 12.658 12.658 0 0 1 12.643 12.644.608.608 0 0 1-.608.608z" fill="#017cee" data-name="Path 1213"/>
+ </g>
+ <g id="Group_1422" data-name="Group 1422">
+ <path id="Rectangle_473" d="M0 0h1.216v34.713H0z" fill="#017cee" data-name="Rectangle 473" transform="translate(-1148.656 668.679)"/>
+ </g>
+ <g id="Group_1423" data-name="Group 1423">
+ <path id="Path_1214" d="M-1164.01 678.409h-11.25v-12.517a.608.608 0 0 1 .608-.608.608.608 0 0 1 .608.608v11.3h10.034a.608.608 0 0 1 .608.608.608.608 0 0 1-.608.609z" fill="#017cee" data-name="Path 1214"/>
+ </g>
+ <g id="Group_1424" data-name="Group 1424">
+ <path id="Path_1215" d="M-1174.652 700.959a.608.608 0 0 1-.608-.608v-12.517h11.25a.609.609 0 0 1 .608.609.608.608 0 0 1-.608.608h-10.034v11.3a.608.608 0 0 1-.608.608z" fill="#017cee" data-name="Path 1215"/>
+ </g>
+ <g id="Group_1425" data-name="Group 1425">
+ <path id="Path_1216" d="M-1120.835 678.409h-11.25a.608.608 0 0 1-.608-.608.608.608 0 0 1 .608-.608h10.034v-11.3a.608.608 0 0 1 .608-.608.608.608 0 0 1 .608.608z" fill="#017cee" data-name="Path 1216"/>
+ </g>
+ <g id="Group_1426" data-name="Group 1426">
+ <path id="Path_1217" d="M-1121.443 700.959a.608.608 0 0 1-.608-.608v-11.3h-10.034a.609.609 0 0 1-.608-.608.609.609 0 0 1 .608-.609h11.25v12.517a.608.608 0 0 1-.608.608z" fill="#017cee" data-name="Path 1217"/>
+ </g>
+ </g>
+</svg>
diff --git a/landing-pages/site/assets/icons/join-devlist-icon.svg b/landing-pages/site/assets/icons/join-devlist-icon.svg
new file mode 100644
index 0000000..48a9ec5
--- /dev/null
+++ b/landing-pages/site/assets/icons/join-devlist-icon.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="43.846" viewBox="0 0 60 43.846">
+ <g id="Group_1417" data-name="Group 1417" transform="translate(1242.912 -652.077)">
+ <g id="Group_1413" data-name="Group 1413">
+ <path id="Path_1208" d="M-1212.912 677.749a.6.6 0 0 1-.387-.139l-28.606-23.558.773-.939 28.22 23.24 28.22-23.24.773.939-28.607 23.558a.6.6 0 0 1-.386.139z" fill="#017cee" data-name="Path 1208"/>
+ </g>
+ <g id="Group_1414" data-name="Group 1414">
+ <path id="Rectangle_471" d="M0 0h1.216v32.117H0z" fill="#017cee" data-name="Rectangle 471" transform="rotate(-50.527 109.86 1618.69)"/>
+ </g>
+ <g id="Group_1415" data-name="Group 1415">
+ <path id="Rectangle_472" d="M0 0h32.117v1.216H0z" fill="#017cee" data-name="Rectangle 472" transform="rotate(-39.47 346.56 2076.918)"/>
+ </g>
+ <g id="Group_1416" data-name="Group 1416">
+ <path id="Path_1209" d="M-1185.953 695.923h-53.919a3.044 3.044 0 0 1-3.04-3.041v-37.764a3.044 3.044 0 0 1 3.04-3.041h53.919a3.044 3.044 0 0 1 3.041 3.041v37.764a3.044 3.044 0 0 1-3.041 3.041zm-53.919-42.63a1.827 1.827 0 0 0-1.824 1.825v37.764a1.827 1.827 0 0 0 1.824 1.825h53.919a1.827 1.827 0 0 0 1.825-1.825v-37.764a1.827 1.827 0 0 0-1.825-1.825z" fill="#017cee" data-name="Path 1209"/>
+ </g>
+ </g>
+</svg>
diff --git a/landing-pages/site/assets/icons/play-icon.svg b/landing-pages/site/assets/icons/play-icon.svg
new file mode 100644
index 0000000..6f66cb0
--- /dev/null
+++ b/landing-pages/site/assets/icons/play-icon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-0.5 -0.5 21 21">
+ <path fill="none" stroke="#707070"
+ d="M10.043 0A10.054 10.054 0 000 10.043a10.054 10.054 0 0010.043 10.043 10.054 10.054 0 0010.043-10.043A10.054 10.054 0 0010.043 0zm3.889 10.3l-5.663 3.27a.3.3 0 01-.151.04.3.3 0 01-.151-.04.3.3 0 01-.151-.262V6.769a.3.3 0 01.151-.262.3.3 0 01.3 0l5.663 3.27a.3.3 0 01.151.262.3.3 0 01-.149.266z"
+ />
+</svg>
diff --git a/landing-pages/site/assets/scss/_accordion.scss b/landing-pages/site/assets/scss/_accordion.scss
index 7d9e96d..392e3e5 100644
--- a/landing-pages/site/assets/scss/_accordion.scss
+++ b/landing-pages/site/assets/scss/_accordion.scss
@@ -16,7 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
-
@import "colors";
details.accordion {
@@ -36,16 +35,21 @@ details.accordion {
display: none;
}
- .accordion__header {
- color: map_get($colors, cerulean-blue);
- margin-bottom: 20px;
- }
+ .accordion__summary-content {
+ display: flex;
- .accordion__description {
- color: map_get($colors, brownish-grey);
+ svg {
+ width: 60px;
+ margin-top: 28px;
+ margin-right: 42px;
+ }
+
+ &--header {
+ margin-bottom: 20px;
+ }
}
- .accordion__icon {
+ .accordion__arrow {
display: flex;
position: absolute;
width: 36px;
diff --git a/landing-pages/site/assets/scss/_video.scss b/landing-pages/site/assets/scss/_video.scss
new file mode 100644
index 0000000..f8dd998
--- /dev/null
+++ b/landing-pages/site/assets/scss/_video.scss
@@ -0,0 +1,90 @@
+/**
+ * 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 "colors";
+
+.video-section {
+ display: flex;
+ border: solid 1px #cbcbcb;
+ padding: 40px;
+}
+
+.video-wrapper {
+ flex: 1;
+
+ .video-container {
+ display: none;
+
+ &:last-child {
+ display: block;
+ }
+ }
+
+ .anchor {
+ position: fixed;
+
+ &:target + .video-container {
+ display: block;
+ }
+
+ &:target + .video-container ~ .video-container {
+ display: none;
+ }
+ }
+}
+
+.video-list-wrapper {
+ overflow-y: scroll;
+ max-height: 403px;
+ max-width: 365px;
+ width: 100%;
+ margin-left: 40px;
+}
+
+.video-list {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: flex-end;
+
+ &__item {
+ display: flex;
+ align-items: center;
+ border-bottom: solid 1px map-get($colors, very-light-pink);
+ padding: 16px 0;
+
+ $item: &;
+ #{$item}--title {
+ @extend .bodytext__medium--brownish-grey;
+ margin-left: 9px;
+ vertical-align: middle;
+ }
+
+ &:hover, &.active {
+ #{$item}--title {
+ font-weight: 500;
+ }
+
+ svg {
+ path {
+ fill: map-get($colors, brownish-grey);
+ stroke: none;
+ }
+ }
+ }
+ }
+}
diff --git a/landing-pages/site/assets/scss/main-custom.scss b/landing-pages/site/assets/scss/main-custom.scss
index 4b7330e..1d9bd8b 100644
--- a/landing-pages/site/assets/scss/main-custom.scss
+++ b/landing-pages/site/assets/scss/main-custom.scss
@@ -32,3 +32,4 @@
@import "case-study";
@import "paragraph";
@import "base-layout";
+@import "video";
diff --git a/landing-pages/site/content/en/examples/_index.html b/landing-pages/site/content/en/examples/_index.html
index a9b2fc3..4d6085b 100644
--- a/landing-pages/site/content/en/examples/_index.html
+++ b/landing-pages/site/content/en/examples/_index.html
@@ -43,16 +43,27 @@ menu:
{{< blocks/section color="white" >}}
<div class="col-10 mx-auto my-2">
- {{< accordion title="Accordion 1" description="Tincidunt ornare massa eget egestas purus viverra." >}}
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus at urna condimentum mattis pellentesque id. Neque laoreet suspendisse interdum consectetur. Non blandit massa enim nec.
- {{< /accordion >}}
- {{< accordion title="Accordion 2" description="Vestibulum morbi blandit cursus risus at." >}}
+ {{< accordion title="Install Apache Airflow locally" description="Working on an Open Source project such as Apache Airflow is very demanding but also equally rewarding when you realize how many businesses use it every day." >}}
Magna ac placerat vestibulum lectus mauris ultrices. Nullam non nisi est sit amet facilisis magna etiam tempor. Aliquet nec ullamcorper sit amet risus nullam eget felis. Rhoncus aenean vel elit scelerisque mauris pellentesque.
{{< /accordion >}}
- {{< accordion title="Accordion 3" description="Id faucibus nisl tincidunt eget." >}}
+ {{< accordion title="Install Apache Airflow on server" description="Working on an Open Source project such as Apache Airflow is very demanding but also equally rewarding when you realize how many businesses use it every day." >}}
+ Amet mauris commodo quis imperdiet massa tincidunt nunc. Leo duis ut diam quam nulla porttitor massa id neque.
+ {{< /accordion >}}
+ {{< accordion title="Install Apache Airflow on cluster" description="Working on an Open Source project such as Apache Airflow is very demanding but also equally rewarding when you realize how many businesses use it every day." >}}
Amet mauris commodo quis imperdiet massa tincidunt nunc. Leo duis ut diam quam nulla porttitor massa id neque.
{{< /accordion >}}
</div>
+<div class="col-10 mx-auto my-2">
+ {{< accordion title="Join the devlist" description="If you want to stay up to date with what is going on in the project, want to discuss the features, talk about fixes or simply ask a question - this is the first step to take." logo_path="icons/join-devlist-icon.svg" >}}
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus at urna condimentum mattis pellentesque id. Neque laoreet suspendisse interdum consectetur. Non blandit massa enim nec.
+ {{< /accordion >}}
+ {{< accordion title="Report a bug" description="If you want to stay up to date with what is going on in the project, want to discuss the features, talk about fixes or simply ask a question - this is the first step to take." logo_path="icons/bug-icon.svg" >}}
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus at urna condimentum mattis pellentesque id. Neque laoreet suspendisse interdum consectetur. Non blandit massa enim nec.
+ {{< /accordion >}}
+ {{< accordion title="Ask a question" description="If you want to stay up to date with what is going on in the project, want to discuss the features, talk about fixes or simply ask a question - this is the first step to take." logo_path="icons/ask-question-icon.svg" >}}
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus at urna condimentum mattis pellentesque id. Neque laoreet suspendisse interdum consectetur. Non blandit massa enim nec.
+ {{< /accordion >}}
+</div>
{{< /blocks/section >}}
{{< blocks/section color="white" >}}
diff --git a/landing-pages/site/data/videos.json b/landing-pages/site/data/videos.json
new file mode 100644
index 0000000..64dd841
--- /dev/null
+++ b/landing-pages/site/data/videos.json
@@ -0,0 +1,56 @@
+[
+ {
+ "name": "video",
+ "date": "2019-01-23",
+ "title": "Airflow Meetup, London 23 Jan 2019",
+ "videoID": "E0asAgpHvaI"
+ },
+ {
+ "name": "video",
+ "date": "2019-04-05",
+ "title": "Airflow Meetup, London 05 Apr 2019",
+ "videoID": "uN-TvWzeEvA"
+ },
+ {
+ "name": "video",
+ "date": "2019-09-30",
+ "title": "Airflow Meetup, London 30 Sep 2019",
+ "videoID": "nUfb4UxnvJk"
+ },
+ {
+ "name": "video",
+ "date": "2019-09-30",
+ "title": "Airflow Meetup, London 30 Sep 2019",
+ "videoID": "OhWZavn2OvM"
+ },
+ {
+ "name": "video",
+ "date": "2019-09-30",
+ "title": "Airflow Meetup, London 30 Sep 2019",
+ "videoID": "SRhueFPsCeY"
+ },
+ {
+ "name": "video",
+ "date": "2019-09-30",
+ "title": "Airflow Meetup, London 30 Sep 2019",
+ "videoID": "wH533kbXm2c"
+ },
+ {
+ "name": "video",
+ "date": "2019-09-30",
+ "title": "Airflow Meetup, London 30 Sep 2019",
+ "videoID": "cY9kbO4GY_s"
+ },
+ {
+ "name": "video",
+ "date": "2019-09-30",
+ "title": "Airflow Meetup, London 30 Sep 2019",
+ "videoID": "d4DEHs_KAzs"
+ },
+ {
+ "name": "video",
+ "date": "2019-09-30",
+ "title": "Airflow Meetup, London 30 Sep 2019",
+ "videoID": "mznO_E3_BQo"
+ }
+]
diff --git a/landing-pages/site/layouts/examples/list.html b/landing-pages/site/layouts/examples/list.html
index 7259aaa..14d27d3 100644
--- a/landing-pages/site/layouts/examples/list.html
+++ b/landing-pages/site/layouts/examples/list.html
@@ -77,5 +77,7 @@
{{ partial "buttons/button-filled" (dict "text" "Show all" "id" "show-all-commiters")}}
</div>
</div>
+
+ {{ partial "video-section" . }}
</div>
{{ end }}
diff --git a/landing-pages/site/layouts/partials/video-section.html b/landing-pages/site/layouts/partials/video-section.html
new file mode 100644
index 0000000..7de7997
--- /dev/null
+++ b/landing-pages/site/layouts/partials/video-section.html
@@ -0,0 +1,42 @@
+{{/*
+ 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.
+*/}}
+
+<div class="video-section">
+ <div class="video-wrapper">
+ {{ range sort .Site.Data.videos "date" }}
+ <a id="{{ .videoID }}" class="anchor"></a>
+ <div class="video-container">
+ {{ partial "youtube" (dict "videoID" .videoID) }}
+ </div>
+ {{ end }}
+ </div>
+ <div class="video-list-wrapper">
+ <div class="video-list">
+ {{ $videosLen := len .Site.Data.videos }}
+ {{ range $i, $e := sort .Site.Data.videos "date" }}
+ <a href="#{{ $e.videoID }}" class="video-list__item">
+ {{ with resources.Get "icons/play-icon.svg" }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ <span class="video-list__item--title">{{ $e.title }}</span>
+ </a>
+ {{ end }}
+ </div>
+ </div>
+</div>
diff --git a/landing-pages/site/layouts/shortcodes/accordion.html b/landing-pages/site/layouts/partials/youtube.html
similarity index 61%
copy from landing-pages/site/layouts/shortcodes/accordion.html
copy to landing-pages/site/layouts/partials/youtube.html
index 7cb8891..dc898fb 100644
--- a/landing-pages/site/layouts/shortcodes/accordion.html
+++ b/landing-pages/site/layouts/partials/youtube.html
@@ -17,13 +17,7 @@
under the License.
*/}}
-<details class="accordion">
- <summary>
- <div class="accordion__icon">
- {{ with resources.Get "icons/accordion-arrow.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
- </div>
- <h4 class="accordion__header subtitle__large--cerulean-blue">{{ .Get "title" }}</h4>
- <span class="accordion__description bodytext__medium--brownish-grey">{{ .Get "description" }}</span>
- </summary>
- <div class="accordion__content">{{ .Inner }}</div>
-</details>
+<div class="embed-responsive embed-responsive-16by9">
+ <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{ .videoID }}" allowfullscreen>
+ </iframe>
+</div>
diff --git a/landing-pages/site/layouts/shortcodes/accordion.html b/landing-pages/site/layouts/shortcodes/accordion.html
index 7cb8891..2484392 100644
--- a/landing-pages/site/layouts/shortcodes/accordion.html
+++ b/landing-pages/site/layouts/shortcodes/accordion.html
@@ -17,13 +17,26 @@
under the License.
*/}}
+{{ $icon := .Get "logo_path" }}
<details class="accordion">
<summary>
- <div class="accordion__icon">
+ <div class="accordion__arrow">
{{ with resources.Get "icons/accordion-arrow.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
</div>
- <h4 class="accordion__header subtitle__large--cerulean-blue">{{ .Get "title" }}</h4>
- <span class="accordion__description bodytext__medium--brownish-grey">{{ .Get "description" }}</span>
+ <div class="accordion__summary-content">
+ {{ if $icon }}
+ {{ with resources.Get $icon }}{{ ( . | minify).Content | safeHTML }}{{ end }}
+ {{ end }}
+ <div>
+ <h4 class="accordion__summary-content--header
+ {{ if $icon }}
+ subtitle__large--greyish-brown
+ {{ else }}
+ subtitle__large--cerulean-blue
+ {{ end }}">{{ .Get "title" }}</h4>
+ <span class="bodytext__medium--brownish-grey">{{ .Get "description" }}</span>
+ </div>
+ </div>
</summary>
<div class="accordion__content">{{ .Inner }}</div>
</details>
diff --git a/landing-pages/src/index.js b/landing-pages/src/index.js
index f7e4475..375f57c 100644
--- a/landing-pages/src/index.js
+++ b/landing-pages/src/index.js
@@ -18,5 +18,7 @@
*/
import {showAllCommiters} from "./js/showAllCommiters";
+import {handleActiveVideo} from "./js/handleActiveVideo";
showAllCommiters(8);
+handleActiveVideo();
diff --git a/landing-pages/site/assets/scss/main-custom.scss b/landing-pages/src/js/handleActiveVideo.js
similarity index 56%
copy from landing-pages/site/assets/scss/main-custom.scss
copy to landing-pages/src/js/handleActiveVideo.js
index 4b7330e..fd61e7a 100644
--- a/landing-pages/site/assets/scss/main-custom.scss
+++ b/landing-pages/src/js/handleActiveVideo.js
@@ -17,18 +17,22 @@
* under the License.
*/
-@import url('https://fonts.googleapis.com/css?family=Rubik:500&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
+const videosList = document.querySelectorAll(".video-list__item");
+const urlHash = window.location.hash;
-@import "typography";
-@import "accordion";
-@import "buttons";
-@import "ol-ul";
-@import "list-boxes";
-@import "avatar";
-@import "quote";
-@import "pager";
-@import "case-study";
-@import "paragraph";
-@import "base-layout";
+const addActiveClass = (videoItem) => {
+ videosList.forEach((item) => item.classList.remove("active"));
+ videoItem.classList.add("active");
+};
+
+export const handleActiveVideo = () => {
+ if (!videosList) return;
+
+ urlHash ?
+ videosList.forEach((videoLink) => videoLink.hash === urlHash && videoLink.classList.add("active"))
+ : videosList[videosList.length - 1].classList.add("active");
+
+ videosList.forEach((item) =>
+ item.addEventListener("click", (event) => addActiveClass(event.currentTarget))
+ );
+};