Since T128009: Next Phabricator Upgrade | 2016-04-28 the UI has changed significantly. Users should be given the ability to change it back, either via a Phabricator theme(?) or with a browser script.
Description
Description
Related Objects
Related Objects
- Mentioned In
- T135327: Decide Phabricator improvements to be funded by WMF Technical Collaboration
T134393: Comment text area has too little screen estate in Phabricator
T134394: Maniphest whitespace etc. push the central items outside the screen/first glimpse - Mentioned Here
- T128009: Next Phabricator Upgrade | 2016-04-28
Event Timeline
Comment Actions
The problems I have with the new appearance are:
- The massive waste of space thanks to the 320-pixel-wide sidebar squishing the entire task (not everyone maximizes their browser window on a wide-screen monitor).
- The placement of useful task metadata such as tags, assignment, and author at the bottom of that sidebar where I have to hunt for it rather that at the top of the main task description where it's immediately visible.
Comment Actions
This CSS snippet comes with no warranty:
.device-desktop .phui-two-column-view .phui-main-column {
width: auto;
float: none;
}
.device-desktop .phui-two-column-view .phui-side-column {
margin-left: 20px;
}
.phui-object-box,
.phui-timeline-shell {
/* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context */
overflow: hidden;
}(This also fixes broken layout on browsers that don't support calc() in CSS.)
This comment was removed by Paladox.
Comment Actions
Also no warranty. This turns the sidebar into a regular box above the description, with multiple columns. Use either this or the previous, they don't work together.
.device-desktop .phui-two-column-view .phui-side-column,
.device-desktop .phui-two-column-view .phui-main-column {
float: none;
width: auto;
}
.device-desktop .phui-two-column-view .phui-side-column .phui-two-column-properties {
column-width: 300px;
}
.phabricator-action-list-view,
.phuid-curtain-panel {
break-inside: avoid-column;
}Comment Actions
Here's some JS that seems to work to move the metadata out of the sidebar and into the "Details" box with all the other details, and seems to work well with T133825#2248704. No idea how robust this is, unfortunately Phab doesn't have useful IDs on most of its crap so we just have to hope it doesn't reuse these class names.
var sidebar = document.querySelector( '#phabricator-standard-page-body .phui-side-column' ); var misplacedDetails = sidebar.querySelectorAll( '.phui-box .phui-curtain-panel' ); var details = document.querySelector( '#phabricator-standard-page-body .phui-property-list-properties' ); for ( var i = misplacedDetails.length - 1; i >= 0; i-- ) { var n = misplacedDetails.item( i ); var k = n.querySelector( '.phui-curtain-panel-header' ); var v = n.querySelector( '.phui-curtain-panel-body' ); var dt = document.createElement( 'dt' ); dt.className = 'phui-property-list-key'; while ( k.firstChild ) { dt.appendChild( k.firstChild ); } var dd = document.createElement( 'dd' ); dd.className = 'phui-property-list-value'; while ( v.firstChild ) { dd.appendChild( v.firstChild ); } details.insertBefore( dd, details.firstChild ); details.insertBefore( dt, details.firstChild ); n.parentNode.removeChild( n ); }
Comment Actions
I actually don't mind the new layout myself, other than the fact that it uses calc() a lot, which doesn't work in my favorite browser. I have a pretty large screen and I can see the whole sidebar on most tasks above-the-fold, though.
Comment Actions
By the way, when you share code snippets on Phabricator, you can specify the language for syntax highlighter using this notation:
# ```lang=css # ```lang=js
Comment Actions
ok here's my attempt:
(function() { var details = document.querySelector('.phui-two-column-header .phui-header-view'); var moreDetails = document.createElement('div'); var panels = document.querySelectorAll('.phui-side-column .phui-curtain-panel'); for (var i = 0; i < panels.length; i++) { panels[i].style.float = 'left'; panels[i].style.width = '23%'; panels[i].style.minHeight = '60px'; panels[i].style.margin = '5px 0'; moreDetails.appendChild(panels[i]); } moreDetails.className = 'grouped'; moreDetails.style.marginTop = '5px'; details.appendChild(moreDetails); })();
Which looks like this:
Comment Actions
My phabricator greasemonkey script is now using a combination of the patches from T133825#2248704 and T133825#2248790 plus a bunch more css hacks of my own.
