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')); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Easier to use if you start from the blog post.