inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-10-08 14:51:32 +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
Download Patch File Download Diff File Expand all files Collapse all files

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%;
}
}
}