vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-04-14 17:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Administration: Improve the sortable postboxes areas on the Dashboard and Classic Editor pages.

Browse Source 
- makes the postboxes areas in the Dashboard visible also on large screens 
- uses a more meaningful text when all postboxes areas are empty instead of "Drag boxes here"
- restores the ability to drag boxes to the "advanced" area in the Classic Editor page
- makes the postboxes areas in the Classic Editor page visible while dragging so that users have a clue what the available areas are
- improves the color contrast of the postboxes areas while dragging
- uses `wp.i18n` for translatable strings in `wp-admin/js/postbox.js`

Props xkon, karmatosed, audrasjb, ocean90, joedolson, afercia, azaozz.
See #20491.
Fixes #49288, #47541.


git-svn-id: https://develop.svn.wordpress.org/trunk@48340 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2020-07-06 18:01:55 +00:00
parent b0039629b3
commit 0fa6c2190a
5 changed files with 135 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/wp-admin/css/common.css
View File

@@ -29,46 +29,6 @@
overflow: visible;
}
/* inner 2 column liquid layout */
.inner-sidebar {
float: right;
clear: right;
display: none;
width: 281px;
position: relative;
}
.columns-2 .inner-sidebar {
margin-right: auto;
width: 286px;
display: block;
}
.inner-sidebar #side-sortables,
.columns-2 .inner-sidebar #side-sortables {
min-height: 300px;
width: 280px;
padding: 0;
}
.has-right-sidebar .inner-sidebar {
display: block;
}
.has-right-sidebar #post-body {
float: left;
clear: left;
width: 100%;
margin-right: -2000px;
}
.has-right-sidebar #post-body-content {
margin-right: 300px;
float: none;
width: auto;
}
/* 2 columns main area */
#col-left {
@@ -1983,36 +1943,11 @@ html.wp-toolbar {
}
.metabox-holder .postbox-container .empty-container {
border: 3px dashed #b4b9be;
outline: 3px dashed #b4b9be;
height: 250px;
position: relative;
}
.metabox-holder .postbox-container .empty-container:after {
content: attr(data-emptystring);
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 1em;
width: 200px;
text-align: center;
color: #ccc;
font-size: 18px;
display: none;
}
.metabox-holder.columns-1 .postbox-container .empty-container,
.columns-2 #postbox-container-3 .empty-container,
.columns-2 #postbox-container-4 .empty-container,
.columns-3 #postbox-container-4 .empty-container {
border: 0 none;
height: 0;
min-height: 0;
}
#post-body-content {
width: 100%;
min-width: 463px;
@@ -2032,7 +1967,7 @@ html.wp-toolbar {
/* one column on the dash */
@media only screen and (max-width: 799px) {
#wpbody-content .metabox-holder .postbox-container .empty-container {
border: 0 none;
outline: none;
height: 0;
min-height: 0;
}

61
src/wp-admin/css/dashboard.css
View File

@@ -48,10 +48,35 @@
}
#dashboard-widgets .meta-box-sortables {
margin: 0 8px;
/* Required min-height to make the jQuery UI Sortable drop zone work. */
min-height: 100px;
margin: 0 8px 20px;
}
/* Only highlight drop zones when dragging and only in the 2 columns layout. */
.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
outline: 3px dashed #606a73;
/* Prevent margin on the child from collapsing with margin on the parent. */
display: flow-root;
}
#dashboard-widgets .postbox-container .empty-container:after {
content: attr(data-emptystring);
margin: auto;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY( -50% );
padding: 0 2em;
text-align: center;
color: #606a73;
font-size: 16px;
line-height: 1.5;
display: none;
}
/* @todo: this was originally in this section, but likely belongs elsewhere */
#the-comment-list td.comment p.comment-author {
margin-top: 0;
@@ -1078,6 +1103,18 @@ a.rsswidget {
#wpbody-content #dashboard-widgets .postbox-container {
width: 100%;
}
#dashboard-widgets .meta-box-sortables {
min-height: 0;
}
.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
min-height: 100px;
}
#dashboard-widgets .meta-box-sortables.empty-container {
margin-bottom: 0;
}
}
/* two columns on the dash, but keep the setting if one is selected */
@@ -1095,9 +1132,10 @@ a.rsswidget {
#dashboard-widgets #postbox-container-3 .empty-container,
#dashboard-widgets #postbox-container-4 .empty-container {
border: 0 none;
outline: none;
height: 0;
min-height: 0;
margin-bottom: 0;
}
#dashboard-widgets #postbox-container-3 .empty-container:after,
@@ -1109,10 +1147,11 @@ a.rsswidget {
width: 100%;
}
#wpbody #wpbody-content .metabox-holder.columns-1 .postbox-container .empty-container {
border: 0 none;
#wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container {
outline: none;
height: 0;
min-height: 0;
margin-bottom: 0;
}
/* show the radio buttons for column prefs only for one or two columns */
@@ -1126,7 +1165,7 @@ a.rsswidget {
display: none;
}
.metabox-holder .postbox-container .empty-container:after {
#dashboard-widgets .postbox-container .empty-container:after {
display: block;
}
}
@@ -1147,16 +1186,24 @@ a.rsswidget {
}
#dashboard-widgets #postbox-container-4 .empty-container {
border: 0 none;
outline: none;
height: 0;
min-height: 0;
margin-bottom: 0;
}
#dashboard-widgets #postbox-container-4 .empty-container:after {
display: none;
}
.metabox-holder .postbox-container .empty-container:after {
#dashboard-widgets .postbox-container .empty-container:after {
display: block;
}
}
/* Always show the "Drag boxes here" CSS generated content on large screens. */
@media only screen and (min-width: 1801px) {
#dashboard-widgets .postbox-container .empty-container:after {
display: block;
}
}

48
src/wp-admin/css/edit.css
View File

@@ -147,8 +147,37 @@ body.post-new-php .submitbox .submitdelete {
}
/* Post Screen */
#post-body #normal-sortables {
min-height: 50px;
/* Only target the sortables in the post screen excluding the ones in the Dashboard. */
#post-body .meta-box-sortables {
/* Required min-height to make the jQuery UI Sortable drop zone work. */
min-height: 1px;
}
/* Resets height and outline inherited from common.css. */
#post-body.columns-1 #side-sortables.empty-container,
#post-body #normal-sortables.empty-container,
#post-body #advanced-sortables.empty-container {
/* Sortables need some initial height to work correctly. */
height: 1px;
outline: none;
}
/* Only highlight drop zones when dragging and only in the 2 columns layout. */
.is-dragging-metaboxes #post-body.columns-2 #side-sortables,
.is-dragging-metaboxes #post-body #normal-sortables,
.is-dragging-metaboxes #post-body #advanced-sortables {
outline: 3px dashed #606a73;
/* Prevent margin on the child from collapsing with margin on the parent. */
display: flow-root;
/*
* This min-height is meant to limit jumpiness while dragging. It's equivalent
* to the minimum height of the sortable-placeholder which is given by the height
* of a collapsed post box (36px + 1px top and bottom borders) + the placeholder
* bottom margin (20px) + 2 additional pixels to compensate browsers rounding.
*/
min-height: 60px;
margin-bottom: 20px;
}
.postbox {
@@ -1453,7 +1482,10 @@ table.links-table {
}
}
/* one column on the attachment editor screen */
/*
* The edit attachment screen auto-switches to one column layout when the
* viewport is smaller than 1200 pixels.
*/
@media only screen and (max-width: 1200px) {
.post-type-attachment #poststuff {
min-width: 0;
@@ -1470,7 +1502,7 @@ table.links-table {
.post-type-attachment #poststuff #postbox-container-1 .empty-container,
.post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty {
border: 0 none;
outline: none;
height: 0;
min-height: 0;
}
@@ -1480,6 +1512,12 @@ table.links-table {
width: auto;
}
.is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
outline: none;
min-height: 0;
margin-bottom: 0;
}
/* hide the radio buttons for column prefs */
.post-type-attachment .screen-layout,
.post-type-attachment .columns-prefs {
@@ -1504,7 +1542,7 @@ table.links-table {
#poststuff #postbox-container-1 .empty-container,
#poststuff #postbox-container-1 #side-sortables:empty {
border: 0 none;
outline: none;
height: 0;
min-height: 0;
}