dredgy/DredgeTours
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Tour Navigator

Browse Source
This commit is contained in:
Josh
2025-10-21 23:13:32 +10:00
parent ef9318b5a3
commit 9b470e07d4
9 changed files with 471 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
resources/js/components/TourNavigator/TourQuickFacts.vue
View File

@@ -1,77 +1,159 @@
<template>
<aside 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</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>
</ul>
<h3 class="aside-title">Upcoming Departures</h3>
</aside>
<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";
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;
height: 100%;
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;
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;
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%);
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);
color: var(--muted-foreground);
}
.facts .value {
color: var(--foreground);
font-weight: 600;
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>