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

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

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

12
lib/core/datatable/components/datatable/datatable.component.scss
View File

@@ -466,17 +466,13 @@
/* mobile phone */ /* mobile phone */
@media all and (max-width: 768px) { @media all and (max-width: 768px) {
.adf-desktop-only { .adf-desktop-only {
display: none; display: none !important;
}
.adf-sticky-header {
width: 100%;
} }
} }
@media (max-device-width: 768px) { @media (max-device-width: 768px) {
.adf-desktop-only { .adf-desktop-only {
display: none; display: none !important;
} }
} }
@@ -496,6 +492,8 @@
.adf-sticky-header { .adf-sticky-header {
border-top: 0; border-top: 0;
max-width: calc(100% - 0.2em);
.adf-datatable-header { .adf-datatable-header {
position: absolute; position: absolute;
background-color: mat-color($background, card); background-color: mat-color($background, card);
@@ -503,7 +501,7 @@
z-index: 10; z-index: 10;
border-top: $data-table-dividers; border-top: $data-table-dividers;
border-bottom: $data-table-dividers; border-bottom: $data-table-dividers;
width: calc(100% - 16em); width: calc(100% - 17.4em);
} }
.adf-datatable-body { .adf-datatable-body {