From 87ce6cc5c37ecb9859bf1ec30155c5ed1c01a902 Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Wed, 13 Nov 2013 20:06:06 +0000 Subject: [PATCH] Bring in the widgets component of MP6. See #25858. * A cleaner UI, with a simpler design for available and inactive widgets, and more emphasis on your sidebars. * Available widgets and sidebars expand to two columns at larger screen sizes making it easier to manage sites with lots of sidebars. * New dropzone indicator for empty sidebars. Props shaunandrews, joen, iammattthomas. Built from https://develop.svn.wordpress.org/trunk@26140 git-svn-id: http://core.svn.wordpress.org/trunk@26051 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/wp-admin-rtl.css | 713 ++++++++++++++++++++-------------- wp-admin/css/wp-admin.css | 713 ++++++++++++++++++++-------------- wp-admin/includes/widgets.php | 3 +- wp-admin/js/widgets.js | 4 +- 4 files changed, 860 insertions(+), 573 deletions(-) diff --git a/wp-admin/css/wp-admin-rtl.css b/wp-admin/css/wp-admin-rtl.css index aa8d9ff3b5..2b183ed9ea 100644 --- a/wp-admin/css/wp-admin-rtl.css +++ b/wp-admin/css/wp-admin-rtl.css @@ -630,8 +630,7 @@ select, .nav-menus-php .major-publishing-actions .form-invalid, #TB_window, .tbtitle, -.highlight, -.editwidget .widget-inside { +.highlight { border-width: 1px; border-style: solid; } @@ -2558,7 +2557,6 @@ html.wp-toolbar { margin-bottom: 20px; } -.widget, .postbox, .stuffbox { margin-bottom: 20px; @@ -2566,7 +2564,6 @@ html.wp-toolbar { line-height: 1; } -.widget .widget-top, .postbox h3, .stuffbox h3 { margin-top: 1px; @@ -9702,58 +9699,93 @@ input.newtag:focus ~ div.taghint { margin-bottom: 10px; } -/* widgets */ -/* 2 column liquid layout */ -div.widget-liquid-left { - float: right; - clear: right; - width: 100%; - margin-left: -325px; -} +/* General Widget Styles */ -div#widgets-left { - margin-right: 5px; - margin-left: 325px; -} - -div#widgets-right { - width: 285px; - margin: 0 auto; -} - -div.widget-liquid-right { - float: left; - clear: left; - width: 300px; -} - -.widget-liquid-right .widget { +.widget { + margin: 10px auto; + /* min-width: 50%; Not sure if this is needed */ position: relative; + border: none !important; /* ln 991 in colors-fresh.css */ + box-sizing: border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; } -.widget-liquid-right .widget, -.inactive-sidebar .widget, -.widget-liquid-right .sidebar-description { - width: 250px; - margin: 0 auto 20px; +.widget-top { + font-size: 12px; + font-weight: 600; + background: #f7f7f7; } -.widget-liquid-right .widget, -.widget-liquid-right .sidebar-description { +.widget-top a.widget-action, +.widget-top a.widget-action:hover { + text-decoration: none; +} + +.widget-title h4 { + margin: 0; + padding: 18px 15px; + line-height: 1; overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } -.widget-liquid-right .sidebar-description { - margin-bottom: 10px; +.widget-inside { + background: #fff !important; /* ln 1204 in colors.fresh.css */ + padding: 1px 15px 15px 15px; + line-height: 16px; } -.inactive-sidebar .widget { - margin: 0 10px 20px; - display: inline-block; +/* Widget Dragging Helpers */ + +.widget.ui-draggable-dragging { + width: 280px !important; + min-width: 280px !important; +} +.widget.ui-sortable-helper { + border: 1px solid #DEDEDE; + border-radius: 3px; + box-shadow: 0 1px 3px rgba(0,0,0,0.2); + opacity: 0.8; + z-index: 2000; +} +.widget-placeholder { + border: 1px solid #dedede; + border-bottom: none; + margin: 0 auto; + height: 43px; + width: 100%; + background: #eee; + box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -div.sidebar-name h3 { + +/* Widget Sidebars */ +.sidebar-name { + border: none; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.sidebar-name-arrow { + position: absolute; + top: 0; + left: 0; + bottom: 0; +} + +.js .sidebar-name { + cursor: pointer; +} + +.sidebar-name h3 { font-weight: normal; font-size: 15px; margin: 0; @@ -9762,31 +9794,314 @@ div.sidebar-name h3 { white-space: nowrap; } -div.sidebar-name { - font-size: 13px; - border-bottom-width: 1px; - border-bottom-style: solid; +.widgets-holder-wrap .description { + padding: 0; + margin: 0; + font-style: normal; + font-size: 12px; + color: #777; } -.js .sidebar-name { - cursor: pointer; +/* Widgets 2-col Layout */ +div.widget-liquid-left { + margin: 0; + width: 38%; + float: right; + border-left: 2px solid #ccc; } -.js .closed .sidebar-name { +div.widget-liquid-right { + float: left; + width: 60%; +} + +/* Widgets Left - Available Widgets */ + +div#widgets-left { + margin: 0; + padding: 12px 0 0 5%; +} + +div#widgets-left .closed .sidebar-name, +div#widgets-left .inactive-sidebar.closed .sidebar-name { + margin-bottom: 10px; +} + +div#widgets-left .sidebar-name h3 { + padding: 10px 0; + margin: 0 0 0 10px; +} + +div#widgets-left .sidebar-name:hover h3 { + color: #464646; +} + +div#widgets-left .sidebar-name .sidebar-name-arrow:before { + left: 0; + top: 4px; + padding: 4px 4px 4px 6px; + border-radius: 20px; +} + +div#widgets-left .sidebar-name:hover .sidebar-name-arrow:before { + background: #ccc; +} + +div#widgets-left .closed .sidebar-name .sidebar-name-arrow:before { + background: #999; + color: #fff; +} + +div#widgets-left .widget-holder { + background: transparent; + border: none; +} + +#available-widgets { + background: transparent !important; /* ln 1620 colors-fresh.css */ + margin: 0; + border-radius: none; + box-shadow: none; + border: none; +} + +#available-widgets .widget-title-action { + display: none; +} + +#available-widgets .widget { + margin: 10px 0 0 0; + background: #ddd; + border-radius: 3px; +} +#available-widgets .widget:nth-child(odd) { + clear: both; +} + +#available-widgets .widget-top { + border-radius: 3px; + background: #ffffff; /* ln 1047 in colors-fresh.css */ + border: 1px solid #bbb !important; /* ln 991 in colors-fresh.css */ +} + +#available-widgets .widget-top:hover { + border-color: #999 !important; /* ln 991 in colors-fresh.css */ + box-shadow: 0 1px 3px rgba(0,0,0,0.2); +} + +#available-widgets .widget .widget-description { + display: block; +padding: 10px 16px; +font-size: 12px; +} + +/* Inactive Sidebars */ +#widgets-left .inactive-sidebar { + clear: both; + width: 100%; + background: transparent; + padding: 0; + margin: 0 0 20px 0; + border: none; + box-shadow: none; +} + +#widgets-left .inactive-sidebar.first { + margin-top: 40px; +} + +#widgets-left .inactive-sidebar .widget { + margin: 10px 0 0 0; +} + +#widgets-left .inactive-sidebar .widget-inside { -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; + -moz-border-radius-bottomright: 3px; + -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; + background: #dfdfdf; } -.widget-liquid-right .widgets-sortables, -#widgets-left .widget-holder { - border-width: 0 1px 1px; - border-style: none solid solid; - -webkit-border-bottom-left-radius: 3px; - -webkit-border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; +#widgets-left .inactive-sidebar .widget-top { + background: #fff !important; /* ln 991 in colors-fresh.css */ + border: 1px solid #bbb !important; /* ln 991 in colors-fresh.css */ + border-radius: 3px; +} + +#widgets-left .inactive-sidebar .widget-top:hover { + border-color: #999 !important; /* ln 991 in colors-fresh.css */ + box-shadow: 0 1px 3px rgba(0,0,0,0.2); +} + +/* Not sure what this is for... */ +div#widgets-left .inactive-sidebar .widget.expanded { + right: auto; +} + +#widgets-left .inactive-sidebar .widget-title-action { + float: left; + position: relative; + top: 13px; + left: 10px; +} + +div#widgets-left .inactive-sidebar .widget-action:after { + content: '\f111'; + color: #888; +} + +div#widgets-left .inactive-sidebar .widgets-sortables { + min-height: 42px; + padding: 0; + background: transparent; + margin: 0; + position: relative; +} + +div#widgets-left .inactive-sidebar .widget-placeholder { + border: 1px solid #ccc; + margin: 0 auto 10px auto; + height: 43px; + width: 100%; + border-radius: 3px; + background: #aaa; + box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* Widgets Right */ + +div#widgets-right:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +div#widgets-right .widgets-holder-wrap { + margin: 10px 0 0 0; +} + +div#widgets-right .widget { + margin: 0 auto; + border: 1px solid #dedede !important; /* ln 991 in colors-fresh.css */ + border-bottom: none !important; /* ln 991 in colors-fresh.css */ + margin-right: 0 !important; /* Wide format widgets are the devil */ + width: 100% !important; /* Wide format widgets are the devil */ +} + +div#widgets-right .sidebar-description { + border-top: 1px solid #eeeeee; + padding: 10px 15px 15px 15px; +} + +div#widgets-right .closed .sidebar-description { + display: none; +} + +div#widgets-right .sidebar-name h3 { + padding: 15px 15px; +} +div#widgets-right .sidebar-name .sidebar-name-arrow:before { + left: 0; + top: 4px; +} +div#widgets-right .widget-top { + border-bottom: none; + padding: 0; + background: #f7f7f7; +} +div#widgets-right .widget-title-action { + float: left; + position: relative; + top: 14px; + left: 10px; +} +div#widgets-right a.widget-action:after { + content: '\f111'; + color: #888; +} +div#widgets-right .widget-inside { + border-top: 1px solid #dedede; +} + +/* The last widget has some additional borders */ +div#widgets-right .widget:last-child { + border-bottom: 1px solid #dedede !important; /* ln 991 in colors-fresh.css */ +} + +div#widgets-right .widgets-sortables { + min-height: 42px !important; /* Inline styles */ + padding: 0 8px; + margin-bottom: 8px; + position: relative; +} +div#widgets-right .widgets-sortables:before { + display: block; + content: ""; + text-align: center; + position: absolute; + right: 8px; + left: 8px; + bottom: 1px; + height: 40px; + border: 1px dashed #dedede; + border-radius: 3px; + line-height: 40px; + font-weight: 600; + color: #aaa; +} + +/* Accessibility Mode */ +#available-widgets .widget-control-edit .edit { + display :none; +} +#available-widgets .widget-control-edit .add { + display: block; + position: absolute; + top: 0; + left: 50px; + bottom: 0; + right: 0; + z-index: 40; + text-align: center; + text-indent: -5000px; +} + +#widgets-right .widget-control-edit { + background: #EEE; + margin: -14px 0 0 -10px; + padding: 16px 15px; + border-right: 1px solid #DDD; +} +#widgets-right .widget-control-edit .add { + display: none; +} +#widgets-right .widget-control-edit:hover { + background: #444; +} +#widgets-right .widget-control-edit:before { + content: '\f111'; + display: inline-block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font: normal 16px/1 'dashicons'; + vertical-align: top; + position: relative; + top: -1px; + padding-left: 4px; +} + +.editwidget { + margin: 0 auto; +} +.editwidget .widget-control-actions { + margin-top: 20px; } .js .closed .widgets-sortables, @@ -9794,103 +10109,6 @@ div.sidebar-name { .js .closed br.clear { display: none; } - -.widget-liquid-right .widgets-sortables { - padding: 15px 0 0; -} - -#available-widgets .widget-holder { - padding: 7px 5px 0; -} - -.inactive-sidebar { - padding: 5px 5px 0; -} - -#widget-list .widget { - width: 250px; - margin: 0 10px 15px; - border: 0 none; - background: transparent; - display: inline-block; - vertical-align: top; -} - -#widget-list .widget-description { - padding: 5px 8px; -} - -.widget-placeholder { - border-width: 1px; - border-style: dashed; - margin: 0 auto 20px; - height: 34px; - width: 250px; -} - -.inactive-sidebar .widget-placeholder { - margin: 0 10px 20px; - float: right; -} - -div.widgets-holder-wrap { - padding: 0; - margin: 10px 0 20px; -} - -#widgets-left #available-widgets { - background-color: transparent; - border: 0 none; -} - -ul#widget-list { - list-style: none; - margin: 0; - padding: 0; - min-height: 100px; -} - -.widget .widget-top { - font-size: 12px; - font-weight: 600; - height: 26px; -} - -.widget .widget-top, -.menu-item-handle { - margin-top: 0; - padding: 4px; -} - -.widget-top .widget-title { - padding: 7px 9px; -} - -.widget-top .widget-title-action { - float: left; -} - -a.widget-action { - display: block; - width: 24px; - height: 26px; - text-decoration: none; -} - -#available-widgets a.widget-action { - display: none; -} - -.widget-top a.widget-action, -.widget-top a.widget-action:hover { - background: none !important; - border: none !important; - width: 30px; - margin-left: 0 !important; - margin-top: 3px; - text-decoration: none; -} - .nav-menus-php .item-edit:after, .widget-top a.widget-action:after, .control-section .accordion-section-title::after, @@ -9910,155 +10128,29 @@ a.widget-action { -moz-osx-font-smoothing: grayscale; text-decoration: none !important; } - .control-section .accordion-section-title::after, .accordion-section-title::after { float: left; left: 20px; top: -2px; } - -.widget-top a.widget-action:after { - content: '\f140'; -} - .control-section.open .accordion-section-title::after, #customize-info.open .accordion-section-title::after, .nav-menus-php .menu-item-edit-active .item-edit:after { content: '\f140'; } - .nav-menus-php .item-controls .item-type { padding: 11px; margin-left: 10px; } -.widget .widget-inside, -.widget .widget-description { - padding: 12px 12px 10px; - font-size: 12px; - line-height: 16px; -} - +/* Hide Widget Settings by Default */ .widget-inside, .widget-description { display: none; } -#available-widgets .widget-description { - display: block; -} - -.widget .widget-inside p { - margin: 0 0 1em; - padding: 0; -} - -.widget-title h4 { - margin: 0; - padding-bottom: 0.2em; - line-height: 1; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.widgets-sortables { - min-height: 90px; -} - -.widget-control-actions { - margin-top: 8px; -} - -.widget-control-actions a { - text-decoration: none; -} - -.widget-control-actions a:hover { - text-decoration: underline; -} - -.widget-control-actions div.alignleft { - margin-top: 6px; -} - -div#sidebar-info { - padding: 0 1em; - margin-bottom: 1em; - font-size: 12px; -} - -.widget-title a, -.widget-title a:hover { - text-decoration: none; - border-bottom: none; -} - -.widget-control-edit { - display: block; - font-size: 12px; - font-weight: normal; - line-height: 26px; - padding: 0 0 0 8px; -} - -a.widget-control-edit { - text-decoration: none; -} - -.widget-control-edit .add, -.widget-control-edit .edit { - display: none; -} - -#available-widgets .widget-control-edit .add, -#widgets-right .widget-control-edit .edit, -.inactive-sidebar .widget-control-edit .edit { - display: inline; -} - -.editwidget { - margin: 0 auto 15px; -} - -.editwidget .widget-inside { - display: block; - padding: 10px; -} - -.inactive p.description { - margin: 5px 15px 10px; -} - -#available-widgets p.description { - margin: 0 12px 12px; -} - -.widget-position { - margin-top: 8px; -} - -.inactive { - padding-top: 2px; -} - -.sidebar-name .spinner { - float: none; - margin: -4px 3px; -} - -.sidebar-name-arrow { - float: left; - height: 29px; - width: 26px; -} - -.widget-title .in-widget-title { - font-size: 12px; - white-space: nowrap; -} - +/* Dragging widgets over the available widget area show's a "Deactivate" message */ #removing-widget { display: none; font-weight: normal; @@ -10131,6 +10223,7 @@ a.widget-control-edit { } #widgets-chooser { + clear: both; display: none; margin: auto; padding-bottom: 10px; @@ -10336,6 +10429,32 @@ li#wp-admin-bar-toggle-button { /* =Media Queries -------------------------------------------------------------- */ +@media screen and (max-width: 480px) { + div.widget-liquid-left { + width: 100%; + float: none; + border-left: none; + padding-left: 0; + } + + #widgets-left .sidebar-name { + margin-left: 0; + } + + #widgets-left #available-widgets .widget-top { + margin-left: 0; + } + + #widgets-left .inactive-sidebar .widgets-sortables { + margin-left: 0; + } + + div.widget-liquid-right { + width: 100%; + float: none; + } +} + @media only screen and (max-width: 768px) { /* categories */ #col-left { @@ -10407,6 +10526,33 @@ li#wp-admin-bar-toggle-button { width: auto; } } +@media only screen and (min-width: 1250px) { + #widgets-left #available-widgets .widget { + width: 49%; + float: right; + } + + #widgets-right #available-widgets .widget:nth-child(even) { + float: left; + } + + #widgets-right .widgets-holder-wrap { + width: 48.5%; + float: right; + } + + #widgets-left .widgets-holder-wrap:nth-child(odd) { + clear: both; + } + + #widgets-left .widgets-holder-wrap:nth-child(even) { + float: left; + } + + #widgets-right.single-sidebar .widgets-holder-wrap { + width: 100%; + } +} /** * HiDPI Displays @@ -10415,8 +10561,7 @@ li#wp-admin-bar-toggle-button { (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { - - tr.wp-locked .locked-indicator { + tr.wp-locked .locked-indicator { background-image: url('../images/lock-2x.png'); background-size: 16px 16px; } diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 7781134791..d7ffc1eece 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -630,8 +630,7 @@ select, .nav-menus-php .major-publishing-actions .form-invalid, #TB_window, .tbtitle, -.highlight, -.editwidget .widget-inside { +.highlight { border-width: 1px; border-style: solid; } @@ -2558,7 +2557,6 @@ html.wp-toolbar { margin-bottom: 20px; } -.widget, .postbox, .stuffbox { margin-bottom: 20px; @@ -2566,7 +2564,6 @@ html.wp-toolbar { line-height: 1; } -.widget .widget-top, .postbox h3, .stuffbox h3 { margin-top: 1px; @@ -9702,58 +9699,93 @@ input.newtag:focus ~ div.taghint { margin-bottom: 10px; } -/* widgets */ -/* 2 column liquid layout */ -div.widget-liquid-left { - float: left; - clear: left; - width: 100%; - margin-right: -325px; -} +/* General Widget Styles */ -div#widgets-left { - margin-left: 5px; - margin-right: 325px; -} - -div#widgets-right { - width: 285px; - margin: 0 auto; -} - -div.widget-liquid-right { - float: right; - clear: right; - width: 300px; -} - -.widget-liquid-right .widget { +.widget { + margin: 10px auto; + /* min-width: 50%; Not sure if this is needed */ position: relative; + border: none !important; /* ln 991 in colors-fresh.css */ + box-sizing: border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; } -.widget-liquid-right .widget, -.inactive-sidebar .widget, -.widget-liquid-right .sidebar-description { - width: 250px; - margin: 0 auto 20px; +.widget-top { + font-size: 12px; + font-weight: 600; + background: #f7f7f7; } -.widget-liquid-right .widget, -.widget-liquid-right .sidebar-description { +.widget-top a.widget-action, +.widget-top a.widget-action:hover { + text-decoration: none; +} + +.widget-title h4 { + margin: 0; + padding: 18px 15px; + line-height: 1; overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } -.widget-liquid-right .sidebar-description { - margin-bottom: 10px; +.widget-inside { + background: #fff !important; /* ln 1204 in colors.fresh.css */ + padding: 1px 15px 15px 15px; + line-height: 16px; } -.inactive-sidebar .widget { - margin: 0 10px 20px; - display: inline-block; +/* Widget Dragging Helpers */ + +.widget.ui-draggable-dragging { + width: 280px !important; + min-width: 280px !important; +} +.widget.ui-sortable-helper { + border: 1px solid #DEDEDE; + border-radius: 3px; + box-shadow: 0 1px 3px rgba(0,0,0,0.2); + opacity: 0.8; + z-index: 2000; +} +.widget-placeholder { + border: 1px solid #dedede; + border-bottom: none; + margin: 0 auto; + height: 43px; + width: 100%; + background: #eee; + box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -div.sidebar-name h3 { + +/* Widget Sidebars */ +.sidebar-name { + border: none; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.sidebar-name-arrow { + position: absolute; + top: 0; + right: 0; + bottom: 0; +} + +.js .sidebar-name { + cursor: pointer; +} + +.sidebar-name h3 { font-weight: normal; font-size: 15px; margin: 0; @@ -9762,31 +9794,314 @@ div.sidebar-name h3 { white-space: nowrap; } -div.sidebar-name { - font-size: 13px; - border-bottom-width: 1px; - border-bottom-style: solid; +.widgets-holder-wrap .description { + padding: 0; + margin: 0; + font-style: normal; + font-size: 12px; + color: #777; } -.js .sidebar-name { - cursor: pointer; +/* Widgets 2-col Layout */ +div.widget-liquid-left { + margin: 0; + width: 38%; + float: left; + border-right: 2px solid #ccc; } -.js .closed .sidebar-name { +div.widget-liquid-right { + float: right; + width: 60%; +} + +/* Widgets Left - Available Widgets */ + +div#widgets-left { + margin: 0; + padding: 12px 5% 0 0; +} + +div#widgets-left .closed .sidebar-name, +div#widgets-left .inactive-sidebar.closed .sidebar-name { + margin-bottom: 10px; +} + +div#widgets-left .sidebar-name h3 { + padding: 10px 0; + margin: 0 10px 0 0; +} + +div#widgets-left .sidebar-name:hover h3 { + color: #464646; +} + +div#widgets-left .sidebar-name .sidebar-name-arrow:before { + right: 0; + top: 4px; + padding: 4px 6px 4px 4px; + border-radius: 20px; +} + +div#widgets-left .sidebar-name:hover .sidebar-name-arrow:before { + background: #ccc; +} + +div#widgets-left .closed .sidebar-name .sidebar-name-arrow:before { + background: #999; + color: #fff; +} + +div#widgets-left .widget-holder { + background: transparent; + border: none; +} + +#available-widgets { + background: transparent !important; /* ln 1620 colors-fresh.css */ + margin: 0; + border-radius: none; + box-shadow: none; + border: none; +} + +#available-widgets .widget-title-action { + display: none; +} + +#available-widgets .widget { + margin: 10px 0 0 0; + background: #ddd; + border-radius: 3px; +} +#available-widgets .widget:nth-child(odd) { + clear: both; +} + +#available-widgets .widget-top { + border-radius: 3px; + background: #ffffff; /* ln 1047 in colors-fresh.css */ + border: 1px solid #bbb !important; /* ln 991 in colors-fresh.css */ +} + +#available-widgets .widget-top:hover { + border-color: #999 !important; /* ln 991 in colors-fresh.css */ + box-shadow: 0 1px 3px rgba(0,0,0,0.2); +} + +#available-widgets .widget .widget-description { + display: block; +padding: 10px 16px; +font-size: 12px; +} + +/* Inactive Sidebars */ +#widgets-left .inactive-sidebar { + clear: both; + width: 100%; + background: transparent; + padding: 0; + margin: 0 0 20px 0; + border: none; + box-shadow: none; +} + +#widgets-left .inactive-sidebar.first { + margin-top: 40px; +} + +#widgets-left .inactive-sidebar .widget { + margin: 10px 0 0 0; +} + +#widgets-left .inactive-sidebar .widget-inside { -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; + -moz-border-radius-bottomright: 3px; + -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + background: #dfdfdf; } -.widget-liquid-right .widgets-sortables, -#widgets-left .widget-holder { - border-width: 0 1px 1px; - border-style: none solid solid; - -webkit-border-bottom-right-radius: 3px; - -webkit-border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; +#widgets-left .inactive-sidebar .widget-top { + background: #fff !important; /* ln 991 in colors-fresh.css */ + border: 1px solid #bbb !important; /* ln 991 in colors-fresh.css */ + border-radius: 3px; +} + +#widgets-left .inactive-sidebar .widget-top:hover { + border-color: #999 !important; /* ln 991 in colors-fresh.css */ + box-shadow: 0 1px 3px rgba(0,0,0,0.2); +} + +/* Not sure what this is for... */ +div#widgets-left .inactive-sidebar .widget.expanded { + left: auto; +} + +#widgets-left .inactive-sidebar .widget-title-action { + float: right; + position: relative; + top: 13px; + right: 10px; +} + +div#widgets-left .inactive-sidebar .widget-action:after { + content: '\f111'; + color: #888; +} + +div#widgets-left .inactive-sidebar .widgets-sortables { + min-height: 42px; + padding: 0; + background: transparent; + margin: 0; + position: relative; +} + +div#widgets-left .inactive-sidebar .widget-placeholder { + border: 1px solid #ccc; + margin: 0 auto 10px auto; + height: 43px; + width: 100%; + border-radius: 3px; + background: #aaa; + box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* Widgets Right */ + +div#widgets-right:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +div#widgets-right .widgets-holder-wrap { + margin: 10px 0 0 0; +} + +div#widgets-right .widget { + margin: 0 auto; + border: 1px solid #dedede !important; /* ln 991 in colors-fresh.css */ + border-bottom: none !important; /* ln 991 in colors-fresh.css */ + margin-left: 0 !important; /* Wide format widgets are the devil */ + width: 100% !important; /* Wide format widgets are the devil */ +} + +div#widgets-right .sidebar-description { + border-top: 1px solid #eeeeee; + padding: 10px 15px 15px 15px; +} + +div#widgets-right .closed .sidebar-description { + display: none; +} + +div#widgets-right .sidebar-name h3 { + padding: 15px 15px; +} +div#widgets-right .sidebar-name .sidebar-name-arrow:before { + right: 0; + top: 4px; +} +div#widgets-right .widget-top { + border-bottom: none; + padding: 0; + background: #f7f7f7; +} +div#widgets-right .widget-title-action { + float: right; + position: relative; + top: 14px; + right: 10px; +} +div#widgets-right a.widget-action:after { + content: '\f111'; + color: #888; +} +div#widgets-right .widget-inside { + border-top: 1px solid #dedede; +} + +/* The last widget has some additional borders */ +div#widgets-right .widget:last-child { + border-bottom: 1px solid #dedede !important; /* ln 991 in colors-fresh.css */ +} + +div#widgets-right .widgets-sortables { + min-height: 42px !important; /* Inline styles */ + padding: 0 8px; + margin-bottom: 8px; + position: relative; +} +div#widgets-right .widgets-sortables:before { + display: block; + content: ""; + text-align: center; + position: absolute; + left: 8px; + right: 8px; + bottom: 1px; + height: 40px; + border: 1px dashed #dedede; + border-radius: 3px; + line-height: 40px; + font-weight: 600; + color: #aaa; +} + +/* Accessibility Mode */ +#available-widgets .widget-control-edit .edit { + display :none; +} +#available-widgets .widget-control-edit .add { + display: block; + position: absolute; + top: 0; + right: 50px; + bottom: 0; + left: 0; + z-index: 40; + text-align: center; + text-indent: -5000px; +} + +#widgets-right .widget-control-edit { + background: #EEE; + margin: -14px -10px 0 0; + padding: 16px 15px; + border-left: 1px solid #DDD; +} +#widgets-right .widget-control-edit .add { + display: none; +} +#widgets-right .widget-control-edit:hover { + background: #444; +} +#widgets-right .widget-control-edit:before { + content: '\f111'; + display: inline-block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font: normal 16px/1 'dashicons'; + vertical-align: top; + position: relative; + top: -1px; + padding-right: 4px; +} + +.editwidget { + margin: 0 auto; +} +.editwidget .widget-control-actions { + margin-top: 20px; } .js .closed .widgets-sortables, @@ -9794,103 +10109,6 @@ div.sidebar-name { .js .closed br.clear { display: none; } - -.widget-liquid-right .widgets-sortables { - padding: 15px 0 0; -} - -#available-widgets .widget-holder { - padding: 7px 5px 0; -} - -.inactive-sidebar { - padding: 5px 5px 0; -} - -#widget-list .widget { - width: 250px; - margin: 0 10px 15px; - border: 0 none; - background: transparent; - display: inline-block; - vertical-align: top; -} - -#widget-list .widget-description { - padding: 5px 8px; -} - -.widget-placeholder { - border-width: 1px; - border-style: dashed; - margin: 0 auto 20px; - height: 34px; - width: 250px; -} - -.inactive-sidebar .widget-placeholder { - margin: 0 10px 20px; - float: left; -} - -div.widgets-holder-wrap { - padding: 0; - margin: 10px 0 20px; -} - -#widgets-left #available-widgets { - background-color: transparent; - border: 0 none; -} - -ul#widget-list { - list-style: none; - margin: 0; - padding: 0; - min-height: 100px; -} - -.widget .widget-top { - font-size: 12px; - font-weight: 600; - height: 26px; -} - -.widget .widget-top, -.menu-item-handle { - margin-top: 0; - padding: 4px; -} - -.widget-top .widget-title { - padding: 7px 9px; -} - -.widget-top .widget-title-action { - float: right; -} - -a.widget-action { - display: block; - width: 24px; - height: 26px; - text-decoration: none; -} - -#available-widgets a.widget-action { - display: none; -} - -.widget-top a.widget-action, -.widget-top a.widget-action:hover { - background: none !important; - border: none !important; - width: 30px; - margin-right: 0 !important; - margin-top: 3px; - text-decoration: none; -} - .nav-menus-php .item-edit:after, .widget-top a.widget-action:after, .control-section .accordion-section-title::after, @@ -9910,155 +10128,29 @@ a.widget-action { -moz-osx-font-smoothing: grayscale; text-decoration: none !important; } - .control-section .accordion-section-title::after, .accordion-section-title::after { float: right; right: 20px; top: -2px; } - -.widget-top a.widget-action:after { - content: '\f140'; -} - .control-section.open .accordion-section-title::after, #customize-info.open .accordion-section-title::after, .nav-menus-php .menu-item-edit-active .item-edit:after { content: '\f140'; } - .nav-menus-php .item-controls .item-type { padding: 11px; margin-right: 10px; } -.widget .widget-inside, -.widget .widget-description { - padding: 12px 12px 10px; - font-size: 12px; - line-height: 16px; -} - +/* Hide Widget Settings by Default */ .widget-inside, .widget-description { display: none; } -#available-widgets .widget-description { - display: block; -} - -.widget .widget-inside p { - margin: 0 0 1em; - padding: 0; -} - -.widget-title h4 { - margin: 0; - padding-bottom: 0.2em; - line-height: 1; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.widgets-sortables { - min-height: 90px; -} - -.widget-control-actions { - margin-top: 8px; -} - -.widget-control-actions a { - text-decoration: none; -} - -.widget-control-actions a:hover { - text-decoration: underline; -} - -.widget-control-actions div.alignleft { - margin-top: 6px; -} - -div#sidebar-info { - padding: 0 1em; - margin-bottom: 1em; - font-size: 12px; -} - -.widget-title a, -.widget-title a:hover { - text-decoration: none; - border-bottom: none; -} - -.widget-control-edit { - display: block; - font-size: 12px; - font-weight: normal; - line-height: 26px; - padding: 0 8px 0 0; -} - -a.widget-control-edit { - text-decoration: none; -} - -.widget-control-edit .add, -.widget-control-edit .edit { - display: none; -} - -#available-widgets .widget-control-edit .add, -#widgets-right .widget-control-edit .edit, -.inactive-sidebar .widget-control-edit .edit { - display: inline; -} - -.editwidget { - margin: 0 auto 15px; -} - -.editwidget .widget-inside { - display: block; - padding: 10px; -} - -.inactive p.description { - margin: 5px 15px 10px; -} - -#available-widgets p.description { - margin: 0 12px 12px; -} - -.widget-position { - margin-top: 8px; -} - -.inactive { - padding-top: 2px; -} - -.sidebar-name .spinner { - float: none; - margin: -4px 3px; -} - -.sidebar-name-arrow { - float: right; - height: 29px; - width: 26px; -} - -.widget-title .in-widget-title { - font-size: 12px; - white-space: nowrap; -} - +/* Dragging widgets over the available widget area show's a "Deactivate" message */ #removing-widget { display: none; font-weight: normal; @@ -10131,6 +10223,7 @@ a.widget-control-edit { } #widgets-chooser { + clear: both; display: none; margin: auto; padding-bottom: 10px; @@ -10336,6 +10429,32 @@ li#wp-admin-bar-toggle-button { /* =Media Queries -------------------------------------------------------------- */ +@media screen and (max-width: 480px) { + div.widget-liquid-left { + width: 100%; + float: none; + border-right: none; + padding-right: 0; + } + + #widgets-left .sidebar-name { + margin-right: 0; + } + + #widgets-left #available-widgets .widget-top { + margin-right: 0; + } + + #widgets-left .inactive-sidebar .widgets-sortables { + margin-right: 0; + } + + div.widget-liquid-right { + width: 100%; + float: none; + } +} + @media only screen and (max-width: 768px) { /* categories */ #col-left { @@ -10407,6 +10526,33 @@ li#wp-admin-bar-toggle-button { width: auto; } } +@media only screen and (min-width: 1250px) { + #widgets-left #available-widgets .widget { + width: 49%; + float: left; + } + + #widgets-left #available-widgets .widget:nth-child(even) { + float: right; + } + + #widgets-right .widgets-holder-wrap { + width: 48.5%; + float: left; + } + + #widgets-right .widgets-holder-wrap:nth-child(odd) { + clear: both; + } + + #widgets-right .widgets-holder-wrap:nth-child(even) { + float: right; + } + + #widgets-right.single-sidebar .widgets-holder-wrap { + width: 100%; + } +} /** * HiDPI Displays @@ -10415,8 +10561,7 @@ li#wp-admin-bar-toggle-button { (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { - - tr.wp-locked .locked-indicator { + tr.wp-locked .locked-indicator { background-image: url('../images/lock-2x.png'); background-size: 16px 16px; } diff --git a/wp-admin/includes/widgets.php b/wp-admin/includes/widgets.php index dae95509aa..3f179687de 100644 --- a/wp-admin/includes/widgets.php +++ b/wp-admin/includes/widgets.php @@ -67,8 +67,6 @@ function _sort_name_callback( $a, $b ) { function wp_list_widget_controls( $sidebar ) { add_filter( 'dynamic_sidebar_params', 'wp_list_widget_controls_dynamic_sidebar' ); - echo "
\n"; - $description = wp_sidebar_description( $sidebar ); if ( !empty( $description ) ) { @@ -77,6 +75,7 @@ function wp_list_widget_controls( $sidebar ) { echo "
\n"; } + echo "
\n"; dynamic_sidebar( $sidebar ); echo "
\n"; } diff --git a/wp-admin/js/widgets.js b/wp-admin/js/widgets.js index abb88b3f60..5a37a5fd80 100644 --- a/wp-admin/js/widgets.js +++ b/wp-admin/js/widgets.js @@ -363,9 +363,7 @@ wpWidgets = { sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed'); sidebar.sortable('refresh'); - // Change for MP6 - // widget.prependTo( sidebar ); - sidebar.find( '.sidebar-description' ).after( widget ); + widget.prependTo( sidebar ); wpWidgets.save( widget, 0, 0, 1 ); // No longer "new" widget