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

Added Charts

Browse Source
This commit is contained in:
josh
2026-04-11 17:30:16 +10:00
parent 7a07616f03
commit e83fd3bdca
24 changed files with 2915 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/FlightsGoneBy/BoardingPass.vue
+86 -27
View File
@@ -61,14 +61,98 @@ function classKey(flight: Flight): string {
</div>
</div>
<div v-if="flight.seat_number" class="pass-meta-row">
<span class="pass-meta-pill pass-meta-pill--seat">SEAT {{ flight.seat_number }}</span>
<div v-if="flight.duration_display || flight.distance || flight.seat_number" class="pass-tear">
<div class="pass-tear-notch pass-tear-notch--left" />
<div class="pass-tear-notch pass-tear-notch--right" />
<div v-if="flight.duration_display || flight.distance " class="pass-stats-row">
<span v-if="flight.seat_number" class="pass-stat">
<span class="pass-stat-label">SEAT</span>
<span class="pass-stat-value">{{ flight.seat_number }}</span>
</span>
<span class="pass-stat-divider" v-if="flight.duration_display && flight.distance">·</span>
<span v-if="flight.duration_display" class="pass-stat">
<span class="pass-stat-label">DURATION</span>
<span class="pass-stat-value">{{ flight.duration_display }}</span>
</span>
<span class="pass-stat-divider" v-if="flight.duration_display && flight.distance">·</span>
<span v-if="flight.distance" class="pass-stat">
<span class="pass-stat-label">DISTANCE</span>
<span class="pass-stat-value">{{ Math.round(flight.distance).toLocaleString() }} km</span>
</span>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.pass-stats-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-top: 1rem;
padding-top: 0.75rem;
background-image: repeating-linear-gradient(
to right,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.08) 6px,
transparent 6px,
transparent 12px
);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: top center;
}
.pass-tear {
position: relative;
margin-top: 1rem;
}
.pass-tear-notch {
position: absolute;
top: 0;
width: 15px;
height: 15px;
background: #0e1018; /* match your page background */
border-radius: 50%;
transform: translateY(-50%);
z-index: 1;
}
.pass-tear-notch--left { left: -1.6rem; } /* bleeds into the padding */
.pass-tear-notch--right { right: -1.6rem; }
.pass-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
}
.pass-stat-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.55rem;
letter-spacing: 0.18em;
color: #445566;
text-transform: uppercase;
}
.pass-stat-value {
font-family: 'Share Tech Mono', monospace;
font-size: 0.82rem;
color: #9aa;
letter-spacing: 0.06em;
}
.pass-stat-divider {
color: #334;
font-size: 1rem;
line-height: 1;
margin-top: 0.5rem;
}
.boarding-pass {
background: #181b24;
border-radius: 10px;
@@ -190,29 +274,4 @@ function classKey(flight: Flight): string {
margin-left: 0.15rem;
vertical-align: super;
}
.pass-meta-row {
display: flex;
gap: 0.4rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.pass-meta-pill {
font-family: 'Share Tech Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.15rem 0.5rem;
border-radius: 2px;
border: 1px solid rgba(255,193,7,0.25);
background: rgba(255,193,7,0.07);
color: #ffc107;
}
.pass-meta-pill--seat {
border-color: rgba(200,205,216,0.2);
background: rgba(200,205,216,0.06);
color: #c8cdd8;
}
</style>