fix responsiveness

ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.css

@@ -7,7 +7,7 @@
 }
 
 :host .file-dialog {
-    width: 800px;
+    width: 700px;
     display: none;
     -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
     box-shadow: -2px -1px 8px 3px rgba(0, 0, 0, .2);
@@ -29,7 +29,7 @@
 }
 
 :host .file-dialog .header {
-    background-color: rgb(31,188,210);
+    background-color: rgb(31, 188, 210);
     border: 1px transparent solid;
     border-bottom: 1px solid #c7c7c7;
     -moz-border-radius-topleft: 2px;
@@ -126,32 +126,26 @@
     text-align: left;
 }
 
-@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
+@media only screen and (max-device-width: 520px){
+    .file-dialog {
+        width: 100%;
+        padding: 0 0 0 0;
+        margin: 0 0 0 0;
+        right: 0;
+        left: 0;
+        position: absolute;
+    }
+}
+
+@media (max-device-width: 568px) {
     .file-dialog {
         width: 280px;
     }
 }
 
-@media only screen and (min-width: 360px) and (max-width: 640px) {
+@media (max-width: 740px) {
-    .file-dialog {
-        width: 315px;
-    }
-}
-
-@media only screen and (min-width: 375px) and (max-width: 667px) {
     .file-dialog {
         width: 325px;
     }
 }
 
-@media only screen and (min-width: 411px) and (max-width: 731px) {
-    .file-dialog {
-        width: 365px;
-    }
-}
-
-@media only screen and (min-width: 435px) and (max-width: 773px) {
-    .content-layout {
-        height: 420px
-    }
-}

ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.css

@@ -45,10 +45,17 @@
 }
 
 :host .mdl-progress{
-    width: 300px;
+    width: 150px;
 }
 
-@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
+@media (max-device-width: 360px){
+    .truncate {
+        max-width: 50px;
+        margin-left: 0px;
+    }
+}
+
+@media (max-device-width: 568px) {
     .truncate {
         width: 60px;
     }
@@ -57,17 +64,26 @@
     }
 }
 
-@media only screen and (min-width: 360px) and (max-width: 640px) {
+@media (max-width: 740px) {
     .truncate {
         max-width: 80px;
     }
+
     .mdl-progress {
-        max-width: 80px;
+        max-width: 70px;
+    }
+
+    .size-column {
+        display: none;
     }
 }
 
-@media (min-width: 640px) {
+@media (min-width: 740px) {
     .truncate {
         width: 249px;
     }
+
+    .size-column {
+        display: table-cell;
+    }
 }

ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.html

@@ -7,7 +7,7 @@
     <tr>
         <th>{{'FILE_UPLOAD.FILE_INFO.NAME' | translate}}</th>
         <th>{{'FILE_UPLOAD.FILE_INFO.PROGRESS' | translate}}</th>
-        <th class="mdl-cell--hide-phone">{{'FILE_UPLOAD.FILE_INFO.SIZE' | translate}}</th>
+        <th class="mdl-cell--hide-phone size-column">{{'FILE_UPLOAD.FILE_INFO.SIZE' | translate}}</th>
         <th>{{'FILE_UPLOAD.FILE_INFO.ACTION' | translate}}</th>
     </tr>
     <tr *ngFor="let file of filesUploadingList">
@@ -20,7 +20,7 @@
                 <div class="auxbar bar bar3" style="width: 0%;"></div>
             </div>
         </td>
-        <td class="mdl-data-table__cell--non-numeric mdl-cell--hide-phone">{{file.size}}</td>
+        <td class="mdl-data-table__cell--non-numeric mdl-cell--hide-phone size-column">{{file.size}}</td>
         <td>
             <span *ngIf="file.done && !file.abort"><i data-automation-id="done_icon" class="material-icons">done</i></span>
             <span *ngIf="file.uploading" (click)="abort(file.id)" class="cursor" ><i data-automation-id="abort_cancel_upload"