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

Graphic fixes & mobile navigation
All checks were successful
Build Website / Build NPM Project (push) Successful in 1m43s
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-09 11:45:37 -05:00
parent 5ec05c0f27
commit 1ab563ca96
18 changed files with 93 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/footer/footer.component.html
View File

@ -34,9 +34,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="py-2 text-center"> <div class="py-3 text-center">
<p class="copyright m-0"> <p class="copyright m-0">
Copyright &copy; Legio XXX 2023 | All Rights Reserved<br> Copyright &copy; Legio XXX 2024 | All Rights Reserved<br>
Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a> Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
</p> </p>
</div> </div>

51
src/app/components/navbar/navbar.component.html
View File

@ -7,36 +7,51 @@
</a> </a>
</div> </div>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<!-- Full NavBar -->
<div *ngIf="!hamburger"> <div *ngIf="!hamburger">
<a *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment" <a *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment"
(click)="item.fragment ? scroll(item.fragment) : null"> (click)="item.fragment ? scroll(item.fragment) : null">
<button mat-button class="navbar-button" aria-label="Menu">{{item.label}}</button> <button mat-button class="navbar-button" aria-label="Menu">{{item.label}}</button>
</a> </a>
<ng-container *ngFor="let group of links.other"> <ng-container *ngFor="let group of links.other">
<ng-template [ngTemplateOutlet]="navGroup" [ngTemplateOutletContext]="{'$implicit': group}"></ng-template> <button mat-button [matMenuTriggerFor]="menu" class="navbar-button">
{{group.label}} <mat-icon>expand_more</mat-icon>
</button>
<mat-menu #menu="matMenu">
<ng-container *ngFor="let section of group.children; let first = first">
<mat-divider *ngIf="!first"></mat-divider>
<button *ngFor="let item of section" mat-menu-item [routerLink]="item.url" [fragment]="item.fragment"
(click)="item.fragment ? scroll(item.fragment) : null">
{{item.label}}
</button>
</ng-container>
</mat-menu>
</ng-container> </ng-container>
<!-- <a href="#">-->
<!-- <button mat-button class="navbar-button">Donate</button>-->
<!-- </a>-->
</div> </div>
<button *ngIf="hamburger" mat-icon-button class="mr-3"> <!-- Mobile NavBar -->
<mat-icon (click)="hamburgerClick.emit()">menu</mat-icon> <button *ngIf="hamburger" mat-icon-button class="text-start" [matMenuTriggerFor]="menu">
<mat-icon>menu</mat-icon>
</button> </button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment"
(click)="item.fragment ? scroll(item.fragment) : null">{{item.label}}</button>
<ng-container *ngFor="let group of links.other">
<button mat-menu-item [matMenuTriggerFor]="menu">{{group.label}}</button>
<mat-menu #menu="matMenu">
<ng-container *ngFor="let section of group.children; let first = first">
<mat-divider *ngIf="!first"></mat-divider>
<button *ngFor="let item of section" mat-menu-item [routerLink]="item.url" [fragment]="item.fragment"
(click)="item.fragment ? scroll(item.fragment) : null">
{{item.label}}
</button>
</ng-container>
</mat-menu>
</ng-container>
</mat-menu>
</mat-toolbar-row> </mat-toolbar-row>
</mat-toolbar> </mat-toolbar>
<div class="navbar-spacing"><!-- Spacing --></div> <div class="navbar-spacing"><!-- Spacing --></div>
<ng-template #navGroup let-group> <ng-template #navGroup let-group>
<button mat-button [matMenuTriggerFor]="menu" class="navbar-button">
{{group.label}} <mat-icon>expand_more</mat-icon>
</button>
<mat-menu #menu="matMenu">
<ng-container *ngFor="let section of group.children; let first = first">
<mat-divider *ngIf="!first"></mat-divider>
<button *ngFor="let item of section" mat-menu-item [routerLink]="item.url" [fragment]="item.fragment"
(click)="item.fragment ? scroll(item.fragment) : null">
{{item.label}}
</button>
</ng-container>
</mat-menu>
</ng-template> </ng-template>

26
src/app/misc/navigation.ts
View File

@ -21,19 +21,19 @@ export const NAVIGATION: NavigationGroup = [
], [ ], [
{label: 'Calendar', url: '/events/calendar'}, {label: 'Calendar', url: '/events/calendar'},
]]}, ]]},
{label: 'Learn', children: [[ // {label: 'Learn', children: [[
{label: 'Trajan', url: '/info/trajan'}, // {label: 'Trajan', url: '/info/trajan'},
{label: 'Legio XXX', url: '/info/legio-xxx'}, // {label: 'Legio XXX', url: '/info/legio-xxx'},
{label: 'Legion Camp', url: '/info/camp'}, // {label: 'Legion Camp', url: '/info/camp'},
{label: 'Legion Headquarters', url: '/info/headquarters'}, // {label: 'Legion Headquarters', url: '/info/headquarters'},
{label: 'Legion Organization', url: '/info/organization'}, // {label: 'Legion Organization', url: '/info/organization'},
{label: 'Legionairy Equipment', url: '/info/equipment'}, // {label: 'Legionairy Equipment', url: '/info/equipment'},
{label: 'Legionairy Training', url: '/info/training'}, // {label: 'Legionairy Training', url: '/info/training'},
], [ // ], [
{label: 'Common Questions', url: '/info/questions'}, // {label: 'Common Questions', url: '/info/questions'},
{label: 'Glossary', url: '/info/glossary'}, // {label: 'Glossary', url: '/info/glossary'},
{label: 'Resources', url: '/info/resources'}, // {label: 'Resources', url: '/info/resources'},
]]}, // ]]},
{label: 'Reenact', children: [[ {label: 'Reenact', children: [[
{label: 'Getting Started', url: '/getting-started'}, {label: 'Getting Started', url: '/getting-started'},
{label: 'Rules & Regulations', url: '/rules'}, {label: 'Rules & Regulations', url: '/rules'},

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

@ -1,10 +1,10 @@
<div class="invert"> <div class="invert">
<div class="banner d-print-none"></div> <div class="banner d-print-none"></div>
<div class="container py-4 px-3"> <div class="container">
<div> <div>
<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">About</h1> <h1 class="mb-0">About</h1>
<a class="d-flex d-print-none 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()">
<mat-icon class="me-1">print</mat-icon> <mat-icon class="me-1">print</mat-icon>
Print Print
</a> </a>

2
src/app/views/about/about.component.scss
View File

@ -1,6 +1,6 @@
.banner { .banner {
width: 100%; width: 100%;
height: max(300px, 30vh); height: 50vh;
background: white url("/assets/img/castra.jpg") center 35% no-repeat; background: white url("/assets/img/castra.jpg") center 35% no-repeat;
background-size: cover; background-size: cover;
} }

6
src/app/views/events/aestiva/aestiva.component.html
View File

@ -1,10 +1,10 @@
<div class="invert"> <div class="invert">
<div class="banner d-print-none"></div> <div class="banner d-print-none"></div>
<div class="container py-4 px-3"> <div class="container">
<div> <div>
<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"><em>Castra Aestiva</em> (Summer Camp)</h1> <h1 class="mb-0"><em>Castra Aestiva</em> (Summer Camp)</h1>
<a class="d-flex d-print-none 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()">
<mat-icon class="me-1">print</mat-icon> <mat-icon class="me-1">print</mat-icon>
Print Print
</a> </a>
@ -21,7 +21,7 @@
<h2 class="mb-2">Details</h2> <h2 class="mb-2">Details</h2>
<p> <p>
Tom Ross hosts a Castra Aestiva event every Memorial Day weekend (in May) near Tillsonburg Ontario. It's a private multi-day training event involving Romans and their enemies and is the perfect opportunity for new Roman reenactors. Participants Tom Ross hosts a Castra Aestiva event every Memorial Day weekend (in May) near Tillsonburg Ontario. It's a private multi-day training event involving Romans and their enemies and is the perfect opportunity for new Roman reenactors. Participants
sleep in <em>sub pellibus</em> (tents) within the protective walls of the <em>castrum</em> (fort). If May doesn't work for you, consider coming to <a routerLink="/events/hiberna">Castra Hiberna</a> in September. sleep in <em>sub pellibus</em> (tents) within the protective walls of the <em>castrum</em> (fort). If May doesn't work for you, consider coming to <a routerLink="/events/castra-hiberna">Castra Hiberna</a> in September.
</p> </p>
<h3 class="mb-0">Activities</h3> <h3 class="mb-0">Activities</h3>
<ul class="mt-0"> <ul class="mt-0">

2
src/app/views/events/aestiva/aestiva.component.scss
View File

@ -1,6 +1,6 @@
.banner { .banner {
width: 100%; width: 100%;
height: max(300px, 30vh); height: 50vh;
background: white url("/assets/img/interior.jpg") center 35% no-repeat; background: white url("/assets/img/interior.jpg") center 35% no-repeat;
background-size: cover; background-size: cover;
} }

10
src/app/views/events/agonium/agonium.component.html
View File

@ -1,8 +1,14 @@
<div class="invert"> <div class="invert">
<div class="banner d-print-none"></div> <div class="banner d-print-none"></div>
<div class="container py-4 px-3"> <div class="container">
<div> <div>
<h1 class="mb-2"><em>Agonium</em> (Janus Festival)</h1> <div class="d-flex align-items-end justify-content-between mb-2">
<h1 class="mb-0"><em>Agonium</em> (Janus Festival)</h1>
<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
<mat-icon class="me-1">print</mat-icon>
Print
</a>
</div>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<br> <br>
</div> </div>

2
src/app/views/events/agonium/agonium.component.scss
View File

@ -1,6 +1,6 @@
.banner { .banner {
width: 100%; width: 100%;
height: max(300px, 30vh); height: 50vh;
background: white url("/assets/img/agonium.png") center center no-repeat; background: white url("/assets/img/agonium.png") center center no-repeat;
background-size: cover; background-size: cover;
} }

10
src/app/views/events/calendar/calendar.component.html
View File

@ -1,6 +1,12 @@
<div class="invert"> <div class="invert">
<div class="container py-4 px-3"> <div class="container">
<h1 class="mb-2">Calendar</h1> <div class="d-flex align-items-end justify-content-between mb-2">
<h1 class="mb-0">Calendar</h1>
<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
<mat-icon class="me-1">print</mat-icon>
Print
</a>
</div>
<mat-divider class="mb-4"></mat-divider> <mat-divider class="mb-4"></mat-divider>
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=America%2FToronto&showTitle=0&showNav=1&showPrint=1&showTabs=0&showCalendars=0&src=Y18wYTIxNTM3ZDgwMWMzNTQ0MTUwYzk5YTUwNjI5Yjc5MjM0MjYyYjY0YzYyNzZiZTQ3OWJlMzA4OWU0MmM3NTQ5QGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20&color=%23D50000" style="border-width:0" width="100%" height="600" frameborder="0" scrolling="no"></iframe> <iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=America%2FToronto&showTitle=0&showNav=1&showPrint=1&showTabs=0&showCalendars=0&src=Y18wYTIxNTM3ZDgwMWMzNTQ0MTUwYzk5YTUwNjI5Yjc5MjM0MjYyYjY0YzYyNzZiZTQ3OWJlMzA4OWU0MmM3NTQ5QGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20&color=%23D50000" style="border-width:0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
</div> </div>

6
src/app/views/events/hiberna/hiberna.component.html
View File

@ -1,10 +1,10 @@
<div class="invert"> <div class="invert">
<div class="banner d-print-none"></div> <div class="banner d-print-none"></div>
<div class="container py-4 px-3"> <div class="container">
<div> <div>
<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"><em>Castra Hiberna</em> (Winter Camp)</h1> <h1 class="mb-0"><em>Castra Hiberna</em> (Winter Camp)</h1>
<a class="d-flex d-print-none 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()">
<mat-icon class="me-1">print</mat-icon> <mat-icon class="me-1">print</mat-icon>
Print Print
</a> </a>
@ -22,7 +22,7 @@
<h2 class="mb-2">Details</h2> <h2 class="mb-2">Details</h2>
<p> <p>
Tom Ross hosts a Castra Hiberna event every September near Tillsonburg Ontario. It's a private single day event between Romans and their adversaries. It's an excellent opportunity for new Roman reenactors. If May doesn't work for you, consider coming to Tom Ross hosts a Castra Hiberna event every September near Tillsonburg Ontario. It's a private single day event between Romans and their adversaries. It's an excellent opportunity for new Roman reenactors. If May doesn't work for you, consider coming to
<a routerLink="/events/aestiva">Castra Aestiva</a> in May. <a routerLink="/events/castra-aestiva">Castra Aestiva</a> in May.
</p> </p>
<h3 class="mb-0">Activities</h3> <h3 class="mb-0">Activities</h3>
<ul class="mt-0"> <ul class="mt-0">

2
src/app/views/events/hiberna/hiberna.component.scss
View File

@ -1,6 +1,6 @@
.banner { .banner {
width: 100%; width: 100%;
height: max(300px, 30vh); height: 50vh;
background: white url("/assets/img/morning-mist.jpg") center center no-repeat; background: white url("/assets/img/morning-mist.jpg") center center no-repeat;
background-size: cover; background-size: cover;
} }

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

@ -50,7 +50,7 @@
</section> </section>
<!-- Recruitment --> <!-- Recruitment -->
<section id="recruitment" class="d-flex flex-column flex-md-row align-items-center justify-content-center fill invert"> <section id="recruitment" class="d-flex flex-column flex-md-row align-items-center justify-content-center fill invert">
<div class="flex-grow-1 p-5 pb-0 text-center text-md-end" style="flex-basis: 0"> <div class="flex-grow-1 mt-5 mt-md-0 p-5 pb-0 text-center text-md-end" style="flex-basis: 0">
<img src="/assets/img/recruitment.png" alt="I want you for Legio XXX" style="max-width: min(90%, 400px)"> <img src="/assets/img/recruitment.png" alt="I want you for Legio XXX" style="max-width: min(90%, 400px)">
</div> </div>
<div class="d-flex flex-grow-1 justify-content-start align-items-center" style="flex-basis: 0"> <div class="d-flex flex-grow-1 justify-content-start align-items-center" style="flex-basis: 0">
@ -74,7 +74,7 @@
</section> </section>
<!-- Contact --> <!-- Contact -->
<section id="contact" class="d-flex flex-column align-items-center justify-content-center fill"> <section id="contact" class="d-flex flex-column align-items-center justify-content-center fill">
<div> <div class="container">
<h2 class="text-center">Contact</h2> <h2 class="text-center">Contact</h2>
<div class="d-flex flex-row"> <div class="d-flex flex-row">
<form class="pe-3" style="width: min(100%, 600px)"> <form class="pe-3" style="width: min(100%, 600px)">

4
src/app/views/reenact/drill/drill.component.html
View File

@ -1,9 +1,9 @@
<div class="invert"> <div class="invert">
<div class="container py-4 px-3"> <div class="container">
<div> <div>
<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">Drill Commands</h1> <h1 class="mb-0">Drill Commands</h1>
<a class="d-flex d-print-none 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()">
<mat-icon class="me-1">print</mat-icon> <mat-icon class="me-1">print</mat-icon>
Print Print
</a> </a>

4
src/app/views/reenact/getting-started/getting-started.component.html
View File

@ -1,9 +1,9 @@
<div class="invert"> <div class="invert">
<div class="container py-4 px-3"> <div class="container">
<div> <div>
<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">Getting Started</h1> <h1 class="mb-0">Getting Started</h1>
<a class="d-flex d-print-none 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()">
<mat-icon class="me-1">print</mat-icon> <mat-icon class="me-1">print</mat-icon>
Print Print
</a> </a>

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

@ -1,9 +1,9 @@
<div class="invert"> <div class="invert">
<div class="container py-4 px-3"> <div class="container">
<div> <div>
<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-flex d-print-none 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()">
<mat-icon class="me-1">print</mat-icon> <mat-icon class="me-1">print</mat-icon>
Print Print
</a> </a>

4
src/app/views/reenact/rules/rules.component.html
View File

@ -1,9 +1,9 @@
<div class="invert"> <div class="invert">
<div class="container py-4 px-3"> <div class="container">
<div> <div>
<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">Rules & Regulations</h1> <h1 class="mb-0">Rules & Regulations</h1>
<a class="d-flex d-print-none 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()">
<mat-icon class="me-1">print</mat-icon> <mat-icon class="me-1">print</mat-icon>
Print Print
</a> </a>

7
src/styles.scss
View File

@ -62,6 +62,13 @@ h3 { font: 400 18px / 30px Roboto, "Helvetica Neue", sans-serif !important; }
max-width: 1200px; max-width: 1200px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 5rem 2rem;
}
@media print {
.container {
padding: 5rem 1rem;
}
} }
.invert { .invert {