Updated website look
All checks were successful
Build / Dependencies_NPM (push) Successful in 1m7s

This commit is contained in:
Zakary Timson 2023-07-27 13:04:10 -04:00
parent 334c8257c6
commit 7e116416ad
19 changed files with 201 additions and 174 deletions

View File

@ -1,27 +1,40 @@
# 291st JTF
[Clan page](https://291st.ca) for the 291st Joint Task Force
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.2.
---
> "Putting the Damned to Rest"
![Skull Sword and Globe Emblem](./src/assets/img/logo.png)
This is the clan [website](https://291st.ca) for the 291st Joint Task Force.
This project was generated using Angular 14.
## Table of Contents
[[_TOC_]]
<!-- TOC -->
* [291st JTF](#291st-jtf)
* [Table of Contents](#table-of-contents)
* [Prerequisites](#prerequisites)
* [Setup](#setup)
* [Cheatsheet](#cheatsheet)
<!-- TOC -->
## Prerequisites
- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
- [NodeJS 16](https://nodejs.org/en/)
- _[Docker](https://docs.docker.com/install/) (Optional)_
- [NodeJS](https://nodejs.org/en/)
- [Docker](https://docs.docker.com/install/)
## Setup
The project can either be run using NPM or Docker. NPM is recommended for development.
<details>
<summary>NPM</summary>
<summary>NPM (Development)</summary>
1. Install the dependencies: `npm install`
2. Start the Angular server: `npm run start`
</details>
<details>
<summary>Docker</summary>
<summary>Docker (Production)</summary>
1. Build the docker image: `docker build -t 291st:<TAG> .`
2. Start the new image: `docker run -p 4200:80 291st:<TAG>`

View File

@ -21,7 +21,7 @@
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"tsConfig": "tsconfig.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/assets"

View File

@ -1,8 +1,9 @@
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppRouting} from './app.routing';
import {DiscordComponent} from './components/discord/discord.component';
import {FooterComponent} from './components/footer/footer.component';
import {NavbarComponent} from './components/navbar/navbar.component';
import {ServersComponent} from './components/servers/servers.component';
import {AppComponent} from './containers/app/app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MaterialModule} from './material.module';
@ -10,9 +11,10 @@ import {HomeComponent} from './views/home/home.component';
export const APP_COMPONENTS = [
AppComponent,
HomeComponent,
DiscordComponent,
FooterComponent,
NavbarComponent
HomeComponent,
ServersComponent,
]
@NgModule({

View File

@ -0,0 +1,7 @@
import {Component} from '@angular/core';
@Component({
selector: 'app-discord',
template: `<iframe src="https://discordapp.com/widget?id=399625240927404033&theme=dark" width="100%" height="98%" allowtransparency="true" frameborder="0" style="min-height: 400px" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>`
})
export class DiscordComponent { }

View File

@ -1,7 +1,7 @@
<footer>
<div class="py-2 text-center">
<p class="copywright m-0">
Copyright &copy; 291st JTF 2022 | All Rights Reserved<br>
Copyright &copy; 291st JTF 2023 | All Rights Reserved<br>
Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
</p>
</div>

View File

@ -1,16 +0,0 @@
<mat-toolbar>
<mat-toolbar-row>
<div>
<a class="navbar-brand d-flex align-items-center" routerLink="/">
<div class="px-2">291st Joint Task Force</div>
</a>
</div>
<div class="flex-grow-1"></div>
<div *ngIf="!hamburger">
</div>
<button *ngIf="hamburger" mat-icon-button class="mr-3">
<mat-icon (click)="hamburgerClick.emit()">menu</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
<div class="navbar-spacing"><!-- Spacing --></div>

View File

@ -1,58 +0,0 @@
.navbar-spacing {
height: 64px;
width: 100%;
}
::ng-deep mat-toolbar {
background: #000 !important;
border-bottom: #fff solid 1px;
height: 64px;
position: fixed;
top: 0;
z-index: 100;
.mat-toolbar-row {
height: 100%;
}
.navbar-brand {
color: #fff;
//font-weight: lighter;
&:hover img {
filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg);
}
}
.navbar-button {
//color: rgba(255, 255, 255, 0.55);
font-weight: normal;
padding: 0 8px 0 8px;
//&:hover {
// color: rgba(255, 255, 255, 0.75);
//}
}
}
::ng-deep .mat-menu-content {
background: #000;
border: #fff solid 1px;
padding: 0 !important;
border-radius: 0.25rem;
mat-divider {
border-color: white;
margin-top: 0.2rem;
padding-bottom: 0.1rem;
}
button {
height: 36px;
line-height: 36px;
&:hover {
background: rgba(255, 255, 255, 0.15) !important;
}
}
}

View File

@ -1,34 +0,0 @@
import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Subscription} from 'rxjs';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements AfterViewInit, OnDestroy {
private sub!: Subscription;
@Input() hamburger = true;
@Output() hamburgerClick = new EventEmitter<void>();
constructor(private route: ActivatedRoute) { }
ngAfterViewInit() {
this.sub = this.route.fragment.subscribe(frag => {
if(frag) this.scroll(frag);
});
}
ngOnDestroy(): void {
if(this.sub) this.sub.unsubscribe();
}
scroll(id: string) {
const el = document.getElementById(id);
if(el) el.scrollIntoView({behavior: 'smooth'});
else setTimeout(() => this.scroll(id), 500);
}
}

View File

@ -0,0 +1,21 @@
<div *ngFor="let s of servers">
<div class="d-flex p-2">
<div class="flex-shrink-1 align-self-center">
<img *ngIf="s.icon" [src]="s.icon">
<mat-icon *ngIf="!s.icon">dns</mat-icon>
</div>
<div class="d-flex flex-column flex-grow-1">
<div mat-line>{{s.name}}</div>
<div mat-line class="text-muted">{{s.url}}</div>
<div *ngIf="s.mods" mat-line><a [href]="s.mods.link">{{s.mods.num}} mods</a></div>
</div>
<div class="d-flex flex-shrink-1 justify-content-end">
<mat-icon [style.visibility]="s.private ? 'visible' : 'hidden'" class="text-muted" matTooltip="Private" style="font-size: 14px">lock</mat-icon>
<div style="width: 12px; height: 12px; border-radius: 6px;"
[style.background-color]="s.online ? '#00FF00' : '#FF0000'"
[matTooltip]="s.online ? 'Online' : 'Offline'">
</div>
</div>
</div>
<mat-divider></mat-divider>
</div>

View File

@ -0,0 +1,48 @@
import {Component} from '@angular/core';
type Server = {
icon?: string;
name: string;
private: boolean;
online: boolean;
mods?: {num: number, link: string};
url: string;
}
@Component({
selector: 'app-servers',
templateUrl: './servers.component.html'
})
export class ServersComponent {
servers: Server[] = [{
name: 'Arma 3',
private: false,
online: false,
url: '291st.ca:2302'
}, {
name: 'Astroneer',
private: true,
online: false,
url: '291st.ca:7777'
}, {
name: 'Minecraft (Bedrock)',
private: true,
online: true,
url: '291st.ca:19132'
}, {
name: 'Minecraft (Java)',
private: true,
online: true,
url: '291st.ca:25565'
}, {
name: 'Valheim',
private: true,
online: true,
url: '291st.ca:2456'
}, {
name: 'V Rising',
private: true,
online: false,
url: '291st.ca:27015'
}]
}

View File

@ -1,5 +1,2 @@
<app-navbar [hamburger]="mobile"></app-navbar>
<div class="fill app-container">
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>

View File

@ -1,12 +1,16 @@
import {NgModule} from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatListModule} from '@angular/material/list';
import {MatTabsModule} from '@angular/material/tabs';
import {MatTooltipModule} from '@angular/material/tooltip';
export const MATERIAL_MODULES = [
MatButtonModule,
MatIconModule,
MatToolbarModule
MatListModule,
MatTabsModule,
MatTooltipModule,
];
@NgModule({

View File

@ -1,9 +1,38 @@
<section class="fill background d-flex flex-column flex-md-row">
<div class="flex-grow-1 p-3" style="flex-basis: 0">
<iframe src="https://discordapp.com/widget?id=399625240927404033&theme=dark" width="100%" height="100%" allowtransparency="true" frameborder="0" style="min-height: 500px" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
<div class="h-100 d-none d-sm-flex align-items-center justify-content-center" style="background: #000 url('/assets/img/helicopter.gif'); background-size: cover;">
<img src="/assets/img/logo.png" width="auto" height="60%" style="max-width: 60%">
</div>
<div class="flex-grow-1 p-3" style="flex-basis: 0">
<div class="d-flex d-sm-none align-items-center justify-content-center" style="background: #000 url('/assets/img/helicopter.gif'); background-size: cover;">
<img src="/assets/img/logo.png" width="auto" height="60%" style="max-width: 60%">
</div>
<div class="flex-grow-1 p-3" style="flex-basis: 0">
<div style="position: absolute; top: 2rem; left: 2rem;">
<h1 class="mb-1 stencil" style="font-size: 3rem">
291st
<span class="d-none d-sm-inline">Joint Task Force</span>
<span class="d-inline d-sm-none">JTF</span>
</h1>
<h2 class="d-none d-sm-block stencil">"Putting the Damned to Rest"</h2>
</div>
<div class="content">
<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" class="h-100" style="min-height: 400px">
<mat-tab class="h-100">
<ng-template mat-tab-label>
<mat-icon class="me-2">discord</mat-icon>
Discord
</ng-template>
<app-discord></app-discord>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="me-2">dns</mat-icon>
Servers
</ng-template>
<div class="d-flex justify-content-center">
<div class="pt-4" style="width: 300px">
<app-servers></app-servers>
</div>
</div>
</mat-tab>
</mat-tab-group>
</div>
</section>

View File

@ -1,3 +1,23 @@
.background {
background: url("/assets/img/291st-background.png") no-repeat center center;
.content {
text-align: center;
background-color: #202225;
position: relative;
display: block;
width: 100%;
}
@media(orientation: landscape) {
.content {
position: fixed;
right: 0;
top: 0;
width: 30vw;
height: calc(100% - 2rem);
margin: 1rem;
box-shadow: 6px 6px 5px black;
}
}
::ng-deep .mat-tab-body-wrapper {
height: 100%;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 MiB

View File

@ -4,17 +4,16 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- TODO: Description-->
<meta name="description" content="">
<meta name="description" content="291st Joint Task Force">
<meta name="author" content="Zak Timson">
<title>291st JTF</title>
<link href="assets/img/logo.png" rel="icon" type="image/png">
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Saira+Stencil+One" rel="stylesheet">
</head>
<body class="mat-typography" style="background: #000">

View File

@ -2,18 +2,18 @@
@include mat.core();
// hue. Available color palettes: https://material.io/design/color/
$LegioXXX-primary: mat.define-palette(mat.$red-palette, 900);
$LegioXXX-accent: mat.define-palette(mat.$indigo-palette, 900);
$LegioXXX-warn: mat.define-palette(mat.$orange-palette, 500);
$LegioXXX-theme: mat.define-dark-theme((
$JTF-primary: mat.define-palette(mat.$red-palette, 900);
$JTF-accent: mat.define-palette(mat.$indigo-palette, 900);
$JTF-warn: mat.define-palette(mat.$orange-palette, 500);
$JTF-theme: mat.define-dark-theme((
color: (
primary: $LegioXXX-primary,
accent: $LegioXXX-accent,
warn: $LegioXXX-warn,
primary: $JTF-primary,
accent: $JTF-accent,
warn: $JTF-warn,
)
));
@include mat.all-component-themes($LegioXXX-theme);
@include mat.all-component-themes($JTF-theme);
@import '~bootstrap/dist/css/bootstrap-utilities.min.css';
@ -39,16 +39,19 @@ body {
color: #fff;
font-family: Roboto, sans-serif;
margin: 0;
overflow: hidden;
}
a, a:visited {
text-decoration: none;
color: rgba(255, 255, 255, 0.6);
color: #3c0000;
}
a:hover, a:visited:hover { color: #b10000; }
a:hover, a:visited:hover { color: #550000; }
.fill {
height: 0;
min-height: calc(100vh - 64px);
}
.stencil {
font-family: Saira Stencil One !important;
}

View File

@ -1,15 +0,0 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}

View File

@ -1,9 +1,8 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"outDir": "./out-tsc/app",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
@ -17,6 +16,7 @@
"moduleResolution": "node",
"importHelpers": true,
"target": "es2020",
"types": [],
"module": "es2020",
"lib": [
"es2020",
@ -28,5 +28,12 @@
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}