Mobile routing
Signed-off-by: Arne Hamann <git@arne.email>
This commit is contained in:
Arne Hamann
Родитель
aae7b5667d
Коммит
04fff1aa65
|
|
@ -1,22 +1,6 @@
|
|||
.app-navigation-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-routing-container {
|
||||
border: 2px solid rgba(0, 0, 0, 0.2) !important;
|
||||
border-top: 0 !important;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
|
||||
}
|
||||
// @media only screen and (max-width: $breakpoint-mobile) {
|
||||
@media only screen and (max-width: 1024px) {
|
||||
// Account for navigation menu toggle on the top left
|
||||
#search-term,
|
||||
.leaflet-routing-container {
|
||||
margin-left: 44px !important;
|
||||
}
|
||||
.app-navigation-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.no-routing-engine-warning {
|
||||
padding: 10px 10px 0 10px;
|
||||
|
|
@ -43,6 +27,82 @@
|
|||
background: var(--color-main-background);
|
||||
font-family: var(--font-face);
|
||||
}
|
||||
|
||||
//leaflet-routing
|
||||
.leaflet-routing-container-mobile {
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
margin-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
padding-left: 52px !important;
|
||||
padding-right: 52px !important;
|
||||
border: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
.leaflet-routing-alt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-routing-container-desktop {
|
||||
width: 350px;
|
||||
margin-top: 0 !important;
|
||||
margin-left: 52px !important;
|
||||
padding-top: 5px;
|
||||
border: 2px solid var(--color-border-dark) !important;
|
||||
border-bottom-left-radius: var(--border-radius-large) !important;
|
||||
border-bottom-right-radius: var(--border-radius-large) !important;
|
||||
border-top: 0 !important;
|
||||
background-color: var(--color-main-background);
|
||||
}
|
||||
|
||||
.leaflet-routing-container {
|
||||
.router-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
#router-select {
|
||||
flex-grow: 1;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 5px 5px 5px;
|
||||
}
|
||||
}
|
||||
// we don't need this
|
||||
.leaflet-routing-geocoders {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-routing-alternatives-container:not(:empty) {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
// instruction table
|
||||
.leaflet-routing-alt {
|
||||
table {
|
||||
white-space: normal;
|
||||
width: 100%;
|
||||
|
||||
.leaflet-routing-instruction-distance {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
td:nth-child(2),
|
||||
td:nth-child(3) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
td:nth-child(3) {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: var(--color-background-dark);
|
||||
}
|
||||
tr:hover {
|
||||
background-color: var(--color-background-darker);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-map {
|
||||
cursor: grab;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1167,65 +1167,6 @@ export default {
|
|||
border: 0 !important;
|
||||
}
|
||||
|
||||
// routing machine
|
||||
::v-deep .leaflet-routing-container {
|
||||
width: 350px;
|
||||
max-width: calc(100vw - 45px);
|
||||
margin-top: 0;
|
||||
padding-top: 5px;
|
||||
background-color: var(--color-main-background);
|
||||
border: 2px solid var(--color-border-dark) !important;
|
||||
border-bottom-left-radius: var(--border-radius-large) !important;
|
||||
border-bottom-right-radius: var(--border-radius-large) !important;
|
||||
border-top: 0 !important;
|
||||
|
||||
.router-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
#router-select {
|
||||
flex-grow: 1;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 5px 5px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// we don't need this
|
||||
.leaflet-routing-geocoders {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-routing-alternatives-container:not(:empty) {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
// instruction table
|
||||
.leaflet-routing-alt {
|
||||
table {
|
||||
white-space: normal;
|
||||
width: 100%;
|
||||
|
||||
.leaflet-routing-instruction-distance {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
td:nth-child(2),
|
||||
td:nth-child(3) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
td:nth-child(3) {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: var(--color-background-dark);
|
||||
}
|
||||
tr:hover {
|
||||
background-color: var(--color-background-darker);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .icon-routing {
|
||||
background-color: var(--color-main-text);
|
||||
padding: 0 !important;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<LControl class="maps-routing-control" position="topleft">
|
||||
<LControl class="maps-routing-control leaflet-control" :class="{'mobile': isMobile, 'desktop':!isMobile}" position="topleft">
|
||||
<div class="routing-header">
|
||||
<span class="icon icon-routing" />
|
||||
<span class="title">
|
||||
|
|
@ -32,6 +32,7 @@
|
|||
|
||||
<script>
|
||||
import { LControl } from 'vue2-leaflet'
|
||||
import { isMobile } from '@nextcloud/vue'
|
||||
|
||||
import RoutingSteps from './RoutingSteps'
|
||||
import RoutingMachine from './RoutingMachine'
|
||||
|
|
@ -52,6 +53,8 @@ export default {
|
|||
LControl,
|
||||
},
|
||||
|
||||
mixins: [isMobile],
|
||||
|
||||
props: {
|
||||
map: {
|
||||
type: Object,
|
||||
|
|
@ -120,14 +123,28 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.maps-routing-control {
|
||||
z-index: 99999999 !important;
|
||||
background-color: var(--color-main-background);
|
||||
.desktop {
|
||||
width: 350px;
|
||||
margin-left: 52px !important;
|
||||
background-color: var(--color-main-background);
|
||||
padding: 5px;
|
||||
border: 2px solid var(--color-border-dark);
|
||||
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.mobile {
|
||||
width: 100vw;
|
||||
background: var(--color-main-background);
|
||||
padding-left: 52px;
|
||||
padding-right: 52px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 7px;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
.maps-routing-control {
|
||||
z-index: 99999999 !important;
|
||||
|
||||
|
||||
.routing-header {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { generateUrl } from '@nextcloud/router'
|
|||
import { getCurrentUser } from '@nextcloud/auth'
|
||||
import moment from '@nextcloud/moment'
|
||||
import { showSuccess, showError } from '@nextcloud/dialogs'
|
||||
import { isMobile } from '@nextcloud/vue'
|
||||
|
||||
import L from 'leaflet'
|
||||
import 'leaflet-control-geocoder/dist/Control.Geocoder'
|
||||
|
|
@ -21,6 +22,8 @@ import optionsController from '../../../optionsController'
|
|||
export default {
|
||||
name: 'RoutingMachine',
|
||||
|
||||
mixins: [isMobile],
|
||||
|
||||
props: {
|
||||
map: {
|
||||
type: Object,
|
||||
|
|
@ -407,6 +410,7 @@ export default {
|
|||
} else {
|
||||
this.control.addTo(this.map)
|
||||
const routingContainer = document.querySelector('.leaflet-routing-container')
|
||||
routingContainer.classList.add(this.isMobile ? 'leaflet-routing-container-mobile' : 'leaflet-routing-container-desktop')
|
||||
// routingContainer.querySelector('.leaflet-routing-geocoder input').focus()
|
||||
|
||||
// get event when plan is changing
|
||||
|
|
@ -456,7 +460,7 @@ export default {
|
|||
|
||||
document.querySelector('.leaflet-routing-container').prepend(selectDiv)
|
||||
|
||||
if (this.nbRouters === 0 && OC.isUserAdmin()) {
|
||||
if (!this.isMobile && this.nbRouters === 0 && OC.isUserAdmin()) {
|
||||
const p = document.createElement('p')
|
||||
p.textContent = t('maps', 'Routing is currently disabled.')
|
||||
const a = document.createElement('a')
|
||||
|
|
|
|||
|
|
@ -94,6 +94,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
#routing-steps {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче