airflow-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From kamilbreg...@apache.org
Subject [airflow-site] branch aip-11 updated: [depends on #84] Add video component (#88)
Date Tue, 22 Oct 2019 17:53:53 GMT
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-laj@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.gabryjelski@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))
+  );
+};


Mime
View raw message