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 6108236 [depends on #84] Add video component (#88)
6108236 is described below
commit 61082363127a96bfdcf829dc68b9b822c1f73988
Author: Kamil BreguĊa <[email protected]>
AuthorDate: Tue Oct 22 19:53:48 2019 +0200
[depends on #84] Add video component (#88)
Co-Authored-By: Kamil Gabryjelski <[email protected]>
---
landing-pages/site/assets/icons/play-icon.svg | 5 ++
landing-pages/site/assets/scss/_video.scss | 90 ++++++++++++++++++++++
landing-pages/site/assets/scss/main-custom.scss | 1 +
landing-pages/site/data/videos.json | 56 ++++++++++++++
landing-pages/site/layouts/examples/list.html | 2 +
.../site/layouts/partials/video-section.html | 42 ++++++++++
landing-pages/site/layouts/partials/youtube.html | 23 ++++++
landing-pages/src/index.js | 2 +
.../js/handleActiveVideo.js} | 32 ++++----
9 files changed, 239 insertions(+), 14 deletions(-)
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/_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/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/partials/youtube.html
b/landing-pages/site/layouts/partials/youtube.html
new file mode 100644
index 0000000..dc898fb
--- /dev/null
+++ b/landing-pages/site/layouts/partials/youtube.html
@@ -0,0 +1,23 @@
+{{/*
+ 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="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/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))
+ );
+};
