From 5ee00529105027918331f1477e57763fc6a9a31b Mon Sep 17 00:00:00 2001 From: Markus Winter Date: Tue, 2 Apr 2024 17:28:15 +0200 Subject: [PATCH 1/6] [JENKINS-72944] reduce spacing in buildhistory widget the logic when name, details and badges arrangement is changed so that the available space is better used. The stop action is no longer treated as separate thing, instead it is just like all other badges. The stop button will always be in the far right. The width calculation now considers the actual width of the content and not of the element they are in. When name and badges fit in one row they will be joined. badges are using a flex layout that should allow for better alignement and will automatically wrap the elements though this only happen now when the badges are in their own row and still to large Add a resize handler so when the sidepanel switch to/from tablet mode or size is changed in tablet mode then the table layout is recalculated. [JENKINS-70246] the sidepanel is now fixed width when total width is larger than 900px. --- .../hudson/widgets/HistoryWidget/entry.jelly | 29 +- .../HistoryPageFilter/queue-items.jelly | 10 +- war/src/main/js/filter-build-history.js | 368 +++++++++--------- war/src/main/scss/base/_layout-commons.scss | 2 +- .../scss/components/_side-panel-widgets.scss | 44 ++- .../main/webapp/scripts/hudson-behavior.js | 5 + 6 files changed, 234 insertions(+), 224 deletions(-) diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly index 31dbb322fbd0..05f5a8309042 100644 --- a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly +++ b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly @@ -57,23 +57,20 @@ THE SOFTWARE. -
-
- - - - - - - -
+
-
- - - - -
+ + + + + + + + +
+ +
+
diff --git a/core/src/main/resources/jenkins/widgets/HistoryPageFilter/queue-items.jelly b/core/src/main/resources/jenkins/widgets/HistoryPageFilter/queue-items.jelly index 74c5535be819..14afdf30a131 100644 --- a/core/src/main/resources/jenkins/widgets/HistoryPageFilter/queue-items.jelly +++ b/core/src/main/resources/jenkins/widgets/HistoryPageFilter/queue-items.jelly @@ -62,12 +62,12 @@ THE SOFTWARE.
-
-
- +
+ +
- -
+
+
diff --git a/war/src/main/js/filter-build-history.js b/war/src/main/js/filter-build-history.js index 05fa29d05fae..dd2e4452bf96 100644 --- a/war/src/main/js/filter-build-history.js +++ b/war/src/main/js/filter-build-history.js @@ -20,9 +20,14 @@ const pageOne = buildHistoryPageNav.querySelector(".pageOne"); const pageUp = buildHistoryPageNav.querySelector(".pageUp"); const pageDown = buildHistoryPageNav.querySelector(".pageDown"); -const leftRightPadding = 4; +const leftRightPadding = 8; // the left + right padding of a build-row-cell +const multiLinePadding = 20; // the left padding of the second/third line +const tabletBreakpoint = 900; // the breakpoint between tablet view and normal view, +// keep in sync with _breakpoints.scss const updateBuildsRefreshInterval = 5000; +let lastClientWidth = 0; + function updateBuilds(params) { if (isPageVisible()) { fetch(ajaxUrl + toQueryString(params), { @@ -169,12 +174,23 @@ function togglePageUpDown() { } } -function checkRowCellOverflows(row) { +/* + * Arranges name, details (timestamp) and the badges for a build + * so that it makes best use of the limited available space. + * There are 6 possibilities how the parts can be arranged + * 1. put everything in one row, with the name having a fixed width so that details are aligned. + * 2. put name and badges in first row, details in first row + * 3. put name in first row, details and badges in second row + * 4. put name and details in first row, badges in second row + * 5. put everything in separate rows + * 6. there are no badges and name and details don't fit in one row + */ +function checkRowCellOverflows(row, recalculate = false) { if (!row) { return; } - if (row.classList.contains("overflow-checked")) { + if (row.classList.contains("overflow-checked") && !recalculate) { // already done. return; } @@ -195,9 +211,6 @@ function checkRowCellOverflows(row) { var div = document.createElement("div"); div.classList.add("block"); - div.classList.add("wrap"); - el1.classList.add("wrapped"); - el2.classList.add("wrapped"); el1.parentNode.insertBefore(div, el1); el1.parentNode.removeChild(el1); @@ -207,40 +220,51 @@ function checkRowCellOverflows(row) { return div; } - function blockUnwrap(element) { - element.querySelectorAll(".wrapped").forEach(function (wrappedEl) { - wrappedEl.parentNode.removeChild(wrappedEl); - element.parentNode.insertBefore(wrappedEl, element); - wrappedEl.classList.remove("wrapped"); - }); - element.parentNode.removeChild(element); - } + var cell = row.querySelector(".build-row-cell"); var buildName = row.querySelector(".build-name"); var buildDetails = row.querySelector(".build-details"); - + var leftBar = row.querySelector(".left-bar"); if (!buildName || !buildDetails) { return; } - var buildControls = row.querySelector(".build-controls"); + var buildBadges = row.querySelector(".build-badges"); + if (buildBadges.childElementCount === 0) { + buildBadges.remove(); + buildBadges = null; + } + var desc = row.querySelector(".desc"); function resetCellOverflows() { markSingleline(); - // undo block wraps - row.querySelectorAll(".block.wrap").forEach(function (blockWrap) { - blockUnwrap(blockWrap); - }); - + cell.insertBefore(buildName, leftBar); + cell.insertBefore(buildDetails, leftBar); + if (buildBadges) { + cell.insertBefore(buildBadges, leftBar); + } buildName.classList.remove("block"); + buildName.classList.remove("block"); + buildName.classList.remove("indent-multiline"); buildName.removeAttribute("style"); buildDetails.classList.remove("block"); buildDetails.removeAttribute("style"); - if (buildControls) { - buildControls.classList.remove("block"); - buildDetails.removeAttribute("style"); + buildDetails.classList.remove("indent-multiline"); + if (buildBadges) { + buildBadges.classList.remove("block"); + buildBadges.removeAttribute("style"); + buildBadges.classList.remove("indent-multiline"); + } + const nameBadges = cell.querySelector(".build-name-badges"); + if (nameBadges) { + nameBadges.remove(); + } + + const detailsBadges = cell.querySelector(".build-details-badges"); + if (detailsBadges) { + detailsBadges.remove(); } } @@ -252,208 +276,164 @@ function checkRowCellOverflows(row) { markMultiline(); } + // + function getElementOverflowData(element, width) { + // First we force it to wrap so we can get those dimension. + // Then we force it to "nowrap", so we can get those dimension. + // We can then compare the two sets, which will indicate if + // wrapping is potentially happening, or not. + // The scrollWidth is calculated based on the content and not the actual + // width of the element + + // Force it to wrap. + const oldWidth = element.style.width; + element.style.width = width + "px"; + element.classList.add("force-wrap"); + var wrappedClientHeight = element.clientHeight; + element.classList.remove("force-wrap"); + + // Force it to nowrap. Return the comparisons. + element.classList.add("force-nowrap"); + element.style.width = "fit-content"; + var nowrapClientHeight = element.clientHeight; + try { + var overflowParams = { + element: element, + scrollWidth: element.scrollWidth + 5, // 1 for rounding + 4 for left/right padding + isOverflowed: wrappedClientHeight > nowrapClientHeight, + }; + return overflowParams; + } finally { + element.classList.remove("force-nowrap"); + element.style.width = oldWidth; + } + } + + // eslint-disable-next-line no-inner-declarations + function expandLeftWithRight( + leftCellOverFlowParams, + rightCellOverflowParams, + ) { + // Float them left and right... + leftCellOverFlowParams.element.style.float = "left"; + rightCellOverflowParams.element.style.float = "right"; + + leftCellOverFlowParams.element.style.width = + leftCellOverFlowParams.scrollWidth + "px"; + rightCellOverflowParams.element.style.width = + rightCellOverflowParams.scrollWidth + "px"; + } + var rowWidth = buildHistoryContainer.clientWidth; var usableRowWidth = rowWidth - leftRightPadding * 2; - var nameOverflowParams = getElementOverflowParams(buildName); - var detailsOverflowParams = getElementOverflowParams(buildDetails); - var controlsOverflowParams; - if (buildControls) { - controlsOverflowParams = getElementOverflowParams(buildControls); - } + let nameWidth = usableRowWidth * 0.32; + let detailsWidth = usableRowWidth * 0.5; + let badgesWidth = usableRowWidth * 0.18; - function fitToControlsHeight(element) { - if (buildControls) { - if (element.clientHeight < buildControls.clientHeight) { - element.style.height = buildControls.clientHeight.toString() + "px"; - } - } + var nameOverflowParams = getElementOverflowData(buildName, nameWidth); + var detailsOverflowParams = getElementOverflowData( + buildDetails, + detailsWidth, + ); + var badgesOverflowParams; + if (buildBadges) { + badgesOverflowParams = getElementOverflowData(buildBadges, badgesWidth); + } else { + badgesOverflowParams = { + element: null, + scrollWidth: 0, + isOverflowed: false, + }; } - function setBuildControlWidths() { - if (buildControls) { - var buildBadge = buildControls.querySelector(".build-badge"); - - if (buildBadge) { - var buildControlsWidth = buildControls.clientWidth; - var buildBadgeWidth; - - var buildStop = buildControls.querySelector(".build-stop"); - if (buildStop) { - buildStop.style.width = "24px"; - // Minus 24 for the buildStop width, - // minus 4 for left+right padding in the controls container - buildBadgeWidth = buildControlsWidth - 24 - leftRightPadding; - if (buildControls.classList.contains("indent-multiline")) { - buildBadgeWidth = buildBadgeWidth - 20; - } - buildBadge.style.width = buildBadgeWidth + "px"; - } else { - buildBadge.style.width = "100%"; - } - } - controlsOverflowParams = getElementOverflowParams(buildControls); - } + function setBuildBadgesWidths() { + buildBadges.style.width = "100%"; } - setBuildControlWidths(); - - var controlsRepositioned = false; - - if (nameOverflowParams.isOverflowed || detailsOverflowParams.isOverflowed) { - // At least one of the cells (name or details) needs to move to a row of its own. + if ( + !nameOverflowParams.isOverflowed && + nameWidth + + detailsOverflowParams.scrollWidth + + badgesOverflowParams.scrollWidth < + usableRowWidth + ) { + // Everything fits in one row + buildDetails.style.width = "fit-content"; + buildBadges.style.float = "right"; + buildBadges.style.width = "fit-content"; + } else { markMultiline(); - - if (buildControls) { - // We have build controls. Lets see can we find a combination that allows the build controls + if (buildBadges) { + // We have build badges. Lets see can we find a combination that allows the build badges // to sit beside either the build name or the build details. - var badgesOverflowing = false; - var nameLessThanHalf = true; - var detailsLessThanHalf = true; - var buildBadge = buildControls.querySelector(".build-badge"); - if (buildBadge) { - var badgeOverflowParams = getElementOverflowParams(buildBadge); - - if (badgeOverflowParams.isOverflowed) { - // The badges are also overflowing. In this case, we will only attempt to - // put the controls on the same line as the name or details (see below) - // if the name or details is using less than half the width of the build history - // widget. - badgesOverflowing = true; - nameLessThanHalf = - nameOverflowParams.scrollWidth < usableRowWidth / 2; - detailsLessThanHalf = - detailsOverflowParams.scrollWidth < usableRowWidth / 2; - } - } - // eslint-disable-next-line no-inner-declarations - function expandLeftWithRight( - leftCellOverFlowParams, - rightCellOverflowParams, - ) { - // Float them left and right... - leftCellOverFlowParams.element.style.float = "left"; - rightCellOverflowParams.element.style.float = "right"; - - if ( - !leftCellOverFlowParams.isOverflowed && - !rightCellOverflowParams.isOverflowed - ) { - // If neither left nor right are overflowed, just leave as is and let them float left and right. - return; - } - if ( - leftCellOverFlowParams.isOverflowed && - !rightCellOverflowParams.isOverflowed - ) { - leftCellOverFlowParams.element.style.width = - leftCellOverFlowParams.scrollWidth + "px"; - return; - } - if ( - !leftCellOverFlowParams.isOverflowed && - rightCellOverflowParams.isOverflowed - ) { - rightCellOverflowParams.element.style.width = - rightCellOverflowParams.scrollWidth + "px"; - return; - } - } - if ( - (!badgesOverflowing || nameLessThanHalf) && - nameOverflowParams.scrollWidth + controlsOverflowParams.scrollWidth <= - usableRowWidth + nameOverflowParams.scrollWidth + badgesOverflowParams.scrollWidth <= + usableRowWidth ) { - // Build name and controls can go on one row (first row). Need to move build details down + // Build name and badges can go on one row (first row). Need to move build details down // to a row of its own (second row) by making it a block element, forcing it to wrap. If there - // are controls, we move them up to position them after the build name by inserting before the + // are badges, we move them up to position them after the build name by inserting before the // build details. buildDetails.classList.add("block"); - buildControls.parentNode.removeChild(buildControls); - buildDetails.parentNode.insertBefore(buildControls, buildDetails); - var wrap = blockWrap(buildName, buildControls); - wrap.classList.add("build-name-controls"); + buildBadges.parentNode.removeChild(buildBadges); + buildDetails.parentNode.insertBefore(buildBadges, buildDetails); + var wrap = blockWrap(buildName, buildBadges); + wrap.classList.add("build-name-badges"); indentMultiline(buildDetails); - nameOverflowParams = getElementOverflowParams(buildName); // recalculate - expandLeftWithRight(nameOverflowParams, controlsOverflowParams); - setBuildControlWidths(); - fitToControlsHeight(buildName); + expandLeftWithRight(nameOverflowParams, badgesOverflowParams); } else if ( - (!badgesOverflowing || detailsLessThanHalf) && detailsOverflowParams.scrollWidth + - controlsOverflowParams.scrollWidth <= - usableRowWidth + badgesOverflowParams.scrollWidth + + multiLinePadding <= + usableRowWidth ) { - // Build details and controls can go on one row. Need to make the - // build name (first field) a block element, forcing the details and controls to wrap + // Build details and badges can go on one row. Need to make the + // build name (first field) a block element, forcing the details and badges to wrap // onto the next row (creating a second row). buildName.classList.add("block"); - wrap = blockWrap(buildDetails, buildControls); + wrap = blockWrap(buildDetails, buildBadges); indentMultiline(wrap); - wrap.classList.add("build-details-controls"); - detailsOverflowParams = getElementOverflowParams(buildDetails); // recalculate - expandLeftWithRight(detailsOverflowParams, controlsOverflowParams); - setBuildControlWidths(); - fitToControlsHeight(buildDetails); + wrap.classList.add("build-details-badges"); + expandLeftWithRight(detailsOverflowParams, badgesOverflowParams); + } else if ( + !nameOverflowParams.isOverflowed && + nameWidth + detailsOverflowParams.scrollWidth < usableRowWidth + ) { + // Build name and details can go on one row. Make badges take full row + // it goes on separate row + indentMultiline(buildBadges); + setBuildBadgesWidths(); } else { // No suitable combo fits on a row. All need to go on rows of their own. buildName.classList.add("block"); buildDetails.classList.add("block"); - buildControls.classList.add("block"); + buildBadges.classList.add("block"); indentMultiline(buildDetails); - indentMultiline(buildControls); - nameOverflowParams = getElementOverflowParams(buildName); // recalculate - detailsOverflowParams = getElementOverflowParams(buildDetails); // recalculate - setBuildControlWidths(); + indentMultiline(buildBadges); + setBuildBadgesWidths(); } - controlsRepositioned = true; } else { - buildName.classList.add("block"); - buildDetails.classList.add("block"); + // name and details don't fit in one row indentMultiline(buildDetails); + buildName.classList.add("block"); } } - if (buildControls && !controlsRepositioned) { - buildBadge = buildControls.querySelector(".build-badge"); - if (buildBadge) { - badgeOverflowParams = getElementOverflowParams(buildBadge); - - if (badgeOverflowParams.isOverflowed) { - markMultiline(); - indentMultiline(buildControls); - buildControls.classList.add("block"); - controlsRepositioned = true; - setBuildControlWidths(); - } - } - } - - if ( - !nameOverflowParams.isOverflowed && - !detailsOverflowParams.isOverflowed && - !controlsRepositioned - ) { - fitToControlsHeight(buildName); - fitToControlsHeight(buildDetails); - } - row.classList.add("overflow-checked"); } -function checkAllRowCellOverflows() { +function checkAllRowCellOverflows(recalculate = false) { if (isRunAsTest) { return; } - var dataTable = getDataTable(buildHistoryContainer); var rows = dataTable.rows; for (var i = 0; i < rows.length; i++) { var row = rows[i]; - checkRowCellOverflows(row); + checkRowCellOverflows(row, recalculate); } } @@ -524,6 +504,31 @@ function loadPage(params, focusOnSearch) { }); } +const handleResize = function () { + checkAllRowCellOverflows(true); +}; + +const debouncedResizer = debounce(handleResize, 500); + +addEventListener("resize", function () { + const newClientWidth = document.body.clientWidth; + // the sidepanel has 2 sizes depending on the clientWidth + // > tabletBreakpoint: the sidepanel has fixed width + // <= tabletBreakpoint: the sidepanel takes the complete width + if ( + lastClientWidth > tabletBreakpoint && + newClientWidth > tabletBreakpoint && + lastClientWidth != newClientWidth + ) { + // we're in a range of the clientWidth were changes do not affect the layout + // or the width hasn't changed. + lastClientWidth = newClientWidth; + return; + } + lastClientWidth = newClientWidth; + debouncedResizer(); +}); + const handleFilter = function () { loadPage({}, true); }; @@ -531,6 +536,7 @@ const handleFilter = function () { const debouncedFilter = debounce(handleFilter, 300); document.addEventListener("DOMContentLoaded", function () { + lastClientWidth = document.body.clientWidth; // Apply correct styling upon filter bar text change, call API after wait if (pageSearchInput !== null) { pageSearchInput.addEventListener("input", function () { diff --git a/war/src/main/scss/base/_layout-commons.scss b/war/src/main/scss/base/_layout-commons.scss index 36201c78b080..5b152be8c11c 100644 --- a/war/src/main/scss/base/_layout-commons.scss +++ b/war/src/main/scss/base/_layout-commons.scss @@ -114,7 +114,7 @@ body.full-screen #main-panel { } } -@media (width >= 1170px) { +@media (width > breakpoints.$tablet-breakpoint) { body.two-column #side-panel { width: 340px; } diff --git a/war/src/main/scss/components/_side-panel-widgets.scss b/war/src/main/scss/components/_side-panel-widgets.scss index bd6715cdc586..075f3f3f68d7 100644 --- a/war/src/main/scss/components/_side-panel-widgets.scss +++ b/war/src/main/scss/components/_side-panel-widgets.scss @@ -116,20 +116,27 @@ width: 50%; } -.build-row-cell .pane.build-controls { +.build-row-cell .pane.build-badges { width: 18%; - text-align: right; + display: inline-flex !important; + justify-content: end; + align-items: center; + gap: 2px; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; } .build-row-cell .pane.build-details.block { width: 100%; + display: block; } .build-row.multi-line .build-row-cell .pane.build-name.block { width: 100%; + display: block; } -.build-row-cell .pane.build-controls.block { +.build-row-cell .pane.build-badges.block { width: 100%; } @@ -144,37 +151,33 @@ z-index: 1; } -.build-row-cell .build-stop { - display: inline-block; - width: 30%; -} - -.build-row-cell .build-badge { - display: inline-block; - text-align: right; - width: 70%; - padding: 2px 0; -} - -.build-row-cell .build-badge > span { +.build-row-cell .build-badges > span { display: inline-block; max-width: 256px; padding: 0 1px; overflow: hidden; } -.build-row-cell .build-badge > span + span { +.build-row-cell .build-badges > span + span { margin: 0 0 0 2px !important; } @media (width >= 1170px) { - .build-row-cell .build-badge > span { + .build-row-cell .build-badges > span { max-width: 296px; } } -.build-row .build-name-controls .pane.build-name, -.build-row .build-details-controls .pane.build-details { +.build-row-cell .build-badges > .run-badge { + display: inline-flex; +} + +.build-row-cell .build-badges > .run-badge > a { + display: inline-flex; +} + +.build-row .build-name-badges .pane.build-name, +.build-row .build-details-badges .pane.build-details { width: 70%; } @@ -186,7 +189,6 @@ } .build-row.multi-line .build-row-cell .block { - display: block; overflow: auto; } diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js index ff9a04bde2b7..4c3f9c0f2276 100644 --- a/war/src/main/webapp/scripts/hudson-behavior.js +++ b/war/src/main/webapp/scripts/hudson-behavior.js @@ -2261,6 +2261,8 @@ function getElementOverflowParams(element) { // Then we force it to "nowrap", so we can get those dimension. // We can then compare the two sets, which will indicate if // wrapping is potentially happening, or not. + // The scrollWidth is calculated based on the content and not the actual + // width of the element // Force it to wrap. element.classList.add("force-wrap"); @@ -2270,6 +2272,8 @@ function getElementOverflowParams(element) { // Force it to nowrap. Return the comparisons. element.classList.add("force-nowrap"); + const oldWidth = element.style.width; + element.style.width = "fit-content"; var nowrapClientHeight = element.clientHeight; try { var overflowParams = { @@ -2281,6 +2285,7 @@ function getElementOverflowParams(element) { return overflowParams; } finally { element.classList.remove("force-nowrap"); + element.style.width = oldWidth; } } From 1c6dbcd7f562eecd651251f9800d804292ad0865 Mon Sep 17 00:00:00 2001 From: Markus Winter Date: Thu, 4 Apr 2024 03:01:36 +0200 Subject: [PATCH 2/6] fix linter issues --- war/src/main/scss/base/_layout-commons.scss | 2 +- war/src/main/scss/components/_side-panel-widgets.scss | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/war/src/main/scss/base/_layout-commons.scss b/war/src/main/scss/base/_layout-commons.scss index 5b152be8c11c..58200c76c192 100644 --- a/war/src/main/scss/base/_layout-commons.scss +++ b/war/src/main/scss/base/_layout-commons.scss @@ -114,7 +114,7 @@ body.full-screen #main-panel { } } -@media (width > breakpoints.$tablet-breakpoint) { +@media (width > 900px) { body.two-column #side-panel { width: 340px; } diff --git a/war/src/main/scss/components/_side-panel-widgets.scss b/war/src/main/scss/components/_side-panel-widgets.scss index 075f3f3f68d7..4aa214cdb297 100644 --- a/war/src/main/scss/components/_side-panel-widgets.scss +++ b/war/src/main/scss/components/_side-panel-widgets.scss @@ -122,8 +122,7 @@ justify-content: end; align-items: center; gap: 2px; - flex-wrap: wrap-reverse; - flex-direction: row-reverse; + flex-flow: row-reverse wrap-reverse; } .build-row-cell .pane.build-details.block { From 42bbf5a153981000615efaaf175ac0cbece8b9e1 Mon Sep 17 00:00:00 2001 From: Markus Winter Date: Thu, 4 Apr 2024 10:22:15 +0200 Subject: [PATCH 3/6] fix test --- test/src/test/java/hudson/model/RunTest.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/src/test/java/hudson/model/RunTest.java b/test/src/test/java/hudson/model/RunTest.java index c59245c78c2c..398791b75f6e 100644 --- a/test/src/test/java/hudson/model/RunTest.java +++ b/test/src/test/java/hudson/model/RunTest.java @@ -157,7 +157,7 @@ private void ensureXssIsPrevented(FreeStyleProject upProject, String validationP HtmlPage htmlPage = wc.goTo(upProject.getUrl()); // trigger the tooltip display - htmlPage.executeJavaScript("document.querySelector('#buildHistory table .build-badge svg')._tippy.show()"); + htmlPage.executeJavaScript("document.querySelector('#buildHistory table .run-badge svg')._tippy.show()"); wc.waitForBackgroundJavaScript(500); ScriptResult result = htmlPage.executeJavaScript("document.querySelector('.tippy-content').innerHTML;"); Object jsResult = result.getJavaScriptResult(); From f22a7f8ce969977a3f4cd15c1d427d5fc7ebf2d3 Mon Sep 17 00:00:00 2001 From: Markus Winter Date: Sun, 7 Apr 2024 22:44:33 +0200 Subject: [PATCH 4/6] revert sidepanel width change --- war/src/main/scss/base/_layout-commons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/war/src/main/scss/base/_layout-commons.scss b/war/src/main/scss/base/_layout-commons.scss index 58200c76c192..36201c78b080 100644 --- a/war/src/main/scss/base/_layout-commons.scss +++ b/war/src/main/scss/base/_layout-commons.scss @@ -114,7 +114,7 @@ body.full-screen #main-panel { } } -@media (width > 900px) { +@media (width >= 1170px) { body.two-column #side-panel { width: 340px; } From 543a2a406a88c757bbb020c713390f9d4c864ce0 Mon Sep 17 00:00:00 2001 From: Markus Winter Date: Mon, 8 Apr 2024 17:40:07 +0200 Subject: [PATCH 5/6] fixes ensure description is at the end, handle no badges properly --- war/src/main/js/filter-build-history.js | 28 +++++++++++++++---------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/war/src/main/js/filter-build-history.js b/war/src/main/js/filter-build-history.js index dd2e4452bf96..55a77160971b 100644 --- a/war/src/main/js/filter-build-history.js +++ b/war/src/main/js/filter-build-history.js @@ -222,15 +222,19 @@ function checkRowCellOverflows(row, recalculate = false) { } var cell = row.querySelector(".build-row-cell"); - var buildName = row.querySelector(".build-name"); - var buildDetails = row.querySelector(".build-details"); - var leftBar = row.querySelector(".left-bar"); - if (!buildName || !buildDetails) { + if (!cell) { return; } + var buildName = cell.querySelector(".build-name"); + var buildDetails = cell.querySelector(".build-details"); + var insertDiv = cell.querySelector(".left-bar"); + var desc = cell.querySelector(".desc"); + if (desc !== null) { + insertDiv = desc; + } var buildBadges = row.querySelector(".build-badges"); - if (buildBadges.childElementCount === 0) { + if (buildBadges && buildBadges.childElementCount === 0) { buildBadges.remove(); buildBadges = null; } @@ -240,10 +244,10 @@ function checkRowCellOverflows(row, recalculate = false) { function resetCellOverflows() { markSingleline(); - cell.insertBefore(buildName, leftBar); - cell.insertBefore(buildDetails, leftBar); + cell.insertBefore(buildName, insertDiv); + cell.insertBefore(buildDetails, insertDiv); if (buildBadges) { - cell.insertBefore(buildBadges, leftBar); + cell.insertBefore(buildBadges, insertDiv); } buildName.classList.remove("block"); buildName.classList.remove("block"); @@ -360,8 +364,10 @@ function checkRowCellOverflows(row, recalculate = false) { ) { // Everything fits in one row buildDetails.style.width = "fit-content"; - buildBadges.style.float = "right"; - buildBadges.style.width = "fit-content"; + if (buildBadges) { + buildBadges.style.float = "right"; + buildBadges.style.width = "fit-content"; + } } else { markMultiline(); if (buildBadges) { @@ -429,7 +435,7 @@ function checkAllRowCellOverflows(recalculate = false) { return; } var dataTable = getDataTable(buildHistoryContainer); - var rows = dataTable.rows; + var rows = dataTable.getElementsByClassName("build-row"); for (var i = 0; i < rows.length; i++) { var row = rows[i]; From 902c4e845c051a430587c5c7f36f5cfbfa9fda8b Mon Sep 17 00:00:00 2001 From: Markus Winter Date: Mon, 8 Apr 2024 18:08:57 +0200 Subject: [PATCH 6/6] fix duplicate --- war/src/main/js/filter-build-history.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/war/src/main/js/filter-build-history.js b/war/src/main/js/filter-build-history.js index 55a77160971b..8b20ef959f36 100644 --- a/war/src/main/js/filter-build-history.js +++ b/war/src/main/js/filter-build-history.js @@ -239,8 +239,6 @@ function checkRowCellOverflows(row, recalculate = false) { buildBadges = null; } - var desc = row.querySelector(".desc"); - function resetCellOverflows() { markSingleline();