From f6d6bd6e690204c0a1e63b6fc0ffc91572cd9064 Mon Sep 17 00:00:00 2001
From: Niray Mak <44868678+niraymak@users.noreply.github.com>
Date: Thu, 27 May 2021 21:23:20 +0200
Subject: [PATCH 1/7] added project recommendations to the home page.
 Recommendations only load in when the user is authenticated and when there
 are 2 or more recommendations to show

---
 CHANGELOG.md                                  | 1 +
 src/app/modules/home/home.module.ts           | 9 +++++++--
 src/app/modules/home/main/main.component.html | 1 +
 src/app/modules/project/project.module.ts     | 3 ++-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e50fd6d1..26b5d759 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 - Added search bar inside navbar with autocomplete suggested results. - [#403](https://github.com/DigitalExcellence/dex-frontend/issues/403)
 - Refactored the home page. [#380](https://github.com/DigitalExcellence/dex-frontend/issues/380)
+- Added project recommendations on the home page. [#497](https://github.com/DigitalExcellence/dex-frontend/issues/497)
 
 ### Changed
 
diff --git a/src/app/modules/home/home.module.ts b/src/app/modules/home/home.module.ts
index 0d836982..7ba1feb9 100644
--- a/src/app/modules/home/home.module.ts
+++ b/src/app/modules/home/home.module.ts
@@ -11,6 +11,8 @@ import { StripHtmlPipe } from 'src/app/utils/striptags.pipe';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { RecommendationCardsComponent } from './recommendations/recommendations.component';
+import { ProjectModule } from '../project/project.module';
 
 @NgModule({
   declarations: [
@@ -21,13 +23,16 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
     PartnersComponent,
     ContainerLeftComponent,
     ContainerRightComponent,
-    StripHtmlPipe
+    StripHtmlPipe,
+    RecommendationCardsComponent
+    
   ],
   imports: [
     CommonModule,
     PopoverModule.forRoot(),
     ModalModule.forRoot(),
-    TooltipModule.forRoot()
+    TooltipModule.forRoot(),
+    ProjectModule
   ]
 })
 export class HomeModule {
diff --git a/src/app/modules/home/main/main.component.html b/src/app/modules/home/main/main.component.html
index c6135143..5f5f3055 100644
--- a/src/app/modules/home/main/main.component.html
+++ b/src/app/modules/home/main/main.component.html
@@ -1,5 +1,6 @@
 <app-highlight-slider></app-highlight-slider>
 <app-info-cards></app-info-cards>
+<app-recommended-project-cards></app-recommended-project-cards>
 <app-who-is-dex></app-who-is-dex>
 <app-container-left></app-container-left>
 <app-partners></app-partners>
diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts
index 129e6136..84fbbf99 100644
--- a/src/app/modules/project/project.module.ts
+++ b/src/app/modules/project/project.module.ts
@@ -80,7 +80,8 @@ import { CollaboratorComponent } from './collaborator/collaborator.component';
   ],
   exports: [
     FileUploaderComponent,
-    SafeHtmlPipe
+    SafeHtmlPipe,
+    ProjectComponent
   ],
   providers: [Meta]
 })

From c6ee7103e1f9d38faad08d57c250c4a410cb53b8 Mon Sep 17 00:00:00 2001
From: Niray Mak <44868678+niraymak@users.noreply.github.com>
Date: Thu, 27 May 2021 21:23:50 +0200
Subject: [PATCH 2/7] forgot git add .

---
 .../recommendations.component.html            |  42 ++++++
 .../recommendations.component.scss            | 125 ++++++++++++++++++
 .../recommendations.component.ts              |  83 ++++++++++++
 src/app/services/recommendation.service.ts    |  39 ++++++
 4 files changed, 289 insertions(+)
 create mode 100644 src/app/modules/home/recommendations/recommendations.component.html
 create mode 100644 src/app/modules/home/recommendations/recommendations.component.scss
 create mode 100644 src/app/modules/home/recommendations/recommendations.component.ts
 create mode 100644 src/app/services/recommendation.service.ts

diff --git a/src/app/modules/home/recommendations/recommendations.component.html b/src/app/modules/home/recommendations/recommendations.component.html
new file mode 100644
index 00000000..28f15196
--- /dev/null
+++ b/src/app/modules/home/recommendations/recommendations.component.html
@@ -0,0 +1,42 @@
+<!--
+  Digital Excellence Copyright (C) 2020 Brend Smits
+   This program is free software: you can redistribute it and/or modify
+   it under the terms of the GNU Lesser General Public License as published
+   by the Free Software Foundation version 3 of the License.
+   This program is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty
+   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+   See the GNU Lesser General Public License for more details.
+   You can find a copy of the GNU Lesser General Public License
+   along with this program, in the LICENSE.md file in the root project directory.
+   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ -->
+
+<div class="recommendedProjects" *ngIf="isAuthenticated && recommendations.length > 2">
+  
+  <div class="inner">
+    <div class="text">
+      <h2>Recommended projects</h2>
+      <ng-container *ngIf="recommendations && recommendations.length > 0; else noHighlights">
+        <p class="large">Our top {{recommendations.length}} projects</p>
+      </ng-container>
+      <ng-template #noHighlights>
+        <p class="large">Currently there are no highlighted projects</p>
+      </ng-template>
+    </div>
+
+  <div class="cards">
+    
+      <app-project
+            class="card"
+            (click)="onClickRecommendedProject(project.id, project.name)"
+            *ngFor="let project of recommendations"
+            [project]="project"
+            [showListView]="false"
+        >
+        </app-project>
+      
+
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/home/recommendations/recommendations.component.scss b/src/app/modules/home/recommendations/recommendations.component.scss
new file mode 100644
index 00000000..7e27b238
--- /dev/null
+++ b/src/app/modules/home/recommendations/recommendations.component.scss
@@ -0,0 +1,125 @@
+/*
+ *
+ *  Digital Excellence Copyright (C) 2020 Brend Smits
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Lesser General Public License as published
+ *   by the Free Software Foundation version 3 of the License.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty
+ *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *   See the GNU Lesser General Public License for more details.
+ *
+ *   You can find a copy of the GNU Lesser General Public License
+ *   along with this program, in the LICENSE.md file in the root project directory.
+ *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ *
+ */
+
+ @import "assets/styles/variables";
+
+ //project recommendations
+ .recommendedProjects {
+  //  margin-top: 220px;
+  padding: 60px;
+  background-color: $light-mode-grey-quaternary;
+  margin: 0 -39px;
+  justify-content: center;
+  align-items: center;
+ 
+  .inner {
+    max-width: 1750px;
+    margin: auto;
+    width: 100%;
+    .text {
+
+    }
+  }
+  
+
+  .cards {
+    display: flex;
+    flex-direction: row;
+
+    .card {
+    }
+   
+  }
+}
+
+
+
+
+ 
+//    .row {
+//      @include media-breakpoint-up(lg) {
+//        display: flex;
+//      }
+ 
+//      .card {
+//        padding: 30px 45px;
+//        background: #ffffff;
+//        box-shadow: $box-shadow;
+//        border-radius: 6px;
+//        border: none;
+//        cursor: pointer;
+//        height: 100%;
+//        transition: transform $transition-short;
+ 
+//        &:hover{
+//          transform: $transform-grow;
+//        }
+//      }
+ 
+//      .card-title {
+//        display: flex;
+ 
+//        @include media-breakpoint-down(sm) {
+//          flex-direction: column;
+//        }
+ 
+//        .icon {
+//          display: flex;
+//          align-items: center;
+//          justify-content: center;
+//          flex-shrink: 0;
+//          width: 40px;
+//          height: 40px;
+//          margin-right: 10px;
+//          overflow: hidden;
+//          border-radius: 999px;
+//          background-size: cover;
+//          background-position: center;
+//          box-shadow: 0 0px 4px #0000001a;
+ 
+//          @include media-breakpoint-down(sm) {
+//            margin: auto;
+//            margin-bottom: 10px;
+//          }
+//        }
+ 
+//        h3 {
+//          margin: auto 5px;
+//          max-width: calc(100% - 50px);
+//          hyphens: auto;
+ 
+//          @include media-breakpoint-down(sm) {
+//            margin: auto;
+//            text-align: center;
+//            max-width: 100%;
+//          }
+//        }
+//      }
+ 
+//      p {
+//        line-height: 1.5;
+//        display: flex;
+//        margin-top: 20px;
+//        max-width: 100%;
+//        flex-direction: column;
+//        overflow: hidden;
+//        hyphens: auto;
+//      }
+//    }
+//  }
\ No newline at end of file
diff --git a/src/app/modules/home/recommendations/recommendations.component.ts b/src/app/modules/home/recommendations/recommendations.component.ts
new file mode 100644
index 00000000..495b55b7
--- /dev/null
+++ b/src/app/modules/home/recommendations/recommendations.component.ts
@@ -0,0 +1,83 @@
+/*
+ *  Digital Excellence Copyright (C) 2020 Brend Smits
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Lesser General Public License as published
+ *   by the Free Software Foundation version 3 of the License.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty
+ *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *   See the GNU Lesser General Public License for more details.
+ *
+ *   You can find a copy of the GNU Lesser General Public License
+ *   along with this program, in the LICENSE.md file in the root project directory.
+ *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { SafeUrl } from '@angular/platform-browser';
+import { finalize } from 'rxjs/operators';
+import { Project } from 'src/app/models/domain/project';
+import { AuthService } from 'src/app/services/auth.service';
+import { FileRetrieverService } from 'src/app/services/file-retriever.service';
+import { RecommendationService } from 'src/app/services/recommendation.service';
+import { ProjectDetailModalUtility } from 'src/app/utils/project-detail-modal.util';
+
+@Component({
+  selector: 'app-recommended-project-cards',
+  templateUrl: './recommendations.component.html',
+  styleUrls: ['./recommendations.component.scss'],
+})
+export class RecommendationCardsComponent implements OnInit {
+
+  public isAuthenticated: boolean = false;
+
+  /**
+   * Array to receive and store the projects from the api.
+   */
+  public recommendations: Project[] = [];
+
+  /**
+   * Boolean to determine whether the component is loading the information from the api.
+   */
+  public recommendationsLoading = true;
+
+  constructor(private recommendationService: RecommendationService,
+    private fileRetrieverService: FileRetrieverService,
+    private modalUtility: ProjectDetailModalUtility,
+    private authService: AuthService) { }
+
+  ngOnInit(): void {
+
+
+    if (this.authService.isAuthenticated()) {
+      this.isAuthenticated = true;
+      this.recommendationService.getRecommendations(8)
+        .pipe(finalize(() => (this.recommendationsLoading = false)))
+        .subscribe((result) => {
+          this.recommendations = result;
+        });
+    }
+  }
+
+  /**
+* Triggers on project click in the list.
+* @param id project id.
+* @param name project name
+*/
+  public onClickRecommendedProject(id: number, name: string): void {
+    name = name.split(' ').join('-');
+    this.modalUtility.openProjectModal(id, name, '/home');
+  }
+
+  /**
+   * Method to get the url of the icon of the project. This is retrieved
+   * from the file retriever service
+   */
+  public getIconUrl(project: Project): SafeUrl {
+    return this.fileRetrieverService.getIconUrl(project.projectIcon);
+  }
+
+
+}
\ No newline at end of file
diff --git a/src/app/services/recommendation.service.ts b/src/app/services/recommendation.service.ts
new file mode 100644
index 00000000..e0f86d06
--- /dev/null
+++ b/src/app/services/recommendation.service.ts
@@ -0,0 +1,39 @@
+/*
+ *  Digital Excellence Copyright (C) 2020 Brend Smits
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Lesser General Public License as published
+ *   by the Free Software Foundation version 3 of the License.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty
+ *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *   See the GNU Lesser General Public License for more details.
+ *
+ *   You can find a copy of the GNU Lesser General Public License
+ *   along with this program, in the LICENSE.md file in the root project directory.
+ *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ */
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { API_CONFIG } from 'src/app/config/api-config';
+import { Observable } from 'rxjs';
+import { Project } from '../models/domain/project';
+
+/**
+ * Service to retrieve autocompleted project suggestions based on typed.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class RecommendationService {
+
+  protected readonly url = API_CONFIG.url + API_CONFIG.userRoute;
+
+  constructor(private http: HttpClient) {}
+
+  public getRecommendations(amountOfRecommendations): Observable<Array<Project>> {
+    return this.http.get<Array<Project>>(this.url + "/projectrecommendations/" + amountOfRecommendations);
+  }
+
+}

From 076978d9f3da1e07b27e7be216889d1b46f97e4b Mon Sep 17 00:00:00 2001
From: Niray Mak <44868678+niraymak@users.noreply.github.com>
Date: Fri, 28 May 2021 13:52:06 +0200
Subject: [PATCH 3/7] updated styling of recommended projects

---
 src/app/modules/home/main/main.component.html |  2 +-
 .../recommendations.component.html            |  1 -
 .../recommendations.component.scss            | 30 +++++++++++++++----
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/app/modules/home/main/main.component.html b/src/app/modules/home/main/main.component.html
index 5f5f3055..0fbc87eb 100644
--- a/src/app/modules/home/main/main.component.html
+++ b/src/app/modules/home/main/main.component.html
@@ -1,7 +1,7 @@
 <app-highlight-slider></app-highlight-slider>
 <app-info-cards></app-info-cards>
 <app-recommended-project-cards></app-recommended-project-cards>
-<app-who-is-dex></app-who-is-dex>
+<!-- <app-who-is-dex></app-who-is-dex> -->
 <app-container-left></app-container-left>
 <app-partners></app-partners>
 <app-container-right></app-container-right>
diff --git a/src/app/modules/home/recommendations/recommendations.component.html b/src/app/modules/home/recommendations/recommendations.component.html
index 28f15196..f8400eed 100644
--- a/src/app/modules/home/recommendations/recommendations.component.html
+++ b/src/app/modules/home/recommendations/recommendations.component.html
@@ -28,7 +28,6 @@ <h2>Recommended projects</h2>
   <div class="cards">
     
       <app-project
-            class="card"
             (click)="onClickRecommendedProject(project.id, project.name)"
             *ngFor="let project of recommendations"
             [project]="project"
diff --git a/src/app/modules/home/recommendations/recommendations.component.scss b/src/app/modules/home/recommendations/recommendations.component.scss
index 7e27b238..c951562d 100644
--- a/src/app/modules/home/recommendations/recommendations.component.scss
+++ b/src/app/modules/home/recommendations/recommendations.component.scss
@@ -22,7 +22,7 @@
  //project recommendations
  .recommendedProjects {
   //  margin-top: 220px;
-  padding: 60px;
+  padding: 40px 60px 20px 60px;
   background-color: $light-mode-grey-quaternary;
   margin: 0 -39px;
   justify-content: center;
@@ -33,17 +33,37 @@
     margin: auto;
     width: 100%;
     .text {
-
+      .large{
+        margin: 0 0 5px 0;
+      }
     }
   }
   
 
   .cards {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-auto-columns: 40px;
+    gap: 30px;
+    max-width: 100%;
+    grid-auto-columns: 310px;
+    grid-auto-flow: column;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 20px 0;
+
+    //scrollbar stylingbody
+    &::-webkit-scrollbar {
+      height: 4px;
+    }
 
-    .card {
+    &::-webkit-scrollbar-track {
     }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 999px;
+      background-color: white;
+    }
+
    
   }
 }

From 58527c5b6bf0ba419c246ef202b43f1e1882c33c Mon Sep 17 00:00:00 2001
From: Niray Mak <44868678+niraymak@users.noreply.github.com>
Date: Fri, 28 May 2021 14:38:38 +0200
Subject: [PATCH 4/7] fixed error in searchbar, updated text above
 recommendations component. Conditional rendering on home page based on
 authentication

---
 .../app-layout/app-layout.component.ts        |  2 +-
 src/app/modules/home/main/main.component.html |  4 ++--
 .../recommendations.component.html            |  9 +++----
 .../recommendations.component.ts              | 24 +++++++++----------
 4 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/app/components/app-layout/app-layout.component.ts b/src/app/components/app-layout/app-layout.component.ts
index 5ff82fca..f1c279c4 100644
--- a/src/app/components/app-layout/app-layout.component.ts
+++ b/src/app/components/app-layout/app-layout.component.ts
@@ -64,7 +64,7 @@ export class AppLayoutComponent implements OnInit {
     });
 
     this.router.events.subscribe((event) => {
-      if (event instanceof NavigationStart) {
+      if (event instanceof NavigationEnd) {
         if ((event.url === '/home' || event.url === '/')) {
           this.showSearchbar = true;
         } else {
diff --git a/src/app/modules/home/main/main.component.html b/src/app/modules/home/main/main.component.html
index 0fbc87eb..8c176d29 100644
--- a/src/app/modules/home/main/main.component.html
+++ b/src/app/modules/home/main/main.component.html
@@ -1,7 +1,7 @@
 <app-highlight-slider></app-highlight-slider>
 <app-info-cards></app-info-cards>
-<app-recommended-project-cards></app-recommended-project-cards>
-<!-- <app-who-is-dex></app-who-is-dex> -->
+<app-recommended-project-cards *ngIf="isLoggedIn()"></app-recommended-project-cards>
+<app-who-is-dex *ngIf="!isLoggedIn()"></app-who-is-dex>
 <app-container-left></app-container-left>
 <app-partners></app-partners>
 <app-container-right></app-container-right>
diff --git a/src/app/modules/home/recommendations/recommendations.component.html b/src/app/modules/home/recommendations/recommendations.component.html
index f8400eed..f8239896 100644
--- a/src/app/modules/home/recommendations/recommendations.component.html
+++ b/src/app/modules/home/recommendations/recommendations.component.html
@@ -16,13 +16,10 @@
   
   <div class="inner">
     <div class="text">
-      <h2>Recommended projects</h2>
-      <ng-container *ngIf="recommendations && recommendations.length > 0; else noHighlights">
-        <p class="large">Our top {{recommendations.length}} projects</p>
+      <h2>Your recommended projects</h2>
+      <ng-container *ngIf="recommendations">
+        <p class="large">Your top {{recommendations.length}} recommendations</p>
       </ng-container>
-      <ng-template #noHighlights>
-        <p class="large">Currently there are no highlighted projects</p>
-      </ng-template>
     </div>
 
   <div class="cards">
diff --git a/src/app/modules/home/recommendations/recommendations.component.ts b/src/app/modules/home/recommendations/recommendations.component.ts
index 495b55b7..43ed767b 100644
--- a/src/app/modules/home/recommendations/recommendations.component.ts
+++ b/src/app/modules/home/recommendations/recommendations.component.ts
@@ -31,7 +31,7 @@ import { ProjectDetailModalUtility } from 'src/app/utils/project-detail-modal.ut
 })
 export class RecommendationCardsComponent implements OnInit {
 
-  public isAuthenticated: boolean = false;
+  public isAuthenticated: boolean;
 
   /**
    * Array to receive and store the projects from the api.
@@ -46,19 +46,19 @@ export class RecommendationCardsComponent implements OnInit {
   constructor(private recommendationService: RecommendationService,
     private fileRetrieverService: FileRetrieverService,
     private modalUtility: ProjectDetailModalUtility,
-    private authService: AuthService) { }
+    private authService: AuthService) {}
 
   ngOnInit(): void {
-
-
-    if (this.authService.isAuthenticated()) {
-      this.isAuthenticated = true;
-      this.recommendationService.getRecommendations(8)
-        .pipe(finalize(() => (this.recommendationsLoading = false)))
-        .subscribe((result) => {
-          this.recommendations = result;
-        });
-    }
+    this.authService.authNavStatus$.subscribe((status) => {
+      this.isAuthenticated = status;
+      if (status) {
+        this.recommendationService.getRecommendations(8)
+          .pipe(finalize(() => (this.recommendationsLoading = false)))
+          .subscribe((result) => {
+            this.recommendations = result;
+          });
+      }
+    });
   }
 
   /**

From 5ac677132463c6f43d1e304a3ac1678f4223ff0a Mon Sep 17 00:00:00 2001
From: Niray Mak <44868678+niraymak@users.noreply.github.com>
Date: Fri, 28 May 2021 14:45:29 +0200
Subject: [PATCH 5/7] remove commented css

---
 .../recommendations.component.scss            | 78 +------------------
 1 file changed, 1 insertion(+), 77 deletions(-)

diff --git a/src/app/modules/home/recommendations/recommendations.component.scss b/src/app/modules/home/recommendations/recommendations.component.scss
index c951562d..8aa77d78 100644
--- a/src/app/modules/home/recommendations/recommendations.component.scss
+++ b/src/app/modules/home/recommendations/recommendations.component.scss
@@ -66,80 +66,4 @@
 
    
   }
-}
-
-
-
-
- 
-//    .row {
-//      @include media-breakpoint-up(lg) {
-//        display: flex;
-//      }
- 
-//      .card {
-//        padding: 30px 45px;
-//        background: #ffffff;
-//        box-shadow: $box-shadow;
-//        border-radius: 6px;
-//        border: none;
-//        cursor: pointer;
-//        height: 100%;
-//        transition: transform $transition-short;
- 
-//        &:hover{
-//          transform: $transform-grow;
-//        }
-//      }
- 
-//      .card-title {
-//        display: flex;
- 
-//        @include media-breakpoint-down(sm) {
-//          flex-direction: column;
-//        }
- 
-//        .icon {
-//          display: flex;
-//          align-items: center;
-//          justify-content: center;
-//          flex-shrink: 0;
-//          width: 40px;
-//          height: 40px;
-//          margin-right: 10px;
-//          overflow: hidden;
-//          border-radius: 999px;
-//          background-size: cover;
-//          background-position: center;
-//          box-shadow: 0 0px 4px #0000001a;
- 
-//          @include media-breakpoint-down(sm) {
-//            margin: auto;
-//            margin-bottom: 10px;
-//          }
-//        }
- 
-//        h3 {
-//          margin: auto 5px;
-//          max-width: calc(100% - 50px);
-//          hyphens: auto;
- 
-//          @include media-breakpoint-down(sm) {
-//            margin: auto;
-//            text-align: center;
-//            max-width: 100%;
-//          }
-//        }
-//      }
- 
-//      p {
-//        line-height: 1.5;
-//        display: flex;
-//        margin-top: 20px;
-//        max-width: 100%;
-//        flex-direction: column;
-//        overflow: hidden;
-//        hyphens: auto;
-//      }
-//    }
-//  }
\ No newline at end of file
+}
\ No newline at end of file

From 537af885fcc273b5231c0b6210115fc444804f07 Mon Sep 17 00:00:00 2001
From: Niray Mak <44868678+niraymak@users.noreply.github.com>
Date: Fri, 28 May 2021 15:12:00 +0200
Subject: [PATCH 6/7] fix likes not showing up in recommendation cards.
 Recommendations now also show up if there is only 1 recommendation.

---
 .../home/recommendations/recommendations.component.html        | 2 +-
 .../modules/home/recommendations/recommendations.component.ts  | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/home/recommendations/recommendations.component.html b/src/app/modules/home/recommendations/recommendations.component.html
index f8239896..886d1d9e 100644
--- a/src/app/modules/home/recommendations/recommendations.component.html
+++ b/src/app/modules/home/recommendations/recommendations.component.html
@@ -12,7 +12,7 @@
    If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  -->
 
-<div class="recommendedProjects" *ngIf="isAuthenticated && recommendations.length > 2">
+<div class="recommendedProjects" *ngIf="isAuthenticated && recommendations.length > 0">
   
   <div class="inner">
     <div class="text">
diff --git a/src/app/modules/home/recommendations/recommendations.component.ts b/src/app/modules/home/recommendations/recommendations.component.ts
index 43ed767b..3089317f 100644
--- a/src/app/modules/home/recommendations/recommendations.component.ts
+++ b/src/app/modules/home/recommendations/recommendations.component.ts
@@ -56,6 +56,9 @@ export class RecommendationCardsComponent implements OnInit {
           .pipe(finalize(() => (this.recommendationsLoading = false)))
           .subscribe((result) => {
             this.recommendations = result;
+            this.recommendations.forEach(element => {
+              element.likeCount = element.likes.length;
+            });
           });
       }
     });

From d3a2d7fde668b6f7c7fdb58dcf13bff7675424b6 Mon Sep 17 00:00:00 2001
From: Niray Mak <44868678+niraymak@users.noreply.github.com>
Date: Tue, 1 Jun 2021 12:47:33 +0200
Subject: [PATCH 7/7] removed duplicate css

---
 .../modules/home/recommendations/recommendations.component.scss  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/modules/home/recommendations/recommendations.component.scss b/src/app/modules/home/recommendations/recommendations.component.scss
index 8aa77d78..90e1e314 100644
--- a/src/app/modules/home/recommendations/recommendations.component.scss
+++ b/src/app/modules/home/recommendations/recommendations.component.scss
@@ -42,7 +42,6 @@
 
   .cards {
     display: grid;
-    grid-auto-columns: 40px;
     gap: 30px;
     max-width: 100%;
     grid-auto-columns: 310px;