Fix #43: Speed badge looking weird on touch devices
This commit is contained in:
parent
4ff645cc43
commit
6f906ec23a
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user