IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Media library: Unify headers between view modes.

Browse Source 
Includes back compat for `views_upload` links. These look a little awkward, but do not appear to be commonly used. Also prevents the view mode links from being dropped on smaller screens so a user doesn't get "stuck" in the list view.

This is different from other list tables, but aligns well with other uploaded content management screens (themes, plugins).

props pento, helen.
fixes #28946.

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


git-svn-id: http://core.svn.wordpress.org/trunk@29399 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí
2014-08-26 15:58:15 +00:00
parent 227089cb07
commit 9e8b9a78ca
13 changed files with 173 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wp-admin/css/media-rtl.css
+28 -69
View File
@@ -513,16 +513,6 @@ border color while dragging a file over the uploader drop area */
border: 4px dashed #bbb;
}
.media-frame.mode-grid .media-toolbar select {
margin-top: 1px;
font-size: inherit;
}
.media-frame.mode-grid .attachments-browser .bulk-select {
display: inline-block;
margin: 0 0 0 10px;
}
.media-frame.mode-grid .attachments,
.media-frame.mode-select .attachments {
padding: 2px;
@@ -530,8 +520,8 @@ border color while dragging a file over the uploader drop area */
.media-frame.mode-select .attachments-browser.fixed .attachments {
position: relative;
top: 80px; /* prevent jumping up when the toolbar becomes fixed */
padding-bottom: 80px; /* offset for above so the bottom doesn't get cut off */
top: 94px; /* prevent jumping up when the toolbar becomes fixed */
padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
}
.media-frame.mode-grid .attachment:focus,
@@ -572,59 +562,28 @@ border color while dragging a file over the uploader drop area */
opacity: 1;
}
/**
* Copied styles from the Add theme toolbar.
*
* This should be OOCSS'd so both use a shared selector.
*/
.media-frame.mode-grid .attachments-browser .media-toolbar {
background: #fff;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #555;
display: inline-block;
font-size: 13px;
margin: 20px 0;
padding: 0 20px;
position: relative;
width: 100%;
.media-frame.mode-grid .media-toolbar {
margin: 15px 0;
height: auto;
border: none;
}
.media-frame.mode-select .attachments-browser.fixed .media-toolbar {
position: fixed;
top: 32px;
right: auto;
left: 20px;
margin-top: 0;
}
.media-frame.mode-grid input[type="search"] {
margin: 1px;
padding: 3px 5px;
position: absolute;
left: 10px;
top: 9px;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
width: 280px;
}
.media-frame.mode-grid .view-switch {
display: inline-block;
float: none;
vertical-align: middle;
padding: 15px 0;
margin: 0 0 0 20px;
}
.media-frame.mode-grid select {
.media-frame.mode-grid .media-toolbar select {
margin: 0 0 0 10px;
font-size: 14px;
}
.media-frame.mode-grid .media-toolbar-secondary > .media-button {
margin-top: 10px;
margin-bottom: 10px;
}
.media-frame.mode-grid .attachments-browser .bulk-select {
display: inline-block;
margin: 0 0 0 10px;
}
.media-frame.mode-grid .search {
margin-top: 0;
}
.media-frame.mode-grid .spinner {
@@ -635,6 +594,14 @@ border color while dragging a file over the uploader drop area */
margin-left: 10px;
}
.media-frame.mode-select .attachments-browser.fixed .media-toolbar {
position: fixed;
top: 32px;
right: auto;
left: 20px;
margin-top: 0;
}
.media-frame.mode-grid .attachments-browser {
padding: 0;
}
@@ -1159,17 +1126,9 @@ audio, video {
*/
@media only screen and (max-width: 1120px) {
.media-frame.mode-grid .attachments-browser .media-toolbar-primary,
.media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
float: none;
}
.media-frame.mode-grid input[type="search"] {
margin: 20px 0;
position: static;
width: 100%;
max-width: 280px;
}
}
@media only screen and ( max-width: 782px ) {