From 1f4b1231c609e978a76888f73c099c4ed59a8690 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Popovics=20Andr=C3=A1s?=
 <popovicsandras@users.noreply.github.com>
Date: Tue, 12 Sep 2017 14:10:16 +0100
Subject: [PATCH] Fix minimal responsiveness of demo app's activiti section
 (#2324)

---
 demo-shell-ng2/app/app.module.ts              |  4 +-
 .../activiti/activiti-demo.component.html     | 26 +++----
 .../activiti/activiti-demo.component.scss     | 74 ++++++++++++++-----
 demo-shell-ng2/package.json                   |  1 +
 4 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/demo-shell-ng2/app/app.module.ts b/demo-shell-ng2/app/app.module.ts
index d184360c00..619ce0dd09 100644
--- a/demo-shell-ng2/app/app.module.ts
+++ b/demo-shell-ng2/app/app.module.ts
@@ -35,6 +35,7 @@ import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
 import { ViewerModule } from 'ng2-alfresco-viewer';
 import { WebScriptModule } from 'ng2-alfresco-webscript';
 
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { Editor3DModule } from 'ng2-3d-editor';
 import { ChartsModule } from 'ng2-charts';
 import { AppComponent } from './app.component';
@@ -100,7 +101,8 @@ if (process.env.ENV === 'production') {
         CustomEditorsModule,
         Editor3DModule.forRoot(),
         ChartsModule,
-        ThemePickerModule
+        ThemePickerModule,
+        FlexLayoutModule
     ],
     declarations: [
         AppComponent,
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
index bb41ef3680..1b141dfae0 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -1,8 +1,8 @@
 <md-tab-group [(selectedIndex)]="activeTab">
     <md-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
         <div class="page-content">
-            <div class="activiti-demo-grid">
-                <div class="activiti-demo-grid-item activiti-demo-tasks-menu">
+            <div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+                <div class="activiti-demo-grid-item activiti-demo-tasks-menu" fxFlex.gt-md="225px">
                     <div class="activiti-demo-list-buttons">
                         <button color="primary" md-raised-button data-automation-id="btn-start-task" class="activiti-demo-list-buttons-start" (click)="navigateStartTask()">
                             <md-icon>add</md-icon>
@@ -23,7 +23,7 @@
                         </adf-accordion-group>
                     </adf-accordion>
                 </div>
-                <div class="activiti-demo-grid-item activiti-demo-tasks-list"
+                <div class="activiti-demo-grid-item activiti-demo-tasks-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                      *ngIf="taskFilter && !isStartTaskMode()">
                     <activiti-tasklist
                         [appId]="taskFilter?.appId"
@@ -59,7 +59,7 @@
                         [supportedPageSizes]="[2, 4, 6, 8, 10, 12]">
                     </adf-pagination>
                 </div>
-                <div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()">
+                <div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">
                     <activiti-task-details #activitidetails
                                            [debugMode]="true"
                                            [taskId]="currentTaskId"
@@ -90,7 +90,7 @@
                         </md-card-content>
                     </md-card>
                 </div>
-                <div class="activiti-demo-grid-item activiti-demo-tasks-start" *ngIf="isStartTaskMode()">
+                <div class="activiti-demo-grid-item activiti-demo-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
                     <adf-start-task
                         [appId]="appId"
                         (success)="onStartTaskSuccess($event)"
@@ -103,8 +103,8 @@
     <md-tab id="processes-header" href="#processes"
             label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
         <div class="page-content">
-            <div class="activiti-demo-grid">
-                <div class="activiti-demo-grid-item activiti-demo-processes-menu">
+            <div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+                <div class="activiti-demo-grid-item activiti-demo-processes-menu" fxFlex.gt-md="225px">
                     <div class="activiti-demo-list-buttons">
                         <button
                             color="primary"
@@ -128,7 +128,7 @@
                         </adf-accordion-group>
                     </adf-accordion>
                 </div>
-                <div class="activiti-demo-grid-item activiti-demo-processes-list activiti-demo-list"
+                <div class="activiti-demo-grid-item activiti-demo-processes-list activiti-demo-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                      *ngIf="processFilter && !isStartProcessMode()">
                     <activiti-process-instance-list
                         *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
@@ -148,7 +148,7 @@
                         -->
                     </activiti-process-instance-list>
                 </div>
-                <div class="activiti-demo-grid-item activiti-demo-processes-details" *ngIf="!isStartProcessMode()">
+                <div class="activiti-demo-grid-item activiti-demo-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
                     <activiti-process-instance-details
                         [processInstanceId]="currentProcessInstanceId"
                         (processCancelled)="processCancelled()"
@@ -176,7 +176,7 @@
                         </md-card-content>
                     </md-card>
                 </div>
-                <div class="activiti-demo-grid-item activiti-demo-processes-start"
+                <div class="activiti-demo-grid-item activiti-demo-processes-start" fxFlex.gt-md="1 1 auto"
                      *ngIf="isStartProcessMode()">
                     <adf-start-process
                         [appId]="appId"
@@ -189,8 +189,8 @@
     </md-tab>
     <md-tab id="report-header" href="#report"
             label="{{'PS-TAB.REPORTS-TAB' | translate}}">
-        <div class="activiti-demo-grid">
-            <div class="activiti-demo-grid-item activiti-demo-reports-menu">
+        <div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+            <div class="activiti-demo-grid-item activiti-demo-reports-menu" fxFlex.gt-md="300px">
                 <span><h5>Report List</h5></span>
                 <hr>
                 <analytics-report-list
@@ -200,7 +200,7 @@
                     #analyticsreportlist>
                 </analytics-report-list>
             </div>
-            <div class="activiti-demo-grid-item activiti-demo-reports-details">
+            <div class="activiti-demo-grid-item activiti-demo-reports-details" fxFlex.gt-md="1 1 auto">
                 <activiti-analytics
                     *ngIf="report"
                     [appId]="appId"
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.scss b/demo-shell-ng2/app/components/activiti/activiti-demo.component.scss
index eeb4bbbd72..fa71cf7242 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.scss
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.scss
@@ -8,13 +8,11 @@
 }
 
 .activiti-demo-grid {
-    display: flex;
-    align-items: stretch;
 
     .activiti-demo-grid-item {
         margin: 4px;
         box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-        padding: 10px 10px 10px 10px;
+        padding: 10px;
     }
 
     .activiti-demo-list-buttons {
@@ -25,25 +23,51 @@
         width: 100%;
     }
 
-    .activiti-demo-tasks-menu,
-    .activiti-demo-processes-menu,
-    .activiti-demo-reports-menu {
-        min-width: 170px;
-    }
+    .activiti-demo-tasks-list.small-pagination,
+    .activiti-demo-processes-list.small-pagination {
+        .adf-pagination {
 
-    .activiti-demo-tasks-list,
-    .activiti-demo-processes-list {
-        min-width: 510px;
-        padding: 0;
-    }
+            flex-wrap: wrap;
+            padding-bottom: 24px;
+            padding-top: 8px;
 
-    .activiti-demo-tasks-details,
-    .activiti-demo-tasks-start,
-    .activiti-demo-processes-details,
-    .activiti-demo-processes-start,
-    .activiti-demo-reports-details {
-        flex-grow: 1;
-        min-width: 680px;
+            &__block {
+                border-right: none;
+            }
+
+            &__range-block.adf-pagination__block:first-child {
+                order: 1;
+                width: 60%;
+                flex: 0 0 auto;
+                box-sizing: border-box;
+                padding-left: 2px;
+                justify-content: flex-start;
+            }
+
+            &__perpage-block {
+                order: 3;
+                width: 60%;
+                box-sizing: border-box;
+                padding-left: 2px;
+                justify-content: flex-start;
+            }
+
+            &__actualinfo-block {
+                order: 2;
+                width: 40%;
+                box-sizing: border-box;
+                padding-right: 2px;
+                justify-content: flex-end;
+            }
+
+            &__controls-block {
+                order: 4;
+                width: 40%;
+                box-sizing: border-box;
+                padding-right: 2px;
+                justify-content: flex-end;
+            }
+        }
     }
 
     .activiti-demo-list {
@@ -71,4 +95,14 @@
             font-size: 14px;
         }
     }
+
+    @media screen and (max-width: 1279px) {
+        container-widget .grid-list {
+            flex-direction: column;
+
+            .grid-list-item {
+                width: 100% !important;
+            }
+        }
+    }
 }
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 7a4599ed48..2ef526a553 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -61,6 +61,7 @@
     "@angular/compiler": "4.2.5",
     "@angular/compiler-cli": "4.2.5",
     "@angular/core": "4.2.5",
+    "@angular/flex-layout": "^2.0.0-beta.9",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
     "@angular/material": "2.0.0-beta.8",