160 lines
3.8 KiB
Vue
160 lines
3.8 KiB
Vue
<template>
|
||
<div class="tour-aside chamfer" v-show-on-intersect="{type:'fade-up'}">
|
||
<h3 class="aside-title">Quick Facts</h3>
|
||
<ul class="facts">
|
||
<li v-if="tour.tour_days?.length > 0">
|
||
<span class="label">Length</span>
|
||
<span class="value">{{ tour.tour_days?.length }} days</span>
|
||
</li>
|
||
<li v-if="tour.level">
|
||
<span class="label">Fitness</span>
|
||
<span class="value">{{ tour.level }}</span>
|
||
</li>
|
||
<li v-if="true">
|
||
<span class="label">Price From</span>
|
||
<span class="value">{{
|
||
Intl.NumberFormat(undefined, {
|
||
style: 'currency',
|
||
currency: 'USD'
|
||
}).format(tour.price)
|
||
}}</span>
|
||
</li>
|
||
<li v-if="tour.min_people || tour.max_people">
|
||
<span class="label">Group Size</span>
|
||
<span class="value">{{ tour.min_people ?? '?' }}–{{ tour.max_people ?? '?' }} people</span>
|
||
</li>
|
||
<li v-if="Array.isArray(tour.countries) && tour.countries.length">
|
||
<span class="label">Countries</span>
|
||
<span class="value">{{ tour.countries?.map((c: any) => c.name ?? c).join(', ') }}</span>
|
||
</li>
|
||
<li class="departures-item">
|
||
<span class="label">Departures</span>
|
||
<span class="value">No Upcoming Departures</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {defineProps} from "vue";
|
||
import type {Tour} from "@/types";
|
||
|
||
defineProps<{ tour: Tour }>();
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tour-aside {
|
||
background: var(--card);
|
||
color: var(--foreground);
|
||
border: 1px solid color-mix(in oklab, var(--foreground), transparent 85%);
|
||
padding: 1.25rem;
|
||
flex-grow: 1;
|
||
height: 100%;
|
||
}
|
||
|
||
.aside-title {
|
||
margin: 1rem 0 1rem 0;
|
||
font-size: 1rem;
|
||
color: var(--foreground);
|
||
letter-spacing: 0.02em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.facts {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: grid;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.facts li {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 1rem;
|
||
padding: 0.5rem 0.25rem;
|
||
border-bottom: 1px dashed color-mix(in oklab, var(--foreground), transparent 90%);
|
||
}
|
||
|
||
.facts .label {
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
.facts .value {
|
||
color: var(--foreground);
|
||
font-weight: 600;
|
||
text-align: right;
|
||
}
|
||
|
||
/* Mobile responsive */
|
||
@media (max-width: 1023px) {
|
||
.tour-aside {
|
||
padding: 2em 0.75em 0 2em;
|
||
}
|
||
|
||
.aside-title {
|
||
margin: 0 0 0.5rem 0;
|
||
font-size: 0.65rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.aside-title:not(:first-of-type) {
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.facts {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 0.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.facts li {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.125rem;
|
||
padding: 0;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.departures-item {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
|
||
.facts .label {
|
||
font-size: 0.65rem;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.facts .value {
|
||
font-size: 0.8rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.aside-title:first-of-type {
|
||
display: none;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.aside-title:first-of-type {
|
||
display: block;
|
||
}
|
||
|
||
.facts {
|
||
grid-template-columns: 1fr auto;
|
||
}
|
||
|
||
.facts li {
|
||
display: grid;
|
||
grid-template-columns: auto;
|
||
border-bottom: 1px dashed color-mix(in oklab, var(--foreground), transparent 90%);
|
||
padding: 0.5rem 0.25rem;
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</style>
|