better mobile popups and cache fixes

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">
+    <popper reference="action-map" :visible="map" arrow class="popper--no-padding" style="width: 500px;">
-        <div style="height: 300px; 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>

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
 }
-

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 {

resources/ts/app.ts

@@ -76,7 +76,10 @@ Vue.use(Vuex);
             stops(this: any, stops) {
                 this.updateDepartures({ stops });
             },
-            autorefresh: { immediate: true, handler(this: any, settings) {
+            autorefresh: {
+                immediate: true,
+                deep: true,
+                handler(this: any, settings) {
                     if (intervals.messages) {
                         clearInterval(intervals.messages);
                         intervals.messages = null;
@@ -94,7 +97,8 @@ Vue.use(Vuex);
                     if (settings.departures.active) {
                         intervals.departures = setInterval(() => this.updateDepartures({ stops: this.stops }), Math.max(5, settings.departures.interval) * 1000);
                     }
-            } }
+                }
+            }
         },
         methods: {
             ...mapActions({

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;

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) => {

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>

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'],