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

[ADF-4282] Fix document list UI when on small screen devices (#4497)

Browse Source 
* [ADF-4282] Fix document list content UI in small resolution devices

* [ADF-4282] Fix document list content UI in small resolution devices
This commit is contained in:
arditdomi 2019-03-26 11:41:00 +00:00 committed by Eugenio Romano
parent cec08f50d7
commit 0a3c4367a0
2 changed files with 106 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
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 fxShow fxHide.lt-sm="true" <adf-breadcrumb
class="adf-files-breadcrumb" class="adf-files-breadcrumb adf-standard-breadcrumb"
root="APP.PERSONAL-FILES" root="APP.PERSONAL-FILES"
[target]="documentList"> [target]="documentList">
</adf-breadcrumb> </adf-breadcrumb>
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true" <adf-dropdown-breadcrumb
class="adf-files-breadcrumb" class="adf-files-breadcrumb adf-alternate-breadcrumb"
[target]="documentList"> [target]="documentList">
</adf-dropdown-breadcrumb> </adf-dropdown-breadcrumb>
</adf-toolbar-title> </adf-toolbar-title>
@ -250,15 +250,14 @@
key="$thumbnail" key="$thumbnail"
type="image" type="image"
[sortable]="false" [sortable]="false"
class="adf-image-table-cell" class="adf-image-table-cell adf-folder-image-column"
[class.adf-cell-thumbnail]="thumbnails"> [class.adf-cell-thumbnail]="thumbnails">
</data-column> </data-column>
<data-column <data-column
*ngIf="showNameColumn && hyperlinkNavigation" *ngIf="showNameColumn && hyperlinkNavigation"
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">
<ng-template let-context> <ng-template let-context>
<adf-name-column [context]="context"></adf-name-column> <adf-name-column [context]="context"></adf-name-column>
</ng-template> </ng-template>
@ -268,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"> class="adf-ellipsis-cell adf-expand-cell-5 adf-display-name-column">
</data-column> </data-column>
<!-- Location column demo --> <!-- Location column demo -->
<!-- <!--
@ -280,6 +279,7 @@
</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">
@ -304,12 +304,12 @@
</data-column> </data-column>
--> -->
<data-column <data-column
class="adf-full-width adf-ellipsis-cell" class="adf-full-width adf-ellipsis-cell adf-nodeId-column"
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-desktop-only" class="adf-isLocked-column"
title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}" title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
key="id"> key="id">
<ng-template let-entry="$implicit"> <ng-template let-entry="$implicit">
@ -322,14 +322,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-desktop-only"> class="adf-createdBy-column">
</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"> class="adf-desktop-only adf-createdOn-column">
</data-column> </data-column>
</data-columns> </data-columns>

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

@ -1,7 +1,7 @@
@mixin adf-file-component-theme($theme) { @mixin adf-file-component-theme($theme) {
$minimumDocumentListWidth: 900px;
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
.adf-container { .adf-container {
margin: 10px !important; margin: 10px !important;
} }
@ -71,10 +71,6 @@
.adf-toolbar-title { .adf-toolbar-title {
display: flex; display: flex;
width: 100%; width: 100%;
.adf-breadcrumb {
width: 0;
}
} }
} }
@ -140,46 +136,108 @@
} }
} }
@media (max-device-width: $minimumDocumentListWidth) { @media all {
.adf-file-list-container .adf-datatable-list { .adf-isLocked-column {
.adf-datatable-cell, max-width: 30px !important;
.adf-datatable-table-cell-header { margin-right: 5px;
display: none;
} }
.adf-datatable-cell:first-child, .adf-folder-image-column {
.adf-datatable-table-cell-header:first-child, max-width: 28px!important;
.adf-datatable-cell:nth-child(2),
.adf-datatable-table-cell-header:nth-child(2) {
display: table-cell;
} }
} }
.adf-site-container-style { @media (max-width: 768px) {
width: 100%; .adf-createdOn-column {
display: block; display: none !important;
& ::ng-deep .adf-site-dropdown-list-element {
width: 100%;
} }
} }
adf-file-uploading-dialog ::ng-deep .adf-upload-dialog { @media (max-width: 500px) {
width: 80%; .adf {
& ::ng-deep adf-file-uploading-list ::ng-deep adf-file-uploading-list-row &-display-name-column {
.adf-file-uploading-row__group { max-width: 50% !important;
min-width: 0; }
&-size-column {
display: none !important;
}
&-createdBy-column {
max-width: 45% !important;
}
&-nodeId-column {
display: none !important;
} }
} }
} }
@media (max-device-width: 1024px) { @media (max-width: 600px) {
.adf-file-list-container .adf-datatable-list { .adf {
.adf-datatable-cell:nth-child(5), &-display-name-column {
.adf-datatable-table-cell-header:nth-child(5) { max-width: 35%;
display: none; }
&-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 {
&-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%;
} }
} }
} }