inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix responsiveness

Browse Source
This commit is contained in:
Mario Romano
2016-06-23 11:31:32 +01:00
parent 7bfe8b97ae
commit 67e977b856
3 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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) {
.file-dialog {
width: 315px;
}
}
@media only screen and (min-width: 375px) and (max-width: 667px) {
@media (max-width: 740px) {
.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
}
}

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

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

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

@@ -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"