Updated contact form
This commit is contained in:
parent
5d70a86253
commit
a50a70199d
@ -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 { }
|
||||
|
Loading…
Reference in New Issue
Block a user