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