[ADF-1725] added responsive layout for task details and infodrawer (#2516)

This commit is contained in:
Vito
2017-10-20 16:42:23 +01:00
committed by Eugenio Romano
parent f9fc76a3ce
commit 6b20c89b6d
4 changed files with 11 additions and 7 deletions
@@ -19,7 +19,10 @@
</div> </div>
</div> </div>
<div class="adf-task-details-core"> <div class="adf-task-details-core"
fxLayout
fxLayout.lt-lg="column"
fxLayoutGap.lt-lg="0px">
<div class="adf-task-details-core-form"> <div class="adf-task-details-core-form">
<div *ngIf="isAssigned()"> <div *ngIf="isAssigned()">
@@ -65,6 +65,10 @@ adf-task-header.assign-edit-view ::ng-deep adf-card-view ::ng-deep .adf-property
&-sidebar { &-sidebar {
&-drawer { &-drawer {
margin-left: 10px; margin-left: 10px;
@media screen and (max-width: 1279px) {
margin-left: 0px;
}
} }
&-checklist { &-checklist {
@@ -3,7 +3,7 @@
.adf { .adf {
&-info-drawer-layout { &-info-drawer-layout {
width: 350px; width: 100%;
display: block; display: block;
padding: 8px 0; padding: 8px 0;
background-color: mat-color($background, dialog); background-color: mat-color($background, dialog);
@@ -35,11 +35,11 @@
flex-wrap: wrap; flex-wrap: wrap;
padding-bottom: 24px; padding-bottom: 24px;
padding-top: 8px; padding-top: 8px;
justify-content: space-between;
} }
&__range-block.adf-pagination__block:first-child { &__range-block.adf-pagination__block:first-child {
order: 1; order: 1;
width: 50%;
flex: 0 0 auto; flex: 0 0 auto;
box-sizing: border-box; box-sizing: border-box;
padding-left: 16px; padding-left: 16px;
@@ -48,7 +48,6 @@
&__perpage-block { &__perpage-block {
order: 3; order: 3;
width: 50%;
box-sizing: border-box; box-sizing: border-box;
padding-left: 16px; padding-left: 16px;
justify-content: flex-start; justify-content: flex-start;
@@ -56,7 +55,6 @@
&__actualinfo-block { &__actualinfo-block {
order: 2; order: 2;
width: 50%;
box-sizing: border-box; box-sizing: border-box;
padding-right: 16px; padding-right: 16px;
justify-content: flex-end; justify-content: flex-end;
@@ -64,7 +62,6 @@
&__controls-block { &__controls-block {
order: 4; order: 4;
width: 50%;
box-sizing: border-box; box-sizing: border-box;
padding-right: 16px; padding-right: 16px;
justify-content: flex-end; justify-content: flex-end;