ztimson/legio-30
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Updated gallery
All checks were successful
Build Website / Build NPM Project (push) Successful in 1m44s
Details
Build Website / Tag Version (push) Successful in 11s
Details
Build Website / Build & Push Dockerfile (push) Successful in 2m40s
Details

Browse Source
This commit is contained in:
Zakary Timson
2024-01-12 12:04:59 -05:00
parent 905f734d91
commit e6ff564111
14 changed files with 472 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/app.module.ts
View File

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

16
src/app/components/carousel/carousel.component.html Normal file
View File

@@ -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>

117
src/app/components/carousel/carousel.component.scss Normal file
View File

@@ -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;
}
}
}

51
src/app/components/carousel/carousel.component.ts Normal file
View File

@@ -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;
}
}

41
src/app/components/image-viewer/image-viewer.component.ts Normal file
View File

@@ -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 || [];
}
}

4
src/app/components/models/photo.ts Normal file
View File

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

43
src/app/components/placeholder/placeholder.component.ts Normal file
View File

@@ -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';
}

2
src/app/material.module.ts
View File

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

4
src/app/views/gallery/gallery.component.html
View File

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

4
src/app/views/gallery/gallery.component.scss Normal file
View File

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

304
src/app/views/gallery/gallery.component.ts
View File

@@ -1,160 +1,184 @@
import {Component} from '@angular/core'; 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({ @Component({
selector: 'xxx-gallery', selector: 'xxx-gallery',
templateUrl: './gallery.component.html' templateUrl: './gallery.component.html',
styleUrls: ['./gallery.component.scss'],
}) })
export class GalleryComponent { export class GalleryComponent {
photos = [{album: '2022', photos: [ photos: {album: string, photos: Photo[]}[] = [
{caption: '', src: '/assets/img/gallery/2022/001.jpg'}, {album: '2022', photos: [
{caption: '', src: '/assets/img/gallery/2022/002.jpg'}, {alt: '', src: '/assets/img/gallery/2022/001.jpg'},
{caption: '', src: '/assets/img/gallery/2022/003.jpg'}, {alt: '', src: '/assets/img/gallery/2022/002.jpg'},
{caption: '', src: '/assets/img/gallery/2022/004.jpg'}, {alt: '', src: '/assets/img/gallery/2022/003.jpg'},
{caption: '', src: '/assets/img/gallery/2022/005.jpg'}, {alt: '', src: '/assets/img/gallery/2022/004.jpg'},
{caption: '', src: '/assets/img/gallery/2022/006.jpg'}, {alt: '', src: '/assets/img/gallery/2022/005.jpg'},
{caption: '', src: '/assets/img/gallery/2022/007.jpg'}, {alt: '', src: '/assets/img/gallery/2022/006.jpg'},
{caption: '', src: '/assets/img/gallery/2022/008.jpg'}, {alt: '', src: '/assets/img/gallery/2022/007.jpg'},
{caption: '', src: '/assets/img/gallery/2022/009.jpg'}, {alt: '', src: '/assets/img/gallery/2022/008.jpg'},
{caption: '', src: '/assets/img/gallery/2022/010.jpg'}, {alt: '', src: '/assets/img/gallery/2022/009.jpg'},
{caption: '', src: '/assets/img/gallery/2022/011.jpg'}, {alt: '', src: '/assets/img/gallery/2022/010.jpg'},
{caption: '', src: '/assets/img/gallery/2022/012.jpg'}, {alt: '', src: '/assets/img/gallery/2022/011.jpg'},
{caption: '', src: '/assets/img/gallery/2022/013.jpg'}, {alt: '', src: '/assets/img/gallery/2022/012.jpg'},
{caption: '', src: '/assets/img/gallery/2022/014.jpg'}, {alt: '', src: '/assets/img/gallery/2022/013.jpg'},
{caption: '', src: '/assets/img/gallery/2022/015.jpg'}, {alt: '', src: '/assets/img/gallery/2022/014.jpg'},
{caption: '', src: '/assets/img/gallery/2022/016.jpg'}, {alt: '', src: '/assets/img/gallery/2022/015.jpg'},
{caption: '', src: '/assets/img/gallery/2022/017.jpg'}, {alt: '', src: '/assets/img/gallery/2022/016.jpg'},
{alt: '', src: '/assets/img/gallery/2022/017.jpg'},
]}, {album: '2021', photos: [ ]}, {album: '2021', photos: [
{caption: '', src: '/assets/img/gallery/2021/001.jpg'}, {alt: '', src: '/assets/img/gallery/2021/001.jpg'},
{caption: '', src: '/assets/img/gallery/2021/002.jpg'}, {alt: '', src: '/assets/img/gallery/2021/002.jpg'},
{caption: '', src: '/assets/img/gallery/2021/003.jpg'}, {alt: '', src: '/assets/img/gallery/2021/003.jpg'},
{caption: '', src: '/assets/img/gallery/2021/004.jpg'}, {alt: '', src: '/assets/img/gallery/2021/004.jpg'},
{caption: '', src: '/assets/img/gallery/2021/005.jpg'}, {alt: '', src: '/assets/img/gallery/2021/005.jpg'},
]}, {album: '2019', photos: [ ]}, {album: '2019', photos: [
{caption: '', src: '/assets/img/gallery/2019/001.jpg'}, {alt: '', src: '/assets/img/gallery/2019/001.jpg'},
{caption: '', src: '/assets/img/gallery/2019/002.jpg'}, {alt: '', src: '/assets/img/gallery/2019/002.jpg'},
{caption: '', src: '/assets/img/gallery/2019/003.jpg'}, {alt: '', src: '/assets/img/gallery/2019/003.jpg'},
{caption: '', src: '/assets/img/gallery/2019/004.jpg'}, {alt: '', src: '/assets/img/gallery/2019/004.jpg'},
]}, {album: '2018', photos: [ ]}, {album: '2018', photos: [
{caption: '', src: '/assets/img/gallery/2018/001.jpg'}, {alt: '', src: '/assets/img/gallery/2018/001.jpg'},
{caption: '', src: '/assets/img/gallery/2018/002.jpg'}, {alt: '', src: '/assets/img/gallery/2018/002.jpg'},
{caption: '', src: '/assets/img/gallery/2018/003.jpg'}, {alt: '', src: '/assets/img/gallery/2018/003.jpg'},
{caption: '', src: '/assets/img/gallery/2018/004.jpg'}, {alt: '', src: '/assets/img/gallery/2018/004.jpg'},
{caption: '', src: '/assets/img/gallery/2018/005.jpg'}, {alt: '', src: '/assets/img/gallery/2018/005.jpg'},
{caption: '', src: '/assets/img/gallery/2018/006.jpg'}, {alt: '', src: '/assets/img/gallery/2018/006.jpg'},
{caption: '', src: '/assets/img/gallery/2018/007.jpg'}, {alt: '', src: '/assets/img/gallery/2018/007.jpg'},
{caption: '', src: '/assets/img/gallery/2018/008.jpg'}, {alt: '', src: '/assets/img/gallery/2018/008.jpg'},
]}, {album: '2017', photos: [ ]}, {album: '2017', photos: [
{caption: '', src: '/assets/img/gallery/2017/001.jpg'}, {alt: '', src: '/assets/img/gallery/2017/001.jpg'},
{caption: '', src: '/assets/img/gallery/2017/002.jpg'}, {alt: '', src: '/assets/img/gallery/2017/002.jpg'},
{caption: '', src: '/assets/img/gallery/2017/003.jpg'}, {alt: '', src: '/assets/img/gallery/2017/003.jpg'},
{caption: '', src: '/assets/img/gallery/2017/004.jpg'}, {alt: '', src: '/assets/img/gallery/2017/004.jpg'},
{caption: '', src: '/assets/img/gallery/2017/005.jpg'}, {alt: '', src: '/assets/img/gallery/2017/005.jpg'},
{caption: '', src: '/assets/img/gallery/2017/006.jpg'}, {alt: '', src: '/assets/img/gallery/2017/006.jpg'},
{caption: '', src: '/assets/img/gallery/2017/007.jpg'}, {alt: '', src: '/assets/img/gallery/2017/007.jpg'},
]}, {album: '2016', photos: [ ]}, {album: '2016', photos: [
{caption: '', src: '/assets/img/gallery/2016/001.jpg'}, {alt: '', src: '/assets/img/gallery/2016/001.jpg'},
{caption: '', src: '/assets/img/gallery/2016/002.jpg'}, {alt: '', src: '/assets/img/gallery/2016/002.jpg'},
{caption: '', src: '/assets/img/gallery/2016/003.jpg'}, {alt: '', src: '/assets/img/gallery/2016/003.jpg'},
{caption: '', src: '/assets/img/gallery/2016/004.jpg'}, {alt: '', src: '/assets/img/gallery/2016/004.jpg'},
{caption: '', src: '/assets/img/gallery/2016/005.jpg'}, {alt: '', src: '/assets/img/gallery/2016/005.jpg'},
{caption: '', src: '/assets/img/gallery/2016/006.jpg'}, {alt: '', src: '/assets/img/gallery/2016/006.jpg'},
{caption: '', src: '/assets/img/gallery/2016/007.jpg'}, {alt: '', src: '/assets/img/gallery/2016/007.jpg'},
{caption: '', src: '/assets/img/gallery/2016/008.jpg'}, {alt: '', src: '/assets/img/gallery/2016/008.jpg'},
{caption: '', src: '/assets/img/gallery/2016/009.jpg'}, {alt: '', src: '/assets/img/gallery/2016/009.jpg'},
{caption: '', src: '/assets/img/gallery/2016/010.jpg'}, {alt: '', src: '/assets/img/gallery/2016/010.jpg'},
{caption: '', src: '/assets/img/gallery/2016/011.jpg'}, {alt: '', src: '/assets/img/gallery/2016/011.jpg'},
{caption: '', src: '/assets/img/gallery/2016/012.jpg'}, {alt: '', src: '/assets/img/gallery/2016/012.jpg'},
{caption: '', src: '/assets/img/gallery/2016/013.jpg'}, {alt: '', src: '/assets/img/gallery/2016/013.jpg'},
{caption: '', src: '/assets/img/gallery/2016/014.jpg'}, {alt: '', src: '/assets/img/gallery/2016/014.jpg'},
{caption: '', src: '/assets/img/gallery/2016/015.jpg'}, {alt: '', src: '/assets/img/gallery/2016/015.jpg'},
{caption: '', src: '/assets/img/gallery/2016/016.jpg'}, {alt: '', src: '/assets/img/gallery/2016/016.jpg'},
{caption: '', src: '/assets/img/gallery/2016/017.jpg'}, {alt: '', src: '/assets/img/gallery/2016/017.jpg'},
{caption: '', src: '/assets/img/gallery/2016/018.jpg'}, {alt: '', src: '/assets/img/gallery/2016/018.jpg'},
{caption: '', src: '/assets/img/gallery/2016/019.jpg'}, {alt: '', src: '/assets/img/gallery/2016/019.jpg'},
]}, {album: '2014', photos: [ ]}, {album: '2014', photos: [
{caption: '', src: '/assets/img/gallery/2014/001.jpg'}, {alt: '', src: '/assets/img/gallery/2014/001.jpg'},
{caption: '', src: '/assets/img/gallery/2014/002.jpg'}, {alt: '', src: '/assets/img/gallery/2014/002.jpg'},
{caption: '', src: '/assets/img/gallery/2014/003.jpg'}, {alt: '', src: '/assets/img/gallery/2014/003.jpg'},
{caption: '', src: '/assets/img/gallery/2014/004.jpg'}, {alt: '', src: '/assets/img/gallery/2014/004.jpg'},
{caption: '', src: '/assets/img/gallery/2014/005.jpg'}, {alt: '', src: '/assets/img/gallery/2014/005.jpg'},
{caption: '', src: '/assets/img/gallery/2014/006.jpg'}, {alt: '', src: '/assets/img/gallery/2014/006.jpg'},
{caption: '', src: '/assets/img/gallery/2014/007.jpg'}, {alt: '', src: '/assets/img/gallery/2014/007.jpg'},
{caption: '', src: '/assets/img/gallery/2014/008.jpg'}, {alt: '', src: '/assets/img/gallery/2014/008.jpg'},
{caption: '', src: '/assets/img/gallery/2014/009.jpg'}, {alt: '', src: '/assets/img/gallery/2014/009.jpg'},
{caption: '', src: '/assets/img/gallery/2014/010.jpg'}, {alt: '', src: '/assets/img/gallery/2014/010.jpg'},
]}, {album: '2013', photos: [ ]}, {album: '2013', photos: [
{caption: '', src: '/assets/img/gallery/2013/001.jpg'}, {alt: '', src: '/assets/img/gallery/2013/001.jpg'},
{caption: '', src: '/assets/img/gallery/2013/002.jpg'}, {alt: '', src: '/assets/img/gallery/2013/002.jpg'},
{caption: '', src: '/assets/img/gallery/2013/003.jpg'}, {alt: '', src: '/assets/img/gallery/2013/003.jpg'},
{caption: '', src: '/assets/img/gallery/2013/004.jpg'}, {alt: '', src: '/assets/img/gallery/2013/004.jpg'},
{caption: '', src: '/assets/img/gallery/2013/005.jpg'}, {alt: '', src: '/assets/img/gallery/2013/005.jpg'},
{caption: '', src: '/assets/img/gallery/2013/006.jpg'}, {alt: '', src: '/assets/img/gallery/2013/006.jpg'},
]}, {album: '2012', photos: [ ]}, {album: '2012', photos: [
{caption: '', src: '/assets/img/gallery/2012/001.jpg'}, {alt: '', src: '/assets/img/gallery/2012/001.jpg'},
{caption: '', src: '/assets/img/gallery/2012/002.jpg'}, {alt: '', src: '/assets/img/gallery/2012/002.jpg'},
{caption: '', src: '/assets/img/gallery/2012/003.jpg'}, {alt: '', src: '/assets/img/gallery/2012/003.jpg'},
{caption: '', src: '/assets/img/gallery/2012/004.jpg'}, {alt: '', src: '/assets/img/gallery/2012/004.jpg'},
{caption: '', src: '/assets/img/gallery/2012/005.jpg'}, {alt: '', src: '/assets/img/gallery/2012/005.jpg'},
{caption: '', src: '/assets/img/gallery/2012/006.jpg'}, {alt: '', src: '/assets/img/gallery/2012/006.jpg'},
{caption: '', src: '/assets/img/gallery/2012/007.jpg'}, {alt: '', src: '/assets/img/gallery/2012/007.jpg'},
{caption: '', src: '/assets/img/gallery/2012/008.jpg'}, {alt: '', src: '/assets/img/gallery/2012/008.jpg'},
{caption: '', src: '/assets/img/gallery/2012/009.jpg'}, {alt: '', src: '/assets/img/gallery/2012/009.jpg'},
{caption: '', src: '/assets/img/gallery/2012/010.jpg'}, {alt: '', src: '/assets/img/gallery/2012/010.jpg'},
{caption: '', src: '/assets/img/gallery/2012/011.jpg'}, {alt: '', src: '/assets/img/gallery/2012/011.jpg'},
{caption: '', src: '/assets/img/gallery/2012/012.jpg'}, {alt: '', src: '/assets/img/gallery/2012/012.jpg'},
{caption: '', src: '/assets/img/gallery/2012/013.jpg'}, {alt: '', src: '/assets/img/gallery/2012/013.jpg'},
{caption: '', src: '/assets/img/gallery/2012/014.jpg'}, {alt: '', src: '/assets/img/gallery/2012/014.jpg'},
{caption: '', src: '/assets/img/gallery/2012/015.jpg'}, {alt: '', src: '/assets/img/gallery/2012/015.jpg'},
{caption: '', src: '/assets/img/gallery/2012/016.jpg'}, {alt: '', src: '/assets/img/gallery/2012/016.jpg'},
]}, {album: '2011', photos: [ ]}, {album: '2011', photos: [
{caption: '', src: '/assets/img/gallery/2011/001.jpg'}, {alt: '', src: '/assets/img/gallery/2011/001.jpg'},
{caption: '', src: '/assets/img/gallery/2011/002.jpg'}, {alt: '', src: '/assets/img/gallery/2011/002.jpg'},
{caption: '', src: '/assets/img/gallery/2011/003.jpg'}, {alt: '', src: '/assets/img/gallery/2011/003.jpg'},
{caption: '', src: '/assets/img/gallery/2011/004.jpg'}, {alt: '', src: '/assets/img/gallery/2011/004.jpg'},
{caption: '', src: '/assets/img/gallery/2011/005.jpg'}, {alt: '', src: '/assets/img/gallery/2011/005.jpg'},
{caption: '', src: '/assets/img/gallery/2011/006.jpg'}, {alt: '', src: '/assets/img/gallery/2011/006.jpg'},
]}, {album: '2010', photos: [ ]}, {album: '2010', photos: [
{caption: '', src: '/assets/img/gallery/2010/001.jpg'}, {alt: '', src: '/assets/img/gallery/2010/001.jpg'},
{caption: '', src: '/assets/img/gallery/2010/002.jpg'}, {alt: '', src: '/assets/img/gallery/2010/002.jpg'},
{caption: '', src: '/assets/img/gallery/2010/003.jpg'}, {alt: '', src: '/assets/img/gallery/2010/003.jpg'},
{caption: '', src: '/assets/img/gallery/2010/004.jpg'}, {alt: '', src: '/assets/img/gallery/2010/004.jpg'},
{caption: '', src: '/assets/img/gallery/2010/005.jpg'}, {alt: '', src: '/assets/img/gallery/2010/005.jpg'},
{caption: '', src: '/assets/img/gallery/2010/006.jpg'}, {alt: '', src: '/assets/img/gallery/2010/006.jpg'},
{caption: '', src: '/assets/img/gallery/2010/007.jpg'}, {alt: '', src: '/assets/img/gallery/2010/007.jpg'},
{caption: '', src: '/assets/img/gallery/2010/008.jpg'}, {alt: '', src: '/assets/img/gallery/2010/008.jpg'},
{caption: '', src: '/assets/img/gallery/2010/009.jpg'}, {alt: '', src: '/assets/img/gallery/2010/009.jpg'},
{caption: '', src: '/assets/img/gallery/2010/010.jpg'}, {alt: '', src: '/assets/img/gallery/2010/010.jpg'},
{caption: '', src: '/assets/img/gallery/2010/011.jpg'}, {alt: '', src: '/assets/img/gallery/2010/011.jpg'},
{caption: '', src: '/assets/img/gallery/2010/012.jpg'}, {alt: '', src: '/assets/img/gallery/2010/012.jpg'},
{caption: '', src: '/assets/img/gallery/2010/013.jpg'}, {alt: '', src: '/assets/img/gallery/2010/013.jpg'},
]}, {album: '2009', photos: [ ]}, {album: '2009', photos: [
{caption: '', src: '/assets/img/gallery/2009/001.jpg'}, {alt: '', src: '/assets/img/gallery/2009/001.jpg'},
{caption: '', src: '/assets/img/gallery/2009/002.jpg'}, {alt: '', src: '/assets/img/gallery/2009/002.jpg'},
{caption: '', src: '/assets/img/gallery/2009/003.jpg'}, {alt: '', src: '/assets/img/gallery/2009/003.jpg'},
{caption: '', src: '/assets/img/gallery/2009/004.jpg'}, {alt: '', src: '/assets/img/gallery/2009/004.jpg'},
{caption: '', src: '/assets/img/gallery/2009/005.jpg'}, {alt: '', src: '/assets/img/gallery/2009/005.jpg'},
{caption: '', src: '/assets/img/gallery/2009/006.jpg'}, {alt: '', src: '/assets/img/gallery/2009/006.jpg'},
{caption: '', src: '/assets/img/gallery/2009/007.jpg'}, {alt: '', src: '/assets/img/gallery/2009/007.jpg'},
{caption: '', src: '/assets/img/gallery/2009/008.jpg'}, {alt: '', src: '/assets/img/gallery/2009/008.jpg'},
{caption: '', src: '/assets/img/gallery/2009/009.jpg'}, {alt: '', src: '/assets/img/gallery/2009/009.jpg'},
{caption: '', src: '/assets/img/gallery/2009/010.jpg'}, {alt: '', src: '/assets/img/gallery/2009/010.jpg'},
{caption: '', src: '/assets/img/gallery/2009/011.jpg'}, {alt: '', src: '/assets/img/gallery/2009/011.jpg'},
{caption: '', src: '/assets/img/gallery/2009/012.jpg'}, {alt: '', src: '/assets/img/gallery/2009/012.jpg'},
]}, {album: '2008', photos: [ ]}, {album: '2008', photos: [
{caption: '', src: '/assets/img/gallery/2008/001.jpg'}, {alt: '', src: '/assets/img/gallery/2008/001.jpg'},
{caption: '', src: '/assets/img/gallery/2008/002.jpg'}, {alt: '', src: '/assets/img/gallery/2008/002.jpg'},
{caption: '', src: '/assets/img/gallery/2008/003.jpg'}, {alt: '', src: '/assets/img/gallery/2008/003.jpg'},
{caption: '', src: '/assets/img/gallery/2008/004.jpg'}, {alt: '', src: '/assets/img/gallery/2008/004.jpg'},
{caption: '', src: '/assets/img/gallery/2008/005.jpg'}, {alt: '', src: '/assets/img/gallery/2008/005.jpg'},
{caption: '', src: '/assets/img/gallery/2008/006.jpg'}, {alt: '', src: '/assets/img/gallery/2008/006.jpg'},
{caption: '', src: '/assets/img/gallery/2008/007.jpg'}, {alt: '', src: '/assets/img/gallery/2008/007.jpg'},
{caption: '', src: '/assets/img/gallery/2008/008.jpg'}, {alt: '', src: '/assets/img/gallery/2008/008.jpg'},
]}, {album: '2007', photos: [ ]}, {album: '2007', photos: [
{caption: '', src: '/assets/img/gallery/2007/001.jpg'}, {alt: '', src: '/assets/img/gallery/2007/001.jpg'},
{caption: '', src: '/assets/img/gallery/2007/002.jpg'}, {alt: '', src: '/assets/img/gallery/2007/002.jpg'},
{caption: '', src: '/assets/img/gallery/2007/003.jpg'}, {alt: '', src: '/assets/img/gallery/2007/003.jpg'},
{caption: '', src: '/assets/img/gallery/2007/004.jpg'}, {alt: '', src: '/assets/img/gallery/2007/004.jpg'},
{caption: '', src: '/assets/img/gallery/2007/005.jpg'}, {alt: '', src: '/assets/img/gallery/2007/005.jpg'},
{caption: '', src: '/assets/img/gallery/2007/006.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}
});
}
} }

23
src/app/views/reenact/maintinance/maintenance.component.html
View File

@@ -1,6 +1,6 @@
<div class="invert"> <div class="invert">
<div class="cap-width py-5 px-3"> <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"> <div class="d-flex align-items-end justify-content-between mb-2">
<h1 class="mb-0">Equipment Maintenance</h1> <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()"> <a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
@@ -8,15 +8,16 @@
Print Print
</a> </a>
</div> </div>
<mat-divider></mat-divider>
</div> </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> <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> <ul>
<li>Wood</li> <li>Cloth</li>
<ul> <ul>
<li>Mineral Oil</li> <li>Lanolin</li>
<li>Linseed Oil</li>
</ul> </ul>
<li>Leather</li> <li>Leather</li>
<ul> <ul>
@@ -24,17 +25,25 @@
<li>Conditioner</li> <li>Conditioner</li>
<li>Lanolin</li> <li>Lanolin</li>
</ul> </ul>
<li>Wood</li>
<ul>
<li>Mineral Oil</li>
<li>Linseed Oil</li>
</ul>
<li>Metal</li>
<ul>
<li>Rust Removal</li> <li>Rust Removal</li>
<ul> <ul>
<li>White Wine Vinegar</li> <li>White Wine Vinegar</li>
</ul> </ul>
<li>Metal Preservation</li> <li>Preservation</li>
<ul> <ul>
<li>WD-40</li> <li>WD-40</li>
<li>Lanolin</li> <li>Lanolin</li>
<li>Wax</li> <li>Wax</li>
</ul> </ul>
</ul> </ul>
</ul>
</div> </div>
<div class="my-4 mb-5"> <div class="my-4 mb-5">
<div> <div>

0
src/assets/img/gallery/2013/004.JPG → src/assets/img/gallery/2013/004.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.3 MiB

After

Width:  |  Height:  |  Size: 7.3 MiB

0
src/assets/img/gallery/2014/002.JPG → src/assets/img/gallery/2014/002.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB