kadet/czydojade
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

better mobile popups and cache fixes

Browse Source
This commit is contained in:
Kacper Donat 2018-10-01 19:55:29 +02:00
parent 1fe04718f9
commit c3570cb38e
8 changed files with 47 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/components/stop.html
View File

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

3
resources/styles/_popper.scss
View File

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

4
resources/styles/main.scss
View File

@ -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 {

34
resources/ts/app.ts
View File

@ -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({

21
resources/ts/components/utils.ts
View File

@ -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;

2
resources/ts/filters.ts
View File

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

4
templates/app.html.twig
View File

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

1
webpack.config.js
View File

@ -11,6 +11,7 @@ const config = {
output: {
path: path.resolve('./public/'),
filename: "bundle.js",
chunkFilename: 'bundle.[chunkhash:8].js'
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],