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

[ADF-4305] Fix document list component styling (#4509)

Browse Source
This commit is contained in:
davidcanonieto
2019-03-28 10:54:39 +00:00
committed by Eugenio Romano
parent 18bf2c58c2
commit f00ee43b60
3 changed files with 94 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
demo-shell/src/app/components/files/files.component.html
View File

@@ -50,13 +50,13 @@
</div>
<adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="adf-files-toolbar">
<adf-toolbar-title fxFlex="0 1 auto">
<adf-breadcrumb
class="adf-files-breadcrumb adf-standard-breadcrumb"
<adf-breadcrumb fxShow fxHide.lt-sm="true"
class="adf-files-breadcrumb"
root="APP.PERSONAL-FILES"
[target]="documentList">
</adf-breadcrumb>
<adf-dropdown-breadcrumb
class="adf-files-breadcrumb adf-alternate-breadcrumb"
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
class="adf-files-breadcrumb"
[target]="documentList">
</adf-dropdown-breadcrumb>
</adf-toolbar-title>
@@ -250,7 +250,7 @@
key="$thumbnail"
type="image"
[sortable]="false"
class="adf-image-table-cell adf-folder-image-column"
class="adf-image-table-cell "
[class.adf-cell-thumbnail]="thumbnails">
</data-column>
<data-column
@@ -267,7 +267,7 @@
key="name"
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
[formatTooltip]="getNodeNameTooltip"
class="adf-ellipsis-cell adf-expand-cell-5 adf-display-name-column">
class="adf-ellipsis-cell adf-expand-cell-5">
</data-column>
<!-- Location column demo -->
<!--
@@ -279,15 +279,16 @@
</data-column>
-->
<data-column
class="adf-size-column"
key="content.sizeInBytes"
title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
type="fileSize">
type="fileSize"
class="adf-desktop-only">
</data-column>
<data-column
*ngIf="searchTerm"
key="search"
title="Search">
title="Search"
class="adf-desktop-only">
<ng-template let-entry="$implicit">
<div [innerHTML]="searchResultsHighlight(entry.row.node.entry.search) | highlight:searchTerm">
</div>
@@ -305,14 +306,14 @@
</data-column>
-->
<data-column
class="adf-full-width adf-ellipsis-cell adf-nodeId-column"
class="adf-full-width adf-ellipsis-cell adf-desktop-only"
title="{{'DOCUMENT_LIST.COLUMNS.NODE_ID' | translate}}"
key="id">
</data-column>
<data-column
class="adf-isLocked-column"
title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
key="id">
key="id"
class="adf-desktop-only">
<ng-template let-entry="$implicit">
<button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="adf-lock-button">
<mat-icon *ngIf="entry.row.getValue('isLocked')">lock</mat-icon>
@@ -323,14 +324,14 @@
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
class="adf-createdBy-column">
class="adf-desktop-only">
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
key="createdAt"
type="date"
[format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
class="adf-desktop-only adf-createdOn-column">
class="adf-desktop-only">
</data-column>
</data-columns>

141
demo-shell/src/app/components/files/files.component.scss
View File

@@ -154,90 +154,97 @@
}
@media (max-width: 500px) {
.adf {
.adf-datatable-list {
.adf {
&-display-name-column {
max-width: 50% !important;
}
&-size-column {
display: none !important;
}
&-createdBy-column {
max-width: 45% !important;
}
&-nodeId-column {
display: none !important;
&-display-name-column {
max-width: 50% !important;
}
&-size-column {
display: none !important;
}
&-createdBy-column {
max-width: 45% !important;
}
&-nodeId-column {
display: none !important;
}
}
}
}
@media (max-width: 600px) {
.adf {
&-display-name-column {
max-width: 35%;
}
&-size-column {
max-width: 8%;
}
&-createdBy-column {
max-width: 35%;
}
&-createdOn-column {
max-width: 15%;
}
&-nodeId-column {
max-width: 10%;
}
&-isLocked-column {
display: none!important;
}
&-standard-breadcrumb {
display: none !important;
.adf-datatable-list {
.adf {
&-display-name-column {
max-width: 35%;
}
&-size-column {
max-width: 8%;
}
&-createdBy-column {
max-width: 35%;
}
&-createdOn-column {
max-width: 15%;
}
&-nodeId-column {
max-width: 10%;
}
&-isLocked-column {
display: none!important;
}
&-standard-breadcrumb {
display: none !important;
}
}
}
}
@media (min-width: 601px) {
.adf {
.adf-datatable-list {
.adf {
&-display-name-column {
max-width: 30%;
}
&-size-column {
max-width: 10%;
}
&-createdBy-column {
max-width: 30%;
}
&-createdOn-column {
max-width: 15%;
}
&-nodeId-column {
max-width: 12%;
}
&-alternate-breadcrumb {
display: none !important;
&-display-name-column {
max-width: 30%;
}
&-size-column {
max-width: 10%;
}
&-createdBy-column {
max-width: 30%;
}
&-createdOn-column {
max-width: 15%;
}
&-nodeId-column {
max-width: 12%;
}
&-alternate-breadcrumb {
display: none !important;
}
}
}
}
@media (min-width: 1400px) {
.adf {
&-display-name-column {
max-width: 40%;
}
&-size-column {
max-width: 15%;
}
&-createdBy-column {
max-width: 20%;
}
&-createdOn-column {
max-width: 20%;
}
&-nodeId-column {
max-width: 20%;
.adf-datatable-list {
.adf {
&-display-name-column {
max-width: 40%;
}
&-size-column {
max-width: 15%;
}
&-createdBy-column {
max-width: 20%;
}
&-createdOn-column {
max-width: 20%;
}
&-nodeId-column {
max-width: 20%;
}
}
}
}