Merge branch '129-hot-bugfixes' into 'develop'

Hot Fixes first batch :-)

See merge request aligmara/riversurf-angular!104

Author: Stojanovic Igor

src/app/core/header/navigation/navigation.component.scss

@@ -7,14 +7,13 @@
     display: flex;
     justify-content: flex-end;
 
-    &__notification{
+    &__notification {
         margin-right: 1rem;
         @include respond(small) {
             display: none;
         }
     }
 
-
     &__checkbox {
         display: none;
     }
@@ -24,13 +23,14 @@
         position: relative;
         top: .4rem;
         right: 0;
-        z-index: 12;
         box-shadow: 0 1rem 3rem rgba($color-black, 0.1);
         text-align: center;
         cursor: pointer;
         outline: none;
+    }
 
-
+    &__button {
+        z-index: 12;
     }
 
     &__logout {
@@ -149,7 +149,7 @@
         }
     }
 
-    &__notification-menu{
+    &__notification-menu {
         display: none;
         @include respond(small) {
             display: inherit;
@@ -158,13 +158,15 @@
 
     &__checkbox:checked ~ &__background {
         height: 100vh;
+        position: fixed;
     }
 
     &__checkbox:checked ~ &__nav {
         width: 100vw;
         opacity: 1;
         left: 0;
     }
+
     &__checkbox:checked + &__button {
         background-color: transparent;
     }

src/app/core/services/surf-event.service.ts

@@ -104,6 +104,14 @@ export class SurfEventService {
         return this.surfEvents$;
     }
 
+    isUpcomingSurfEvent(startDateTime: string): boolean {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const startDate: Date = new Date(startDateTime);
+        startDate.setHours(0, 0, 0, 0);
+        return today < startDate;
+    }
+
     getEnrolledRiders(id: string): Observable<Rider[]> {
         return this.getSurfEvent(id).pipe(
             filter(surfEvent => surfEvent !== undefined),

src/app/riders/rider-profile/rider-timeline/rider-time-line.component.scss

@@ -9,6 +9,10 @@
     flex-direction: column;
     padding: 1rem;
 
+    @include respond(small) {
+        padding: 0rem;
+    }
+
     &__loading{
         flex: 100%;
         display: flex;
@@ -40,16 +44,9 @@
             }
 
             &-location {
-                display: inline-block;
-                margin-left: .3rem;
-                position: relative;
-                vertical-align: top;
                 font-weight: 400;
                 text-transform: uppercase;
-                padding: .3rem .5rem;
                 font-size: 1rem;
-                background-color: $color-primary;
-                color: $color-white;
                 border-radius: 1.5rem;
             }
 

src/app/riders/rider-profile/rider-timeline/time-line/time-line.component.scss

@@ -1,31 +1,20 @@
 @import "responsive";
 @import "variables";
+@import "mixins";
 
 $ongoing-color: #bb4444;
 $line-color: #b4bbe4;
 $line-width: 0.1rem;
 $line-dash-width: 0.35rem;
 
 .container {
-    display: grid;
-    grid-template-columns: min-content minmax(400px, 40%);
-
-    @include respond(medium) {
-        grid-template-columns: min-content minmax(max-content, 80%);
-    }
-
-    @include respond(small) {
-        grid-template-columns: min-content auto;
-    }
-    align-items: stretch;
+    display: flex;
 
     &__timeline {
-        grid-column: 1 / 2;
 
         &-viewbox{
             position: relative;
             height: 100%;
-
             min-width: 60px;
 
             svg{
@@ -59,9 +48,20 @@ $line-dash-width: 0.35rem;
     }
 
     &__details {
-        grid-column: 2 / 3;
         margin: 0.5rem 0;
-        position: relative;
+        min-width: 500px;
+
+        @include respond(medium) {
+            max-width: 400px;
+            min-width: 400px;
+        }
+
+        @include respond(small) {
+            max-width: 350px;
+            min-width: 250px;
+        }
+
+
 
         &__card {
             display: flex;
@@ -106,9 +106,7 @@ $line-dash-width: 0.35rem;
         }
 
         &__points {
-            padding: .5rem 1rem;
-            border: 1px solid $color-primary;
-            border-radius: 4px;
+            @include underline-magical;
             align-self: flex-end;
         }
     }

src/app/riders/rider-profile/rider-timeline/time-line/timeline-item.model.ts

@@ -6,109 +6,3 @@ export interface TimeLineItem {
     content: string;
     icon: TimeLineItemIcon;
 }
-
-export const DefaultTimeLineItem : TimeLineItem = {
-    title : "",
-    content : "",
-    time : new Date(),
-    icon : "default"
-}
-
-export const DefaultTimeLineItemsWinning: TimeLineItem[] = [{
-    title: "Rides in heat 2 of round 1",
-    content: "",
-    time: new Date(2021, 9, 11, 12, 1),
-    icon: "start"
-}, {
-    title: "Won heat 2 of round 1",
-    content: "Scored 30 points",
-    time: new Date(2021, 9, 11, 12, 34),
-    icon: "finish"
-}, {
-    title: "Rides in heat 3 of round 2",
-    content: "",
-    time: new Date(2021, 9, 11, 13, 15),
-    icon: "start"
-}, {
-    title: "Won heat 3 of round 2",
-    content: "Scored 24 points",
-    time: new Date(2021, 9, 11, 13, 41),
-    icon: "finish"
-}, {
-    title: "Rides in heat 1 of round 3",
-    content: "",
-    time: new Date(2021, 9, 11, 15, 20),
-    icon: "start"
-}, {
-    title: "Won heat 1 of round 3",
-    content: "Scored 41 points",
-    time: new Date(2021, 9, 11, 15, 59),
-    icon: "finish"
-}, {
-    title: "Won the competition",
-    content: "",
-    time: new Date(2021, 9, 11, 15, 59),
-    icon: "win"
-}
-]
-
-export const DefaultTimeLineItemsLosing: TimeLineItem[] = [{
-    title: "Rides in heat 2 of round 1",
-    content: "",
-    time: new Date(2020, 9, 11, 12, 1),
-    icon: "start"
-}, {
-    title: "Won heat 2 of round 1",
-    content: "Scored 30 points",
-    time: new Date(2020, 9, 11, 12, 34),
-    icon: "finish"
-}, {
-    title: "Rides in heat 3 of round 2",
-    content: "",
-    time: new Date(2020, 9, 11, 13, 15),
-    icon: "start"
-}, {
-    title: "Won heat 3 of round 2",
-    content: "Scored 24 points",
-    time: new Date(2020, 9, 11, 13, 41),
-    icon: "finish"
-}, {
-    title: "Rides in heat 1 of round 3",
-    content: "",
-    time: new Date(2020, 9, 11, 15, 20),
-    icon: "start"
-}, {
-    title: "Lost in heat 1 of round 3",
-    content: "Scored 12 points",
-    time: new Date(2020, 9, 11, 15, 59),
-    icon: "lose"
-}
-]
-
-export const DefaultTimeLineItemsOngoing: TimeLineItem[] = [{
-    title: "Rides in heat 2 of round 1",
-    content: "",
-    time: new Date(2021, 9, 11, 12, 1),
-    icon: "start"
-}, {
-    title: "Won heat 2 of round 1",
-    content: "Scored 30 points",
-    time: new Date(2021, 9, 11, 12, 34),
-    icon: "finish"
-}, {
-    title: "Rides in heat 3 of round 2",
-    content: "",
-    time: new Date(2021, 9, 11, 13, 15),
-    icon: "start"
-}, {
-    title: "Won heat 3 of round 2",
-    content: "Scored 24 points",
-    time: new Date(2021, 9, 11, 13, 41),
-    icon: "finish"
-}, {
-    title: "Rides in heat 1 of round 3",
-    content: "",
-    time: new Date(2021, 9, 11, 15, 20),
-    icon: "start"
-}
-]

src/app/riders/riders.component.html

@@ -2,17 +2,17 @@
     <div>
         <mat-button-toggle-group class="division-selector" aria-label="Division" #group="matButtonToggleGroup">
             <mat-button-toggle value="male" (change)="toggleDivision($event, group)" [checked]="division === 'male'"
-                               class="division-selector__item division-selector__item--male">
+                               class="division-selector__item division-selector__item division-male">
                 <mat-icon class="division-selector__item__icon">male</mat-icon>
                 <h2 class="division-selector__item__info">{{ maleCount }} Men</h2>
             </mat-button-toggle>
             <mat-button-toggle value="female" (change)="toggleDivision($event, group)" [checked]="division === 'female'"
-                               class="division-selector__item division-selector__item--female">
+                               class="division-selector__item division-selector__item division-female">
                 <mat-icon class="division-selector__item__icon" >female</mat-icon>
                     <h2 class="division-selector__item__info" >{{ femaleCount }} female</h2>
             </mat-button-toggle>
             <mat-button-toggle value="kid" (change)="toggleDivision($event, group)" [checked]="division === 'kid'"
-                               class="division-selector__item division-selector__item--kids">
+                               class="division-selector__item division-selector__item division-kid">
                 <mat-icon class="division-selector__item__icon">child_care</mat-icon>
                 <h2 class="division-selector__item__info">{{ kidCount }} kids </h2>
             </mat-button-toggle>

src/app/riders/riders.component.scss

@@ -24,18 +24,6 @@
             box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.1);
         }
 
-        &--male {
-            background-color: $color-male;
-        }
-
-        &--female {
-            background-color: $color-female;
-        }
-
-        &--kids {
-            background-color: $color-kids;
-        }
-
         &__info {
             color: $color-white;
             text-transform: uppercase;

src/app/shared/event-card/event-card.component.html

@@ -15,13 +15,24 @@
             </p>
         </mat-card-content>
         <div class="event__card__division">
-            <a mat-raised-button
-               *ngFor="let division of surfEvent.divisions"
-               class="division-{{division}}"
-               (click)="onClick($event)"
-               routerLink="/event/{{surfEvent.name | slugify}}-{{surfEvent.id}}/competition/{{ division }}">
-                {{division | titlecase}}
-            </a>
+            <ng-container *ngIf="!isUpcomingSurfEvent">
+                <a mat-raised-button
+                   *ngFor="let division of surfEvent.divisions"
+                   class="division-{{division}}"
+                   (click)="onClick($event)"
+                   routerLink="/event/{{surfEvent.name | slugify}}-{{surfEvent.id}}/competition/{{ division }}">
+                    <mat-icon>{{division | divisionIcon}}</mat-icon>
+                    {{division | titlecase}}
+                </a>
+            </ng-container>
+            <ng-container *ngIf="isUpcomingSurfEvent">
+                <a mat-stroked-button
+                   *ngFor="let division of surfEvent.divisions"
+                   class="division-{{division}} division-disabled">
+                    <mat-icon>{{division | divisionIcon}}</mat-icon>
+                    {{division | titlecase}}
+                </a>
+            </ng-container>
         </div>
     </mat-card>
 </a>

src/app/shared/event-card/event-card.component.scss

@@ -47,6 +47,12 @@
         a {
             color: $color-white;
             margin-right: 1rem;
+
+            @include respond(small) {
+                mat-icon {
+                    display: none;
+                }
+            }
         }
     }
 }

src/app/shared/event-card/event-card.component.ts

@@ -1,25 +1,22 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {SurfEvent} from "../../core/models/surf-event.model";
-import {Division} from "../../core/models/division.type";
+import {SurfEventService} from "../../core/services/surf-event.service";
 
 @Component({
     selector: 'rs-event-card',
     templateUrl: './event-card.component.html',
     styleUrls: ['./event-card.component.scss']
 })
-export class EventCardComponent {
+export class EventCardComponent implements OnInit {
     @Input()
     surfEvent!: SurfEvent;
+    isUpcomingSurfEvent!: boolean;
 
-    getColorOfDivision(division: Division) {
-        switch (division) {
-            case "male":
-                return 'primary'
-            case "female":
-                return 'accent'
-            case "kid":
-                return 'warn'
-        }
+    constructor(private surfEventService: SurfEventService) {
+    }
+
+    ngOnInit(): void {
+        this.isUpcomingSurfEvent = this.surfEventService.isUpcomingSurfEvent(this.surfEvent.startDateTime);
     }
 
     onClick(event: Event) {