Add dynamic attachment view sizing. Removes the attachment view zooming in the process. see #21390.

git-svn-id: https://develop.svn.wordpress.org/trunk@22324 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Daryl Koopersmith
2012-10-29 18:05:03 +00:00
parent bc29728df2
commit 3ca8808c3b
3 changed files with 113 additions and 135 deletions
+40 -77
View File
@@ -174,6 +174,7 @@
bottom: 0;
height: auto;
width: auto;
margin: 0;
overflow: auto;
}
@@ -197,44 +198,6 @@
font-family: sans-serif;
}
/**
* Attachments
*/
/*.attachments {
position: relative;
width: 100%;
height: 100%;
}
.attachments-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
padding: 0 10px;
background: #fff;
}
.attachments-header h3 {
float: left;
margin: 0;
padding: 0;
line-height: 50px;
font-size: 18px;
font-weight: 200;
}
.attachments ul {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
margin: 0 0 20px;
}*/
/**
* Attachment
*/
@@ -289,49 +252,21 @@
margin: 0 auto;
}
.attachment .thumbnail {
-webkit-transform: translate( 50%, 50% );
-moz-transform: translate( 50%, 50% );
-ms-transform: translate( 50%, 50% );
-o-transform: translate( 50%, 50% );
transform: translate( 50%, 50% );
}
/* Vertically center the icons. */
.attachment .icon {
top: 50%;
left: 50%;
-webkit-transform: translate( -50%, -50% );
-moz-transform: translate( -50%, -50% );
-ms-transform: translate( -50%, -50% );
-o-transform: translate( -50%, -50% );
transform: translate( -50%, -50% );
}
.attachment .filename {
margin-top: 140px;
padding: 0 10px;
text-align: center;
font-weight: bold;
}
.attachment-preview .thumbnail,
.attachment-preview .thumbnail img {
-webkit-transition-property: width, height, top, left, right, bottom;
-moz-transition-property: width, height, top, left, right, bottom;
-ms-transition-property: width, height, top, left, right, bottom;
-o-transition-property: width, height, top, left, right, bottom;
transition-property: width, height, top, left, right, bottom;
-webkit-transition-duration: 80ms;
-moz-transition-duration: 80ms;
-ms-transition-duration: 80ms;
-o-transition-duration: 80ms;
transition-duration: 80ms;
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.attachment-preview .thumbnail {
width: 199px;
height: 199px;
}
.attachment-preview .thumbnail:after {
.attachment-preview:after {
content: '';
display: block;
position: absolute;
@@ -343,8 +278,35 @@
overflow: hidden;
}
.attachment.fit .thumbnail:after {
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
.attachment .thumbnail img {
top: 0;
left: 0;
}
.attachment .icon,
.attachment .thumbnail img {
-webkit-transform: translate( -50%, -50% );
-moz-transform: translate( -50%, -50% );
-ms-transform: translate( -50%, -50% );
-o-transform: translate( -50%, -50% );
transform: translate( -50%, -50% );
}
.attachment .filename {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 5px 10px;
text-align: center;
font-weight: bold;
background: rgba( 255, 255, 255, 0.8 );
box-shadow: 0 0 2px rgba( 0, 0, 0, 0.2 );
}
.attachment-preview .thumbnail {
width: 199px;
height: 199px;
}
.attachment .thumbnail img {
@@ -622,6 +584,7 @@
.attachment-details .describe {
float: left;
margin: 10px 0 0;
border-radius: 3px;
}
/**