From 12c98a831e205c4d9112d25ca66167b632a8b461 Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@gmail.com>
Date: Tue, 28 Jun 2016 15:29:20 +0100
Subject: [PATCH] Use 100% of screen width for results on smaller screens

- Ellipsis used and text truncated if name overflows
- Icon column does not expand out as screen gets wider

Refs #228
---
 .../app/components/search/search.component.ts     |  6 ++++++
 .../src/components/alfresco-search.component.html |  4 ++--
 .../src/components/alfresco-search.component.ts   | 15 ++++++++++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/demo-shell-ng2/app/components/search/search.component.ts b/demo-shell-ng2/app/components/search/search.component.ts
index 2bc7c5302c..c3d57964d8 100644
--- a/demo-shell-ng2/app/components/search/search.component.ts
+++ b/demo-shell-ng2/app/components/search/search.component.ts
@@ -37,9 +37,15 @@ declare let __moduleName: string;
             cursor: pointer;
         }
         @media screen and (max-width: 600px) {
+            :host .col-display-name {
+                min-width: 100px;
+            }
             :host .col-modified-at, :host .col-modified-by {
                 display: none;
             }
+            :host div.search-results-container table {
+                width: 100%;
+            }
         }
     `],
     directives: [ ALFRESCO_SEARCH_DIRECTIVES, VIEWERCOMPONENT ]
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
index 75f2147f21..970cade078 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
@@ -3,7 +3,7 @@
 <table data-automation-id="search_result_table" *ngIf="results && results.length && searchTerm" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
     <thead>
     <tr>
-        <th class="mdl-data-table__cell--non-numeric"></th>
+        <th class="mdl-data-table__cell--non-numeric col-mimetype-icon"></th>
         <th class="mdl-data-table__cell--non-numeric col-display-name">
             {{'SEARCH.RESULTS.COLUMNS.NAME' | translate}}
         </th>
@@ -18,7 +18,7 @@
     <tbody>
 
     <tr *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)">
-        <td><img src="{{getMimeTypeIcon(result)}}" /></td>
+        <td class="col-mimetype-icon"><img src="{{getMimeTypeIcon(result)}}" /></td>
         <td class="mdl-data-table__cell--non-numeric col-display-name"
             attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>
         <td class="mdl-data-table__cell--non-numeric  col-modified-by"
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
index 2c81a0ffbc..fc15adf24f 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
@@ -26,7 +26,20 @@ declare let __moduleName: string;
 @Component({
     moduleId: __moduleName,
     selector: 'alfresco-search',
-    styles: [],
+    styles: [`
+        :host .mdl-data-table td {
+            max-width: 0;
+            white-space: nowrap;
+        }
+        :host .mdl-data-table td.col-mimetype-icon {
+            width: 24px;
+        }
+        :host .col-display-name {
+            min-width: 250px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    `],
     templateUrl: './alfresco-search.component.html',
     providers: [AlfrescoSearchService],
     pipes: [AlfrescoPipeTranslate]