Updated gallery

src/app/app.module.ts

@@ -1,14 +1,17 @@
 import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ReactiveFormsModule} from '@angular/forms';
 import {BrowserModule} from '@angular/platform-browser';
 import {NgxGoogleAnalyticsModule} from 'ngx-google-analytics';
 import {environment} from '../environments/environment';
 import {AppRouting} from './app.routing';
 import {BannerComponent} from './components/banner/banner.component';
+import {CarouselComponent} from './components/carousel/carousel.component';
 import {ContactComponent} from './components/contact/contact.component';
 import {FooterComponent} from './components/footer/footer.component';
+import {ImageViewerComponent} from './components/image-viewer/image-viewer.component';
 import {LogoComponent} from './components/logo/logo.component';
 import {NavbarComponent} from './components/navbar/navbar.component';
+import {PlaceholderComponent} from './components/placeholder/placeholder.component';
 import {AppComponent} from './containers/app/app.component';
 import {BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MaterialModule} from './material.module';
@@ -33,6 +36,7 @@ export const APP_COMPONENTS: any[] = [
 	AppComponent,
 	BannerComponent,
 	CalendarComponent,
+	CarouselComponent,
 	ContactComponent,
 	DrillComponent,
 	FooterComponent,
@@ -41,9 +45,11 @@ export const APP_COMPONENTS: any[] = [
 	GettingStartedComponent,
 	HibernaComponent,
 	HomeComponent,
+	ImageViewerComponent,
 	LogoComponent,
 	MaintenanceComponent,
 	NavbarComponent,
+	PlaceholderComponent,
 	RulesComponent
 ]
 

src/app/components/carousel/carousel.component.html

@@ -0,0 +1,16 @@
+<div class="carousel-container"  [style.height]="height" style="background: #282d31">
+	<div class="carousel-previous" (click)="previous()">
+		<mat-icon>keyboard_arrow_left</mat-icon>
+	</div>
+	<div *ngIf="loading" class="carousel-loading">
+		<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+	</div>
+	<img class="carousel-image" [src]="photos[index].src" [alt]="photos[index].alt || 'slide ' + index" (load)="loading = false">
+	<div class="carousel-next" (click)="next()">
+		<mat-icon>keyboard_arrow_right</mat-icon>
+	</div>
+	<div *ngIf="!disableAutoplay" class="carousel-pause" (click)="pause = !pause">
+		<mat-icon *ngIf="!pause">pause</mat-icon>
+		<mat-icon *ngIf="pause">play_arrow</mat-icon>
+	</div>
+</div>

src/app/components/carousel/carousel.component.scss

@@ -0,0 +1,117 @@
+.carousel-container {
+	position: relative;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.carousel-background {
+		width: 100%;
+		height: 100%;
+		filter: blur(10px);
+		-webkit-filter: blur(10px);
+	}
+
+	.carousel-loading {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+
+		.lds-ring {
+			display: inline-block;
+			position: relative;
+			width: 80px;
+			height: 80px;
+		}
+		.lds-ring div {
+			box-sizing: border-box;
+			display: block;
+			position: absolute;
+			width: 64px;
+			height: 64px;
+			margin: 8px;
+			border: 8px solid #fff;
+			border-radius: 50%;
+			animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+			border-color: #fff transparent transparent transparent;
+		}
+		.lds-ring div:nth-child(1) {
+			animation-delay: -0.45s;
+		}
+		.lds-ring div:nth-child(2) {
+			animation-delay: -0.3s;
+		}
+		.lds-ring div:nth-child(3) {
+			animation-delay: -0.15s;
+		}
+		@keyframes lds-ring {
+			0% {
+				transform: rotate(0deg);
+			}
+			100% {
+				transform: rotate(360deg);
+			}
+		}
+	}
+
+	.carousel-image {
+		display: block;
+		max-width: 70%;
+		max-height: 90%;
+		object-fit: cover;
+		width: auto;
+		height: auto;
+	}
+
+	.carousel-next, .carousel-previous {
+		position: absolute;
+		top: 50%;
+		width: 56px;
+		height: 56px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: rgba(255, 255, 255, 0.75);
+		filter: drop-shadow(3px 3px 5px black);
+		cursor: pointer;
+		transition: 0.25s;
+		border-radius: 50%;
+		transform: translateY(-50%);
+
+		&.carousel-next {
+			right: 0;
+		}
+
+		&.carousel-previous {
+			left: 0;
+		}
+
+		&:hover {
+			color: white;
+			background: rgba(0,0,0,0.25);
+			filter: none;
+		}
+	}
+
+	.carousel-pause {
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		height: 56px;
+		width: 56px;
+		transform: translate(-50%, -50%);
+		color: rgba(255, 255, 255, 0.75);
+		filter: drop-shadow(3px 3px 5px black);
+		cursor: pointer;
+		padding: 1rem;
+		border-radius: 50%;
+		transition: 0.25s;
+
+		&:hover {
+			color: white;
+			background: rgba(0,0,0,0.25);
+			filter: none;
+		}
+	}
+}

src/app/components/carousel/carousel.component.ts

@@ -0,0 +1,51 @@
+import {AfterViewInit, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Photo} from '../models/photo';
+
+@Component({
+	selector: 'xxx-carousel',
+	templateUrl: './carousel.component.html',
+	styleUrls: ['./carousel.component.scss']
+})
+export class CarouselComponent implements OnDestroy, OnInit, AfterViewInit {
+	private timer?: any;
+
+	loading = true;
+
+	@Input() background = true;
+	@Input() photos: Photo[] = [];
+	@Input() speed = 5000;
+	@Input() pause = false;
+	@Input() disableAutoplay = false;
+	@Input() index = ~~(Math.random() * this.photos.length);
+	@Input() height = '100%';
+
+	ngOnInit() {
+		if(this.disableAutoplay) this.pause = true;
+	}
+
+	ngAfterViewInit() {
+		this.timer = setInterval(() => {
+			if(!this.pause) this.next(false);
+		}, this.speed);
+	}
+
+	ngOnDestroy() {
+		if(this.timer) {
+			clearInterval(this.timer);
+			this.timer = null;
+		}
+	}
+
+	next(pause = true) {
+		this.loading = true;
+		this.pause = pause;
+		this.index++;
+		if(this.index >= this.photos.length) this.index = 0;
+	}
+
+	previous(pause = true) {
+		this.loading = true;
+		this.pause = pause;
+		this.index = this.index > 0 ? this.index - 1 : this.photos.length - 1;
+	}
+}

src/app/components/image-viewer/image-viewer.component.ts

@@ -0,0 +1,41 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {Photo} from '../models/photo';
+
+export interface ImageViewerOptions {
+	photos: Photo[],
+	index?: number;
+}
+
+@Component({
+	selector: 'xxx-viewer',
+	styles: [`
+		.close {
+			position: absolute;
+			top: 1rem;
+			right: 1rem;
+			z-index: 100000;
+		}
+		::ng-deep .cdk-overlay-pane {
+			max-width: 100% !important;
+		}
+		::ng-deep mat-dialog-container {
+			padding: 0 !important;
+		}
+	`],
+	template: `
+		<button class="close" mat-icon-button aria-label="close dialog" mat-dialog-close>
+			<mat-icon>close</mat-icon>
+		</button>
+		<xxx-carousel [photos]="photos" [index]="index" [disableAutoplay]="true"></xxx-carousel>
+	`
+})
+export class ImageViewerComponent {
+	index!: number;
+	photos!: Photo[];
+
+	constructor(public ref: MatDialogRef<ImageViewerComponent>, @Inject(MAT_DIALOG_DATA) data: ImageViewerOptions) {
+		this.index = data.index || 0;
+		this.photos = data.photos || [];
+	}
+}

src/app/components/models/photo.ts

@@ -0,0 +1,4 @@
+export interface Photo {
+	alt: string;
+	src: string;
+}

src/app/components/placeholder/placeholder.component.ts

@@ -0,0 +1,43 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+	selector: 'xxx-placeholder',
+	styles: [`
+		.placeholder {
+			position: relative;
+			background-color: #bbbbbb;
+			background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
+			background-size: 400% 100%;
+			min-height: 100px;
+			min-width: 200px;
+
+			animation-duration: 3s;
+			animation-fill-mode: forwards;
+			animation-iteration-count: infinite;
+			animation-name: placeHolderShimmer;
+			animation-timing-function: linear;
+
+			@keyframes placeHolderShimmer {
+				0% {
+					background-position: 200% 0;
+				}
+				100% {
+					background-position: -200% 0;
+				}
+			}
+		}
+	`],
+	template: `
+		<div *ngIf="loading" class="placeholder" [style.height]="height" [style.width]="width"></div>
+		<img [src]="src" [alt]="alt" [style]="style" [style.height]="height" [style.width]="width" loading="lazy" (load)="loading = false" />
+	`
+})
+export class PlaceholderComponent {
+	loading = true;
+
+	@Input() alt?: string;
+	@Input() src!: string;
+	@Input() style!: string;
+	@Input() height: string = 'auto';
+	@Input() width: string = 'auto';
+}

src/app/material.module.ts

@@ -1,6 +1,7 @@
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
@@ -12,6 +13,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 export const MATERIAL_MODULES = [
 	MatButtonModule,
 	MatCheckboxModule,
+	MatDialogModule,
 	MatDividerModule,
 	MatIconModule,
 	MatInputModule,

src/app/views/gallery/gallery.component.html

@@ -2,8 +2,8 @@
 	<div *ngFor="let album of photos" class="mb-5">
 		<h1 class="mb-0">{{album.album}}</h1>
 		<mat-divider class="mb-3"></mat-divider>
-		<div *ngFor="let photo of album.photos" class="d-inline-block me-3 mb-3">
-			<img [alt]="photo.caption" [src]="photo.src" height="150px" width="auto" loading="lazy">
+		<div *ngFor="let photo of album.photos; let i = index" class="d-inline-block me-3 mb-3">
+			<xxx-placeholder [src]="photo.src" [alt]="photo.alt" height="150px" (click)="open(photo)"></xxx-placeholder>
 		</div>
 	</div>
 </div>

src/app/views/gallery/gallery.component.scss

@@ -0,0 +1,4 @@
+xxx-placeholder:hover ::ng-deep img {
+	transform: scale(1.1);
+	cursor: pointer;
+}

src/app/views/gallery/gallery.component.ts

@@ -1,160 +1,184 @@
 import {Component} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {ImageViewerComponent} from '../../components/image-viewer/image-viewer.component';
+import {Photo} from '../../components/models/photo';
 
 @Component({
 	selector: 'xxx-gallery',
-	templateUrl: './gallery.component.html'
+	templateUrl: './gallery.component.html',
+	styleUrls: ['./gallery.component.scss'],
 })
 export class GalleryComponent {
-	photos = [{album: '2022', photos: [
-			{caption: '', src: '/assets/img/gallery/2022/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/005.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/006.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/007.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/008.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/009.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/010.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/011.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/012.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/013.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/014.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/015.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/016.jpg'},
-			{caption: '', src: '/assets/img/gallery/2022/017.jpg'},
+	photos: {album: string, photos: Photo[]}[] = [
+		{album: '2022', photos: [
+			{alt: '', src: '/assets/img/gallery/2022/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/006.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/007.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/008.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/009.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/010.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/011.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/012.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/013.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/014.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/015.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/016.jpg'},
+			{alt: '', src: '/assets/img/gallery/2022/017.jpg'},
 		]}, {album: '2021', photos: [
-			{caption: '', src: '/assets/img/gallery/2021/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2021/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2021/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2021/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2021/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2021/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2021/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2021/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2021/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2021/005.jpg'},
 		]}, {album: '2019', photos: [
-			{caption: '', src: '/assets/img/gallery/2019/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2019/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2019/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2019/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2019/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2019/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2019/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2019/004.jpg'},
 		]}, {album: '2018', photos: [
-			{caption: '', src: '/assets/img/gallery/2018/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2018/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2018/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2018/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2018/005.jpg'},
-			{caption: '', src: '/assets/img/gallery/2018/006.jpg'},
-			{caption: '', src: '/assets/img/gallery/2018/007.jpg'},
-			{caption: '', src: '/assets/img/gallery/2018/008.jpg'},
+			{alt: '', src: '/assets/img/gallery/2018/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2018/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2018/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2018/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2018/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2018/006.jpg'},
+			{alt: '', src: '/assets/img/gallery/2018/007.jpg'},
+			{alt: '', src: '/assets/img/gallery/2018/008.jpg'},
 		]}, {album: '2017', photos: [
-			{caption: '', src: '/assets/img/gallery/2017/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2017/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2017/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2017/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2017/005.jpg'},
-			{caption: '', src: '/assets/img/gallery/2017/006.jpg'},
-			{caption: '', src: '/assets/img/gallery/2017/007.jpg'},
+			{alt: '', src: '/assets/img/gallery/2017/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2017/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2017/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2017/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2017/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2017/006.jpg'},
+			{alt: '', src: '/assets/img/gallery/2017/007.jpg'},
 		]}, {album: '2016', photos: [
-			{caption: '', src: '/assets/img/gallery/2016/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/005.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/006.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/007.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/008.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/009.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/010.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/011.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/012.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/013.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/014.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/015.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/016.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/017.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/018.jpg'},
-			{caption: '', src: '/assets/img/gallery/2016/019.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/006.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/007.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/008.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/009.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/010.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/011.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/012.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/013.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/014.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/015.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/016.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/017.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/018.jpg'},
+			{alt: '', src: '/assets/img/gallery/2016/019.jpg'},
 		]}, {album: '2014', photos: [
-			{caption: '', src: '/assets/img/gallery/2014/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2014/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2014/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2014/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2014/005.jpg'},
-			{caption: '', src: '/assets/img/gallery/2014/006.jpg'},
-			{caption: '', src: '/assets/img/gallery/2014/007.jpg'},
-			{caption: '', src: '/assets/img/gallery/2014/008.jpg'},
-			{caption: '', src: '/assets/img/gallery/2014/009.jpg'},
-			{caption: '', src: '/assets/img/gallery/2014/010.jpg'},
+			{alt: '', src: '/assets/img/gallery/2014/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2014/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2014/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2014/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2014/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2014/006.jpg'},
+			{alt: '', src: '/assets/img/gallery/2014/007.jpg'},
+			{alt: '', src: '/assets/img/gallery/2014/008.jpg'},
+			{alt: '', src: '/assets/img/gallery/2014/009.jpg'},
+			{alt: '', src: '/assets/img/gallery/2014/010.jpg'},
 		]}, {album: '2013', photos: [
-			{caption: '', src: '/assets/img/gallery/2013/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2013/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2013/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2013/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2013/005.jpg'},
-			{caption: '', src: '/assets/img/gallery/2013/006.jpg'},
+			{alt: '', src: '/assets/img/gallery/2013/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2013/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2013/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2013/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2013/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2013/006.jpg'},
 		]}, {album: '2012', photos: [
-			{caption: '', src: '/assets/img/gallery/2012/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/005.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/006.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/007.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/008.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/009.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/010.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/011.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/012.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/013.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/014.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/015.jpg'},
-			{caption: '', src: '/assets/img/gallery/2012/016.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/006.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/007.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/008.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/009.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/010.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/011.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/012.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/013.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/014.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/015.jpg'},
+			{alt: '', src: '/assets/img/gallery/2012/016.jpg'},
 		]}, {album: '2011', photos: [
-			{caption: '', src: '/assets/img/gallery/2011/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2011/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2011/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2011/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2011/005.jpg'},
-			{caption: '', src: '/assets/img/gallery/2011/006.jpg'},
+			{alt: '', src: '/assets/img/gallery/2011/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2011/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2011/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2011/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2011/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2011/006.jpg'},
 		]}, {album: '2010', photos: [
-			{caption: '', src: '/assets/img/gallery/2010/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2010/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2010/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2010/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2010/005.jpg'},
-			{caption: '', src: '/assets/img/gallery/2010/006.jpg'},
-			{caption: '', src: '/assets/img/gallery/2010/007.jpg'},
-			{caption: '', src: '/assets/img/gallery/2010/008.jpg'},
-			{caption: '', src: '/assets/img/gallery/2010/009.jpg'},
-			{caption: '', src: '/assets/img/gallery/2010/010.jpg'},
-			{caption: '', src: '/assets/img/gallery/2010/011.jpg'},
-			{caption: '', src: '/assets/img/gallery/2010/012.jpg'},
-			{caption: '', src: '/assets/img/gallery/2010/013.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/006.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/007.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/008.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/009.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/010.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/011.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/012.jpg'},
+			{alt: '', src: '/assets/img/gallery/2010/013.jpg'},
 		]}, {album: '2009', photos: [
-			{caption: '', src: '/assets/img/gallery/2009/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2009/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2009/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2009/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2009/005.jpg'},
-			{caption: '', src: '/assets/img/gallery/2009/006.jpg'},
-			{caption: '', src: '/assets/img/gallery/2009/007.jpg'},
-			{caption: '', src: '/assets/img/gallery/2009/008.jpg'},
-			{caption: '', src: '/assets/img/gallery/2009/009.jpg'},
-			{caption: '', src: '/assets/img/gallery/2009/010.jpg'},
-			{caption: '', src: '/assets/img/gallery/2009/011.jpg'},
-			{caption: '', src: '/assets/img/gallery/2009/012.jpg'},
+			{alt: '', src: '/assets/img/gallery/2009/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2009/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2009/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2009/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2009/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2009/006.jpg'},
+			{alt: '', src: '/assets/img/gallery/2009/007.jpg'},
+			{alt: '', src: '/assets/img/gallery/2009/008.jpg'},
+			{alt: '', src: '/assets/img/gallery/2009/009.jpg'},
+			{alt: '', src: '/assets/img/gallery/2009/010.jpg'},
+			{alt: '', src: '/assets/img/gallery/2009/011.jpg'},
+			{alt: '', src: '/assets/img/gallery/2009/012.jpg'},
 		]}, {album: '2008', photos: [
-			{caption: '', src: '/assets/img/gallery/2008/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2008/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2008/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2008/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2008/005.jpg'},
-			{caption: '', src: '/assets/img/gallery/2008/006.jpg'},
-			{caption: '', src: '/assets/img/gallery/2008/007.jpg'},
-			{caption: '', src: '/assets/img/gallery/2008/008.jpg'},
+			{alt: '', src: '/assets/img/gallery/2008/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2008/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2008/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2008/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2008/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2008/006.jpg'},
+			{alt: '', src: '/assets/img/gallery/2008/007.jpg'},
+			{alt: '', src: '/assets/img/gallery/2008/008.jpg'},
 		]}, {album: '2007', photos: [
-			{caption: '', src: '/assets/img/gallery/2007/001.jpg'},
-			{caption: '', src: '/assets/img/gallery/2007/002.jpg'},
-			{caption: '', src: '/assets/img/gallery/2007/003.jpg'},
-			{caption: '', src: '/assets/img/gallery/2007/004.jpg'},
-			{caption: '', src: '/assets/img/gallery/2007/005.jpg'},
-			{caption: '', src: '/assets/img/gallery/2007/006.jpg'},
-	]}]
+			{alt: '', src: '/assets/img/gallery/2007/001.jpg'},
+			{alt: '', src: '/assets/img/gallery/2007/002.jpg'},
+			{alt: '', src: '/assets/img/gallery/2007/003.jpg'},
+			{alt: '', src: '/assets/img/gallery/2007/004.jpg'},
+			{alt: '', src: '/assets/img/gallery/2007/005.jpg'},
+			{alt: '', src: '/assets/img/gallery/2007/006.jpg'},
+	]}];
+
+	constructor(private dialog: MatDialog) {}
+
+	get flatten() {
+		return this.photos.reduce((acc: any[], album) => {
+			return [...acc, ...album.photos];
+		}, []);
+	}
+
+	open(photo: any) {
+		const flat = this.flatten;
+		const index = flat.findIndex(p => p.src == photo.src);
+		this.dialog.open(ImageViewerComponent, {
+			width: '100%',
+			height: '100%',
+			autoFocus: false,
+			data: {index, photos: flat}
+		});
+	}
 }

src/app/views/reenact/maintinance/maintenance.component.html

@@ -1,6 +1,6 @@
 <div class="invert">
 	<div class="cap-width py-5 px-3">
-		<div>
+		<div class="mb-3">
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0">Equipment Maintenance</h1>
 				<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
@@ -8,15 +8,16 @@
 					Print
 				</a>
 			</div>
+			<mat-divider></mat-divider>
 		</div>
-		<mat-divider class="mb-5"></mat-divider>
+		<p>In an era marked by frequent warfare and constant threats, the effectiveness and durability of weapons and armor were critical for the survival of soldiers on the battlefield. Regular upkeep ensures that swords, and armor remain sharp, reliable and in working condition. Learn what how you can best care for your equipment.</p>
 		<div>
-			<h2 class="mb-2">Table of Contents</h2>
+			<h2 class="mb-1">Table of Contents</h2>
+			<mat-divider class="mb-3"></mat-divider>
 			<ul>
-				<li>Wood</li>
+				<li>Cloth</li>
 				<ul>
-					<li>Mineral Oil</li>
-					<li>Linseed Oil</li>
+					<li>Lanolin</li>
 				</ul>
 				<li>Leather</li>
 				<ul>
@@ -24,15 +25,23 @@
 					<li>Conditioner</li>
 					<li>Lanolin</li>
 				</ul>
-				<li>Rust Removal</li>
+				<li>Wood</li>
 				<ul>
-					<li>White Wine Vinegar</li>
+					<li>Mineral Oil</li>
+					<li>Linseed Oil</li>
 				</ul>
-				<li>Metal Preservation</li>
+				<li>Metal</li>
 				<ul>
-					<li>WD-40</li>
-					<li>Lanolin</li>
-					<li>Wax</li>
+					<li>Rust Removal</li>
+					<ul>
+						<li>White Wine Vinegar</li>
+					</ul>
+					<li>Preservation</li>
+					<ul>
+						<li>WD-40</li>
+						<li>Lanolin</li>
+						<li>Wax</li>
+					</ul>
 				</ul>
 			</ul>
 		</div>