From 6df94edab1387b61ea0075b2039c1d9bf02cd4ff Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 7 Jan 2025 14:42:03 +0000
Subject: [PATCH] Tidy up

---
 .../hudson/model/Run/new-build-page.jelly     | 35 ++++++-
 src/main/scss/abstracts/_theme.scss           |  4 +-
 src/main/scss/pages/_build.scss               | 94 +++++++++++++++++--
 3 files changed, 121 insertions(+), 12 deletions(-)

diff --git a/core/src/main/resources/hudson/model/Run/new-build-page.jelly b/core/src/main/resources/hudson/model/Run/new-build-page.jelly
index 38caa5c49452..e61cc33b2dce 100644
--- a/core/src/main/resources/hudson/model/Run/new-build-page.jelly
+++ b/core/src/main/resources/hudson/model/Run/new-build-page.jelly
@@ -24,12 +24,12 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:t="/lib/hudson">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:dd="/lib/layout/dropdowns">
   <l:layout title="${it.fullDisplayName}">
-    <st:include page="sidepanel.jelly" />
-
     <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
     <l:main-panel>
+      <j:set var="buildUrl" value="${h.decompose(request)}" />
+
       <script src="${resURL}/jsbundles/pages/job.js" type="text/javascript" defer="true" />
 
       <j:set var="controls">
@@ -37,6 +37,16 @@ THE SOFTWARE.
         <l:hasPermission permission="${it.UPDATE}">
           <st:include page="logKeep.jelly" />
         </l:hasPermission>
+        <l:overflowButton>
+          <dd:custom>
+            <div class="app-build__actions">
+              <st:include page="tasks.jelly" optional="true" />
+              <st:include page="delete.jelly" />
+              <st:include page="actions.jelly" />
+              <t:actions actions="${it.transientActions}"/>
+            </div>
+          </dd:custom>
+        </l:overflowButton>
       </j:set>
 
       <t:buildCaption controls="${controls}">${it.displayName}</t:buildCaption>
@@ -123,6 +133,25 @@ THE SOFTWARE.
           </div>
         </l:card>
       </div>
+
+      <div class="app-build__pagination">
+        <div>
+          <j:if test="${it.previousBuild!=null}">
+            <a href="${buildUrl.previousBuildUrl}" class="jenkins-button jenkins-button--tertiary jdl-previous-button">
+              <l:icon src="symbol-arrow-left" class="jdl-previous-next-controls__arrow" />
+              <span>#${it.previousBuild.number}</span>
+            </a>
+          </j:if>
+        </div>
+        <div>
+          <j:if test="${it.nextBuild!=null}">
+            <a href="${buildUrl.nextBuildUrl}" class="jenkins-button jenkins-button--tertiary jdl-next-button">
+              <span>#${it.nextBuild.number}</span>
+              <l:icon src="symbol-arrow-right" class="jdl-previous-next-controls__arrow" />
+            </a>
+          </j:if>
+        </div>
+      </div>
     </l:main-panel>
   </l:layout>
 </j:jelly>
diff --git a/src/main/scss/abstracts/_theme.scss b/src/main/scss/abstracts/_theme.scss
index 9d750a5791d6..9875543d3476 100644
--- a/src/main/scss/abstracts/_theme.scss
+++ b/src/main/scss/abstracts/_theme.scss
@@ -72,7 +72,7 @@ $semantics: (
   --unstable-build-icon-color: var(--orange);
 
   // Background colors
-  --background: var(--white);
+  --background: color-mix(in srgb, var(--blue) 1%, white);
 
   // Header
   --brand-link-color: var(--secondary);
@@ -253,7 +253,7 @@ $semantics: (
   --pane-link-color--visited: black;
 
   // Cards
-  --card-background: var(--background);
+  --card-background: var(--white);
   --card-background--hover: transparent;
   --card-background--active: transparent;
   --card-border-color: hsl(240 25% 75% / 0.25);
diff --git a/src/main/scss/pages/_build.scss b/src/main/scss/pages/_build.scss
index 15641f84ff20..847a957458a6 100644
--- a/src/main/scss/pages/_build.scss
+++ b/src/main/scss/pages/_build.scss
@@ -9,21 +9,59 @@
 }
 
 .app-build__grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
   gap: calc(var(--section-padding) / 2);
+  margin-bottom: var(--section-padding);
 
   .jenkins-card {
     margin-bottom: 0; // Remove when .jenkins-card no longer has a default margin
-    height: 100%;
+  }
+
+  @media (width < 1000px) {
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: 1fr 1fr;
+  }
 
-    &:first-of-type {
-      grid-column: span 2;
+  @media (width >= 1000px) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    .jenkins-card {
+      height: 100%;
+      min-height: 340px;
+      overflow: clip;
+      margin-bottom: 0; // Remove when .jenkins-card no longer has a default margin
+
+      &:first-of-type {
+        grid-column: span 3;
+      }
+
+      &:last-of-type {
+        grid-column: span 5;
+      }
     }
   }
 
-  & > .jenkins-card:last-of-type {
-    grid-column: span 2;
+  @media (width >= 1300px) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  @media (width >= 1600px) {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+
+  @media (width >= 2000px) {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  }
+}
+
+.app-build__actions {
+  display: flex;
+  flex-direction: column;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
   }
 }
 
@@ -124,3 +162,45 @@
     font-size: var(--font-size-sm);
   }
 }
+
+.app-build__pagination {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: var(--section-padding);
+  margin-bottom: calc(var(--section-padding) * -1);
+  border-bottom: 2px solid color-mix(in srgb, var(--text-color-secondary) 10%, white);
+
+  .jdl-previous-button,
+  .jdl-next-button {
+    display: flex;
+    gap: 0.8rem;
+
+    svg * {
+      stroke-width: 36px;
+    }
+
+    & > * {
+      transition: transform var(--elastic-transition);
+    }
+  }
+
+  .jdl-previous-button {
+    &:hover {
+      transform: translateX(-1px);
+
+      & > * {
+        transform: translateX(-2px);
+      }
+    }
+  }
+
+  .jdl-next-button {
+    &:hover {
+      transform: translateX(1px);
+
+      & > * {
+        transform: translateX(2px);
+      }
+    }
+  }
+}
\ No newline at end of file