diff --git a/public/static/icons/logos/fall-hacks-code_bg.svg b/public/static/icons/logos/fall-hacks-code_bg.svg new file mode 100644 index 00000000..73407203 --- /dev/null +++ b/public/static/icons/logos/fall-hacks-code_bg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 85cc662d..e7850c64 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -47,6 +47,12 @@ export const routes: Routes = [ loadComponent: () => import('./pages/events/events.component').then(m => m.EventsComponent), title: makeTitle('Events') }, + { + path: 'event-archives', + loadComponent: () => + import('pages/event-archives/event-archives.component').then(m => m.EventArchivesComponent), + title: makeTitle('Event Archives') + }, // Elections { path: 'elections', diff --git a/src/app/components/nav-bar/nav-entries.ts b/src/app/components/nav-bar/nav-entries.ts index 14887d8b..a6549162 100644 --- a/src/app/components/nav-bar/nav-entries.ts +++ b/src/app/components/nav-bar/nav-entries.ts @@ -1,6 +1,7 @@ import { CodeListItem } from '@csss-code/list/list-item/list-item.component'; import { IconDefinition } from '@fortawesome/angular-fontawesome'; import { + faBook, faChevronRight, faFile, faRoadBarrier, @@ -89,6 +90,12 @@ export const NAVBAR_ENTRIES: NavItem[] = [ label: 'Mountain Madness', icon: faUpRightFromSquare, href: 'https://new.sfucsss.org/mountain_madness/2024/index.html' + }, + { + key: 'events.archives', + label: 'Archives', + icon: faBook, + route: '/event-archives' } ] }, diff --git a/src/app/pages/event-archives/event-archives.component.html b/src/app/pages/event-archives/event-archives.component.html new file mode 100644 index 00000000..9c176389 --- /dev/null +++ b/src/app/pages/event-archives/event-archives.component.html @@ -0,0 +1,56 @@ + +
+

Event Archives

+

Here's a list of all the past pages the CSSS used to promote their events.

+

+ + Note: The links and the functionality of some of these pages were slightly altered, but + please be cautious clicking links within these sites. + +

+
+
+
+
+

Frosh

+
    + @for (year of froshYears; track year) { +
  • + {{ year }} +
    • + } +
+
+
+

Tech Fair

+
    + @for (year of techFairYears; track year) { +
  • + {{ year }} +
    • + } +
+
+
+

Fall Hacks

+
    + @for (year of fallHacksYears; track year) { +
  • + {{ year }} +
    • + } +
+
+
+

Mountain Madness

+
    + @for (year of mountainMadnessYears; track year) { +
  • + {{ year }} +
    • + } +
+
+
+
+ diff --git a/src/app/pages/event-archives/event-archives.component.scss b/src/app/pages/event-archives/event-archives.component.scss new file mode 100644 index 00000000..15b1af88 --- /dev/null +++ b/src/app/pages/event-archives/event-archives.component.scss @@ -0,0 +1,44 @@ +@use 'globals'; + +h2 { + display: flex; + align-items: center; + gap: 1rem; +} + +.events { + display: grid; + gap: 1rem; +} + +.event__list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); + gap: 1rem; +} + +.event__link { + text-align: center; + border: 1px black solid; + border-radius: 5px; + background-color: globals.$accent; + + &:hover { + background-color: globals.$accent1; + } + + > a { + display: block; + padding: 1rem; + } +} + +@media (prefers-reduced-motion: no-preference) { + .event__link { + transition: background-color 0.5s ease; + + &:active { + transform: scale(0.95); + } + } +} diff --git a/src/app/pages/event-archives/event-archives.component.spec.ts b/src/app/pages/event-archives/event-archives.component.spec.ts new file mode 100644 index 00000000..aa5b9eee --- /dev/null +++ b/src/app/pages/event-archives/event-archives.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EventArchivesComponent } from './event-archives.component'; + +describe('EventsArchiveComponent', () => { + let component: EventArchivesComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [EventArchivesComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(EventArchivesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/event-archives/event-archives.component.ts b/src/app/pages/event-archives/event-archives.component.ts new file mode 100644 index 00000000..62f24f51 --- /dev/null +++ b/src/app/pages/event-archives/event-archives.component.ts @@ -0,0 +1,26 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ArticleComponent } from '@csss-code/article/article.component'; +import { + FALL_HACKS_YEARS, + FROSH_YEARS, + MOUNTAIN_MADNESS_YEARS, + TECH_FAIR_YEARS +} from './events-archive.data'; + +@Component({ + selector: 'cs-event-archives', + imports: [ArticleComponent], + templateUrl: './event-archives.component.html', + styleUrl: './event-archives.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class EventArchivesComponent { + protected froshYears = FROSH_YEARS; + protected fallHacksYears = FALL_HACKS_YEARS; + protected techFairYears = TECH_FAIR_YEARS; + protected mountainMadnessYears = MOUNTAIN_MADNESS_YEARS; + + makeHref(event: string, year: number): string { + return `https://${event}.sfucsss.org/${year}`; + } +} diff --git a/src/app/pages/event-archives/events-archive.data.ts b/src/app/pages/event-archives/events-archive.data.ts new file mode 100644 index 00000000..8baf5b0e --- /dev/null +++ b/src/app/pages/event-archives/events-archive.data.ts @@ -0,0 +1,9 @@ +export const FROSH_YEARS = [ + 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012 +] as const; + +export const FALL_HACKS_YEARS = [2024, 2020] as const; + +export const TECH_FAIR_YEARS = [2024, 2023, 2022] as const; + +export const MOUNTAIN_MADNESS_YEARS = [2024, 2023, 2022, 2021, 2020, 2019] as const; diff --git a/src/app/services/application/applications.ts b/src/app/services/application/applications.ts index d3d18643..ece7f86f 100644 --- a/src/app/services/application/applications.ts +++ b/src/app/services/application/applications.ts @@ -101,6 +101,16 @@ export const routeApplicationMap: Map = new Map([ 6, { id: 6, + label: 'Event Archives', + activityKey: '', + key: 'event-archives', + route: '/event-archives' + } + ], + [ + 7, + { + id: 7, label: 'Elections', activityKey: '', key: 'elections', diff --git a/src/assets/icons/README.md b/src/assets/icons/README.md new file mode 100644 index 00000000..51a2e967 --- /dev/null +++ b/src/assets/icons/README.md @@ -0,0 +1,16 @@ +For some reason the Angular FontAwesome package doesn't document what an `IconDefinition`'s type +are, so I'm typing it out here. [ Angular FontAwesome Documentation ](https://github.com/FortAwesome/angular-fontawesome/blob/main/docs/guide/custom-icons.md) + +```typescript +export interface { + prefix: string; // The package the icon resides in (just use `csss` if you're not sure) + iconName: string; // The name of the icon to use when importing it + icon: [ + number, // viewBox width + number, // viewBox height + string[], // litgatures (not used in Angular FontAwesome, so just pass in an empty array) + string, // unicode (not used in Angular FontAwesome, so just pass in an empty string) + string | string[] // paths of the SVG + ] +} +``` diff --git a/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.html b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.html new file mode 100644 index 00000000..673d5fe1 --- /dev/null +++ b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.html @@ -0,0 +1,33 @@ + + + + diff --git a/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.scss b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.scss new file mode 100644 index 00000000..48f5c61c --- /dev/null +++ b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.scss @@ -0,0 +1,12 @@ +.bg { + color: black; +} + +.fg { + color: #00ff00; +} + +fa-stack { + width: 1.5em; + height: 1em; +} diff --git a/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.spec.ts b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.spec.ts new file mode 100644 index 00000000..0ba72262 --- /dev/null +++ b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FallHacksIconComponent } from './fall-hacks-icon.component'; + +describe('FallHacksIconComponent', () => { + let component: FallHacksIconComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FallHacksIconComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FallHacksIconComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.ts b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.ts new file mode 100644 index 00000000..8e54df65 --- /dev/null +++ b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.ts @@ -0,0 +1,19 @@ +import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'; + +@Component({ + selector: 'cs-fall-hacks-icon', + imports: [], + templateUrl: './fall-hacks-icon.component.html', + styleUrl: './fall-hacks-icon.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class FallHacksIconComponent { + bgColor = input(); + fgColor = input(); + width = input(); + height = input(); + protected _bgColor = computed(() => this.bgColor() ?? '#000'); + protected _fgColor = computed(() => this.fgColor() ?? '#0f0'); + protected _width = computed(() => this.width() ?? 64); + protected _height = computed(() => this.height() ?? 64); +} diff --git a/src/assets/icons/fall-hacks-icon/fall-hacks.svg.ts b/src/assets/icons/fall-hacks-icon/fall-hacks.svg.ts new file mode 100644 index 00000000..6c462932 --- /dev/null +++ b/src/assets/icons/fall-hacks-icon/fall-hacks.svg.ts @@ -0,0 +1,18 @@ +import { IconDefinition } from '@fortawesome/angular-fontawesome'; + +const bgPath = + 'm257 45-44 88a9 9 0 0 1-13 3l-44-25 28 141a9 9 0 0 1-15 8l-57-61-14 33a9 9 0 0 1-10 5l-73-15 25 77a9 9 0 0 1-4 10L7 323l127 102a9 9 0 0 1 2 10l-15 43h273l-16-43a9 9 0 0 1 3-10l126-102-28-14a9 9 0 0 1-5-10l25-77-73 15a9 9 0 0 1-10-5l-14-33-57 61a9 9 0 0 1-14-8l27-141-44 25a9 9 0 0 1-12-3z'; + +export const fallHacksBg: IconDefinition = { + prefix: 'csss', + iconName: 'fall-hacks-logo', + icon: [512, 512, [], '', bgPath] +}; + +const codePath = + 'M201 395 93 347v-16l108-54v26l-75 35 75 31zm101-138-59 160h-30l59-160zm11 112 75-31-75-35v-26l109 54v16l-109 48z'; +export const fallHacksCode: IconDefinition = { + prefix: 'csss', + iconName: 'fall-hacks-logo', + icon: [512, 512, [], '', codePath] +}; diff --git a/src/styles.scss b/src/styles.scss index 30be1f67..37081963 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -42,7 +42,9 @@ a.csss-link { article.content { line-height: 1.5; - header { + + hgroup:nth-child(1), + header:nth-child(1) { margin-top: 5svh; } diff --git a/src/ui/csss-code/button/button.component.scss b/src/ui/csss-code/button/button.component.scss index 2953494a..dc43372c 100644 --- a/src/ui/csss-code/button/button.component.scss +++ b/src/ui/csss-code/button/button.component.scss @@ -25,6 +25,3 @@ button { fa-icon { color: white; } - -button:hover { -}