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 <mik-...@users.noreply.github.com> AuthorDate: Tue Oct 22 19:53:48 2019 +0200 [depends on #84] Add video component (#88) Co-Authored-By: Kamil Gabryjelski <kamil.gabryjel...@polidea.com> --- 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)) + ); +};