Merge master to register

ISD-conference-web-app-frontend/angular.json

@@ -37,13 +37,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "1mb",
+                  "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "4kb",
-                  "maximumError": "10kb"
+                  "maximumError": "20kb"
                 }
               ],
               "fileReplacements": [

ISD-conference-web-app-frontend/src/app/app.component.html

@@ -1,8 +1,8 @@
 <div class="content-wrapper">
+    <span id="top-of-page"></span>
     <isd-header></isd-header>
     <div class="router-content">
         <router-outlet>
-
         </router-outlet>
     </div>
     <isd-footer></isd-footer>

ISD-conference-web-app-frontend/src/app/app.component.scss

@@ -12,6 +12,7 @@
     }
     .router-content {
         background-color: $white-darker;
+        padding-top: 50px;
         flex: 1;
     }
 }

ISD-conference-web-app-frontend/src/app/components/isd-ui/burger/burger.component.html

@@ -1,5 +1,17 @@
-<div class="burger" (click)="toggleNav()">
-    <span class="bar" [ngClass]="getAnimationClass('top-bar')"></span>
-    <span class="bar" [ngClass]="getAnimationClass('middle-bar')"></span>
-    <span class="bar" [ngClass]="getAnimationClass('bottom-bar')"></span>
+<div class="burger" (click)="onBurgerClickHandler()">
+    <span 
+        [ngStyle]="{'background-color': barsColor}" 
+        class="bar" 
+        [ngClass]="getAnimationClass('top-bar')">
+    </span>
+    <span
+        [ngStyle]="{'background-color': barsColor}" 
+        class="bar" 
+        [ngClass]="getAnimationClass('middle-bar')">
+    </span>
+    <span
+        [ngStyle]="{'background-color': barsColor}" 
+        class="bar" 
+        [ngClass]="getAnimationClass('bottom-bar')">
+    </span>
 </div>

ISD-conference-web-app-frontend/src/app/components/isd-ui/burger/burger.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { get } from 'lodash-es';
 import { NavService } from 'src/app/services/nav/nav.service';
 
 @Component({
@@ -9,25 +10,21 @@ import { NavService } from 'src/app/services/nav/nav.service';
 export class BurgerComponent implements OnInit {
   readonly CLOSED = 'closed';
   readonly OPENED = 'opened';
-  animationClass!: string;
+  @Input() barsColor: string = 'white';
+  @Input() animationClass!: string;
+  @Output() onBurgerClick = new EventEmitter<void>();
 
   constructor(private navService: NavService) { }
 
   ngOnInit(): void {
+    this.navService.animationClass$.subscribe(animationClass => {
+      this.animationClass = animationClass;
+    });
   }
 
-  toggleNav() {
-    this.navService.toggleBurgerNav();
-    this.setAnimationClass();
-  }
+  getAnimationClass = (className: string) => `${className}-${this.animationClass}`;
 
-  setAnimationClass = () => {
-    if(typeof this.animationClass === 'undefined'){
-      this.animationClass = this.CLOSED;
-      return;
-    }
-    this.animationClass = this.animationClass === this.OPENED ? this.CLOSED : this.OPENED;
+  onBurgerClickHandler = () => {
+    this.onBurgerClick.emit();
   }
-
-  getAnimationClass = (className: string) => `${className}-${this.animationClass}`;
 }

ISD-conference-web-app-frontend/src/app/components/isd-ui/footer/footer.component.html

@@ -33,7 +33,7 @@
     <div class="bottom-footer-wrapper">
         <section class="bottom-footer">
             <span class="copyright">&copy; ISD 2025 City, Country</span>
-            <a href="#top" class="backToTop"><span>Back to top</span><fa-icon [icon]="upIcon"></fa-icon></a>
+            <span (click)="scrollToElement($event, 'top-of-page')" class="backToTop"><span>Back to top</span><fa-icon [icon]="upIcon"></fa-icon></span>
         </section>
     </div>
 </footer>

ISD-conference-web-app-frontend/src/app/components/isd-ui/footer/footer.component.scss

@@ -79,6 +79,7 @@
                 @include simpleFlexLayout($direction: row, $align-items: center, $gap: 0.5*$default-gap);
                 &:hover {
                     color: white;
+                    cursor: pointer;
                 }
             }
         }

ISD-conference-web-app-frontend/src/app/components/isd-ui/footer/footer.component.ts

@@ -17,4 +17,13 @@ export class FooterComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  scrollToElement(event: Event, elementId: string): void {
+    event.preventDefault();
+    const element = document.getElementById(elementId);
+    console.log(element)
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+
 }

ISD-conference-web-app-frontend/src/app/components/isd-ui/header/header.component.html

@@ -1,4 +1,5 @@
-<header class="isd-header" id="top">
+<div class = "wrapper" [ngClass]="{'visible': isMenuVisible}" (window:scroll)="onScroll($event)">
+<header class="isd-header" id="top-header">
     <div class="logo">
         <div class="rectangle"></div>
         <div class="logo-container">
@@ -7,10 +8,11 @@
             </a>
         </div>
         <div class="burger-wrapper" *ngIf="displayBurgerNav()">
-            <isd-burger></isd-burger>
+            <isd-burger animationClass="animationClass" (onBurgerClick)="toggleBurgerNav()"></isd-burger>
         </div>
         <div class="triangle">
         </div>
     </div>
     <isd-nav></isd-nav>
 </header>
+</div>

ISD-conference-web-app-frontend/src/app/components/isd-ui/header/header.component.scss

@@ -1,11 +1,22 @@
 @import '../../../styles/isd-variables.scss';
 @import '../../../styles/isd-mixins.scss';
 
-.isd-header {
+
+.wrapper{
+    width:100%; //stretch the header so the bar looks okay when scrolling up
+    position:fixed;
+z-index: 1; //display header above anything else
+transition: 0.3s ease;
+visibility: hidden; //by default, the header is invisible, the .visible class handles making it visible
+top: -100px; 
+background-color: $white-darker;
+
+.isd-header {  
+
+    width:92%; 
     $logo-size: 70px;
     $padding-value: 4em;
     @include simpleFlexLayout($direction: row, $gap: 0);
-    position: relative;
 
     .logo {
         @include simpleFlexLayout($direction: row, $gap: 0);
@@ -25,6 +36,8 @@
             }
         }
     }
+
+
 
     .burger-wrapper {
         background-color: $primary-bg-color;
@@ -35,7 +48,7 @@
     }
 
     .triangle {
-        $triangle-size: calc($logo-size + 2rem);
+        $triangle-size: calc($logo-size + 3rem);
         width: 0; 
         height: 0; 
         border-left: $triangle-size solid  $primary-bg-color; 
@@ -44,3 +57,10 @@
     }
 
 }
+}
+
+.visible{
+    visibility:visible;
+    top: 0px 
+}
+

ISD-conference-web-app-frontend/src/app/components/isd-ui/header/header.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 import { NavService } from 'src/app/services/nav/nav.service';
 
 @Component({
@@ -7,12 +7,44 @@ import { NavService } from 'src/app/services/nav/nav.service';
   styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent implements OnInit {
+  burgerAnimationClass!: string;
+
   constructor(private navService: NavService) { }
 
   ngOnInit(): void {
+    this.navService.animationClass$.subscribe(animationClass => {
+      this.burgerAnimationClass = animationClass;
+    });
   }
 
   displayBurgerNav(): boolean {
     return this.navService.displayBurgerNav();
   }
+
+  isMenuVisible = true;
+  lastScrollTop = 0;
+
+  @HostListener('window:scroll', ['$event'])
+  onScroll(event: Event) {
+    let currentScroll = window.scrollY ;
+    let delta = 5;
+
+    //debonce the scroll
+  if(Math.abs(this.lastScrollTop - currentScroll) >= delta){
+    //if scrolling up, or if the user is on the top of the page show the header
+    if (currentScroll >= this.lastScrollTop && window.scrollY > 70) {
+      // Scrolling down
+      this.isMenuVisible = false;
+    } else {
+      // Scrolling up
+      this.isMenuVisible = true;
+    }
+
+    this.lastScrollTop = currentScroll;
+  }
+}
+
+  toggleBurgerNav = (): void => {
+    this.navService.toggleBurgerNav();
+  }
 }

ISD-conference-web-app-frontend/src/app/components/isd-ui/page-header/page-header.component.scss

@@ -2,9 +2,10 @@
 
 .page-header {
     width: 100%;
-    font-size: $font-size-huge;
+    font-size: $font-size-extra-huge;
     font-weight: bold;
     font-family: $roboto-header;
     text-align: center;
     padding-top: $content-gap-from-nav;
+    margin-bottom: 4*$default-gap;
 }

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/committees-page/chairs-list-item/chairs-list-item.component.html

@@ -1,5 +1,5 @@
 <div class="chair-list-item-wrapper">
-    <div class="chair-function">
+    <div *ngIf="displayTitle" class="chair-function">
         {{ chair.function }}
     </div>
     <div class="chairs-list-item">
@@ -19,7 +19,7 @@
                 <fa-icon [icon]="EMAIL_ICON"></fa-icon>
             </span>
             <span class="chair-social-link" title="See linkedin profile">
-                <a href="{{ chair.links.linkedin }}">
+                <a href="{{ chair.links.linkedin }}" target="_blank">
                     <fa-icon [icon]="LINKEDIN_ICON"></fa-icon>
                 </a>
             </span>

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/committees-page/chairs-list-item/chairs-list-item.component.ts

@@ -11,6 +11,7 @@ import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 })
 export class ChairsListItemComponent implements OnInit {
   @Input() chair!: Chair;
+  @Input() displayTitle = false;
   readonly ORCID_ICON = faOrcid;
   readonly LINKEDIN_ICON = faLinkedin;
   readonly EMAIL_ICON = faEnvelope;

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/committees-page/chairs-list/chairs-list.component.html

@@ -1,3 +1,3 @@
 <div class="chairs-list" id="{{ listId }}">
-    <isd-chairs-list-item *ngFor="let chair of chairs" [chair]="chair"></isd-chairs-list-item>
+    <isd-chairs-list-item *ngFor="let chair of chairs" [chair]="chair" [displayTitle]="true"></isd-chairs-list-item>
 </div>

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/committees-page/chairs-list/chairs-list.component.ts

@@ -14,7 +14,7 @@ export class ChairsListComponent implements OnInit {
   constructor(private csvDataService: CsvDataService) { }
 
   ngOnInit(): void {
-    this.csvDataService.getCommittiesData().subscribe(chairs => {
+    this.csvDataService.getOrganizingCommitteeData().subscribe(chairs => {
       this.chairs = chairs;
     })
   }

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/committees-page/committees-page.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from "@angular/common";
 import { RouterModule } from "@angular/router";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { UiComponentsModule } from "../../isd-ui/components.module";
+
 import { SideNavComponent } from './side-nav/side-nav.component';
 import { ChairsListComponent } from './chairs-list/chairs-list.component';
 import { ChairsListItemComponent } from './chairs-list-item/chairs-list-item.component';
@@ -11,6 +12,7 @@ import { FullTracksListItemComponent } from './full-tracks-list-item/full-tracks
 import { SideNavItemComponent } from './side-nav-item/side-nav-item.component';
 import { HttpClientModule } from "@angular/common/http";
 
+
 @NgModule({
     declarations: [
         SideNavComponent,

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/committees-page/full-tracks-list-item/full-tracks-list-item.component.html

@@ -1 +1,21 @@
-<p>full-tracks-list-item works!</p>
+<div class="track-container" id="{{track.name}}">
+    <isd-section-header>{{ track.name }}: {{ track.title }}</isd-section-header>
+    <section>
+        <isd-section-header class="header-smaller">Track Chairs</isd-section-header>
+        <div class="track-chairs">
+            <isd-chairs-list-item *ngFor="let chair of track.chairs" [chair]="chair"></isd-chairs-list-item>
+        </div>
+    </section>
+
+    <section>
+        <isd-section-header class="header-smaller">Program Committee</isd-section-header>
+        <div class="program-committee">
+            <ul class="pc-list">
+                <li *ngFor="let pcMember of track.committee">
+                    {{ pcMember.name }}, {{ pcMember.workplace ? pcMember.workplace.university : '' }}
+                </li>
+            </ul>
+        </div>
+    </section>
+
+</div>

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/committees-page/full-tracks-list-item/full-tracks-list-item.component.scss

@@ -0,0 +1,25 @@
+@import "../../../../styles/isd-mixins.scss";
+@import "../../../../styles/isd-variables.scss";
+
+.track-container {
+    .header-smaller {
+        font-size: 0.8em;
+    }
+
+    > section {
+        margin-top: $default-gap;
+        .track-chairs {
+            @include simpleFlexLayout(row);
+        }
+
+        .program-committee {
+            padding-left: 2rem;
+            .pc-list {
+                list-style-type: disc;
+                padding: 0;
+                margin: 0;
+            }
+        }
+    }
+
+}

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/committees-page/full-tracks-list-item/full-tracks-list-item.component.ts

@@ -1,11 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Track } from 'src/app/interfaces/Track';
 
 @Component({
   selector: 'isd-full-tracks-list-item',
   templateUrl: './full-tracks-list-item.component.html',
   styleUrls: ['./full-tracks-list-item.component.scss']
 })
 export class FullTracksListItemComponent implements OnInit {
+  @Input() track!: Track;
 
   constructor() { }
 

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/committees-page/full-tracks-list/full-tracks-list.component.html

@@ -1 +1,4 @@
-<p>full-tracks-list works!</p>
+<div class="tracks-list-wrapper">
+    <div class="tracks-list">
+        <isd-full-tracks-list-item *ngFor="let track of tracks" [track]="track"></isd-full-tracks-list-item>
+</div>