You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.1 KiB
93 lines
2.1 KiB
<template>
|
|
<header>
|
|
<div class="header__col">
|
|
<Logo />
|
|
<div v-if="!selectedOrig.iata" class="logo-blurb">
|
|
from one of <strong>{{ airportsOrig.length }}</strong>
|
|
<span style="color: white;">local</span> airports
|
|
</div>
|
|
<div
|
|
v-if="
|
|
selectedOrig.iata && !selectedDest.iata && airports_dest.length > 1
|
|
"
|
|
class="logo-blurb"
|
|
>
|
|
to one of <strong>{{ airportsDest.length }}</strong>
|
|
{{ getCompliment }} destinations
|
|
</div>
|
|
</div>
|
|
<div class="header__col">
|
|
<div v-show="!isPickerVisible">
|
|
<button class="btn btn--primary" @click="showPicker">
|
|
tap the map or search 🔎
|
|
</button>
|
|
</div>
|
|
<div v-show="isPickerVisible">
|
|
<button class="btn btn--primary" @click="showPicker">
|
|
hide search <svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-arrow-bar-to-up"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="#ffffff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="12" y1="10" x2="12" y2="20" />
|
|
<line x1="12" y1="10" x2="16" y2="14" />
|
|
<line x1="12" y1="10" x2="8" y2="14" />
|
|
<line x1="4" y1="4" x2="20" y2="4" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="header__col" />
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
selectedOrig: {
|
|
type: [Object],
|
|
default () {
|
|
return {}
|
|
}
|
|
},
|
|
selectedDest: {
|
|
type: [Object],
|
|
default () {
|
|
return {}
|
|
}
|
|
},
|
|
airportsOrig: {
|
|
type: [Array],
|
|
default () {
|
|
return []
|
|
}
|
|
},
|
|
airportsDest: {
|
|
type: [Array],
|
|
default () {
|
|
return []
|
|
}
|
|
},
|
|
isPickerVisible: {
|
|
type: [Boolean],
|
|
default () {
|
|
return null
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.asdf {
|
|
color: red;
|
|
}
|
|
</style>
|