Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
TfsWebCompact neatens up the look-and-feel of your TFS 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: /*TfsWebCompact bookmarklet 2.3 by Szalapski.com. For TFS 2015 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').css('left','0');
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(){
var css = `
#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;}
`;
addCss(css);
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 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'});
});
})();
(function tightenUpTiles(){
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');
jQuery('.tbTile').css('margin','0 0 5px 5px');
jQuery('td[axis="taskboard-table-body_s2"] .tbTile').css({'font-size':'9px'});
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"] .witExtra').css('display', 'none');
var 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 {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': '-76px', '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);});
})();
window.dispatchEvent(new Event('resize'));
})();
Owner

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