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:
parent
4a9121b44b
commit
0aa0016488
|
@ -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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
|
@ -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
|
@ -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>
|
||||||
|
|
|
@ -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
|
@ -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
Loading…
Reference in New Issue