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

Updated styling

Browse Source
This commit is contained in:
Zakary Timson
2022-09-24 17:54:51 -04:00
parent 0e76d7c1b1
commit 6b6765891b
25 changed files with 206 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/banner/banner.component.html
View File

@ -12,7 +12,7 @@
<mat-icon *ngIf="manual">play_arrow</mat-icon>
</div>
<div *ngIf="!manual" class="banner-seal d-flex flex-column align-items-center justify-content-center">
<img src="/assets/img/spqr.png" class="mt-5" alt="SPQR" height="250" width="250" style="filter: drop-shadow(2px 4px 6px black);">
<img src="/assets/img/eagle.png" class="mt-5" alt="SPQR" height="250" width="250" style="filter: drop-shadow(2px 4px 6px black);">
<div>
<a class="text-white" routerLink="" fragment="about">
<i class="fa fa-angle-double-down fa-4x" style="filter: drop-shadow(2px 4px 6px black);"></i>

2
src/app/components/banner/banner.component.scss
View File

@ -23,7 +23,7 @@
.banner-next {
position: absolute;
top: 50%;
right: 50px;
right: 26px;
transform: translate(-50%, -50%);
}

5
src/app/components/banner/banner.component.ts
View File

@ -1,13 +1,10 @@
import {
AfterViewInit,
Component,
ElementRef,
Host,
HostListener,
Input,
OnDestroy,
OnInit,
ViewChild
OnInit
} from '@angular/core';
import {interval, Subscription} from 'rxjs';
import {shuffle} from '../../misc/utils';

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

@ -1,7 +1,7 @@
<footer>
<div class="social text-center py-3">
<div class="social text-center py-3" style="background: #990000">
<h2 class="mb-4">Follow us on social media</h2>
<div class="d-flex justify-content-around mx-auto" style="max-width: 300px">
<div class="d-flex justify-content-around mx-auto transparent-link" style="max-width: 300px">
<a href="https://discord.gg/wW458KYR79" target="_blank">
<i class="fa-brands fa-discord fa-2xl"></i>
</a>
@ -18,47 +18,18 @@
<i class="fa-brands fa-youtube fa-2xl"></i>
</a>
</div>
<h3 class="mt-4 mb-0">so we can invade your feed</h3>
<h3 class="mt-4 mb-0">so we can invade your feed ⚔️</h3>
</div>
<div class="p-2" style="background: #333">
<div class="mx-auto d-flex justify-content-around" style="max-width: 800px">
<div>
<h2 class="sitemap-header">Home</h2>
<div style="background: #333">
<div class="mx-auto d-flex justify-content-center flex-wrap">
<div *ngFor="let group of navigation" class="m-3" style="min-width: 175px">
<h2 class="sitemap-header">{{group.label}}</h2>
<ul class="m-0">
<li><a routerLink="/">About</a></li>
<li><a routerLink="/">Contact</a></li>
<li><a routerLink="/">Gallery</a></li>
</ul>
</div>
<div>
<h2 class="sitemap-header">Events</h2>
<ul class="m-0">
<li><a routerLink="/">Castra Aestiva</a></li>
<li><a routerLink="/">Castra Hiberna</a></li>
<li><a routerLink="/">Callendar</a></li>
</ul>
</div>
<div>
<h2 class="sitemap-header">Learn</h2>
<ul class="m-0">
<li><a routerLink="/">Legio XXX</a></li>
<li><a routerLink="/">Legion Camp</a></li>
<li><a routerLink="/">Legion Headquarters</a></li>
<li><a routerLink="/">Legion Organization</a></li>
<li><a routerLink="/">Legionairy Equipment</a></li>
<li><a routerLink="/">Legionairy Training</a></li>
<li><a routerLink="/">Resources</a></li>
</ul>
</div>
<div>
<h2 class="sitemap-header">Members</h2>
<ul class="m-0">
<li><a routerLink="/">Getting Started</a></li>
<li><a routerLink="/">Rules & Regulations</a></li>
<li><a routerLink="/">Approved Vendors</a></li>
<li><a routerLink="/">Kit Assembly</a></li>
<li><a routerLink="/">Kit Maintinance</a></li>
<li><a routerLink="/">Login/Register</a></li>
<ng-container *ngFor="let section of group.children">
<li *ngFor="let item of section">
<a [routerLink]="item.url" [fragment]="item.fragment">{{item.label}}</a>
</li>
</ng-container>
</ul>
</div>
</div>

9
src/app/components/footer/footer.component.scss
View File

@ -8,16 +8,7 @@ ul {
margin: 0;
}
.social {
background: #7f0000;
a, a:visited { color: #fff; }
a:hover, a:visited:hover { color: rgba(255, 255, 255, 0.8); }
}
.copywright {
a, a:visited { color: #b10000; }
a:hover, a:visited:hover { color: #cc0000; }
}

5
src/app/components/footer/footer.component.ts
View File

@ -1,8 +1,11 @@
import {Component} from '@angular/core';
import {NAVIGATION} from '../../misc/navigation';
@Component({
selector: 'xxx-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
})
export class FooterComponent { }
export class FooterComponent {
navigation = NAVIGATION;
}

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

@ -1,51 +1,20 @@
<mat-toolbar>
<mat-toolbar-row>
<div>
<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner">
<img src="assets/img/capricorn.png" alt="Capricorn" height="45" width="45">
<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner" (click)="scroll('banner')">
<img src="assets/img/capricorn.png" alt="Capricorn" height="45px" width="45px">
<div class="px-2">LEGIO · XXX</div>
</a>
</div>
<div class="flex-grow-1"></div>
<div *ngIf="!hamburger">
<a routerLink="/" fragment="about"><button mat-button class="navbar-button">About</button></a>
<a routerLink="/" fragment="contact"><button mat-button class="navbar-button">Contact</button ></a>
<a routerLink="gallery"><button mat-button class="navbar-button">Gallery</button></a>
<button mat-button [matMenuTriggerFor]="eventsMenu" class="navbar-button">
Events <mat-icon>expand_more</mat-icon>
</button>
<mat-menu #eventsMenu="matMenu">
<button mat-menu-item>Castra Aestiva</button>
<button mat-menu-item>Castra Hiberna</button>
<mat-divider></mat-divider>
<button mat-menu-item>Calendar</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="learnMenu" class="navbar-button">
Learn <mat-icon>expand_more</mat-icon>
</button>
<mat-menu #learnMenu="matMenu">
<button mat-menu-item>Legio XXX</button>
<button mat-menu-item>Legion Camp</button>
<button mat-menu-item>Legion Headquarters</button>
<button mat-menu-item>Legion Organization</button>
<button mat-menu-item>Legionairy Equipment</button>
<button mat-menu-item>Legionairy Training</button>
<mat-divider></mat-divider>
<button mat-menu-item>Resources</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="membersMenu" class="navbar-button">
Members <mat-icon>expand_more</mat-icon>
</button>
<mat-menu #membersMenu="matMenu">
<button mat-menu-item>Getting Started</button>
<button mat-menu-item>Rules & Regulations</button>
<mat-divider></mat-divider>
<button mat-menu-item>Kit Assembly</button>
<button mat-menu-item>Kit Maintinance</button>
<button mat-menu-item>Trusted Vendors</button>
<mat-divider></mat-divider>
<button mat-menu-item>Login/Register</button>
</mat-menu>
<a *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment"
(click)="item.fragment ? scroll(item.fragment) : null">
<button mat-button class="navbar-button">{{item.label}}</button>
</a>
<ng-container *ngFor="let group of links.other">
<ng-template [ngTemplateOutlet]="navGroup" [ngTemplateOutletContext]="{'$implicit': group}"></ng-template>
</ng-container>
</div>
<button *ngIf="hamburger" mat-icon-button class="mr-3">
<mat-icon (click)="hamburgerClick.emit()">menu</mat-icon>
@ -53,3 +22,18 @@
</mat-toolbar-row>
</mat-toolbar>
<div class="navbar-spacing"><!-- Spacing --></div>
<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>

16
src/app/components/navbar/navbar.component.scss
View File

@ -19,19 +19,16 @@
color: #fff;
font-weight: lighter;
&:hover img {
filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg);
}
&:hover img { filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg); }
&:hover, &:visited:hover { color: #b10000; }
}
.navbar-button {
//color: rgba(255, 255, 255, 0.55);
color: rgba(255, 255, 255, 0.6);
font-weight: normal;
padding: 0 8px 0 8px;
//&:hover {
// color: rgba(255, 255, 255, 0.75);
//}
&:hover { color: #b10000; }
}
}
@ -48,11 +45,10 @@
}
button {
color: rgba(255, 255, 255, 0.6);
height: 36px;
line-height: 36px;
&:hover {
background: rgba(255, 255, 255, 0.15) !important;
}
&:hover { color: #b10000; }
}
}

8
src/app/components/navbar/navbar.component.ts
View File

@ -1,6 +1,7 @@
import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
import {filter, Subscription} from 'rxjs';
import {NAVIGATION} from '../../misc/navigation';
@Component({
selector: 'xxx-navbar',
@ -10,6 +11,11 @@ import {filter, Subscription} from 'rxjs';
export class NavbarComponent implements AfterViewInit, OnDestroy {
private sub!: Subscription;
links = {
topLevel: NAVIGATION[0].children[0],
other: NAVIGATION.slice(1)
}
@Input() hamburger = true;
@Output() hamburgerClick = new EventEmitter<void>();
@ -18,7 +24,9 @@ export class NavbarComponent implements AfterViewInit, OnDestroy {
ngAfterViewInit() {
this.sub = this.route.fragment.subscribe(frag => {
console.log('fire');
if(frag) this.scroll(frag);
else this.scroll('top');
});
}