Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
TfsWebCompact neatens up the look-and-feel of your Azure DevOps web backlog and task board. See also http://www.szalapski.com/2014/05/a-compact-layout-for-tfs-web-work-items.html .
/* The following is a bookmarklet. For it to work, you need to convert all whitespace to "%20",
then invoke it from a bookmark in your browser.
To actually use it, it is easier to drag-and-drop starting with my blog post:
http://www.szalapski.com/2014/05/a-compact-layout-for-tfs-web-work-items.html */
javascript: /*AzureDevOpsCompact bookmarklet 3.2 by Szalapski.com. For AzureDevOps task board, story board, and backlog.*/
(function TfsWebCompact(){
function addStyle(selector, styles){ addCss(selector + '{' + styles + '}'); }
function addCss(css){ jQuery('html > head').append(jQuery('<style>' + css + '</style>')); }
(function tightenUpBoard(){
jQuery('.taskboard .taskboardTableHeaderScrollContainer.nonScrollable').css('top','-9px');
jQuery('.taskboard .taskboardTableBodyScrollContainer.scrollable').css('top','15px');
jQuery('th.taskboard-cell').css('padding','0 inherit');
jQuery('.taskboard-cell').css('padding-left','0');
jQuery('.taskboard-row-summary .taskboard-cell').css('padding-top','0');
jQuery('.taskboard-row-summary .taskboard-cell .tbPivotItem').css('margin-bottom','0');
jQuery('td[axis="taskboard-table-body_s0"].taskboard-cell').css({'padding-bottom':'28px'});
jQuery('.taskboard-cell .board-add-card').css('margin', '0');
jQuery('.add-task-container').css('padding', '0');
})();
(function tightenUpBacklog(){
const tightenCss = `
#header-row {display: none;}
.header-section .hubs-section {left:300px; top:-5px;}
.nav-separated .hub-groups-section, .nav-separated .search-box {margin-top:0; padding-top:0;}
.header-post11 .hub-groups-section li {margin-bottom:0; padding-bottom:0;}
.header-post11 #navWrapper {height:20px;}
.header-post11 + .content-section {top:20px;}
.header-post11 .hub-groups-section {padding-bottom: 0;}
.hub-title {padding-top:9px; padding-bottom:9px;}
.hub-content .right-hub-content .hub-pivot { margin-left:300px; margin-right:340px;}
.hub-view.explorer .right-hub-content {top:3px;}
.backlog-header .toolbar .menu-bar > .menu-item{margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; }
.backlog-header .toolbar .menu-bar > .menu-item.text-filter-box {margin-top: 0 !important;}
.backlog-header .toolbar .menu-bar > .menu-item.toggle-filter-bar {padding-bottom:0; padding-top: 0 !important;}
.backlog-header .toolbar .menu-bar > .menu-item.toggle {margin-top: 0 !important;}
.backlog-header .toolbar { height:25px; margin-bottom:0;}
.backlog-header { height:auto; margin-bottom:0;}
.productbacklog-grid-results.sprint-backlog.grid {margin-top:0;}
.grid-focus {height: 0;}
.grid-header-column > .title {padding-top: 0; }
.grid-row.closed-item-tfsWebCompact {color:green;}
.grid-row.closed-item-tfsWebCompact .grid-cell:nth-child(3) {text-decoration:line-through;}
.tbTile.focus .tbTileContent {background-color: palegreen; border-width: 3px;}
`;
addCss(tightenCss);
function markCompletedRows() {
var completedRows = jQuery('.grid-row:has(.grid-cell:contains(Closed)),.grid-row:has(.grid-cell:contains(Resolved))');
completedRows.addClass('closed-item-tfsWebCompact');
};
function fireOnDomChange(nodeToObserve, callback){
new MutationObserver(callback).observe(nodeToObserve, {childList:true});
};
var mainGridNode = jQuery('.backlog .grid-canvas')[0] && fireOnDomChange(mainGridNode, markCompletedRows);
})();
(function tightenUpTiles(){
jQuery('.tbTile').css({'width': '200px'});
jQuery('.tbTile.parentTbTile').css('width','140px');
jQuery('.taskboard-parent').css({'min-width':'auto','width':'140px','padding-right':'0'});
jQuery('.taskboardTableHeaderScrollContainer .taskboard-parent').css({'min-width':'146px','width':'140px','padding-right':'0'});
jQuery('.additional-field.lastAdditionalField').css({'margin-bottom':'0'});
jQuery('.taskboard-cell .id-title-container').css({'margin':'0','padding-right':'0'});
jQuery('.taskboard-cell .witExtra').css('margin','0 0 3px 0');
/* make the "Closed" column really compact */
jQuery('td[axis="taskboard-table-body_s2"] .tbTile').css({'font-size':'10.5px'});
jQuery('td[axis="taskboard-table-body_s2"] .tbTile .id').css({'line-height':'10px'});
jQuery('td[axis="taskboard-table-body_s2"] .tbTile .title').css({'line-height':'10px'});
jQuery('td[axis="taskboard-table-body_s2"] .tbTile .id-title-container').css('line-height','10px');
jQuery('td[axis="taskboard-table-body_s2"] .witExtra').css('height', '18px');
jQuery('td[axis="taskboard-table-body_s2"] .witExtra .user-picture-resolved').hide();
jQuery('td[axis="taskboard-table-body_s2"] .witExtra .element-height-medium').css('line-height','unset');
jQuery('td[axis="taskboard-table-body_s2"] .work-item-type-icon-host').hide();
const css = `
.id-title-container,
.board-content-details .task-list .add-task-container,
.agile-board .board-tile .board-tile-content .child-tasks-summary,
.board-content-details .task-list .task,
.tags.field-container,
.additional-field.lastAdditionalField,
.board-tile .container
{ margin:0 }
.add-task-container,
.vss-Hub .vss-HubPivotBar,
.vss-PivotBar .vss-PivotBar--bar.tall .vss-PivotBar--commandBar
{padding:0;}
`;
addCss(css);
jQuery('.field-container.additional-field:contains("State Change Date")')
.css({'margin-top': '-20px', 'position':'relative'});
jQuery('.field-container.additional-field .field-label:contains("State Change Date")')
.hide();
jQuery('.field-container.additional-field:contains("State Change Date") .field-inner-element')
.css({'right': '-70px', 'position':'absolute', 'background-color': 'white'});
jQuery('.field-container.additional-field:contains("State Change Date") .field-inner-element')
.css({'right': '-70px', 'position':'absolute', 'background-color': 'white'});
jQuery('.field-container.additional-field:contains("State Change Date") .field-inner-element')
.text(
function chopOffYear() {
var value = $(this).text();
return value.length<8 ? value :value.substr(0, value.length-5);
}
);
jQuery('.sprint-view-container .vss-PivotBar .vss-PivotBarItem.customPadding').css({'padding': 0 });
jQuery('#taskboard-table-body').css({'width':'100%'});
})();
(function twiddleExpanders(){
jQuery('.taskboard-content-row').each(function(index, element){
var item=jQuery(element).children("td[axis='taskboard-table-body_s0'],td[axis='taskboard-table-body_s1']");
if(!item.find('.tbTile')[0]){ jQuery(element).children(".taskboard-expander")[0].click(); }
});
jQuery('.taskboard-row.taskboard-row-summary .witTitle').each(function(index, element) {
jQuery(element).css({'font-size':'smaller'});
});
})();
window.dispatchEvent(new Event('resize'));
})();
@szalapski

This comment has been minimized.

Copy link
Owner Author

@szalapski szalapski commented Feb 12, 2016

Easier to use if you start from the blog post.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment