diff --git a/assets/css/main.css b/assets/css/main.css index defd33a..84deae9 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -84,7 +84,8 @@ main { transition: 0.2s all; display: flex; align-items: center; - justify-content: space-around; + /* justify-content: space-around; what was this for? */ + justify-content: center; gap: 0.25rem; line-height: 1; min-height: 1em; @@ -94,6 +95,7 @@ main { height: min(1rem, 18px); display: inline-block; aspect-ratio: 1; + transition: 0.2s all; } .btn.btn--primary { @@ -106,6 +108,10 @@ main { color: #fff; } +.btn.btn--primary:hover svg { + stroke: #ffffff; +} + .btn.btn--cancel { background: red; color: #fff; diff --git a/components/TheSideBar.vue b/components/TheSideBar.vue index 4a34022..6d6a754 100644 --- a/components/TheSideBar.vue +++ b/components/TheSideBar.vue @@ -50,6 +50,8 @@

What is
FlyLocal Alaska?

+ +
@@ -42,12 +46,12 @@ :key="schedule.fields.Record_ID" :class="[ 'grid__row', - { 'grid__row--selected': selectedSchedule.id == schedule.id }, + { grid__row: selectedSchedule.id == schedule.id }, ]" >
@@ -131,9 +140,11 @@ + + +
+
+ + +
+
+

+ You'll be flying with
+ Copper Valley Air Service,
a great local + airline! +

+

+ Copper Valley is a small, family run airline that not only + provides bi-weekly air-taxi flights, but also mail delivery, + sight-seeing, and adventure flights to remote areas of Alaska. +

+

+ To book with Copper Valley, enter your contact info below and they + will contact you directly to finish your booking. +

+
+
+ + +
+
+ +
+
+
+ +
@@ -184,7 +308,11 @@ export default { selectedOrig: {}, selectedDest: {}, numAdult: 1, - numChild: 0 + numChild: 0, + firstName: '', + lastName: '', + email: '', + phone: '' } }, async fetch () { @@ -319,6 +447,39 @@ export default { window.open(this.selectedSchedule.fields['BookingLink (from Carriers_Alaska)'][0]) }, + async contactCarrier () { + const newBooking = + { + fields: { + ArrivalTime: this.selectedSchedule.fields.Arrival_TimeL, + Carrier: this.selectedSchedule.fields.Carrier_Name, + DepartureTime: this.selectedSchedule.fields.Departure_TimeL, + Destination: this.selectedSchedule.fields.Destination_IATA[0], + Origin: this.selectedSchedule.fields.Origin_IATA[0], + CreatedDate: new Date(), + FirstName: this.firstName, + LastName: this.lastName, + Phone: this.phone, + Email: this.email, + DepartureDate: this.$route.params.departure, + NumAdult: this.numAdult, + NumChild: this.numChild, + } + } + + const res = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/CVAS_Booking/`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: 'Bearer key8ZVBxVZJL2Wp7y' + }, + body: JSON.stringify(newBooking) + }) + + const json = await res.json() + //this.guests = { ...await json } + console.log(await json) + }, selectSchedule (schedule) { this.selectedSchedule = { ...schedule } @@ -336,7 +497,7 @@ export default { this.startingDate = '' this.selectedSchedule = {} }, - async fetchSingleAirport (iata, isOrig) { + async fetchSingleAirport(iata, isOrig) { const airportFetchFilterFormula = isOrig ? `AND(Is_Origin=1,{IsCurrent-AsOrigin}="Yes",Airport_IATA="${iata}")` @@ -594,19 +755,38 @@ span.badge--avail { margin-left: -3rem; } -.book-container { +.form-row { display: flex; flex-direction: column; justify-content: stretch; - gap: 1rem; } -.book-container label { +.form-row label { text-transform: uppercase; font-size: 1rem; font-weight: 300; } +.form-row input { + background: #eee; + border-radius: 999px; + transition: 0.3s all; + padding: 0.5em 0.8em; + font-size: min(1rem, 18px); + line-height: 1; +} + +.form-row--two-columns { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + column-gap: 1rem; +} + +.form-row--two-columns input { + width: 50%; +} + .flyout { background: #007fff; border-radius: 3rem 3rem 0 0; @@ -615,6 +795,7 @@ span.badge--avail { width: clamp(450px, 50vw, 400px); display: flex; flex-direction: column; + gap: 1rem; } .flyout .btn.btn--primary { @@ -627,10 +808,6 @@ span.badge--avail { color: #fff; } - - -