Fix the search field width in the media modal, media library grid and on the install new plugins screen. Props helen, fixes #30658.

Built from https://develop.svn.wordpress.org/trunk@30813


git-svn-id: http://core.svn.wordpress.org/trunk@30803 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2014-12-11 04:12:23 +00:00
parent 4a9121b44b
commit 0aa0016488
13 changed files with 75 additions and 95 deletions

View File

@ -954,6 +954,10 @@ th.action-links {
margin-left: 20px; margin-left: 20px;
} }
.filter-items {
float: right;
}
.filter-links { .filter-links {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
@ -988,23 +992,22 @@ th.action-links {
} }
.wp-filter .search-form { .wp-filter .search-form {
margin: 10px; float: left;
position: absolute; margin: 10px 0;
left: 0;
top: 0;
} }
.wp-filter .search-form input[type="search"] { .wp-filter .search-form input[type="search"] {
margin: 0; margin: 0;
padding: 3px 5px; padding: 3px 5px;
max-width: 280px; width: 280px;
width: 100%; max-width: 100%;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
line-height: 1.5; line-height: 1.5;
} }
.wp-filter .search-form select { .wp-filter .search-form select {
margin: 0;
height: 33px; height: 33px;
vertical-align: top; vertical-align: top;
} }
@ -1205,11 +1208,17 @@ th.action-links {
} }
} }
@media only screen and (max-width: 910px) { @media only screen and (max-width: 1000px) {
.filter-items {
float: none;
}
.wp-filter .media-toolbar-primary,
.wp-filter .media-toolbar-secondary,
.wp-filter .search-form { .wp-filter .search-form {
float: none; /* Remove float from media-views.css */ float: none; /* Remove float from media-views.css */
position: relative; position: relative;
margin: 20px 0; max-width: 100%;
} }
} }

View File

@ -954,6 +954,10 @@ th.action-links {
margin-right: 20px; margin-right: 20px;
} }
.filter-items {
float: left;
}
.filter-links { .filter-links {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
@ -988,23 +992,22 @@ th.action-links {
} }
.wp-filter .search-form { .wp-filter .search-form {
margin: 10px; float: right;
position: absolute; margin: 10px 0;
right: 0;
top: 0;
} }
.wp-filter .search-form input[type="search"] { .wp-filter .search-form input[type="search"] {
margin: 0; margin: 0;
padding: 3px 5px; padding: 3px 5px;
max-width: 280px; width: 280px;
width: 100%; max-width: 100%;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
line-height: 1.5; line-height: 1.5;
} }
.wp-filter .search-form select { .wp-filter .search-form select {
margin: 0;
height: 33px; height: 33px;
vertical-align: top; vertical-align: top;
} }
@ -1205,11 +1208,17 @@ th.action-links {
} }
} }
@media only screen and (max-width: 910px) { @media only screen and (max-width: 1000px) {
.filter-items {
float: none;
}
.wp-filter .media-toolbar-primary,
.wp-filter .media-toolbar-secondary,
.wp-filter .search-form { .wp-filter .search-form {
float: none; /* Remove float from media-views.css */ float: none; /* Remove float from media-views.css */
position: relative; position: relative;
margin: 20px 0; max-width: 100%;
} }
} }

View File

@ -630,7 +630,7 @@ classes exist in paginate_links() but not seen in list table output. */
.wp-filter .view-switch { .wp-filter .view-switch {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 14px 0; padding: 15px 0;
margin: 0 0 0 20px; margin: 0 0 0 20px;
} }

View File

@ -630,7 +630,7 @@ classes exist in paginate_links() but not seen in list table output. */
.wp-filter .view-switch { .wp-filter .view-switch {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 14px 0; padding: 15px 0;
margin: 0 20px 0 0; margin: 0 20px 0 0;
} }

View File

@ -1126,10 +1126,6 @@ audio, video {
*/ */
@media only screen and (max-width: 1120px) { @media only screen and (max-width: 1120px) {
.media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
float: none;
}
/* override for media-views.css */ /* override for media-views.css */
#wp-media-grid .wp-filter .attachment-filters { #wp-media-grid .wp-filter .attachment-filters {
max-width: 100%; max-width: 100%;

View File

@ -1126,10 +1126,6 @@ audio, video {
*/ */
@media only screen and (max-width: 1120px) { @media only screen and (max-width: 1120px) {
.media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
float: none;
}
/* override for media-views.css */ /* override for media-views.css */
#wp-media-grid .wp-filter .attachment-filters { #wp-media-grid .wp-filter .attachment-filters {
max-width: 100%; max-width: 100%;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -165,33 +165,35 @@ class WP_Media_List_Table extends WP_List_Table {
$views = $this->get_views(); $views = $this->get_views();
?> ?>
<div class="wp-filter"> <div class="wp-filter">
<?php $this->view_switcher( $mode ); ?> <div class="filter-items">
<?php $this->view_switcher( $mode ); ?>
<select class="attachment-filters" name="attachment-filter"> <select class="attachment-filters" name="attachment-filter">
<?php <?php
if ( ! empty( $views ) ) { if ( ! empty( $views ) ) {
foreach ( $views as $class => $view ) { foreach ( $views as $class => $view ) {
echo "\t$view\n"; echo "\t$view\n";
}
} }
} ?>
?> </select>
</select>
<?php <?php
$this->extra_tablenav( 'bar' ); $this->extra_tablenav( 'bar' );
/** This filter is documented in wp-admin/inclues/class-wp-list-table.php */ /** This filter is documented in wp-admin/inclues/class-wp-list-table.php */
$views = apply_filters( "views_{$this->screen->id}", array() ); $views = apply_filters( "views_{$this->screen->id}", array() );
// Back compat for pre-4.0 view links. // Back compat for pre-4.0 view links.
if ( ! empty( $views ) ) { if ( ! empty( $views ) ) {
echo '<ul class="filter-links">'; echo '<ul class="filter-links">';
foreach ( $views as $class => $view ) { foreach ( $views as $class => $view ) {
echo "<li class='$class'>$view</li>"; echo "<li class='$class'>$view</li>";
}
echo '</ul>';
} }
echo '</ul>';
}
?> ?>
</div>
<div class="search-form"> <div class="search-form">
<label for="media-search-input" class="screen-reader-text"><?php esc_html_e( 'Search Media' ); ?></label> <label for="media-search-input" class="screen-reader-text"><?php esc_html_e( 'Search Media' ); ?></label>

View File

@ -231,11 +231,13 @@
.media-toolbar-primary { .media-toolbar-primary {
float: left; float: left;
height: 100%; height: 100%;
max-width: 33%;
} }
.media-toolbar-secondary { .media-toolbar-secondary {
float: right; float: right;
height: 100%; height: 100%;
max-width: 66%;
} }
.media-toolbar-primary > .media-button, .media-toolbar-primary > .media-button,
@ -731,7 +733,8 @@
*/ */
.media-frame select.attachment-filters { .media-frame select.attachment-filters {
margin-top: 11px; margin-top: 11px;
margin-left: 10px; margin-left: 2%;
max-width: 47%;
} }
/** /**
@ -746,8 +749,8 @@
-webkit-appearance: none; -webkit-appearance: none;
} }
.media-toolbar-secondary .search { .media-toolbar-primary .search {
margin-left: 16px; max-width: 100%;
} }
/** /**
@ -2147,12 +2150,6 @@
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
@media only screen and (max-width: 940px) {
.media-frame-content .media-toolbar-secondary .attachment-filters {
max-width: 134px;
}
}
/** /**
* Responsive layout * Responsive layout
*/ */
@ -2346,11 +2343,6 @@
display: none; display: none;
} }
.media-modal .attachments-browser .media-toolbar-primary,
.media-modal .attachments-browser .media-toolbar-secondary {
width: 50%;
}
.media-modal .attachments-browser .media-toolbar .search { .media-modal .attachments-browser .media-toolbar .search {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
@ -2358,11 +2350,7 @@
} }
.media-modal .attachments-browser .media-toolbar .attachment-filters { .media-modal .attachments-browser .media-toolbar .attachment-filters {
margin: 11px 0 0;
height: auto; height: auto;
max-width: 65%;
max-width: -webkit-calc(100% - 38px);
max-width: calc(100% - 38px);
} }
.media-modal .attachments-browser .media-toolbar .spinner { .media-modal .attachments-browser .media-toolbar .spinner {
@ -2466,10 +2454,6 @@
} }
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
.media-frame-content .media-toolbar .attachment-filters {
max-width: 90px;
}
.media-modal-close { .media-modal-close {
top: 5px; top: 5px;
left: 5px; left: 5px;

File diff suppressed because one or more lines are too long

View File

@ -231,11 +231,13 @@
.media-toolbar-primary { .media-toolbar-primary {
float: right; float: right;
height: 100%; height: 100%;
max-width: 33%;
} }
.media-toolbar-secondary { .media-toolbar-secondary {
float: left; float: left;
height: 100%; height: 100%;
max-width: 66%;
} }
.media-toolbar-primary > .media-button, .media-toolbar-primary > .media-button,
@ -731,7 +733,8 @@
*/ */
.media-frame select.attachment-filters { .media-frame select.attachment-filters {
margin-top: 11px; margin-top: 11px;
margin-right: 10px; margin-right: 2%;
max-width: 47%;
} }
/** /**
@ -746,8 +749,8 @@
-webkit-appearance: none; -webkit-appearance: none;
} }
.media-toolbar-secondary .search { .media-toolbar-primary .search {
margin-right: 16px; max-width: 100%;
} }
/** /**
@ -2147,12 +2150,6 @@
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
@media only screen and (max-width: 940px) {
.media-frame-content .media-toolbar-secondary .attachment-filters {
max-width: 134px;
}
}
/** /**
* Responsive layout * Responsive layout
*/ */
@ -2346,11 +2343,6 @@
display: none; display: none;
} }
.media-modal .attachments-browser .media-toolbar-primary,
.media-modal .attachments-browser .media-toolbar-secondary {
width: 50%;
}
.media-modal .attachments-browser .media-toolbar .search { .media-modal .attachments-browser .media-toolbar .search {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
@ -2358,11 +2350,7 @@
} }
.media-modal .attachments-browser .media-toolbar .attachment-filters { .media-modal .attachments-browser .media-toolbar .attachment-filters {
margin: 11px 0 0;
height: auto; height: auto;
max-width: 65%;
max-width: -webkit-calc(100% - 38px);
max-width: calc(100% - 38px);
} }
.media-modal .attachments-browser .media-toolbar .spinner { .media-modal .attachments-browser .media-toolbar .spinner {
@ -2466,10 +2454,6 @@
} }
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
.media-frame-content .media-toolbar .attachment-filters {
max-width: 90px;
}
.media-modal-close { .media-modal-close {
top: 5px; top: 5px;
right: 5px; right: 5px;

File diff suppressed because one or more lines are too long