inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use 100% of screen width for results on smaller screens

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

Refs #228
This commit is contained in:
Will Abson 2016-06-28 15:29:20 +01:00
parent b4766d7be4
commit 12c98a831e
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demo-shell-ng2/app/components/search/search.component.ts
View File

@ -37,9 +37,15 @@ declare let __moduleName: string;
cursor: pointer; cursor: pointer;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
:host .col-display-name {
min-width: 100px;
}
:host .col-modified-at, :host .col-modified-by { :host .col-modified-at, :host .col-modified-by {
display: none; display: none;
} }
:host div.search-results-container table {
width: 100%;
}
} }
`], `],
directives: [ ALFRESCO_SEARCH_DIRECTIVES, VIEWERCOMPONENT ] directives: [ ALFRESCO_SEARCH_DIRECTIVES, VIEWERCOMPONENT ]

4
ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
View File

@ -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"> <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> <thead>
<tr> <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"> <th class="mdl-data-table__cell--non-numeric col-display-name">
{{'SEARCH.RESULTS.COLUMNS.NAME' | translate}} {{'SEARCH.RESULTS.COLUMNS.NAME' | translate}}
</th> </th>
@ -18,7 +18,7 @@
<tbody> <tbody>
<tr *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)"> <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" <td class="mdl-data-table__cell--non-numeric col-display-name"
attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td> attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>
<td class="mdl-data-table__cell--non-numeric col-modified-by" <td class="mdl-data-table__cell--non-numeric col-modified-by"

15
ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
View File

@ -26,7 +26,20 @@ declare let __moduleName: string;
@Component({ @Component({
moduleId: __moduleName, moduleId: __moduleName,
selector: 'alfresco-search', 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', templateUrl: './alfresco-search.component.html',
providers: [AlfrescoSearchService], providers: [AlfrescoSearchService],
pipes: [AlfrescoPipeTranslate] pipes: [AlfrescoPipeTranslate]