31 lines
1.3 KiB
HTML
31 lines
1.3 KiB
HTML
<div class="stop">
|
|
<span class="stop__name">{{ stop.name }}</span>
|
|
<span class="stop__description badge badge-dark" v-if="stop.variant">{{ stop.variant }}</span>
|
|
|
|
<slot/>
|
|
|
|
<div class="stop__actions flex-space-left">
|
|
<slot name="actions">
|
|
<button class="btn btn-action" ref="action-info" @click="details = !details">
|
|
<fa :icon="['fal', details ? 'chevron-circle-up' : 'info-circle']"/>
|
|
</button>
|
|
|
|
<button class="btn btn-action" ref="action-map" @click="map = true" @focusout="map = false">
|
|
<fa :icon="['fal', 'map-marked-alt']"/>
|
|
</button>
|
|
</slot>
|
|
</div>
|
|
|
|
<fold :visible="details" class="stop__details" lazy>
|
|
<stop-details :stop="stop"></stop-details>
|
|
</fold>
|
|
|
|
<popper reference="action-map" :visible="map" arrow placement="left-start">
|
|
<div style="height: 300px; width: 500px">
|
|
<l-map :center="stop.location" :zoom=17 :options="{ zoomControl: false, dragging: false }">
|
|
<l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'></l-tile-layer>
|
|
<l-marker :lat-lng="stop.location"></l-marker>
|
|
</l-map>
|
|
</div>
|
|
</popper>
|
|
</div> |