Media: Improve upload page media item layout on smaller screens.
This allows smaller screens to wrap error messages and other uploader media item elements in a more readable way. Props joedolson sabernhardt, Presskopp. See #51754. Built from https://develop.svn.wordpress.org/trunk@51195 git-svn-id: http://core.svn.wordpress.org/trunk@50804 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
84ee1c9de5
commit
b2c449b1ec
|
@ -49,6 +49,7 @@ if ( isset( $_REQUEST['attachment_id'] ) && (int) $_REQUEST['attachment_id'] &&
|
|||
switch ( $_REQUEST['fetch'] ) {
|
||||
case 3:
|
||||
?>
|
||||
<div class="media-item-wrapper">
|
||||
<div class="attachment-details">
|
||||
<?php
|
||||
$thumb_url = wp_get_attachment_image_src( $id, 'thumbnail', true );
|
||||
|
@ -79,6 +80,7 @@ if ( isset( $_REQUEST['attachment_id'] ) && (int) $_REQUEST['attachment_id'] &&
|
|||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
break;
|
||||
case 2:
|
||||
|
|
|
@ -113,9 +113,9 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.media-item {
|
||||
.media-item-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat( 2, 1fr );
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.media-item .attachment-tools {
|
||||
|
@ -254,6 +254,7 @@
|
|||
|
||||
.media-upload-form .media-item .error {
|
||||
padding: 10px 14px 10px 0;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.media-item .error-div button.dismiss {
|
||||
|
@ -1288,6 +1289,12 @@ audio, video {
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.media-item-wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Media queries for media grid.
|
||||
*/
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -112,9 +112,9 @@
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.media-item {
|
||||
.media-item-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat( 2, 1fr );
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.media-item .attachment-tools {
|
||||
|
@ -253,6 +253,7 @@
|
|||
|
||||
.media-upload-form .media-item .error {
|
||||
padding: 10px 0 10px 14px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.media-item .error-div button.dismiss {
|
||||
|
@ -1287,6 +1288,12 @@ audio, video {
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.media-item-wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Media queries for media grid.
|
||||
*/
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -13,7 +13,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.8-beta2-51194';
|
||||
$wp_version = '5.8-beta2-51195';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
Loading…
Reference in New Issue