From c3570cb38e9d619422ec765951fe25a01eb24a70 Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Mon, 1 Oct 2018 19:55:29 +0200
Subject: [PATCH] better mobile popups and cache fixes

---
 resources/components/stop.html   |  4 ++--
 resources/styles/_popper.scss    |  3 +--
 resources/styles/main.scss       |  4 ++--
 resources/ts/app.ts              | 34 ++++++++++++++++++--------------
 resources/ts/components/utils.ts | 21 ++++++++++++++++++--
 resources/ts/filters.ts          |  2 +-
 templates/app.html.twig          |  4 ++--
 webpack.config.js                |  1 +
 8 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/resources/components/stop.html b/resources/components/stop.html
index a45f8a4..e021e16 100644
--- a/resources/components/stop.html
+++ b/resources/components/stop.html
@@ -20,8 +20,8 @@
         <stop-details :stop="stop"></stop-details>
     </fold>
 
-    <popper reference="action-map" :visible="map" arrow class="popper--no-padding">
-        <div style="height: 300px; width: 500px">
+    <popper reference="action-map" :visible="map" arrow class="popper--no-padding" style="width: 500px;">
+        <div style="height: 300px">
             <l-map :center="stop.location" :zoom=17 :options="{ zoomControl: false, dragging: false }">
                 <l-tile-layer url="//{s}.tile.osm.org/{z}/{x}/{y}.png" attribution='&copy; <a href="//osm.org/copyright">OpenStreetMap</a> contributors'></l-tile-layer>
                 <l-marker :lat-lng="stop.location"></l-marker>
diff --git a/resources/styles/_popper.scss b/resources/styles/_popper.scss
index a243a9a..db193e8 100644
--- a/resources/styles/_popper.scss
+++ b/resources/styles/_popper.scss
@@ -59,7 +59,7 @@
   $arrow-color: white;
   $arrow-border: black;
 
-  $popper-padding: .5rem;
+  $popper-padding: .6rem;
 
   padding: $popper-padding;
   background: white;
@@ -116,4 +116,3 @@
 
   animation: ease-in fade-in 150ms
 }
-
diff --git a/resources/styles/main.scss b/resources/styles/main.scss
index 464a07a..94929f9 100644
--- a/resources/styles/main.scss
+++ b/resources/styles/main.scss
@@ -91,10 +91,10 @@ body {
 
   footer {
     @extend .flex;
-    border-top: 2px solid black;
+    font-size: $font-size-sm;
     padding: $alert-padding-y $alert-padding-y;
     transition: all .5s ease;
-    opacity: .06;
+    opacity: .15;
     filter: grayscale(100%);
 
     &:hover {
diff --git a/resources/ts/app.ts b/resources/ts/app.ts
index f11bb0c..f398b8f 100644
--- a/resources/ts/app.ts
+++ b/resources/ts/app.ts
@@ -76,25 +76,29 @@ Vue.use(Vuex);
             stops(this: any, stops) {
                 this.updateDepartures({ stops });
             },
-            autorefresh: { immediate: true, handler(this: any, settings) {
-                if (intervals.messages) {
-                    clearInterval(intervals.messages);
-                    intervals.messages = null;
-                }
+            autorefresh: {
+                immediate: true,
+                deep: true,
+                handler(this: any, settings) {
+                    if (intervals.messages) {
+                        clearInterval(intervals.messages);
+                        intervals.messages = null;
+                    }
 
-                if (intervals.departures) {
-                    clearInterval(intervals.departures);
-                    intervals.messages = null;
-                }
+                    if (intervals.departures) {
+                        clearInterval(intervals.departures);
+                        intervals.messages = null;
+                    }
 
-                if (settings.messages.active) {
-                    intervals.messages = setInterval(() => this.updateMessages(), Math.max(5, settings.messages.interval) * 1000);
-                }
+                    if (settings.messages.active) {
+                        intervals.messages = setInterval(() => this.updateMessages(), Math.max(5, settings.messages.interval) * 1000);
+                    }
 
-                if (settings.departures.active) {
-                    intervals.departures = setInterval(() => this.updateDepartures({ stops: this.stops }), Math.max(5, settings.departures.interval) * 1000);
+                    if (settings.departures.active) {
+                        intervals.departures = setInterval(() => this.updateDepartures({ stops: this.stops }), Math.max(5, settings.departures.interval) * 1000);
+                    }
                 }
-            } }
+            }
         },
         methods: {
             ...mapActions({
diff --git a/resources/ts/components/utils.ts b/resources/ts/components/utils.ts
index c47af1b..c4b4923 100644
--- a/resources/ts/components/utils.ts
+++ b/resources/ts/components/utils.ts
@@ -33,7 +33,25 @@ export class PopperComponent extends Vue {
         this._popper = new Popper(reference, this.$el, {
             placement: this.placement,
             modifiers: {
-                arrow: { enabled: this.arrow, element: this.$refs['arrow'] as Element }
+                arrow: { enabled: this.arrow, element: this.$refs['arrow'] as Element },
+                responsive: {
+                    enabled: true,
+                    order: 890,
+                    fn(data) {
+                        if (window.innerWidth < 560) {
+                            data.instance.options.placement = 'bottom';
+                            data.styles.transform = `translate3d(0, ${data.offsets.popper.top}px, 0)`;
+                            data.styles.width = '100%';
+                            data.styles.margin = '0';
+                            data.styles.right = '0';
+                            data.styles.left = '0';
+                            data.styles.width = 'auto';
+                            data.arrowStyles.left = `${data.offsets.popper.left + data.offsets.arrow.left}px`;
+                        }
+
+                        return data;
+                    }
+                }
             }
         });
 
@@ -80,7 +98,6 @@ export class FoldComponent extends Vue {
         this.observer.disconnect();
     }
 
-
     @Watch('visible')
     private resize() {
         const inner = this.$refs['inner'] as HTMLDivElement;
diff --git a/resources/ts/filters.ts b/resources/ts/filters.ts
index 384b026..d828ae4 100644
--- a/resources/ts/filters.ts
+++ b/resources/ts/filters.ts
@@ -26,7 +26,7 @@ Vue.directive('hover', (el, binding, node) => {
     el.addEventListener('click', activate);
     el.addEventListener('keydown', condition.decorate(deactivate, e => e.keyCode == 27));
     el.addEventListener('mouseleave', deactivate);
-    el.addEventListener('blur', deactivate);
+    el.addEventListener('focusout', deactivate);
 });
 
 Vue.directive('responsive', (el, binding) => {
diff --git a/templates/app.html.twig b/templates/app.html.twig
index 5c0b417..a35c0d9 100644
--- a/templates/app.html.twig
+++ b/templates/app.html.twig
@@ -55,14 +55,14 @@
 
                     <popper reference="settings-departures" :visible="settings.departures" arrow placement="left-start">
                         <h3 class="popper__heading flex">
-                            <fa :icon="['far', 'cog']"></fa>
+                            <fa :icon="['far', 'sync']" fixed-width></fa>
                             <label class="text" for="messages-auto-refresh">autoodświeżanie</label>
                             <input type="checkbox" class="flex-space-left" id="messages-auto-refresh" v-model="autorefresh.departures.active"/>
                         </h3>
                         <div class="flex" v-show="autorefresh.messages.active">
                             <span class="text">co</span>
                             <label class="sr-only" for="messages-auto-refresh-interval">częstotliwość odświeżania</label>
-                            <input type="text" class="form-control form-control-sm" id="messages-auto-refresh-interval" v-model="autorefresh.departures.interval"/>
+                            <input type="text" class="form-control form-control-sm form-control-simple" id="messages-auto-refresh-interval" v-model="autorefresh.departures.interval"/>
                             <span class="text">s</span>
                         </div>
                     </popper>
diff --git a/webpack.config.js b/webpack.config.js
index 1177de9..d117790 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -11,6 +11,7 @@ const config = {
     output: {
         path: path.resolve('./public/'),
         filename: "bundle.js",
+        chunkFilename: 'bundle.[chunkhash:8].js'
     },
     resolve: {
         extensions: ['.tsx', '.ts', '.js'],