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 .
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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')); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Easier to use if you start from the blog post.