diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 722c7b8..3fd7474 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,19 +7,26 @@ import { AppComponent } from './app.component'; import { routing } from './app.router'; import { HomeModule } from './home/home.module'; +import { StaffModule } from './staff/staff.module'; + +import { StaffDataService } from './staffdata.service'; +import { ResourcesComponent } from './resources/resources.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + ResourcesComponent ], imports: [ BrowserModule, FormsModule, HttpModule, HomeModule, + StaffModule, routing, ], providers: [ + StaffDataService ], bootstrap: [ AppComponent diff --git a/src/app/app.router.ts b/src/app/app.router.ts index a4a0f83..6478ead 100644 --- a/src/app/app.router.ts +++ b/src/app/app.router.ts @@ -1,6 +1,7 @@ import { RouterModule, Route } from '@angular/router'; import { ModuleWithProviders } from '@angular/core'; import { HomeModule } from './home/home.module'; +import { StaffModule } from './staff/staff.module'; const routes: Route[] = [ { diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css index 11700ae..9500ceb 100644 --- a/src/app/home/home.component.css +++ b/src/app/home/home.component.css @@ -623,7 +623,7 @@ nav .nav-right { nav .nav-right a { padding: 17px 8px; - color: #f5f5f9; + /*color: #f5f5f9;*/ text-decoration: none; transition: 0.2s all ease; } @@ -823,3 +823,4 @@ section:not(:last-of-type):after { .viewport-width { max-width: 100vw; } + diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 723055e..06e2523 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -27,8 +27,6 @@ import { routing } from './home.router'; import { EventsSectionService } from './events-section/events-section.service'; -import { StaffComponent } from '../staff/staff.component'; - @NgModule({ declarations: [ HomeComponent, @@ -38,8 +36,7 @@ import { StaffComponent } from '../staff/staff.component'; AboutSectionComponent, EventsSectionComponent, ContactSectionComponent, - FooterComponent, - StaffComponent + FooterComponent ], imports: [ CommonModule, @@ -52,7 +49,8 @@ import { StaffComponent } from '../staff/staff.component'; MatToolbarModule ], exports: [ - HomeComponent + HomeComponent, + NavbarComponent ], providers: [ EventsSectionService diff --git a/src/app/home/home.router.ts b/src/app/home/home.router.ts index 16b0d70..ac6643f 100644 --- a/src/app/home/home.router.ts +++ b/src/app/home/home.router.ts @@ -4,7 +4,7 @@ import { HomeComponent } from './home.component'; import { StaffComponent } from '../staff/staff.component'; const routes: Route[] = [ - { + { path: 'staff', pathMatch: 'full', component: StaffComponent diff --git a/src/app/home/navbar/navbar.component.html b/src/app/home/navbar/navbar.component.html index 8c8a81f..ce0b628 100644 --- a/src/app/home/navbar/navbar.component.html +++ b/src/app/home/navbar/navbar.component.html @@ -10,6 +10,7 @@ Events Board + Teams Contact @@ -25,7 +26,7 @@ Events Board - + Teams Contact CSES Logo diff --git a/src/app/resources/resources.component.css b/src/app/resources/resources.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/resources/resources.component.html b/src/app/resources/resources.component.html new file mode 100644 index 0000000..89e9a50 --- /dev/null +++ b/src/app/resources/resources.component.html @@ -0,0 +1,3 @@ +

+ resources works! +

diff --git a/src/app/resources/resources.component.spec.ts b/src/app/resources/resources.component.spec.ts new file mode 100644 index 0000000..8b3bbc7 --- /dev/null +++ b/src/app/resources/resources.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ResourcesComponent } from './resources.component'; + +describe('ResourcesComponent', () => { + let component: ResourcesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ResourcesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ResourcesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/resources/resources.component.ts b/src/app/resources/resources.component.ts new file mode 100644 index 0000000..95eeefc --- /dev/null +++ b/src/app/resources/resources.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-resources', + templateUrl: './resources.component.html', + styleUrls: ['./resources.component.css'] +}) +export class ResourcesComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/staff/staff.component.css b/src/app/staff/staff.component.css index e69de29..a7966e1 100644 --- a/src/app/staff/staff.component.css +++ b/src/app/staff/staff.component.css @@ -0,0 +1,38 @@ +* { + -webkit-border-radius: 0 !important; + -moz-border-radius: 0 !important; + border-radius: 0 !important; +} + +/* + Styling for teams-card-component +--------------------------------------------------------------------*/ + +.nav-separator { + height: 96px; +} + +.card-cover { + width: 90%; + margin: 0 auto; +} + +.card { + margin: 16px 16px; + width: 32rem; + background-color: #ecb213; + float: left; +} + +.card-specific-border { + margin: 4px 8px 0px 8px; +} + +.list-group { + margin-top: 4px; + margin-bottom: 0px; +} + +.card-img-top { + width: 100%; +} diff --git a/src/app/staff/staff.component.html b/src/app/staff/staff.component.html index 4af796b..7ded8ed 100644 --- a/src/app/staff/staff.component.html +++ b/src/app/staff/staff.component.html @@ -1,3 +1,8 @@ -

- staff works! -

+ +
+ + + + + + \ No newline at end of file diff --git a/src/app/staff/staff.component.ts b/src/app/staff/staff.component.ts index 74d76e9..c4cfe7f 100644 --- a/src/app/staff/staff.component.ts +++ b/src/app/staff/staff.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { TeamItem } from './teams-card/team-item'; @Component({ selector: 'app-staff', @@ -7,9 +8,20 @@ import { Component, OnInit } from '@angular/core'; }) export class StaffComponent implements OnInit { - constructor() { } + public tabMode:boolean = true; + public teamItem:TeamItem; + public teamList: Array; + + constructor() { + } ngOnInit() { } + tabModeChanger(tabDetails: [TeamItem, Array, boolean]) { + this.teamItem = tabDetails[0]; + this.teamList = tabDetails[1]; + this.tabMode = tabDetails[2]; + } + } diff --git a/src/app/staff/staff.module.ts b/src/app/staff/staff.module.ts new file mode 100644 index 0000000..c5d3668 --- /dev/null +++ b/src/app/staff/staff.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { StaffComponent } from './staff.component'; + +import { HomeModule } from '../home/home.module'; +import { TeamsCardComponent } from './teams-card/teams-card.component'; +import { TeamsJumbotronComponent } from './teams-jumbotron/teams-jumbotron.component'; + +@NgModule({ + imports: [ + CommonModule, + HomeModule + ], + declarations: [ + StaffComponent, + TeamsCardComponent, + TeamsJumbotronComponent + ], + exports: [ + StaffComponent + ], +}) +export class StaffModule { } diff --git a/src/app/staff/teams-card/team-item.ts b/src/app/staff/teams-card/team-item.ts new file mode 100644 index 0000000..634cb8b --- /dev/null +++ b/src/app/staff/teams-card/team-item.ts @@ -0,0 +1,40 @@ +import { StaffComponent } from '../../staff/staff.component'; + + +/** + * Contains team-specific data + */ +class TeamData { + title: string; + desc: string; + events: string[]; + members: string[]; + imgPath: string; +} + +/** + * Holds all the properties of a team - access methods and data. + */ +class TeamItem extends TeamData { + /** + * Simple constructor; allows you to initialize object from a parent object. + * @param {TeamsData} + */ + constructor(teamData?: TeamData) { + super(); + + if (teamData) { + this.title = teamData.title; + this.desc = teamData.desc; + this.events = teamData.events; + this.members = teamData.members; + this.imgPath = teamData.imgPath; + } + } + + buttonClicked() { + + } +} + +export { TeamItem } diff --git a/src/app/staff/teams-card/teams-card.component.html b/src/app/staff/teams-card/teams-card.component.html new file mode 100644 index 0000000..71e19de --- /dev/null +++ b/src/app/staff/teams-card/teams-card.component.html @@ -0,0 +1,19 @@ +
+
+ Card image cap +
+

{{item.title}}

+

{{item.desc}}

+
+
    +
  • + {{event}} +
    • +
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/staff/teams-card/teams-card.component.ts b/src/app/staff/teams-card/teams-card.component.ts new file mode 100644 index 0000000..1c46783 --- /dev/null +++ b/src/app/staff/teams-card/teams-card.component.ts @@ -0,0 +1,37 @@ +import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core'; +import { TeamItem } from './team-item'; + +import { StaffDataService } from '../../staffdata.service'; + +@Component({ + selector: 'app-teams-card', + templateUrl: './teams-card.component.html', + styleUrls: ['../staff.component.css'] +}) +export class TeamsCardComponent implements OnInit { + + @Output() tabModeChanger:EventEmitter<[TeamItem, Array, boolean]> = + new EventEmitter<[TeamItem, Array, boolean]>(); + + teamList: Array; + teamItem: TeamItem; + staffService: StaffDataService; + + constructor(staffService: StaffDataService) { + this.staffService = staffService; + } + + ngOnInit() { + this.teamList = this.staffService.fetchTeamsFromJSON(); + } + + getTeams() { + return this.teamList; + } + + onBtnClick(item: TeamItem) { + this.teamItem = item; + this.tabModeChanger.emit([item, this.teamList, false]); + item.buttonClicked(); + } +} diff --git a/src/app/staff/teams-jumbotron/teams-jumbotron.component.css b/src/app/staff/teams-jumbotron/teams-jumbotron.component.css new file mode 100644 index 0000000..09e2e86 --- /dev/null +++ b/src/app/staff/teams-jumbotron/teams-jumbotron.component.css @@ -0,0 +1,126 @@ +.wrapper { + height: 800px; + background: #FAFAFA; +} + +#sidebar { + min-width: 250px; + max-width: 250px; + float: left; + height: 100%; + background: #178CB0; + color: white; + padding-left: 8px; +} + +#sidebar.active { + min-width: 80px; + max-width: 80px; + text-align: center; +} + +#sidebar .sidebar-header strong { + display: none; + margin: 0 32px; +} +#sidebar.active .sidebar-header h3 { + display: none; + margin: 0 32px; +} +#sidebar.active .sidebar-header strong { + display: block; + margin: 0 32px; +} + +#sidebar ul li a { + text-align: left; + display: block; + color: white; + margin: 16px 0; +} + +#sidebar.active ul li a { + padding: 20px 10px; + text-align: center; + font-size: 0.85em; + display: block; + color: white; +} + +#sidebar.active ul li a i { + margin-right: 0; + display: block; + font-size: 1.8em; + margin-bottom: 5px; +} + +#sidebar.active ul ul a { + padding: 10px !important; +} + +#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before { + top: auto; + bottom: 5px; + right: 50%; + transform: translateX(50%); +} + +@media (max-width: 768px) { + /* 80px and its content aligned to centre. Pushing it off the screen with the + negative left margin + */ + #sidebar.active { + min-width: 80px; + max-width: 80px; + text-align: center; + margin-left: -80px !important; + } + + + /* Reappearing the sidebar on toggle button click */ + #sidebar { + margin-left: 0; + } + + + /* Toggling the sidebar header content, + hide the big heading [h3] and showing the small heading [strong] and vice versa + */ + #sidebar .sidebar-header strong { + display: none; + } + #sidebar.active .sidebar-header h3 { + display: none; + } + #sidebar.active .sidebar-header strong { + display: block; + } + + /* Downsize the navigation links font size */ + #sidebar.active ul li a { + padding: 20px 10px; + font-size: 0.85em; + } + + #sidebar.active ul li a i { + margin-right: 0; + display: block; + font-size: 1.8em; + margin-bottom: 5px; + } + + /* Adjust the dropdown links padding*/ + #sidebar.active ul ul a { + padding: 10px !important; + } + + /* Changing the arrow position to bottom center position, + translateX(50%) works with right: 50% + to accurately center the arrow */ + #sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before { + top: auto; + bottom: 5px; + right: 50%; + transform: translateX(50%); + } +} \ No newline at end of file diff --git a/src/app/staff/teams-jumbotron/teams-jumbotron.component.html b/src/app/staff/teams-jumbotron/teams-jumbotron.component.html new file mode 100644 index 0000000..d5e186b --- /dev/null +++ b/src/app/staff/teams-jumbotron/teams-jumbotron.component.html @@ -0,0 +1,51 @@ +
+ + + +
+
+ +
\ No newline at end of file diff --git a/src/app/staff/teams-jumbotron/teams-jumbotron.component.ts b/src/app/staff/teams-jumbotron/teams-jumbotron.component.ts new file mode 100644 index 0000000..d83aa7a --- /dev/null +++ b/src/app/staff/teams-jumbotron/teams-jumbotron.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, Input } from '@angular/core'; +import {TeamItem} from '../teams-card/team-item'; + + +@Component({ + selector: 'app-teams-jumbotron', + templateUrl: './teams-jumbotron.component.html', + styleUrls: ['./teams-jumbotron.component.css'] +}) +export class TeamsJumbotronComponent implements OnInit { + + @Input() item:TeamItem; + @Input() teamList:Array; + + constructor() { } + + ngOnInit() { + console.log(this.item); + console.log(this.teamList); + } + +} diff --git a/src/app/staffdata.service.spec.ts b/src/app/staffdata.service.spec.ts new file mode 100644 index 0000000..7add56e --- /dev/null +++ b/src/app/staffdata.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { StaffDataService } from './staffdata.service'; + +describe('StaffdataService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [StaffDataService] + }); + }); + + it('should be created', inject([StaffDataService], (service: StaffDataService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/staffdata.service.ts b/src/app/staffdata.service.ts new file mode 100644 index 0000000..baca7ae --- /dev/null +++ b/src/app/staffdata.service.ts @@ -0,0 +1,64 @@ +import { Injectable } from '@angular/core'; +import { Http } from '@angular/http'; +import { TeamItem } from './staff/teams-card/team-item'; + +@Injectable() +export class StaffDataService { + + teamBlocks:Array> = []; + teamList:Array = [ + new TeamItem({ + title: "Web and Projects", + desc: "Cool stuff", + events: ["hello", "hi", "world"], + members: ["max,yixin,david,alex,prg"], + imgPath: "../../assets/images/staff-placeholder.jpg" + }), + new TeamItem({ + title: "Web and Projects", + desc: "Cool stuff", + events: ["hello", "hi", "world"], + members: ["max,yixin,david,alex,prg"], + imgPath: "../../assets/images/staff-placeholder.jpg" + }), + new TeamItem({ + title: "Web and Projects", + desc: "Cool stuff", + events: ["hello", "hi", "world"], + members: ["max,yixin,david,alex,prg"], + imgPath: "../../assets/images/staff-placeholder.jpg" + }), + new TeamItem({ + title: "Web and Projects", + desc: "Cool stuff", + events: ["hello", "hi", "world"], + members: ["max,yixin,david,alex,prg"], + imgPath: "../../assets/images/staff-placeholder.jpg" + }), + new TeamItem({ + title: "Web and Projects", + desc: "Cool stuff", + events: ["hello", "hi", "world"], + members: ["max,yixin,david,alex,prg"], + imgPath: "../../assets/images/staff-placeholder.jpg" + }), + new TeamItem({ + title: "Web and Projects", + desc: "Cool stuff", + events: ["hello", "hi", "world"], + members: ["max,yixin,david,alex,prg"], + imgPath: "../../assets/images/staff-placeholder.jpg" + }) + ]; + constructor(private http: Http) { } + + /* + * Fetches team details from a Google spreadsheet. To be done. Currently, using + * hardcoded data. + */ + fetchTeamsFromJSON():Array { + this.http.get('TODO - replace this with nodejs JSON API').subscribe(res => { + }); + return this.teamList; + } +} diff --git a/src/assets/images/staff-placeholder.jpg b/src/assets/images/staff-placeholder.jpg new file mode 100644 index 0000000..270f72b Binary files /dev/null and b/src/assets/images/staff-placeholder.jpg differ diff --git a/src/assets/images/team-details-placeholder.jpeg b/src/assets/images/team-details-placeholder.jpeg new file mode 100644 index 0000000..7ea6265 Binary files /dev/null and b/src/assets/images/team-details-placeholder.jpeg differ