From e6ff5641115a73b6d902a6b5690b45e2327c638a Mon Sep 17 00:00:00 2001 From: ztimson Date: Fri, 12 Jan 2024 12:04:59 -0500 Subject: [PATCH] Updated gallery --- src/app/app.module.ts | 8 +- .../carousel/carousel.component.html | 16 + .../carousel/carousel.component.scss | 117 +++++++ .../components/carousel/carousel.component.ts | 51 +++ .../image-viewer/image-viewer.component.ts | 41 +++ src/app/components/models/photo.ts | 4 + .../placeholder/placeholder.component.ts | 43 +++ src/app/material.module.ts | 2 + src/app/views/gallery/gallery.component.html | 4 +- src/app/views/gallery/gallery.component.scss | 4 + src/app/views/gallery/gallery.component.ts | 304 ++++++++++-------- .../maintinance/maintenance.component.html | 33 +- .../img/gallery/2013/{004.JPG => 004.jpg} | Bin .../img/gallery/2014/{002.JPG => 002.jpg} | Bin 14 files changed, 472 insertions(+), 155 deletions(-) create mode 100644 src/app/components/carousel/carousel.component.html create mode 100644 src/app/components/carousel/carousel.component.scss create mode 100644 src/app/components/carousel/carousel.component.ts create mode 100644 src/app/components/image-viewer/image-viewer.component.ts create mode 100644 src/app/components/models/photo.ts create mode 100644 src/app/components/placeholder/placeholder.component.ts create mode 100644 src/app/views/gallery/gallery.component.scss rename src/assets/img/gallery/2013/{004.JPG => 004.jpg} (100%) rename src/assets/img/gallery/2014/{002.JPG => 002.jpg} (100%) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0779d4b..e1ff9e7 100644 --- a/src/app/app.module.ts +++ b/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 ] diff --git a/src/app/components/carousel/carousel.component.html b/src/app/components/carousel/carousel.component.html new file mode 100644 index 0000000..34644a0 --- /dev/null +++ b/src/app/components/carousel/carousel.component.html @@ -0,0 +1,16 @@ +
+
+ keyboard_arrow_left +
+
+
+
+ +
+ keyboard_arrow_right +
+
+ pause + play_arrow +
+
diff --git a/src/app/components/carousel/carousel.component.scss b/src/app/components/carousel/carousel.component.scss new file mode 100644 index 0000000..9dc966c --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/components/carousel/carousel.component.ts b/src/app/components/carousel/carousel.component.ts new file mode 100644 index 0000000..e1cf3f5 --- /dev/null +++ b/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; + } +} diff --git a/src/app/components/image-viewer/image-viewer.component.ts b/src/app/components/image-viewer/image-viewer.component.ts new file mode 100644 index 0000000..14fa7c5 --- /dev/null +++ b/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: ` + + + ` +}) +export class ImageViewerComponent { + index!: number; + photos!: Photo[]; + + constructor(public ref: MatDialogRef, @Inject(MAT_DIALOG_DATA) data: ImageViewerOptions) { + this.index = data.index || 0; + this.photos = data.photos || []; + } +} diff --git a/src/app/components/models/photo.ts b/src/app/components/models/photo.ts new file mode 100644 index 0000000..0cc4714 --- /dev/null +++ b/src/app/components/models/photo.ts @@ -0,0 +1,4 @@ +export interface Photo { + alt: string; + src: string; +} diff --git a/src/app/components/placeholder/placeholder.component.ts b/src/app/components/placeholder/placeholder.component.ts new file mode 100644 index 0000000..14251bf --- /dev/null +++ b/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: ` +
+ + ` +}) +export class PlaceholderComponent { + loading = true; + + @Input() alt?: string; + @Input() src!: string; + @Input() style!: string; + @Input() height: string = 'auto'; + @Input() width: string = 'auto'; +} diff --git a/src/app/material.module.ts b/src/app/material.module.ts index 193ba21..6011383 100644 --- a/src/app/material.module.ts +++ b/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, diff --git a/src/app/views/gallery/gallery.component.html b/src/app/views/gallery/gallery.component.html index 5ecfd8d..f1d74d4 100644 --- a/src/app/views/gallery/gallery.component.html +++ b/src/app/views/gallery/gallery.component.html @@ -2,8 +2,8 @@

{{album.album}}

-
- +
+
diff --git a/src/app/views/gallery/gallery.component.scss b/src/app/views/gallery/gallery.component.scss new file mode 100644 index 0000000..dd79d89 --- /dev/null +++ b/src/app/views/gallery/gallery.component.scss @@ -0,0 +1,4 @@ +xxx-placeholder:hover ::ng-deep img { + transform: scale(1.1); + cursor: pointer; +} diff --git a/src/app/views/gallery/gallery.component.ts b/src/app/views/gallery/gallery.component.ts index 0f5cd41..4e00132 100644 --- a/src/app/views/gallery/gallery.component.ts +++ b/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} + }); + } } diff --git a/src/app/views/reenact/maintinance/maintenance.component.html b/src/app/views/reenact/maintinance/maintenance.component.html index 8a81d1f..6a44eac 100644 --- a/src/app/views/reenact/maintinance/maintenance.component.html +++ b/src/app/views/reenact/maintinance/maintenance.component.html @@ -1,6 +1,6 @@
-
+

Equipment Maintenance

@@ -8,15 +8,16 @@ Print
+
- +

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.

-

Table of Contents

+

Table of Contents

+
    -
  • Wood
    • +
  • Cloth
      • -
    • Mineral Oil
      • -
    • Linseed Oil
      • +
    • Lanolin
  • Leather
      • @@ -24,15 +25,23 @@
    • Conditioner
    • Lanolin
    -
  • Rust Removal
    • +
  • Wood
      • -
    • White Wine Vinegar
      • +
    • Mineral Oil
      • +
    • Linseed Oil
    -
  • Metal Preservation
    • +
  • Metal
      • -
    • WD-40
      • -
    • Lanolin
      • -
    • Wax
      • +
    • Rust Removal
      • +
        +
      • White Wine Vinegar
        • +
      +
    • Preservation
      • +
        +
      • WD-40
        • +
      • Lanolin
        • +
      • Wax
        • +
diff --git a/src/assets/img/gallery/2013/004.JPG b/src/assets/img/gallery/2013/004.jpg similarity index 100% rename from src/assets/img/gallery/2013/004.JPG rename to src/assets/img/gallery/2013/004.jpg diff --git a/src/assets/img/gallery/2014/002.JPG b/src/assets/img/gallery/2014/002.jpg similarity index 100% rename from src/assets/img/gallery/2014/002.JPG rename to src/assets/img/gallery/2014/002.jpg