List tables: A better responsive view.
Instead of truncating columns, the data that's already in the markup can now be toggled into view. Only seems appropriate to celebrate four years of contributing by finally doing the first thing I ever mocked up.
Known issues / concerns:
* Custom list tables that don't define a primary column will show nothing at all. These are not extremely common, as `WP_List_Table` isn't really recommended for plugin consumption, but it happens. We need to come up with some kind of fallback.
* Some visual elements, particularly whitespace, could use refining.
* Needs a11y review.
* Touch performance on iOS feels sluggish - is there anything we can do about that?
* Would this be better accordion-style (only one expanded at a time)?
* Is `wp_strip_all_tags()` good enough for column titles that have HTML in them? It's essentially a workaround for the fact that core's comments column does that for the icon, which maybe it shouldn't. Perhaps worth another ticket, as a markup change would be fairly independent.
* Visual hierarchy is not great when expanded (also worthy of another ticket).
* Quick edit now becomes noticeably more annoying to cancel out of, as you have to scroll all the way down and you lose your position from before it was opened. Again, worthy of another ticket.
props Michael Arestad, helen.
see #32395.
Built from https://develop.svn.wordpress.org/trunk@33016
git-svn-id: http://core.svn.wordpress.org/trunk@32987 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-07-01 03:31:25 +02:00
|
|
|
#ajax-loading,#screen-meta .screen-reader-text,.ajax-feedback,.ajax-loading,.imgedit-wait-spin,.list-ajax-loading,.spinner{visibility:hidden}#docs-list,#plugin-information .section,#template textarea,.code,.ltr,code,input[type=email],input[type=url]{direction:ltr}table.diff,table.fixed{table-layout:fixed}.color-palette,.form-table,.media-item .describe{border-collapse:collapse}#wpwrap{height:auto;min-height:100%;width:100%;position:relative;-webkit-font-smoothing:subpixel-antialiased}#wpcontent{height:100%;padding-left:20px}#wpcontent,#wpfooter{margin-left:160px}.folded #wpcontent,.folded #wpfooter{margin-left:36px}#wpbody-content{padding-bottom:65px;float:left;width:100%;overflow:visible!important}.inner-sidebar{float:right;clear:right;display:none;width:281px;position:relative}.columns-2 .inner-sidebar{margin-right:auto;width:286px;display:block}.columns-2 .inner-sidebar #side-sortables,.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}#col-container,#col-left,#col-right{overflow:hidden;padding:0;margin:0}#col-left{width:35%}#col-right{float:right;clear:right;width:65%}.col-wrap{padding:0 7px}.alignleft{float:left}.alignright{float:right}.textleft{text-align:left}.textright{text-align:right}.clear{clear:both}.screen-reader-text,.screen-reader-text span,.ui-helper-hidden-accessible{position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip:rect(0 0 0 0);border:0;word-wrap:normal!important}#adminmenu .wp-submenu,#dashboard_quick_press .draft-title,#templateside,#the-comment-list td.comment,.dashboard-comment-wrap,.pre,.widefat *{word-wrap:break-word}.screen-reader-shortcut{position:absolute;top:-1000em}.screen-reader-shortcut:focus{left:6px;top:-25px;height:auto;width:auto;display:block;font-size:14px;font-weight:600;padding:15px 23px 14px;background:#f1f1f1;color:#21759b;z-index:100000;line-height:normal;-webkit-box-shadow:0 0 2px 2px rgba(0,0,0,.6);box-shadow:0 0 2px 2px rgba(0,0,0,.6);text-decoration:none;outline:0}body,p{font-size:13px}.hidden,.js .closed .inside,.js .hide-if-js,.js .wp-core-ui .hide-if-js,.js.wp-core-ui .hide-if-js,.no-js .hide-if-no-js,.no-js .wp-core-ui .hide-if-no-js,.no-js.wp-core-ui .hide-if-no-js{display:none}#menu-management .menu-edit,#menu-settings-column .accordion-container,.comment-ays,.feature-filter,.imgedit-group,.manage-menus,.menu-item-handle,.popular-tags,.stuffbox,.widget-inside,.widget-top,.widgets-holder-wrap,.wp-editor-container,p.popular-tags,table.widefat{border:1px solid #e5e5e5;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.04);box-shadow:0 1px 1px rgba(0,0,0,.04)}.comment-ays,.feature-filter,.imgedit-group,.popular-tags,.stuffbox,.widgets-holder-wrap,.wp-editor-container,p.popular-tags,table.widefat{background:#fff}body,html{height:100%;margin:0;padding:0}html{background:#f1f1f1}body{color:#444;font-family:"Open Sans",sans-serif;line-height:1.4em;min-width:600px}body.iframe{min-width:0;padding-top:1px}body.modal-open{overflow:hidden}body.mobile.modal-open #wpwrap{overflow:hidden;position:fixed;height:100%}iframe,img{border:0}td{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}a{color:#0073aa;-webkit-transition-property:border,background,color;transition-property:border,background,color;-webkit-transition-duration:.05s;transition-duration:.05s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}a,div{outline:0}a:active,a:hover{color:#00a0d2}a:focus{color:#124964;-webkit-box-shadow:0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);box-shadow:0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8)}.ie8 a:focus{outline:#5b9dd9 solid 1px}#adminmenu a:focus,.screen-reader-text:focus{-webkit-box-shadow:none;box-shadow:none;outline:0}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}p{line-height:1.5;margin:1em 0}blockquote{margin
|
List tables: A better responsive view.
Instead of truncating columns, the data that's already in the markup can now be toggled into view. Only seems appropriate to celebrate four years of contributing by finally doing the first thing I ever mocked up.
Known issues / concerns:
* Custom list tables that don't define a primary column will show nothing at all. These are not extremely common, as `WP_List_Table` isn't really recommended for plugin consumption, but it happens. We need to come up with some kind of fallback.
* Some visual elements, particularly whitespace, could use refining.
* Needs a11y review.
* Touch performance on iOS feels sluggish - is there anything we can do about that?
* Would this be better accordion-style (only one expanded at a time)?
* Is `wp_strip_all_tags()` good enough for column titles that have HTML in them? It's essentially a workaround for the fact that core's comments column does that for the icon, which maybe it shouldn't. Perhaps worth another ticket, as a markup change would be fairly independent.
* Visual hierarchy is not great when expanded (also worthy of another ticket).
* Quick edit now becomes noticeably more annoying to cancel out of, as you have to scroll all the way down and you lose your position from before it was opened. Again, worthy of another ticket.
props Michael Arestad, helen.
see #32395.
Built from https://develop.svn.wordpress.org/trunk@33016
git-svn-id: http://core.svn.wordpress.org/trunk@32987 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-07-01 03:31:25 +02:00
|
|
|
*/.ui-draggable-handle,.ui-sortable-handle{-ms-touch-action:none;touch-action:none}.accordion-section{border-bottom:1px solid #dfdfdf;margin:0}.accordion-section.open .accordion-section-content,.no-js .accordion-section .accordion-section-content{display:block}.accordion-section.open:hover{border-bottom-color:#dfdfdf}.accordion-section-content{display:none;padding:10px 20px 15px;overflow:hidden;background:#fff}.accordion-section-title{margin:0;padding:12px 15px 15px;position:relative;border-left:1px solid #dfdfdf;border-right:1px solid #dfdfdf;user-select:none}.js .accordion-section-title:after{position:absolute;top:12px;right:10px;z-index:1}.accordion-section-title:focus{outline:0}.accordion-section-title:focus:after,.accordion-section-title:hover:after{border-color:#a0a5aa transparent}.cannot-expand .accordion-section-title{cursor:auto}.cannot-expand .accordion-section-title:after{display:none}.control-section .accordion-section-title{border-left:none;border-right:none;padding:10px 10px 11px 14px;line-height:21px;background:#fff}.control-section .accordion-section-title:after{top:11px}.js .control-section .accordion-section-title:focus,.js .control-section .accordion-section-title:hover,.js .control-section.open .accordion-section-title,.js .control-section:hover .accordion-section-title{color:#23282d;background:#f5f5f5}.control-section.open .accordion-section-title{border-bottom:1px solid #dfdfdf}@media only screen and (min-width:769px){#col-left{width:35%}#col-right{width:65%}}@media only screen and (max-width:860px){#col-left{width:35%}#col-right{width:65%}}@media only screen and (min-width:980px){#col-left{width:35%}#col-right{width:65%}}@media only screen and (max-width:768px){#col-left,#col-right{width:100%}}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){div.star-holder,div.star-holder .star-rating{background:url(../images/stars-2x.png?ver=20121108) bottom left repeat-x;-webkit-background-size:21px 37px;background-size:21px 37px}.spinner{background-image:url(../images/spinner-2x.gif)}#bulk-titles div a,#bulk-titles div a:hover,#screen-meta-links a.show-settings,.curtime #timestamp,.meta-box-sortables .postbox:hover .handlediv,.sidebar-name-arrow,.sidebar-name:hover .sidebar-name-arrow,.tagchecklist span a,.tagchecklist span a:hover,.widget-top a.widget-action,.widget-top a.widget-action:hover{background:0 0!important}}@-ms-viewport{width:device-width}@media screen and (max-width:782px){#template div,#templateside{float:none;width:auto}html.wp-toolbar{padding-top:46px}body{min-width:240px;overflow-x:hidden}body *{-webkit-tap-highlight-color:transparent!important}#wpcontent{position:relative;margin-left:0;padding-left:10px}#wpbody-content{padding-bottom:100px}.wrap{margin-right:12px;margin-left:0}.col-wrap{padding:0}#collapse-menu,#screen-meta,#screen-meta-links,.post-format-select{display:none!important}.wrap .add-new-h2,.wrap .add-new-h2:active{padding:10px 15px;font-size:14px}.wp-color-result{height:auto;padding-left:45px}.wp-color-result:after{font-size:14px;height:auto;padding:6px 14px}.media-upload-form div.error,.notice,.wrap div.error,.wrap div.updated{margin:20px 0 10px;padding:5px 10px;font-size:14px;line-height:175%}.wp-core-ui .notice.is-dismissible{padding-right:46px}.notice-dismiss{padding:13px}.wrap .icon32+h2{margin-top:-2px}.wp-responsive-open #wpbody{right:-190px}code{word-wrap:break-word}.postbox{font-size:14px}.metabox-holder h3{padding:12px}.postbox .handlediv{margin-top:3px}.subsubsub{font-size:16px;text-align:center;margin-bottom:15px}#templateside li{margin:0}#templateside li a{display:block;padding:5px}#templateside .highlight{padding:5px;margin-left:-5px;margin-top:-5px}#template div{margin:0}#template textarea{width:100%}.fileedit-sub .alignright{margin-top:15px}#comments-form .checkforspam,#wpfooter{display:none}}@media screen and (max-width:600px){#wpwrap.wp-responsive-open,div#post-body.metabox-holder.columns-1{overflow-x:hidden}html.wp-toolbar{padding-top:0}#wpbody{padding-top:46px}}#pressthis-code-wrap,textarea{overflow:auto}input,textarea{box-sizing:bor
|
