diff --git a/src/components/FuelPricesWidget.astro b/src/components/FuelPricesWidget.astro index 6ff9015..48a9666 100644 --- a/src/components/FuelPricesWidget.astro +++ b/src/components/FuelPricesWidget.astro @@ -65,7 +65,7 @@ function formatVatLabel(value: unknown): string { } .fuel-service-notes { - margin: 0 0 1.1rem; + margin: 0 0 1.9rem; } .fuel-service-notes p { @@ -77,7 +77,10 @@ function formatVatLabel(value: unknown): string { } .fuel-contact-link { - margin-top: 0.35rem; + display: flex; + width: fit-content; + margin-top: 0.55rem; + margin-inline: auto; } .fuel-more-info { diff --git a/src/components/NewsFeed.astro b/src/components/NewsFeed.astro index 2ac034d..d38159a 100644 --- a/src/components/NewsFeed.astro +++ b/src/components/NewsFeed.astro @@ -26,7 +26,7 @@ const { news, title = 'Latest news', description = 'Fresh updates, operational c ) : (

No news items

-

News articles will be generated from Directus at build time.

+

Stay tuned for updates as they are published!

)} diff --git a/src/pages/about/fees-and-charges.astro b/src/pages/about/fees-and-charges.astro index 746ecf3..1d374e5 100644 --- a/src/pages/about/fees-and-charges.astro +++ b/src/pages/about/fees-and-charges.astro @@ -46,6 +46,11 @@ const additionalCharges = [ ['Runway closure', '£50', 'At management discretion following incident or accident.'], ['Drones', '£25', 'Commercial drones need 2 days notice before flight and a permit.'], ]; + +const gaHeaders = ['Type', 'Landing fee', 'Daytime parking', 'Overnight parking outside', 'Overnight parking hangar']; +const touchAndGoHeaders = ['Type', 'Single', 'Unlimited']; +const businessHeaders = ['MTOW', 'Landing fee', 'Daytime parking', 'Overnight parking']; +const additionalHeaders = ['Charge', 'Price', 'Notes']; --- @@ -60,17 +65,13 @@ const additionalCharges = [ - - - - - + {gaHeaders.map((header) => )} {gaCharges.map((row) => ( - {row.map((cell) => )} + {row.map((cell, index) => )} ))} @@ -84,15 +85,13 @@ const additionalCharges = [
TypeLanding feeDaytime parkingOvernight parking outsideOvernight parking hangar{header}
{cell}{cell}
- - - + {touchAndGoHeaders.map((header) => )} {touchAndGoCharges.map((row) => ( - {row.map((cell) => )} + {row.map((cell, index) => )} ))} @@ -119,16 +118,13 @@ const additionalCharges = [
TypeSingleUnlimited{header}
{cell}{cell}
- - - - + {businessHeaders.map((header) => )} {businessCharges.map((row) => ( - {row.map((cell) => )} + {row.map((cell, index) => )} ))} @@ -149,15 +145,13 @@ const additionalCharges = [
MTOWLanding feeDaytime parkingOvernight parking{header}
{cell}{cell}
- - - + {additionalHeaders.map((header) => )} {additionalCharges.map((row) => ( - {row.map((cell) => )} + {row.map((cell, index) => )} ))} @@ -236,4 +230,101 @@ const additionalCharges = [ .fee-section ul { margin-top: 0.6rem; } + + @media (max-width: 700px) { + .fees-page { + gap: 1rem; + } + + .fee-section { + padding-block: 0.35rem; + } + + .fee-table-wrap { + overflow: visible; + } + + .fee-table, + .fee-table tbody, + .fee-table tr, + .fee-table td { + display: block; + width: 100%; + } + + .fee-table { + min-width: 0; + border: 0; + border-radius: 0; + background: transparent; + box-shadow: none; + } + + .fee-table-wrap.compact .fee-table { + min-width: 0; + } + + .fee-table thead { + display: none; + } + + .fee-table tbody { + display: grid; + gap: 0.75rem; + } + + .fee-table tr { + overflow: hidden; + border: 1px solid var(--line); + border-radius: var(--radius-sm); + background: rgba(255, 255, 255, 0.88); + box-shadow: 0 10px 22px rgba(16, 34, 51, 0.07); + } + + .fee-table tbody tr:nth-child(even) { + background: rgba(255, 255, 255, 0.88); + } + + .fee-table td { + display: grid; + grid-template-columns: minmax(8rem, 0.9fr) minmax(0, 1.1fr); + gap: 0.75rem; + padding: 0.68rem 0.85rem; + border-bottom: 1px solid var(--line); + overflow-wrap: anywhere; + } + + .fee-table td:first-child { + display: block; + padding: 0.85rem; + background: linear-gradient(180deg, rgba(11, 79, 122, 0.12), rgba(29, 118, 184, 0.07)); + color: var(--text); + font-weight: 800; + } + + .fee-table td:first-child::before { + content: none; + } + + .fee-table td:last-child { + border-bottom: 0; + } + + .fee-table td::before { + content: attr(data-label); + color: var(--brand); + font-size: 0.78rem; + font-weight: 800; + letter-spacing: 0.04em; + line-height: 1.25; + text-transform: uppercase; + } + } + + @media (max-width: 420px) { + .fee-table td { + grid-template-columns: 1fr; + gap: 0.2rem; + } + } diff --git a/src/pages/pilot-info.astro b/src/pages/pilot-info.astro index 4baa25b..61c8f8a 100644 --- a/src/pages/pilot-info.astro +++ b/src/pages/pilot-info.astro @@ -5,6 +5,7 @@ import { getFuelPrices } from '../lib/directus'; import { site } from '../lib/site'; const runwayPattern = /^Runway\s+(\d+)\s+-\s+([^\s]+)\s+LDA\s+\(([^)]+)\)\s+Code\s+(\d+)\s+\(([^)]+)\)$/; +const runwayHeaders = ['Runway', 'LDA', 'Surface', 'Code', 'Circuits']; const runwayRows = site.runwayFacts .map((fact) => { @@ -114,11 +115,11 @@ When the Tower is unavailable, this will be NOTAMed and blind calls to Swansea T {runwayRows.map((runway) => ( - - - - - + + + + + ))} diff --git a/src/styles/global.css b/src/styles/global.css index a9dec57..12eb038 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -971,6 +971,97 @@ section { } .runway-facts-table { - min-width: 38rem; + min-width: 0; + border: 0; + border-radius: 0; + background: transparent; + box-shadow: none; + } + + .runway-table-wrap { + overflow: visible; + } + + .runway-facts-table, + .runway-facts-table tbody, + .runway-facts-table tr, + .runway-facts-table td { + display: block; + width: 100%; + } + + .runway-facts-table thead { + display: none; + } + + .runway-facts-table tbody { + display: grid; + gap: 0.75rem; + } + + .runway-facts-table tr { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.5rem; + border: 1px solid var(--line); + border-radius: var(--radius-sm); + padding: 0.75rem; + background: rgba(255, 255, 255, 0.88); + box-shadow: 0 10px 22px rgba(16, 34, 51, 0.07); + } + + .runway-facts-table tbody tr:nth-child(even), + .runway-facts-table tbody tr:hover { + background: rgba(255, 255, 255, 0.88); + } + + .runway-facts-table td { + display: grid; + gap: 0.18rem; + min-height: 3.4rem; + padding: 0.62rem 0.7rem; + border: 1px solid rgba(16, 34, 51, 0.08); + border-radius: 0.7rem; + background: rgba(255, 255, 255, 0.72); + font-weight: 800; + line-height: 1.2; + white-space: normal; + } + + .runway-facts-table td:first-child { + display: flex; + align-items: center; + gap: 0.45rem; + grid-column: 1 / -1; + min-height: 0; + padding: 0.85rem; + border: 0; + background: linear-gradient(180deg, rgba(11, 79, 122, 0.12), rgba(29, 118, 184, 0.07)); + color: var(--text); + font-size: 1.08rem; + font-weight: 800; + } + + .runway-facts-table td:first-child::before { + content: 'Runway'; + color: var(--brand); + font-size: 0.78rem; + font-weight: 800; + letter-spacing: 0.04em; + text-transform: uppercase; + } + + .runway-facts-table td:last-child { + border-bottom: 1px solid rgba(16, 34, 51, 0.08); + } + + .runway-facts-table td::before { + content: attr(data-label); + color: var(--brand); + font-size: 0.68rem; + font-weight: 800; + letter-spacing: 0.04em; + line-height: 1; + text-transform: uppercase; } }
ChargePriceNotes{header}
{cell}{cell}
{runway.runway}{runway.lda}{runway.surface}{runway.code}{runway.circuits}{runway.runway}{runway.lda}{runway.surface}{runway.code}{runway.circuits}