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: Add meetups search (#103)
Date Thu, 31 Oct 2019 10:32:43 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 7e2095f  Add meetups search (#103)
7e2095f is described below

commit 7e2095f239cb45afb0cf3c6f90a413aa7a90c985
Author: Kamil Gabryjelski <kamil.gabryjelski@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({


Mime
View raw message