Added a rules & calendar page

src/app/app.module.ts

@@ -8,17 +8,21 @@ import { AppComponent } from './containers/app/app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MaterialModule} from './material.module';
 import {FourOFourComponent} from './views/404/404.component';
+import {CalendarComponent} from './views/events/calendar/calendar.component';
 import {GalleryComponent} from './views/gallery/gallery.component';
 import {HomeComponent} from './views/home/home.component';
+import {RulesComponent} from './views/reenact/rules/rules.component';
 
 export const APP_COMPONENTS = [
 	AppComponent,
 	BannerComponent,
+	CalendarComponent,
+	FooterComponent,
 	FourOFourComponent,
 	GalleryComponent,
 	HomeComponent,
-	FooterComponent,
-	NavbarComponent
+	NavbarComponent,
+	RulesComponent
 ]
 
 @NgModule({

src/app/app.routing.ts

@@ -1,12 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {FourOFourComponent} from './views/404/404.component';
+import {CalendarComponent} from './views/events/calendar/calendar.component';
 import {GalleryComponent} from './views/gallery/gallery.component';
 import {HomeComponent} from './views/home/home.component';
+import {RulesComponent} from './views/reenact/rules/rules.component';
 
 const routes: Routes = [
 	{path: '', pathMatch: 'full', component: HomeComponent},
+	{path: 'calendar', component: CalendarComponent},
 	{path: 'gallery', component: GalleryComponent},
+	{path: 'rules', component: RulesComponent},
 	{path: '**', component: FourOFourComponent}
 ];
 

src/app/components/navbar/navbar.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar>
+<mat-toolbar class="d-print-none">
 	<mat-toolbar-row>
 		<div>
 			<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner" (click)="scroll('banner')">
@@ -15,9 +15,9 @@
 			<ng-container *ngFor="let group of links.other">
 				<ng-template [ngTemplateOutlet]="navGroup" [ngTemplateOutletContext]="{'$implicit': group}"></ng-template>
 			</ng-container>
-			<a href="#">
-				<button mat-button class="navbar-button">Donate</button>
-			</a>
+<!--			<a href="#">-->
+<!--				<button mat-button class="navbar-button">Donate</button>-->
+<!--			</a>-->
 		</div>
 		<button *ngIf="hamburger" mat-icon-button class="mr-3">
 			<mat-icon (click)="hamburgerClick.emit()">menu</mat-icon>

src/app/components/navbar/navbar.component.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
-import {filter, Subscription} from 'rxjs';
+import {combineLatest, filter, Subscription} from 'rxjs';
 import {NAVIGATION} from '../../misc/navigation';
 
 @Component({
@@ -20,11 +20,12 @@ export class NavbarComponent implements AfterViewInit, OnDestroy {
 
 	@Output() hamburgerClick = new EventEmitter<void>();
 
-	constructor(private route: ActivatedRoute) { }
+	constructor(private route: ActivatedRoute, private router: Router) { }
 
 	ngAfterViewInit() {
-		this.sub = this.route.fragment.subscribe(frag => {
-			console.log('fire');
+
+		this.sub = combineLatest([this.router.events.pipe(filter(e => e instanceof NavigationEnd)), this.route.fragment]).subscribe(([url, frag]) => {
+			console.log('fire', frag);
 			if(frag) this.scroll(frag);
 			else this.scroll('top');
 		});

src/app/containers/app/app.component.ts

@@ -1,8 +1,7 @@
-import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+import {BreakpointObserver} from '@angular/cdk/layout';
 import { Component } from '@angular/core';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import {filter} from 'rxjs';
-import { LocalStorage } from 'webstorage-decorators';
 
 @Component({
   selector: 'app-root',

src/app/misc/navigation.ts

@@ -16,19 +16,23 @@ export const NAVIGATION: NavigationGroup = [
 			{label: 'Gallery', url: '/gallery'},
 	]]},
 	{label: 'Events', children: [[
-			{label: 'Castra Aestiva', url: '/event', fragment: 'aestiva'},
-			{label: 'Castra Hiberna', url: '/event', fragment: 'hiberna'},
+			{label: 'Castra Aestiva', url: '/events', fragment: 'aestiva'},
+			{label: 'Castra Hiberna', url: '/events', fragment: 'hiberna'},
 		], [
-			{label: 'Calendar', url: '/event/calendar'},
+			{label: 'Calendar', url: '/calendar'},
 	]]},
 	{label: 'Learn', children: [[
-			{label: 'Legio XXX', url: '/info/legio-xxx'},
-			{label: 'Legion Camp', url: '/info/legion-camp'},
-			{label: 'Legion Headquarters', url: '/info/legion-headquarters'},
-			{label: 'Legion Organization', url: '/info/legion-organization'},
-			{label: 'Legionairy Equipment', url: '/info/legionairy-equipment'},
-			{label: 'Legionairy Training', url: '/info/legionairy-training'},
+			{label: 'Common Questions', url: '/info/questions'},
 		], [
+			{label: 'Trajan', url: '/info/trajan'},
+			{label: 'Legio XXX', url: '/info/legio-xxx'},
+			{label: 'Legion Camp', url: '/info/camp'},
+			{label: 'Legion Headquarters', url: '/info/headquarters'},
+			{label: 'Legion Organization', url: '/info/organization'},
+			{label: 'Legionairy Equipment', url: '/info/equipment'},
+			{label: 'Legionairy Training', url: '/info/training'},
+		], [
+			{label: 'Glossary', url: '/info/glossary'},
 			{label: 'Resources', url: '/info/resources'},
 	]]},
 	{label: 'Reenact', children: [[
@@ -37,7 +41,7 @@ export const NAVIGATION: NavigationGroup = [
 		], [
 			{label: 'Trusted Vendors', url: '/vendors'},
 			{label: 'Kit Assembly', url: '/diy'},
-			{label: 'Kit Maintinance', url: '/info/maintinance'},
+			{label: 'Kit Maintinance', url: '/maintinance'},
 		], [
 			{label: 'Login/Register', url: '/login'},
 	]]},

src/app/views/events/.gitkeep

@@ -1 +0,0 @@
-Z^C5kgHKfYgy

src/app/views/events/calendar/calendar.component.html

@@ -0,0 +1,7 @@
+<div class="invert">
+	<div class="container py-4 px-3">
+		<h1 class="mb-2">Calendar</h1>
+		<mat-divider class="mb-4"></mat-divider>
+		<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=America%2FToronto&showCalendars=0&showTabs=0&showPrint=0&showTitle=0&src=YjQ4ZGI1NDc2YWY2YTI4ZGE2NGQzNDhhNThhYWI0MGQ1NjAwNWJmMmQ1YzA0NDI3MTdjZDllNmQ0OTA5YTFkZUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%23D50000" style="border-width:0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
+	</div>
+</div>

src/app/views/events/calendar/calendar.component.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'xxx-calendar',
+	templateUrl: './calendar.component.html'
+})
+export class CalendarComponent { }

src/app/views/reenact/rules/rules.component.html

@@ -0,0 +1,75 @@
+<div class="invert">
+	<div class="container py-4 px-3">
+		<div>
+			<h1 class="mb-2">Rules & Regulations</h1>
+			<mat-divider></mat-divider>
+			<br>
+		</div>
+		<div>
+			<h2 class="mb-2">General</h2>
+			<p>It is the responsibility of members to:</p>
+			<ol>
+				<li>You are reenacting a Roman soldier, behave like one</li>
+				<li>Follow the dress code at all times & stay in charchter</li>
+				<li>Accept constructive criticism with grace & an open mind</li>
+				<li>Be polite & respect everyone, you not only represent yourself but the group</li>
+				<li>Be courteous and helpful to anyone hosting the legion</li>
+				<li>Keep the venue clean & ensure everything is returned to how it was found upon departure</li>
+				<li>Respect the chain of command</li>
+				<li>Have basic knowledge about what we reencat & answer questions as accurately as possible;
+					<strong>Do not hesitate to admit when you don't know the answer & refer to someone else</strong>
+				</li>
+				<li>Posses the minimum amount of kit needed to participate (Let us know if you need something)</li>
+				<li>Equipment is to be as period correct and functional as materials and costs permits</li>
+				<li>All kit should be inspected for cleanliness and serviceability; see our <a href="/maintinance">maintinace guide</a></li>
+				<li>Absolutely <strong>no</strong> modern day paraphernalia is permitted (i.e., sunglasses, eyeglasses, wrist watches, piercings of any kind, eccentric hair colour, inappropriate visible tattoos, etc.)</li>
+				<li>During public events all belongings should be secured by at least one member or an assistant</li>
+			</ol>
+		</div>
+		<div>
+			<h2 class="mb-2">Dress Code</h2>
+			<h3 class="mb-2">Legionaries</h3>
+			<p>
+				The following is a list of equipment needed to participate, depending on the weather & who you are portraying your requirements may be different.
+				Check the <a href="/info/equipment">equipment page</a> for a full list:
+			</p>
+			<h4 class="mb-2">Minumum</h4>
+			<ul class="mt-0">
+				<li><span class="fst-italic">Tunica</span>/Tunic - A large shirt/dress held at the waist by a cord or cloth belt</li>
+				<li><span class="fst-italic">Caligae</span>/Sandles - Modern leather sandles will do in a pinch</li>
+				<li><span class="fst-italic">Balteus</span>/Belt - A lether ordimental apron used to afix weapons</li>
+				<li><span class="fst-italic">Pugio</span>/Dagger - Attached to the <span class="fst-italic">Balteus</span></li>
+			</ul>
+			<h4 class="mb-2">Marching Kit</h4>
+			<ul class="mt-0">
+				<li><span class="fst-italic">Cassis</span>/Helmet - To protect the noggin!</li>
+				<li><span class="fst-italic">Subarmalis</span>/Padded Vest - Additional comfort & protection</li>
+				<li><span class="fst-italic">Lorica</span>/Armour - Segmata, hamata or plumata/squamta</li>
+				<li><span class="fst-italic">Focale</span>/Scarf - Protects the neck from chaifing</li>
+				<li><span class="fst-italic">Gladius</span>/Sword - The primary weapon of the empire</li>
+				<li><span class="fst-italic">Scutum</span>/Shield - A large semicircle shield</li>
+				<li><span class="fst-italic">Pilum</span>/Javlin - A ranged weapon</li>
+			</ul>
+			<h3 class="mb-2">Non-Legionaries</h3>
+			<p>Any reenacters are welcome as long as they stay period correct to the 2nd centery AD. This may include civilians, barbarians & Greeks.</p>
+		</div>
+		<div>
+			<h2 class="mb-2">Weapons</h2>
+			<p>The inappropriate use of weapons will not be tolerated:</p>
+			<ol>
+				<li>Weapons are not to be handled by the public, under any circumstance</li>
+				<li>Swords and daggers will be secured at all events with a device to ensure that they cannot be removed by unauthorized personnel</li>
+				<li>The use of the warning “Clear” will precede the drawing of weapons</li>
+			</ol>
+		</div>
+		<div>
+			<h2 class="mb-2">Disciplinary Actions</h2>
+			<p>Failure to act safely & professionally may result in the following disciplinary actions:</p>
+			<ul>
+				<li>Verbal warnings</li>
+				<li>Removal of weapons</li>
+				<li>Expulsion/suspension from events</li>
+			</ul>
+		</div>
+	</div>
+</div>

src/app/views/reenact/rules/rules.component.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'xxx-rules',
+	templateUrl: './rules.component.html'
+})
+export class RulesComponent { }

src/styles.scss

@@ -48,6 +48,14 @@ a, a:visited {
 }
 a:hover, a:visited:hover { color: #b10000; }
 
+h3 { font: 400 18px / 30px Roboto, "Helvetica Neue", sans-serif !important; }
+
+.container {
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
 .invert {
 	background: #fff;
 	color: #000;