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/31 10:32:43 UTC
[airflow-site] branch aip-11 updated: Add meetups search (#103)
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 7e2095f Add meetups search (#103)
7e2095f is described below
commit 7e2095f239cb45afb0cf3c6f90a413aa7a90c985
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Thu Oct 31 11:32:35 2019 +0100
Add meetups search (#103)
---
landing-pages/site/assets/scss/_list-boxes.scss | 5 +-
landing-pages/site/assets/scss/_meetups.scss | 22 +++-
landing-pages/site/data/meetups.json | 50 --------
landing-pages/site/layouts/meetups/list.html | 45 ++++++-
.../site/layouts/partials/boxes/event.html | 6 +-
.../layouts/partials/buttons/button-filled.html | 2 +-
landing-pages/site/static/meetups.json | 142 +++++++++++++++++++++
landing-pages/src/index.js | 1 +
landing-pages/src/js/meetupsList.js | 118 +++++++++++++++++
landing-pages/webpack.common.js | 2 +-
10 files changed, 332 insertions(+), 61 deletions(-)
diff --git a/landing-pages/site/assets/scss/_list-boxes.scss b/landing-pages/site/assets/scss/_list-boxes.scss
index ea665a9..f8282e9 100644
--- a/landing-pages/site/assets/scss/_list-boxes.scss
+++ b/landing-pages/site/assets/scss/_list-boxes.scss
@@ -46,7 +46,6 @@ $card-margin: 20px;
width: 50%;
}
@media (max-width: $mobile) {
- margin: 0 0 20px;
width: 100%;
}
}
@@ -56,6 +55,10 @@ $card-margin: 20px;
border-radius: 5px;
margin: $card-margin;
padding: 30px 10px;
+
+ @media (max-width: $mobile) {
+ margin: $card-margin / 2;
+ }
}
.box-event {
diff --git a/landing-pages/site/assets/scss/_meetups.scss b/landing-pages/site/assets/scss/_meetups.scss
index f8cfef0..b27f363 100644
--- a/landing-pages/site/assets/scss/_meetups.scss
+++ b/landing-pages/site/assets/scss/_meetups.scss
@@ -16,7 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
-
@import "media";
.video-section-container {
@@ -30,3 +29,24 @@
.host-header {
margin-bottom: 6px;
}
+
+.meetups {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ & > .list-items {
+ margin-top: 40px;
+ margin-bottom: 40px;
+ width: 100%;
+
+ @media (max-width: $mobile) {
+ margin-top: 30px;
+ margin-bottom: 10px;
+ }
+ }
+}
+
+.meetups-page.page-subtitle {
+ margin-bottom: 0;
+}
diff --git a/landing-pages/site/data/meetups.json b/landing-pages/site/data/meetups.json
deleted file mode 100644
index 5492c15..0000000
--- a/landing-pages/site/data/meetups.json
+++ /dev/null
@@ -1,50 +0,0 @@
-[
- {
- "city": "Warsaw",
- "country": "Poland",
- "date": "TUE, SEP 24, 6:00 PM",
- "members": 100
- },
- {
- "city": "Warsaw",
- "country": "Poland",
- "date": "TUE, SEP 24, 6:00 PM",
- "members": 100
- },
- {
- "city": "Warsaw",
- "country": "Poland",
- "date": "TUE, SEP 24, 6:00 PM",
- "members": 100
- },
- {
- "city": "Warsaw",
- "country": "Poland",
- "date": "TUE, SEP 24, 6:00 PM",
- "members": 100
- },
- {
- "city": "Warsaw",
- "country": "Poland",
- "date": "TUE, SEP 24, 6:00 PM",
- "members": 100
- },
- {
- "city": "Warsaw",
- "country": "Poland",
- "date": "TUE, SEP 24, 6:00 PM",
- "members": 100
- },
- {
- "city": "Warsaw",
- "country": "Poland",
- "date": "TUE, SEP 24, 6:00 PM",
- "members": 100
- },
- {
- "city": "Warsaw",
- "country": "Poland",
- "date": "TUE, SEP 24, 6:00 PM",
- "members": 100
- }
-]
diff --git a/landing-pages/site/layouts/meetups/list.html b/landing-pages/site/layouts/meetups/list.html
index a03a69f..15f621f 100644
--- a/landing-pages/site/layouts/meetups/list.html
+++ b/landing-pages/site/layouts/meetups/list.html
@@ -19,15 +19,50 @@
{{ define "main" }}
<h2 class="page-header">Meetups</h2>
- <h5 class="page-subtitle">
+ <h5 class="meetups-page page-subtitle">
Meetups are a great way for the community to meet face-to face
</h5>
- <div id="events-container" class="list-items">
- {{ range .Site.Data.meetups }}
+ <div class="meetups">
+ <script type="application/x-template" id="meetup-template">
<div class="list-item">
- {{ partial "boxes/event" . }}
+ <div class="card">
+ <div class="box-event">
+ <p class="box-event__meetup--location" data-name="location"></p>
+ <p class="box-event__meetup--members">
+ {{ with resources.Get "icons/members-icon.svg" }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ <span data-name="members-count"></span>
+ </p>
+ <p class="box-event__meetup--next-meetup">
+ Next meetup:<br>
+ <span class="bodytext__medium--greyish-brown font-weight-500" data-name="date"></span>
+ </p>
+ <a href="">
+ <button class="btn-hollow btn-blue bodytext__medium--cerulean-blue">Learn more</button>
+ </a>
+ </div>
+ </div>
</div>
- {{ end }}
+ </script>
+ <div class="search-form">
+ <input class="search-form__input" placeholder="Search" type="search" id="search">
+ <button class="search-form__button">
+ {{ with resources.Get "icons/search-icon.svg" }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ </button>
+ </div>
+ <div id="events-container" class="list-items">
+ {{ range .Site.Data.meetups }}
+ <div class="list-item">
+ {{ partial "boxes/event" . }}
+ </div>
+ {{ end }}
+ </div>
+ <div>
+ {{ partial "buttons/button-filled" (dict "text" "Show more" "class" "more") }}
+ </div>
</div>
<div class="video-section-container no-width-restriction">
{{ partial "video-section" . }}
diff --git a/landing-pages/site/layouts/partials/boxes/event.html b/landing-pages/site/layouts/partials/boxes/event.html
index ef8a836..8f83848 100644
--- a/landing-pages/site/layouts/partials/boxes/event.html
+++ b/landing-pages/site/layouts/partials/boxes/event.html
@@ -24,7 +24,7 @@
</p>
<p class="box-event__meetup--members">
{{ with resources.Get "icons/members-icon.svg" }}
- {{ .Content | safeHTML }}
+ {{ .Content | safeHTML }}
{{ end }}
<span>{{ .members }} members</span>
</p>
@@ -32,6 +32,8 @@
Next meetup:<br>
<span class="bodytext__medium--greyish-brown font-weight-500">{{ .date }}</span>
</p>
- {{ partial "buttons/button-hollow" (dict "text" "Learn more") }}
+ <a href="{{ .url }}">
+ {{ partial "buttons/button-hollow" (dict "text" "Learn more") }}
+ </a>
</div>
</div>
diff --git a/landing-pages/site/layouts/partials/buttons/button-filled.html b/landing-pages/site/layouts/partials/buttons/button-filled.html
index 1db32ca..1657c55 100644
--- a/landing-pages/site/layouts/partials/buttons/button-filled.html
+++ b/landing-pages/site/layouts/partials/buttons/button-filled.html
@@ -17,4 +17,4 @@
under the License.
*/}}
-<button id="{{ .id }}" class="btn-filled bodytext__medium--white">{{ .text }}</button>
+<button id="{{ .id }}" class="btn-filled bodytext__medium--white {{ .class }}">{{ .text }}</button>
diff --git a/landing-pages/site/static/meetups.json b/landing-pages/site/static/meetups.json
new file mode 100644
index 0000000..6074e64
--- /dev/null
+++ b/landing-pages/site/static/meetups.json
@@ -0,0 +1,142 @@
+[
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "New York",
+ "country": "USA",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Berlin",
+ "country": "Germany",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Paris",
+ "country": "France",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ },
+ {
+ "city": "Warsaw",
+ "country": "Poland",
+ "date": "TUE, SEP 24, 6:00 PM",
+ "members": 100,
+ "url": ""
+ }
+]
diff --git a/landing-pages/src/index.js b/landing-pages/src/index.js
index f5cab88..9bba8f3 100644
--- a/landing-pages/src/index.js
+++ b/landing-pages/src/index.js
@@ -37,3 +37,4 @@ if (document.querySelector("#header")) {
});
}
require("./js/integrationList.js");
+require("./js/meetupsList.js");
diff --git a/landing-pages/src/js/meetupsList.js b/landing-pages/src/js/meetupsList.js
new file mode 100644
index 0000000..f58c0f6
--- /dev/null
+++ b/landing-pages/src/js/meetupsList.js
@@ -0,0 +1,118 @@
+/**
+ * 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.
+ */
+
+
+const runMeetups = () => {
+ const root = document.querySelector(".meetups");
+ if (!root) {
+ return;
+ }
+ const templateText = root.querySelector("#meetup-template").innerText;
+ const templateElement = document.createElement("div");
+ templateElement.innerHTML = templateText;
+
+ const listItems = root.querySelector(".list-items");
+ const searchBox = root.querySelector("[type='search']");
+ const moreButton = root.querySelector(".more");
+
+ let currentPage = 1;
+ let currentQuery = "";
+ fetch("/meetups.json")
+ .then((response) => response.json())
+ .then((allMeetups) => {
+
+ const setMoreButtonVisibility = (visible) => {
+ moreButton.style.display = visible ? "" : "none";
+ };
+
+ setMoreButtonVisibility(true);
+
+ const sortByIndex = (a, b) => {
+ return a.index - b.index;
+ };
+
+ const createElement = (item) => {
+ const element = templateElement.cloneNode(true);
+ element.querySelector('[data-name="location"]').innerHTML = `${item.city}<br/>${item.country}`;
+ element.querySelector('[data-name="members-count"]').innerText = `${item.members} members`;
+ element.querySelector('[data-name="date"]').innerText = item.date;
+ element.querySelector("a").href = item.url;
+
+ return element.firstElementChild;
+ };
+
+ const setItems = (items) => {
+ if (items.length === 0) {
+ listItems.innerText = "No items";
+ } else {
+ while (listItems.firstChild) {
+ listItems.removeChild(listItems.firstChild);
+ }
+ items.forEach((item) => {
+ const element = createElement(item);
+ listItems.append(element);
+ });
+ }
+ };
+
+ const showItems = (keyword, page) => {
+ const showMoreButtonIfNeeded = (meetups) => {
+ setMoreButtonVisibility(meetups.length > (page * 8));
+ };
+
+ const filterMatchingItems = (meetups) => {
+ if (!keyword) {
+ return meetups;
+ }
+ return meetups.filter((meetup) =>
+ meetup.city.toLowerCase().indexOf(keyword.toLowerCase()) >= 0 ||
+ meetup.country.toLowerCase().indexOf(keyword.toLowerCase()) >= 0
+ );
+ };
+
+ const filterVisible = (meetups) => {
+ meetups.sort(sortByIndex);
+ return meetups.slice(0, page * 8);
+ };
+ const matchingItems = filterMatchingItems(allMeetups);
+ const visibleItems = filterVisible(matchingItems);
+ setItems(visibleItems);
+ showMoreButtonIfNeeded(matchingItems);
+ };
+
+ const setSearchQuery = (keyword) => {
+ currentQuery = keyword;
+ showItems(currentQuery, currentPage);
+ };
+
+ searchBox.addEventListener("keyup", () => {
+ currentPage = 1;
+ setSearchQuery(searchBox.value);
+ });
+
+ moreButton.addEventListener("click", () => {
+ currentPage = currentPage + 1;
+ setSearchQuery(searchBox.value);
+ });
+
+ setSearchQuery("");
+ });
+};
+
+runMeetups();
diff --git a/landing-pages/webpack.common.js b/landing-pages/webpack.common.js
index f004723..c473345 100644
--- a/landing-pages/webpack.common.js
+++ b/landing-pages/webpack.common.js
@@ -59,7 +59,7 @@ module.exports = {
plugins: [
new webpack.ProvidePlugin({
- fetch: 'exports-loader?self.fetch!whatwg-fetch/dist/fetch.umd',
+ fetch: "exports-loader?self.fetch!whatwg-fetch/dist/fetch.umd",
}),
new AssetsPlugin({