Redesign homepage

CHANGELOG.md

@@ -9,9 +9,13 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Added
 
+- 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
 
-- Clicking to the next step in the wizard step-header will now skip the step & removed orange progress bar - [#460](https://github.com/DigitalExcellence/dex-frontend/issues/460)
+- Clicking to the next step in the wizard step-header will now skip the step & removed orange progress bar [#460](https://github.com/DigitalExcellence/dex-frontend/issues/460)
 - Made Project URI optional - [#492](https://github.com/DigitalExcellence/dex-frontend/issues/492)
 
 ### Deprecated

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dex-frontend",
-  "version": "1.0.1-beta",
+  "version": "1.3.0-beta",
   "scripts": {
     "ng": "ng",
     "config": "ts-node set-env.ts",
@@ -23,7 +23,7 @@
     "@angular/platform-browser": "^9.1.13",
     "@angular/platform-browser-dynamic": "^9.1.13",
     "@angular/router": "^9.1.13",
-    "@fortawesome/fontawesome-free": "^5.15.2",
+    "@fortawesome/fontawesome-free": "^5.15.3",
     "@ngx-lite/debounce-click": "^0.2.3",
     "@sentry/browser": "^5.30.0",
     "@webcomponents/webcomponentsjs": "^2.5.0",
@@ -35,31 +35,31 @@
     "oidc-client": "~1.10.1",
     "quill": "^1.3.7",
     "quill-markdown-shortcuts": "0.0.10",
-    "rxjs": "^6.6.3",
+    "rxjs": "^6.6.7",
     "showdown": "^1.9.1",
     "tslib": "^1.14.1",
     "zone.js": "^0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.901.13",
-    "@angular/cli": "^9.1.13",
+    "@angular-devkit/build-angular": "^0.901.15",
+    "@angular/cli": "^9.1.15",
     "@angular/compiler-cli": "^9.1.13",
     "@angular/language-service": "^9.1.13",
-    "@types/jasmine": "^3.6.3",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.19.15",
+    "@types/jasmine": "^3.7.4",
+    "@types/jasminewd2": "^2.0.9",
+    "@types/node": "^12.20.13",
     "codelyzer": "^5.2.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "^5.2.3",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~2.1.0",
     "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.5.4",
+    "karma-jasmine-html-reporter": "^1.6.0",
     "protractor": "^7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "^6.1.3",
     "tslint-microsoft-contrib": "^6.2.0",
-    "typescript": "~3.7.5"
+    "typescript": "^3.7.7"
   }
 }

src/app/app-routing.module.ts

@@ -18,15 +18,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
-import { HomeComponent } from './components/home/home.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
+import { MainComponent } from './modules/home/main/main.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: '/home', pathMatch: 'full' },
-  { path: 'home', component: HomeComponent },
-  { path: 'privacy', component: PrivacyPolicyComponent },
-  { path: 'auth-callback', component: AuthCallbackComponent },
+  {path: '', redirectTo: '/home', pathMatch: 'full'},
+  {path: 'home', component: MainComponent},
+  {path: 'privacy', component: PrivacyPolicyComponent},
+  {path: 'auth-callback', component: AuthCallbackComponent},
   {
     path: 'project',
     loadChildren: () => import('./modules/project/project.module').then((m) => m.ProjectModule),

src/app/app.module.ts

@@ -14,18 +14,16 @@
  *   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 { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { NgModule, ErrorHandler } from '@angular/core';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { ErrorHandler, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { AppLayoutComponent } from './components/app-layout/app-layout.component';
 import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
 import { FormsModule } from '@angular/forms';
-import { HomeComponent } from './components/home/home.component';
 import { TokenInterceptor } from './interceptors/auth.interceptor';
-import { TopHighlightCardsComponent } from './modules/highlight/top-highlight-cards/top-highlight-cards.component';
 import { SharedModule } from './modules/shared/shared.module';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { FooterComponent } from './components/footer/footer.component';
@@ -37,23 +35,23 @@ import { ModalModule } from 'ngx-bootstrap/modal';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
 import { ModalDeleteGenericComponent } from './components/modals/modal-delete-generic/modal-delete-generic.component';
-import { StripHtmlPipe } from './utils/striptags.pipe';
 import { QuillModule } from 'ngx-quill';
+import { HomeModule } from './modules/home/home.module';
+import { SearchComponent } from './components/search/search.component';
+import { ProjectModule } from './modules/project/project.module';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     AppLayoutComponent,
-    HomeComponent,
     AuthCallbackComponent,
-    TopHighlightCardsComponent,
     AlertComponent,
     FooterComponent,
     PrivacyPolicyComponent,
     NotFoundComponent,
     ModalDeleteGenericComponent,
-    StripHtmlPipe
+    SearchComponent
   ],
   imports: [
     BsDropdownModule.forRoot(),
@@ -66,6 +64,8 @@ import { QuillModule } from 'ngx-quill';
     HttpClientModule,
     SharedModule,
     QuillModule.forRoot(),
+    HomeModule,
+    ProjectModule
   ],
   providers: [
     {
@@ -84,5 +84,6 @@ import { QuillModule } from 'ngx-quill';
     }
   ],
   bootstrap: [AppComponent],
+  exports: [SearchComponent]
 })
 export class AppModule { }

src/app/components/app-layout/app-layout.component.html

@@ -20,44 +20,56 @@
 <div class="main-container">
   <header *ngIf="!displayContentWithoutLayout" class="header header-6 navbar navbar-expand-md navbar-light">
     <div class="branding">
-      <span class="title"><a aria-label="Back to the Homepage" routerLink=""><img alt="" loading="lazy" src="assets/images/dex-logo-dark-orange.png"></a></span>
+      <span class="title"
+        ><a aria-label="Back to the Homepage" routerLink=""><img alt="" loading="lazy" src="assets/images/dex-logo-dark-orange.png" /></a
+      ></span>
       <p (click)="onClickHeaderBetaText()" class="beta-text">Beta</p>
     </div>
 
     <button (click)="toggleNavbar()" class="navbar-toggler" type="button">
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div [ngClass]="{ 'show': navbarOpen }" class="collapse navbar-collapse">
+    <div [ngClass]="{ show: navbarOpen }" class="collapse content navbar-collapse">
       <div class="header-nav project-link">
         <a (click)="onClickProjects()" class="nav-link nav-text" routerLinkActive="active">Projects</a>
         <a class="nav-link nav-text" routerLink="project/add" routerLinkActive="active">Add project</a>
       </div>
-      <div class="header-nav account">
-        <a *ngIf="!isAuthenticated" class="nav-link nav-text" routerLink="account/login" routerLinkActive="active">Sign
-                                                                                                                   in</a>
+
+      <div *ngIf="this.showSearchbar" class="search-bar">
+        <app-search></app-search>
       </div>
-      <div *ngIf="isAuthenticated" class="profile">
-        <div class="btn-group profile-dropdown w-100" dropdown>
-          <button aria-controls="dropdown-basic" class="btn dropdown-toggle profile-dropdown" dropdownToggle id="button-basic" type="button">
-            {{ name }} <img alt="" class="profile-picture" loading="lazy" src="assets/images/profile-placeholder.png"> <span class="caret"></span>
-          </button>
-          <ul *dropdownMenu aria-labelledby="button-basic" class="dropdown-menu" id="dropdown-basic" role="menu">
-            <li role="menuitem"><a (click)="onClickSignout()" class="dropdown-item" routerLinkActive="active">Sign
-                                                                                                              Out</a>
-            </li>
-          </ul>
+
+      <div *ngIf="!this.showSearchbar" class="search-bar"></div>
+      <div class="right">
+        <div class="header-nav account">
+          <a *ngIf="!isAuthenticated" class="nav-link nav-text" routerLink="account/login" routerLinkActive="active">Sign in</a>
+        </div>
+        <div *ngIf="isAuthenticated" class="profile">
+          <div class="btn-group profile-dropdown w-100" dropdown>
+            <button aria-controls="dropdown-basic" class="btn dropdown-toggle profile-dropdown" dropdownToggle id="button-basic" type="button">
+              {{ name }} <img alt="" class="profile-picture" loading="lazy" src="assets/images/profile-placeholder.png" />
+              <span class="caret"></span>
+            </button>
+            <ul *dropdownMenu aria-labelledby="button-basic" class="dropdown-menu" id="dropdown-basic" role="menu">
+              <li role="menuitem"><a (click)="onClickSignout()" class="dropdown-item" routerLinkActive="active">Sign Out</a></li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
 
+      <div *ngIf="this.showSearchbar" class="search-bar-mobile">
+        <app-search></app-search>
+      </div>
+    </div>
   </header>
 
   <div *ngIf="displayBetaBanner" class="modal-beta-container">
     <div class="modal-beta-content">
-      <p>DeX is a new platform and developed by students, it's still in <span class="accent-text-color">beta</span>. You
-         might encounter some bugs
-         or shortcomings. If you do, please do report them on our GitHub <a [href]="dexGithubIssueUrl">here</a></p>
+      <p>
+        DeX is a new platform and developed by students, it's still in <span class="accent-text-color">beta</span>. You might encounter some bugs or
+        shortcomings. If you do, please do report them on our GitHub <a [href]="dexGithubIssueUrl">here</a>
+      </p>
       <button (click)="onClickCloseBetaMessage()" aria-label="Close Account Info Modal Box">&times;</button>
     </div>
   </div>
@@ -68,7 +80,6 @@
     </a>
   </div>
 
-
   <div *ngIf="displayAlertContainer" class="alert-container">
     <app-alert></app-alert>
   </div>
@@ -79,11 +90,12 @@
     </div>
   </div>
 
-  <svg class='background' viewBox="0 0 355.4 374.9" xmlns="http://www.w3.org/2000/svg">
-    <polygon fill="#e85b3f" points="240.9 166 347.7 0 245.2 0 188.7 92.5 240.9 166"/>
+  <svg class="background" viewBox="0 0 355.4 374.9" xmlns="http://www.w3.org/2000/svg">
+    <polygon fill="#e85b3f" points="240.9 166 347.7 0 245.2 0 188.7 92.5 240.9 166" />
     <polygon
-        fill="#1d1d1b"
-        points="230.9 181 215.8 159.8 112.1 0 5.3 0 122.1 185.3 0 374.9 108.3 374.9 176.7 258.7 246.2 374.9 355.4 374.9 230.9 181"/>
+      fill="#1d1d1b"
+      points="230.9 181 215.8 159.8 112.1 0 5.3 0 122.1 185.3 0 374.9 108.3 374.9 176.7 258.7 246.2 374.9 355.4 374.9 230.9 181"
+    />
   </svg>
 
   <app-footer *ngIf="!displayContentWithoutLayout"></app-footer>