Merge pull request #91 from zevisert/staging

Release v1.5.1

Author: zevisert

package-lock.json

@@ -38,7 +38,7 @@
     "koa-static": "^5.0.0",
     "mjml": "^4.5.1",
     "mongoose": "^5.8.0",
-    "nunjucks": "^3.2.0",
+    "nunjucks": "^3.2.2",
     "passport-local": "^1.0.0",
     "passport-local-mongoose": "^5.0.1",
     "prpl-server": "^1.4.0",
@@ -66,7 +66,7 @@
     "eslint": "^5.11.0",
     "gulp": "^4.0.1",
     "gulp-concat": "^2.6.1",
-    "gulp-nodemon": "^2.4.2",
+    "gulp-nodemon": "^2.5.0",
     "gulp-rename": "^1.3.0",
     "gulp-replace": "^1.0.0",
     "gulp-sourcemaps": "^2.6.4",

package.json

@@ -70,7 +70,8 @@ export const db_connect = (server) => {
         await mongoose.connect(process.env.MONGO_URL, {
             user: process.env.MONGO_USER,
             pass: process.env.MONGO_PW,
-            useNewUrlParser: true
+            useNewUrlParser: true,
+            useUnifiedTopology: true
         });
 
         if ((await User.countDocuments({admin: true})) < 1) {

server/src/config.mjs

@@ -51,6 +51,9 @@ const loadPage = (page, subPage) => dispatch => {
     case appStr.pages.cart:
       import('../components/cart/index.js');
       break;
+    case appStr.pages.tour:
+        import('../components/virtual-tour/index.js');
+        break;
     case appStr.pages.admin:
       if (subPage) {
         if (subPage === 'change-password') {

src/actions/app.js

@@ -43,6 +43,22 @@ class About extends connect(store)(PageViewElement) {
           width: 100%;
         }
 
+        .about-video {
+          max-width: 1200px;
+          width: 100%;
+          /* 16:9 aspect ratio */
+          padding-top: calc(100% * 9 / 16);
+          position: relative;
+        }
+
+        .about-video > iframe {
+          position: absolute;
+          top: 0; 
+          left: 0;
+          height: 100%;
+          width: 100%;
+        }
+
         section {
           font-size: xx-large;
         }
@@ -61,9 +77,19 @@ class About extends connect(store)(PageViewElement) {
         <article>
           <h2 class="title">Welcome to <br>Zuzana Riha Art</h2>
           <img class="about-img" src="images/about-bg.jpg">
+
           <p>
             ${this.__lines.map(line => html`${line}<br>`)}
           </p>
+
+          <div class="about-video">
+            <iframe
+              allowfullscreen
+              src="https://player.vimeo.com/video/472820112"
+              frameborder="0"
+              allow="autoplay; fullscreen; picture-in-picture"
+            ></iframe>
+          </div>
         </article>
       </section>
     `;

src/components/about/index.js

@@ -0,0 +1,58 @@
+/**
+* @license
+* Copyright (c) Zev Isert, All rights reserved
+* This code is used under the licence available at https://github.com/zevisert/zuzi-site/LICENCE.txt
+*/
+
+import { html } from '@polymer/lit-element';
+import { PageViewElement } from '../page-view-element.js';
+
+// These are the shared styles needed by this element.
+import { SharedStyles } from '../shared-styles.js';
+
+class Virtual extends PageViewElement {
+
+  static get is() { return 'virtual-tour-page'; }
+
+  render() {
+    return html`
+      ${SharedStyles}
+      <style>
+
+        article {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          height: auto;
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0;
+          overflow: hidden;
+          text-align: center;
+        }
+
+        iframe {
+          overflow: hidden;
+          height: 80vh;
+          width: 100%;
+        }
+
+      </style>
+      <section>
+        <article>
+          <span>November 2020 Art Show</span>
+          <iframe
+            width="100%"
+            height="100%"
+            src="https://my.matterport.com/show/?m=A8HFnGeF8Vz"
+            frameborder="0"
+            allowfullscreen
+            allow="xr-spatial-tracking">
+          </iframe>
+        </article>
+      </section>
+    `;
+  }
+}
+
+window.customElements.define(Virtual.is, Virtual);

src/components/virtual-tour/index.js

@@ -164,6 +164,7 @@ class ZuziApp extends connect(store)(LitElement) {
           <nav-box title="About"   page="${this._page}" target="${str.pages.about}"></nav-box>
           <nav-box title="Gallery" page="${this._page}" target="${str.pages.gallery}"></nav-box>
           <nav-box title="Cart"    page="${this._page}" target="${str.pages.cart}"></nav-box>
+          <nav-box title="Tour"    page="${this._page}" target="${str.pages.tour}"></nav-box>
           ${(() => {
             if (this._loggedIn) {
               return html`<nav-box title="Admin"   page="${this._page}" target="${str.pages.admin}"></nav-box>`
@@ -184,6 +185,10 @@ class ZuziApp extends connect(store)(LitElement) {
         ?active="${this._page === str.pages.gallery && this._subPage === null}">
       </gallery-view>
 
+      <virtual-tour-page class="page"
+        ?active="${this._page === str.pages.tour && this._subPage === null}">
+      </virtual-tour-page>
+
       <gallery-item class="page"
         ?active="${this._page === str.pages.gallery && this._subPage !== null}">
       </gallery-item>

src/components/zuzi-app/index.js

@@ -10,5 +10,6 @@ export const pages = {
     cart: "cart",
     login: "login",
     admin: "admin",
+    tour: "tour",
     none: "no-view"
 };