vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 12:20:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Grid view for the media library, first pass. This is alpha; expect imperfection. We will be iterating further.

Browse Source 
props ericlewis, shaunandrews, wonderboymusic.
see #24716.


git-svn-id: https://develop.svn.wordpress.org/trunk@28682 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi
2014-06-05 22:00:24 +00:00
parent c7c1a4a88a
commit 3d9fc450b2
10 changed files with 422 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/css/media-views.css
+83 -4
View File
@@ -295,10 +295,11 @@
margin: 3px 0;
}
.media-sidebar .setting span {
.media-sidebar .setting .name {
min-width: 30%;
margin-right: 4%;
font-size: 12px;
text-align: right;
}
.media-sidebar .setting select {
@@ -319,13 +320,17 @@
min-height: 22px;
padding-top: 8px;
line-height: 16px;
text-align: right;
font-weight: normal;
color: #666;
}
.compat-item label span {
text-align: right;
}
.media-sidebar .setting input,
.media-sidebar .setting textarea {
.media-sidebar .setting textarea,
.media-sidebar .setting .value {
margin: 1px;
width: 65%;
float: right;
@@ -1812,7 +1817,7 @@
color: #666;
}
.image-details .embed-media-settings .setting span {
.image-details .embed-media-settings .setting .name {
float: left;
width: 25%;
text-align: right;
@@ -2368,3 +2373,77 @@
background-image: url(../images/spinner-2x.gif);
}
}
/**
* Media Grid
*/
.media-grid-view h1 {
color: #222;
font-size: 23px;
font-weight: 400;
margin: 10px 0 0;
padding: 9px 15px 4px 22px;
line-height: 29px;
}
.media-grid-view-switch {
position: fixed;
right: 10px;
top: 44px;
z-index: 300;
}
/**
* Position both the frame and the uploader window into the content
* area of the screen.
*/
.media-grid-view {
position: fixed;
bottom: 0;
left: 160px;
right: 0;
top: 32px;
}
@media screen and (max-width: 900px) {
.auto-fold .media-grid-view {
left: 36px;
}
}
@media screen and (max-width: 782px) {
.media-grid-view {
top: 46px;
}
.auto-fold .media-grid-view {
left: 0px;
bottom: 0px;
}
}
/* Regions we don't use at all */
.media-grid-view .media-frame-toolbar,
.media-grid-view .media-frame-menu {
display: none;
}
.media-grid-view .media-frame-content {
bottom: 40px;
}
@media screen and (max-width: 782px) {
.media-grid-view .media-frame-content {
border-bottom: none;
bottom: 0;
}
}
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
.media-grid-view .media-frame-title {
display: block;
width: auto;
bottom: auto;
right: 0;
top: 0;
height: 60px;
}
}