phyks/cygnal
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix #43: Speed badge looking weird on touch devices

Browse Source
This commit is contained in:
Lucas Verney 2018-10-15 23:54:20 +02:00
parent 4ff645cc43
commit 6f906ec23a
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Map.vue
View File

@ -1,10 +1,8 @@
<template> <template>
<v-layout row fill-height wrap> <v-layout row fill-height wrap>
<v-flex xs12 class="speed-badge text-xs-center white" v-if="speedInKmH !== null"> <v-flex xs12 class="speed-badge text-xs-center white" v-if="speedInKmH !== null">
<v-layout column> <span class="title speed-badge-title mt-2">{{ speedInKmH }}</span>
<v-flex xs8 class="title mt-1">{{ speedInKmH }}</v-flex> <span class="caption">km/h</span>
<v-flex xs4 class="caption">km/h</v-flex>
</v-layout>
</v-flex> </v-flex>
<v-flex xs12 id="map" :style="{ height: mapElementHeight }"></v-flex> <v-flex xs12 id="map" :style="{ height: mapElementHeight }"></v-flex>
@ -617,7 +615,7 @@ export default {
.speed-badge { .speed-badge {
position: absolute; position: absolute;
right: 10px; right: 10px;
font-size: 1.14em; font-size: 1.5em;
margin: 1px; margin: 1px;
top: calc(3em + 25px); top: calc(3em + 25px);
z-index: 1000; z-index: 1000;
@ -626,12 +624,17 @@ export default {
border-radius: 50%; border-radius: 50%;
border: 1px solid rgba(0, 0, 0, .87) !important; border: 1px solid rgba(0, 0, 0, .87) !important;
} }
.speed-badge-title {
display: block;
}
</style> </style>
<style> <style>
#map .ol-control button { #map .ol-control button {
height: 3em !important; height: 3em !important;
width: 3em !important; width: 3em !important;
font-size: 1.5em; /* No different font sizes between touch and not touch screens. */
} }
#map .ol-rotate { #map .ol-rotate {