Updated contact form
This commit is contained in:
		@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -5,5 +5,5 @@ import {Component} from '@angular/core';
 | 
			
		||||
	templateUrl: './contact.component.html'
 | 
			
		||||
})
 | 
			
		||||
export class ContactComponent {
 | 
			
		||||
 | 
			
		||||
	contact: string = '';
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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 { }
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user