From a50a70199d5545a5d02f6bb424c8bf0db2432d6d Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Wed, 10 Jan 2024 10:08:25 -0500
Subject: [PATCH] Updated contact form

---
 .../components/contact/contact.component.html | 53 +++++++++++++++++++
 .../components/contact/contact.component.ts   |  2 +-
 src/app/views/home/home.component.html        | 51 +-----------------
 src/app/views/home/home.component.ts          |  6 +--
 4 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/src/app/components/contact/contact.component.html b/src/app/components/contact/contact.component.html
index e69de29..1209cec 100644
--- a/src/app/components/contact/contact.component.html
+++ b/src/app/components/contact/contact.component.html
@@ -0,0 +1,53 @@
+<div class="d-flex flex-column-reverse flex-md-row justify-content-center cap-width">
+	<div style="flex: 2 0 0;">
+		<form>
+			<div>
+				<mat-form-field appearance="fill" class="w-100">
+					<mat-label>Email</mat-label>
+					<input matInput>
+				</mat-form-field>
+			</div>
+			<div>
+				<mat-form-field appearance="fill" class="w-100">
+					<mat-label>Subject</mat-label>
+					<mat-select [(value)]="contact">
+						<mat-option value="general">General Inquiry</mat-option>
+						<mat-option value="castra">Castra Event</mat-option>
+					</mat-select>
+				</mat-form-field>
+			</div>
+			<div>
+				<mat-form-field appearance="fill" class="w-100">
+					<mat-label>Message</mat-label>
+					<textarea matInput rows="10"></textarea>
+				</mat-form-field>
+			</div>
+			<div class="d-flex justify-content-between align-items-center">
+				<div>
+					<mat-checkbox color="primary">Send me a copy</mat-checkbox>
+				</div>
+				<div>
+					<button mat-raised-button color="primary">Send</button>
+				</div>
+			</div>
+		</form>
+	</div>
+	<div class="px-3">
+		<div class="d-block d-md-none my-5 border-top border-dark" style="height: 1px; width: 100%;"></div>
+		<div class="d-none d-md-block mx-4 border-end border-dark" style="height: 100%; width: 1px;"></div>
+	</div>
+	<div class="d-flex flex-column text-center text-md-start align-self-center" style="flex: 1 1 1;">
+		<div *ngIf="contact != 'castra'">
+			<h3>Robert Sacco</h3>
+			<h4 class="mb-0">Legio XXX President</h4>
+			<h5>Portrays: Aquilifer Primus Marius Maximus</h5>
+			<a href="mailto:sacco.c.r@bell.net">sacco.c.r@bell.net</a>
+		</div>
+		<div *ngIf="contact == 'castra'">
+			<h3>Tom Ross</h3>
+			<h4 class="mb-0">Legio XXX <em>Patronus</em> (Patron)</h4>
+			<h5>Portrays: Titus Quartinius Saturnalus</h5>
+			<a href="mailto:tomlongwoods@gmail.com">tomlongwoods@gmail.com</a>
+		</div>
+	</div>
+</div>
diff --git a/src/app/components/contact/contact.component.ts b/src/app/components/contact/contact.component.ts
index 9424954..8f5803b 100644
--- a/src/app/components/contact/contact.component.ts
+++ b/src/app/components/contact/contact.component.ts
@@ -5,5 +5,5 @@ import {Component} from '@angular/core';
 	templateUrl: './contact.component.html'
 })
 export class ContactComponent {
-
+	contact: string = '';
 }
diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html
index 69e8a07..bfb9017 100644
--- a/src/app/views/home/home.component.html
+++ b/src/app/views/home/home.component.html
@@ -75,54 +75,7 @@
 <!-- Contact -->
 <section id="contact" class="d-flex flex-column align-items-center justify-content-center fill">
 	<div class="container">
-		<h2 class="text-center">Contact</h2>
-		<div class="d-flex flex-row">
-			<form class="pe-3" style="width: min(100%, 600px)">
-				<div>
-					<mat-form-field appearance="fill" class="w-100">
-						<mat-label>Email</mat-label>
-						<input matInput>
-					</mat-form-field>
-				</div>
-				<div>
-					<mat-form-field appearance="fill" class="w-100">
-						<mat-label>Subject</mat-label>
-						<mat-select [(value)]="contact">
-							<mat-option value="general">General Inquiry</mat-option>
-							<mat-option value="castra">Castra Event</mat-option>
-						</mat-select>
-					</mat-form-field>
-				</div>
-				<div>
-					<mat-form-field appearance="fill" class="w-100">
-						<mat-label>Message</mat-label>
-						<textarea matInput rows="8"></textarea>
-					</mat-form-field>
-				</div>
-				<div class="d-flex justify-content-between align-items-center">
-					<div>
-						<mat-checkbox color="primary">Send me a copy</mat-checkbox>
-					</div>
-					<div>
-						<button mat-raised-button color="primary">Send</button>
-					</div>
-				</div>
-			</form>
-			<mat-divider vertical></mat-divider>
-			<div class="d-flex flex-column justify-content-center ps-3" style="width: min(100%, 600px)">
-				<div *ngIf="contact == 'general'">
-					<h3>Robert Sacco</h3>
-					<h4 class="mb-0">Legio XXX President</h4>
-					<h5>Portrays: Aquilifer Primus Marius Maximus</h5>
-					<a href="mailto:sacco.c.r@bell.net">sacco.c.r@bell.net</a>
-				</div>
-				<div *ngIf="contact == 'castra'">
-					<h3>Tom Ross</h3>
-					<h4 class="mb-0">Legio XXX <em>Patronus</em> (Patron)</h4>
-					<h5>Portrays: Titus Quartinius Saturnalus</h5>
-					<a href="mailto:tomlongwoods@gmail.com">tomlongwoods@gmail.com</a>
-				</div>
-			</div>
-		</div>
+		<h2 class="text-center mb-5">Contact</h2>
+		<app-contact></app-contact>
 	</div>
 </section>
diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts
index be29c9b..0a67d13 100644
--- a/src/app/views/home/home.component.ts
+++ b/src/app/views/home/home.component.ts
@@ -1,12 +1,8 @@
 import {Component} from '@angular/core';
-import {NAVIGATION} from '../../misc/navigation';
 
 @Component({
 	selector: 'xxx-home',
 	templateUrl: './home.component.html',
 	styleUrls: ['./home.component.scss']
 })
-export class HomeComponent {
-	contact: string = '';
-	navigation = NAVIGATION;
-}
+export class HomeComponent { }