From d9570b96e4230fb6b114c040260253e6fc812758 Mon Sep 17 00:00:00 2001
From: mdelez <60604010+mdelez@users.noreply.github.com>
Date: Tue, 9 Aug 2022 13:12:53 +0200
Subject: [PATCH] feat(projects): changes to nav bar (DEV-1101) (#790)

* feat(projects): changes to nav bar

* feat(projects): more changes to navbar

* feat(projects): even more changes to navbar

* feat(project): only show tooltips if the text is cut off

* test(collaboartion): attempt to fix constantly "failing" test

* test(permission): attempt to fix constantly "failing" test

* test(collaboration): attempt to fix constantly "failing" test

* remove fdescribe

* feat(project): allow click on entire accordion header to open the accordion. Only for signed out users for now until the onto editor is moved to the settings

* feat(project, ontology-class-item): rename method
---
 src/app/main/status/status.component.spec.ts  |   3 +-
 .../ontology-class-item.component.html        |  40 +++---
 .../ontology-class-item.component.scss        |  94 ++++++++++----
 .../ontology-class-item.component.ts          |  47 ++++++-
 .../ontology-classes.component.html           |   4 +-
 .../collaboration.component.spec.ts           |   6 +-
 .../permission/permission.component.spec.ts   |  16 ++-
 src/app/project/project.component.html        | 118 ++++++++++--------
 src/app/project/project.component.scss        |  26 +++-
 src/app/project/project.component.ts          |  10 ++
 .../resource-list.component.html              |  15 +--
 .../resource-list/resource-list.component.ts  |  28 ++++-
 src/assets/style/_layout.scss                 |  64 +++++++---
 13 files changed, 339 insertions(+), 132 deletions(-)

diff --git a/src/app/main/status/status.component.spec.ts b/src/app/main/status/status.component.spec.ts
index 96301a7ee3..4cc127ad1e 100644
--- a/src/app/main/status/status.component.spec.ts
+++ b/src/app/main/status/status.component.spec.ts
@@ -80,7 +80,8 @@ describe('StatusComponent', () => {
             declarations: [
                 StatusComponent,
                 NoContentTestHostComponent,
-                TeapotTestHostComponent
+                TeapotTestHostComponent,
+                MockPipe
             ],
             imports: [
                 BrowserAnimationsModule,
diff --git a/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.html b/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.html
index bfbaf735ca..f7a9616a96 100644
--- a/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.html
+++ b/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.html
@@ -1,16 +1,24 @@
-<span class="link" [routerLink]="link">
-    <h2 matLine class="label mat-subheading-1">{{resClass.label}}</h2>
-    <span matLine class="instances">
-        {{results | i18nPlural: itemPluralMapping['resource']}}
-    </span>
-</span>
-
-<span class="overlay-buttons hover-only" *ngIf="projectMember">
-    <!-- with the following button, it should be possible to edit the resource class in a quick way; but maybe we don't need it
-    <button mat-icon-button class="conf" [routerLink]="link + '/conf'">
-        <mat-icon>tune</mat-icon>
-    </button> -->
-    <button mat-icon-button class="add" [routerLink]="link + '/add'">
-        <mat-icon>add</mat-icon>
-    </button>
-</span>
+<div class="class-item-container">
+    <div class="content" [routerLinkActive]="['is-active']">
+        <div class="top link" [routerLink]="link">
+            <div class="file-icon">
+                <div class="icon-wrapper">
+                    <mat-icon>{{icon}}</mat-icon>
+                </div>
+            </div>
+            <div class="info">
+                <p class="label" #classLabel matTooltip="{{resClass.label}}" matTooltipShowDelay="750"
+                    [matTooltipDisabled]="compareElementHeights(classLabel)"> {{resClass.label}}</p>
+                <p class="entries">{{results | i18nPlural: itemPluralMapping['entry']}}</p>
+            </div>
+        </div>
+        <div class="bottom link" *ngIf="projectMember" [routerLink]="link + '/add'">
+            <div class="add-icon">
+                <mat-icon>add_circle_outline</mat-icon>
+            </div>
+            <div class="add-new">
+                <p class="add-new-label">Add a new resource</p>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.scss b/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.scss
index f9b039c6cd..80b72611df 100644
--- a/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.scss
+++ b/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.scss
@@ -1,33 +1,81 @@
 @import "../../../../../assets/style/config";
-:host {
+
+.class-item-container {
   width: 100%;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  padding: 10px 0px;
 
-  &:hover {
-    .hover-only {
-        display: block;
+  .content {
+    width: 90%;
+    border-radius: 5px;
+    box-shadow: 0px 1px 3px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 6%);
+    border-bottom: 2px solid #F9FAFB;
+    &.is-active{
+      border-bottom: 2px solid #1F2937;
     }
-  }
-}
 
-.mat-line {
-  width: 100%;
+    .top {
+      display: inline-flex;
+      align-items: center;
+      padding: 20px 0px;
+      width: 100%;
 
-  &.label {
-    display: flex;
-    flex-direction: row;
+      .file-icon {
 
-  }
-  &.instances {
-    color: $primary_500;
-  }
-}
+        .icon-wrapper {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 48px;
+          height: 48px;
+          background: #1F2937;
+          border-radius: 6px;
+          margin: 0px 20px;
 
-.overlay-buttons {
-  position: absolute;
-  right: 0;
-  bottom: 12px;
-}
+          mat-icon {
+            color: white;
+          }
+        }
+      }
 
-.hover-only {
-  display: none;
+      .info {
+
+        .label {
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;  
+          overflow: hidden;
+          padding-right: 16px;
+          color: #6B7280;
+          margin: 0px;
+        }
+
+        .entries {
+          color: #111827;
+          font-size: 24px;
+          margin: 0px;
+          padding-top: 5px;
+        }
+        
+      }
+    }
+
+    .bottom {
+      display: flex;
+      align-items: center;
+      background: #F9FAFB;
+
+      .add-icon {
+        margin: 0px 10px;
+
+        mat-icon {
+          font-size: 32px;
+          width: 32px;
+          height: 32px;
+        }
+      }
+    }
+  }
 }
diff --git a/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.ts b/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.ts
index 1f2a28a193..829de38035 100644
--- a/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.ts
+++ b/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ClassDefinition, KnoraApiConnection, CountQueryResponse, ApiResponseError } from '@dasch-swiss/dsp-js';
+import { ClassDefinition, KnoraApiConnection, CountQueryResponse, ApiResponseError, Constants } from '@dasch-swiss/dsp-js';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
 import { ErrorHandlerService } from 'src/app/main/services/error-handler.service';
 import { OntologyService } from 'src/app/project/ontology/ontology.service';
@@ -22,11 +22,13 @@ export class OntologyClassItemComponent implements OnInit {
 
     link: string;
 
+    icon: string;
+
     // i18n setup
     itemPluralMapping = {
-        resource: {
-            '=1': '1 resource',
-            other: '# resources'
+        entry: {
+            '=1': '1 Entry',
+            other: '# Entries'
         }
     };
 
@@ -58,12 +60,24 @@ export class OntologyClassItemComponent implements OnInit {
                 this._errorHandler.showMessage(error);
             }
         );
+
+        this.icon = this._getIcon();
     }
 
     open(route: string) {
         this._router.navigateByUrl(route);
     }
 
+    /**
+     * given an Html element, compare the scrollHeight and the clientHeight
+     *
+     * @param elem the element which has the line-clamp css
+     * @returns inverse of comparison between the scrollHeight and the clientHeight of elem
+     */
+    compareElementHeights(elem: HTMLElement): boolean {
+        return !(elem.scrollHeight > elem.clientHeight);
+    }
+
     private _setGravsearch(iri: string): string {
         return `
         PREFIX knora-api: <http://api.knora.org/ontology/knora-api/v2#>
@@ -82,4 +96,29 @@ export class OntologyClassItemComponent implements OnInit {
         OFFSET 0`;
     }
 
+    /**
+     * return the correct mat-icon depending on the subclass of the resource
+     *
+     * @returns mat-icon name as string
+     */
+    private _getIcon(): string {
+
+        switch (this.resClass.subClassOf[0]) {
+            case Constants.AudioRepresentation:
+                return 'audio_file';
+            case Constants.ArchiveRepresentation:
+                return 'folder_zip';
+            case Constants.DocumentRepresentation:
+                return 'description';
+            case Constants.MovingImageRepresentation:
+                return 'video_file';
+            case Constants.StillImageRepresentation:
+                return 'image';
+            case Constants.TextRepresentation:
+                return 'text_snippet';
+            default: // resource does not have a file representation
+                return 'insert_drive_file';
+        }
+    }
+
 }
diff --git a/src/app/project/beta/ontology-classes/ontology-classes.component.html b/src/app/project/beta/ontology-classes/ontology-classes.component.html
index 2a64e1fd60..7f77b32917 100644
--- a/src/app/project/beta/ontology-classes/ontology-classes.component.html
+++ b/src/app/project/beta/ontology-classes/ontology-classes.component.html
@@ -1,5 +1,5 @@
-<mat-list-item *ngFor="let class of classesToDisplay">
+<div *ngFor="let class of classesToDisplay">
     <app-ontology-class-item [resClass]="class" [projectMember]="projectMember">
 
     </app-ontology-class-item>
-</mat-list-item>
+</div>
\ No newline at end of file
diff --git a/src/app/project/collaboration/collaboration.component.spec.ts b/src/app/project/collaboration/collaboration.component.spec.ts
index e27a0020d9..abd833d10b 100644
--- a/src/app/project/collaboration/collaboration.component.spec.ts
+++ b/src/app/project/collaboration/collaboration.component.spec.ts
@@ -32,7 +32,7 @@ describe('CollaborationComponent', () => {
 
     beforeEach(waitForAsync(() => {
 
-        const cacheServiceSpy = jasmine.createSpyObj('CacheService', ['get', 'set']);
+        const cacheServiceSpy = jasmine.createSpyObj('CacheService', ['get', 'set', 'del']);
 
         TestBed.configureTestingModule({
             declarations: [
@@ -141,6 +141,10 @@ describe('CollaborationComponent', () => {
         fixture.detectChanges();
     });
 
+    afterEach(() => {
+        fixture.destroy();
+    });
+
     it('should create', () => {
         expect<any>(localStorage.getItem('session')).toBe(
             JSON.stringify(TestConfig.CurrentSession)
diff --git a/src/app/project/permission/permission.component.spec.ts b/src/app/project/permission/permission.component.spec.ts
index 692fb02fe2..fc83a1c1b6 100644
--- a/src/app/project/permission/permission.component.spec.ts
+++ b/src/app/project/permission/permission.component.spec.ts
@@ -1,4 +1,5 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { Pipe, PipeTransform } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
@@ -18,6 +19,18 @@ import { TestConfig } from 'test.config';
 import { AddGroupComponent } from './add-group/add-group.component';
 import { PermissionComponent } from './permission.component';
 
+
+/**
+ * mocked linkify pipe from main/pipes.
+ */
+@Pipe({ name: 'appLinkify' })
+class MockPipe implements PipeTransform {
+    transform(value: string): string {
+        // do stuff here, if you want
+        return value;
+    }
+}
+
 describe('PermissionComponent', () => {
     let component: PermissionComponent;
     let fixture: ComponentFixture<PermissionComponent>;
@@ -32,7 +45,8 @@ describe('PermissionComponent', () => {
                 AddGroupComponent,
                 GroupsListComponent,
                 DialogComponent,
-                StatusComponent
+                StatusComponent,
+                MockPipe
             ],
             imports: [
                 BrowserAnimationsModule,
diff --git a/src/app/project/project.component.html b/src/app/project/project.component.html
index f072b95da2..ad72e5ab2a 100644
--- a/src/app/project/project.component.html
+++ b/src/app/project/project.component.html
@@ -17,89 +17,93 @@
     <div *ngIf="beta">
         <mat-sidenav-container class="project-view">
             <mat-sidenav mode="side" opened class="project-nav">
+                <!-- Project label -->
+                <div class="link project-title" [routerLink]="'/beta/project/' + project.shortcode">
+                    <p #projectTitle matTooltip="{{project.longname}}" matTooltipShowDelay="500"
+                        [matTooltipDisabled]="compareElementHeights(projectTitle)">
+                        {{project.longname}}
+                    </p>
+                </div>
                 <mat-list class="main-list">
-                    <!-- Project label -->
-                    <mat-list-item class="link" [routerLink]="'/beta/project/' + project.shortcode">
-                        <span matLine>
-                            <p class="mat-caption">{{project.longname}}</p>
-                        </span>
-                        <span matLine>
-                            <h1 class="mat-headline">
-                                {{project.shortname | uppercase}}
-                            </h1>
-                        </span>
-                    </mat-list-item>
                     <!-- Maybe we can have a project selector here (similar to the github dashboard page) -->
                     <mat-divider></mat-divider>
-                    <mat-list-item>
-                        <span class="link section-label" (click)="goToOverview()">
+                    <mat-list-item class="link" (click)="goToOverview()">
+                        <span class="link section-label">
                             <p>Go to projects overview</p>
                         </span>
+                        <span class="fill-remaining-space"></span>
+                        <span mat-icon>
+                            <mat-icon>chevron_right</mat-icon>
+                        </span>
                     </mat-list-item>
                     <mat-divider></mat-divider>
+
                     <!-- Ontology Section -->
-                    <mat-list-item class="section-title">
-                        <span class="link section-label" (click)="open('ontology')">
+                    <div class="section-title">
+                        <span class="section-label">
                             <mat-icon class="sidenav-prefix-icon">bubble_chart</mat-icon>
-                            <h2 class="mat-title">Data Models</h2>
+                            <p>Data models</p>
+                        </span>
+                    </div>
+                    <!-- <mat-list-item class="section-title">
+                        <span class="section-label">
+                            <mat-icon class="sidenav-prefix-icon">bubble_chart</mat-icon>
+                            <p>Data models</p>
+                        </span>
+                    </mat-list-item> -->
+                    <mat-list-item class="link add-new" *ngIf="projectAdmin" (click)="open('add-ontology')">
+                        <span class="add-new-label">
+                            <mat-icon class="sidenav-prefix-icon">add_circle_outline</mat-icon>
+                            <p>Add a new data model</p>
                         </span>
-                        <span class="fill-remaining-space"></span>
-                        <button mat-icon-button *ngIf="projectAdmin" class="hover-only" (click)="open('add-ontology')">
-                            <mat-icon>add</mat-icon>
-                        </button>
                     </mat-list-item>
-                    <!-- <mat-divider></mat-divider> -->
+                    <mat-divider></mat-divider>
 
                     <!-- Project Ontologies -->
-                    <mat-accordion *ngFor="let onto of projectOntologies" multi [displayMode]="'flat'">
-                        <mat-expansion-panel [expanded]="true">
+                    <mat-accordion *ngFor="let onto of projectOntologies; let first = first" multi
+                        [displayMode]="'flat'">
+                        <mat-expansion-panel [expanded]="first">
                             <mat-expansion-panel-header>
-                                <div class="sidenav-panel-header" (click)="$event.stopPropagation();">
+                                <div class="sidenav-panel-header"
+                                    (click)="projectAdmin ? $event.stopPropagation() : true">
                                     <mat-panel-title class="mat-subheading-2"
                                         (click)="projectAdmin ? open('ontology', onto.id) : null">
-                                        {{onto.label}}
+                                        <p #ontoTitle matTooltip="{{onto.label}}" matTooltipShowDelay="500"
+                                            [matTooltipDisabled]="compareElementHeights(ontoTitle)">{{onto.label}}</p>
                                     </mat-panel-title>
-                                    <mat-panel-description>
-                                        <!-- <button mat-icon-button>
-                                            <mat-icon>settings</mat-icon>
-                                        </button> -->
-                                    </mat-panel-description>
                                 </div>
                             </mat-expansion-panel-header>
                             <!-- list of ontology classes -->
-                            <!-- <mat-list-item>
-                                Classes
-                                <span class="fill-remaining-space"></span>
-                                <button mat-icon-button (click)="open('class')">
-                                    <mat-icon>add</mat-icon>
-                                </button>
-                            </mat-list-item> -->
-                            <mat-list>
-                                <app-ontology-classes [resClasses]="onto.getAllClassDefinitions()"
-                                    [projectMember]="projectMember">
-                                </app-ontology-classes>
-                            </mat-list>
+                            <app-ontology-classes [resClasses]="onto.getAllClassDefinitions()"
+                                [projectMember]="projectMember">
+                            </app-ontology-classes>
                         </mat-expansion-panel>
                         <mat-divider></mat-divider>
                     </mat-accordion>
-                    <!-- link to ontology properties ??? if project admin -->
-
 
                     <!-- Lists Section -->
                     <span *ngIf="projectAdmin">
-                        <mat-list-item class="section-title">
-                            <span class="link section-label" (click)="open('list')">
+                        <div class="section-title">
+                            <span class="section-label">
                                 <mat-icon class="sidenav-prefix-icon">list</mat-icon>
-                                <h2 class="mat-title">Lists</h2>
+                                <p>Lists</p>
+                            </span>
+                        </div>
+                        <mat-list-item class="link add-new" (click)="open('add-list')">
+                            <span class="add-new-label">
+                                <mat-icon class="sidenav-prefix-icon">add_circle_outline</mat-icon>
+                                <p>Add a new list</p>
                             </span>
-                            <span class="fill-remaining-space"></span>
-                            <button mat-icon-button class="hover-only" (click)="open('add-list')">
-                                <mat-icon>add</mat-icon>
-                            </button>
                         </mat-list-item>
+                        <mat-divider></mat-divider>
                         <!-- Project lists -->
-                        <mat-list-item *ngFor="let list of projectLists" class="link" (click)="open('list', list.id)">
-                            {{list.labels | appStringifyStringLiteral}}
+                        <mat-list-item *ngFor="let list of projectLists" class="list link"
+                            (click)="open('list', list.id)">
+                            <p #listTitle matTooltip="{{list.labels | appStringifyStringLiteral}}"
+                                matTooltipShowDelay="500" [matTooltipDisabled]="compareElementHeights(listTitle)">
+                                {{list.labels | appStringifyStringLiteral}}
+                            </p>
+                            <mat-divider></mat-divider>
                         </mat-list-item>
                     </span>
 
@@ -113,11 +117,15 @@ <h2 class="mat-title">Members</h2>
                     <!-- Project permissions ??? will it ever come? -->
 
                     <div class="sidenav-footer" *ngIf="projectAdmin">
-                        <mat-list-item class="section-title">
-                            <span class="link section-label" (click)="open('settings')">
+                        <mat-list-item class="link section-title footer" (click)="open('settings')">
+                            <span class="section-label">
                                 <mat-icon class="sidenav-prefix-icon">settings</mat-icon>
                                 <h2 class="mat-title">Settings</h2>
                             </span>
+                            <span class="fill-remaining-space"></span>
+                            <span mat-icon>
+                                <mat-icon>chevron_right</mat-icon>
+                            </span>
                         </mat-list-item>
                     </div>
                 </mat-list>
diff --git a/src/app/project/project.component.scss b/src/app/project/project.component.scss
index a89ecab14b..fa9cda8a57 100644
--- a/src/app/project/project.component.scss
+++ b/src/app/project/project.component.scss
@@ -6,9 +6,19 @@
 }
 
 .section-title {
+  padding-top: 17.5%;
+
+  &.footer {
+    padding-top: 0%;
+  }
 
   .section-label {
     display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0px 16px;
+    font-size: 20px;
+    font-weight: 300;
   }
   .hover-only {
     display: none;
@@ -21,6 +31,16 @@
   }
 }
 
+.add-new {
+
+  .add-new-label {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+  }
+}
+
 // mobile device: tablet and smaller than a tablet
 @media (max-width: map-get($grid-breakpoints, tablet)) {
   a[id="ontologies"] {
@@ -47,8 +67,10 @@
 }
 
 .sidenav-prefix-icon {
-  margin-right: 8px;
-  margin-top: 4px;
+  padding-right: 16px;
+  font-size: 32px;
+  width: 32px;
+  height: 32px;
 }
 
 .sidenav-container {
diff --git a/src/app/project/project.component.ts b/src/app/project/project.component.ts
index 7015ac04c1..71ebfd995f 100644
--- a/src/app/project/project.component.ts
+++ b/src/app/project/project.component.ts
@@ -229,6 +229,16 @@ export class ProjectComponent implements OnInit {
         this._router.navigate(['/'], { relativeTo: this._route });
     }
 
+    /**
+     * given an Html element, compare the scrollHeight and the clientHeight
+     *
+     * @param elem the element which has the line-clamp css
+     * @returns inverse of comparison between the scrollHeight and the clientHeight of elem
+     */
+    compareElementHeights(elem: HTMLElement): boolean {
+        return !(elem.scrollHeight > elem.clientHeight);
+    }
+
     /**
      * checks if the shortcode is valid: hexadecimal and length = 4
      *
diff --git a/src/app/workspace/results/list-view/resource-list/resource-list.component.html b/src/app/workspace/results/list-view/resource-list/resource-list.component.html
index 4d9a830a4c..48cccb097d 100644
--- a/src/app/workspace/results/list-view/resource-list/resource-list.component.html
+++ b/src/app/workspace/results/list-view/resource-list/resource-list.component.html
@@ -1,12 +1,11 @@
 <!-- When withMultipleSelection is false and user can select only one resource at a time to view -->
 <mat-list class="resource-list">
-    <div class="link"
-        [class.selected-resource]="selectedResourceIdx.indexOf(i) > -1"
-        [class.border-bottom]="!last"
+    <div class="link" [class.selected-resource]="selectedResourceIdx.indexOf(i) > -1" [class.border-bottom]="!last"
         *ngFor="let resource of resources.resources; let i = index; let last = last">
         <mat-list-item>
-            <mat-icon matListIcon>image_search</mat-icon>
-            <div matLine (click)="selectResource({ checked: true, resIndex: i, resId: resource.id, resLabel: resource.label, isCheckbox: false })">
+            <mat-icon matListIcon>{{ getIcon(resource) }}</mat-icon>
+            <div matLine
+                (click)="selectResource({ checked: true, resIndex: i, resId: resource.id, resLabel: resource.label, isCheckbox: false })">
                 <p matLine class="res-class-label">
                     {{ resource.entityInfo.classes[resource.type].label }}
                 </p>
@@ -21,12 +20,10 @@ <h3 matLine class="res-class-value">{{ resource.label }}</h3>
                 </div>
             </div>
             <!-- if withMultipleSelection is true, we display checkbox -->
-            <mat-checkbox #ckbox
-                *ngIf="withMultipleSelection"
-                id="{{ i }}"
+            <mat-checkbox #ckbox *ngIf="withMultipleSelection" id="{{ i }}"
                 (change)="selectResource({ checked: $event.checked, resIndex: i, resId: resource.id, resLabel: resource.label, isCheckbox: true })"
                 class="res-checkbox">
             </mat-checkbox>
         </mat-list-item>
     </div>
-</mat-list>
+</mat-list>
\ No newline at end of file
diff --git a/src/app/workspace/results/list-view/resource-list/resource-list.component.ts b/src/app/workspace/results/list-view/resource-list/resource-list.component.ts
index cb98bb9353..ea89985ddd 100644
--- a/src/app/workspace/results/list-view/resource-list/resource-list.component.ts
+++ b/src/app/workspace/results/list-view/resource-list/resource-list.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
 import { MatCheckbox } from '@angular/material/checkbox';
-import { ReadResourceSequence } from '@dasch-swiss/dsp-js';
+import { Constants, ReadResource, ReadResourceSequence } from '@dasch-swiss/dsp-js';
 import { CheckboxUpdate, FilteredResources } from '../list-view.component';
 import { ListViewService } from '../list-view.service';
 
@@ -62,4 +62,30 @@ export class ResourceListComponent implements OnInit {
 
     }
 
+    /**
+     * given a resource, return the corresponding mat-icon for the subclass
+     *
+     * @returns mat-icon name as string
+     */
+    getIcon(resource: ReadResource): string {
+        const subclass = resource.entityInfo.classes[resource.type].subClassOf[0];
+
+        switch (subclass) {
+            case Constants.AudioRepresentation:
+                return 'audio_file';
+            case Constants.ArchiveRepresentation:
+                return 'folder_zip';
+            case Constants.DocumentRepresentation:
+                return 'description';
+            case Constants.MovingImageRepresentation:
+                return 'video_file';
+            case Constants.StillImageRepresentation:
+                return 'image';
+            case Constants.TextRepresentation:
+                return 'text_snippet';
+            default: // resource does not have a file representation
+                return 'insert_drive_file';
+        }
+    }
+
 }
diff --git a/src/assets/style/_layout.scss b/src/assets/style/_layout.scss
index 342c1336f8..b0e574523d 100644
--- a/src/assets/style/_layout.scss
+++ b/src/assets/style/_layout.scss
@@ -59,7 +59,24 @@
   height: calc(100vh - #{$header-height});
 
   .project-nav {
-    width: 220px;
+    width: 290px;
+
+    .project-title {
+      padding: 20px 16px 20px 16px;
+
+      p {
+        font-size: 24px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;  
+        overflow: hidden;
+        margin: 0px;
+      }
+    }
+
+    .mat-list-base {
+      padding-top: 0px;
+    }
 
     .mat-list.main-list {
       margin-bottom: calc(#{$header-height} - 8px);
@@ -72,40 +89,53 @@
     }
 
     .mat-list-item {
-      height: 64px;
+      height: 48px;
 
       &:hover {
         background: rgba(0, 0, 0, .04);
       }
+
+      &.list {
+        height: auto;
+
+        p {
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;  
+          overflow: hidden;
+        }
+      }
     }
 
     .mat-expansion-panel {
       box-shadow: none !important;
 
       .mat-expansion-panel-header {
-        padding: 0 16px !important;
-        // display: block !important;
+        padding: 0 16px !important; // override default value
+        height: auto !important; // override default value
+      }
+
+      .mat-expansion-panel-header.mat-expanded {
+        background: #cacaca;
       }
 
       .sidenav-panel-header{
         width: 100%;
         mat-panel-title {
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          width: 100%;
-          display: block;
+          overflow: unset;
+          white-space: inherit;
+          text-overflow: unset;
+          display: flex;
+
+          p {
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;  
+            overflow: hidden;
+          }
         }
       }
 
-      // reset default value, if the panel is expanded
-      &.mat-expanded mat-panel-title {
-        overflow: unset;
-        white-space: inherit;
-        text-overflow: unset;
-        display: flex;
-      }
-
       .mat-expansion-panel-body {
         padding: 0 !important
       }