121 lines
3.0 KiB
Plaintext
121 lines
3.0 KiB
Plaintext
---
|
|
import ContactForm from '../ContactForm.astro';
|
|
import { formMessages } from '../../utils/form-messages';
|
|
|
|
interface Props {
|
|
title: string;
|
|
lang: string;
|
|
}
|
|
|
|
const { title, lang } = Astro.props;
|
|
const text = formMessages(lang);
|
|
---
|
|
|
|
<section class="contact-page">
|
|
<div class="container contact-page__grid">
|
|
<div class="contact-page__copy">
|
|
<slot />
|
|
</div>
|
|
<ContactForm title={title} lang={lang} />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="contact-map-section" aria-label={text.map}>
|
|
<div id="aia-contact-map" class="contact-map" data-tile-alt={text.tile} data-zoom-in={text.zoomIn} data-zoom-out={text.zoomOut} data-marker-label={text.marker}></div>
|
|
</section>
|
|
|
|
<script is:inline src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
|
<script is:inline>
|
|
(() => {
|
|
const mapElement = document.getElementById('aia-contact-map');
|
|
|
|
if (!mapElement || !window.L) return;
|
|
|
|
const map = window.L.map(mapElement, { zoomControl: false }).setView([33.63, -111.88756], 12);
|
|
window.L.control.zoom({ zoomInTitle: mapElement.dataset.zoomIn, zoomOutTitle: mapElement.dataset.zoomOut }).addTo(map);
|
|
const tiles = window.L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
|
maxZoom: 19
|
|
});
|
|
|
|
tiles.on('tileload', (event) => {
|
|
if (event.tile && !event.tile.alt) {
|
|
event.tile.alt = mapElement.dataset.tileAlt;
|
|
}
|
|
});
|
|
|
|
tiles.addTo(map);
|
|
|
|
window.L.marker([33.617746, -111.88756], { alt: mapElement.dataset.markerLabel, title: mapElement.dataset.markerLabel }).addTo(map).bindPopup(`
|
|
<span style="display:block;text-align:center">
|
|
<b>Arizona Institute for Autism</b><br>
|
|
<img class="contact-map__logo" alt="Arizona Institute for Autism" src="/assets/images/aia-logo.svg" width="94">
|
|
</span>
|
|
`).openPopup();
|
|
})();
|
|
</script>
|
|
|
|
<style>
|
|
.contact-page {
|
|
background: white;
|
|
padding-block: 100px;
|
|
}
|
|
|
|
.contact-page__grid {
|
|
align-items: start;
|
|
display: grid;
|
|
gap: clamp(2rem, 5vw, 4rem);
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.contact-page__copy {
|
|
color: var(--color-primary);
|
|
text-align: left;
|
|
}
|
|
|
|
.contact-page__copy :global(h2) {
|
|
margin: 0 0 25px;
|
|
}
|
|
|
|
.contact-page__copy :global(p) {
|
|
margin: 0 0 25px;
|
|
}
|
|
|
|
.contact-page__copy :global(.content-button) {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.contact-map-section {
|
|
background: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.contact-map {
|
|
height: 360px;
|
|
width: 100%;
|
|
}
|
|
|
|
.contact-map :global(.contact-map__logo) {
|
|
display: block;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.contact-page {
|
|
padding-block: 50px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.contact-page__grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.contact-page__copy :global(.content-button) {
|
|
display: table;
|
|
margin-inline: auto;
|
|
}
|
|
}
|
|
</style>
|