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

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

@ -49,14 +49,14 @@
<span class="adf-error-message--text">{{errorMessage}}</span>
</div>
<adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="adf-files-toolbar">
<adf-toolbar-title fxFlex="0 1 auto">
<adf-breadcrumb fxShow fxHide.lt-sm="true"
class="adf-files-breadcrumb"
<adf-toolbar-title fxFlex="0 1 auto">
<adf-breadcrumb
class="adf-files-breadcrumb adf-standard-breadcrumb"
root="APP.PERSONAL-FILES"
[target]="documentList">
</adf-breadcrumb>
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
class="adf-files-breadcrumb"
<adf-dropdown-breadcrumb
class="adf-files-breadcrumb adf-alternate-breadcrumb"
[target]="documentList">
</adf-dropdown-breadcrumb>
</adf-toolbar-title>
@ -250,15 +250,14 @@
key="$thumbnail"
type="image"
[sortable]="false"
class="adf-image-table-cell"
class="adf-image-table-cell adf-folder-image-column"
[class.adf-cell-thumbnail]="thumbnails">
</data-column>
<data-column
*ngIf="showNameColumn && hyperlinkNavigation"
key="name"
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
[formatTooltip]="getNodeNameTooltip"
class="adf-ellipsis-cell adf-expand-cell-5">
[formatTooltip]="getNodeNameTooltip">
<ng-template let-context>
<adf-name-column [context]="context"></adf-name-column>
</ng-template>
@ -268,7 +267,7 @@
key="name"
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
[formatTooltip]="getNodeNameTooltip"
class="adf-ellipsis-cell adf-expand-cell-5">
class="adf-ellipsis-cell adf-expand-cell-5 adf-display-name-column">
</data-column>
<!-- Location column demo -->
<!--
@ -280,6 +279,7 @@
</data-column>
-->
<data-column
class="adf-size-column"
key="content.sizeInBytes"
title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
type="fileSize">
@ -304,12 +304,12 @@
</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}}"
key="id">
</data-column>
<data-column
class="adf-desktop-only"
class="adf-isLocked-column"
title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
key="id">
<ng-template let-entry="$implicit">
@ -322,14 +322,14 @@
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
class="adf-desktop-only">
class="adf-createdBy-column">
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
key="createdAt"
type="date"
[format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
class="adf-desktop-only">
class="adf-desktop-only adf-createdOn-column">
</data-column>
</data-columns>

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

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