Init

core/src/main/resources/hudson/model/Run/index.jelly

@@ -30,29 +30,66 @@ THE SOFTWARE.
 
     <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
     <l:main-panel>
-      <div style="float:right; z-index: 1; position:relative; margin-left: 1em">
+      <j:set var="controls">
         <l:hasPermission permission="${it.UPDATE}">
           <st:include page="logKeep.jelly" />
         </l:hasPermission>
-        <div style="margin-top:1em">
-          ${%startedAgo(it.timestampString)}
-        </div>
-        <div>
-          <j:if test="${it.building}">
-            ${%beingExecuted(it.executor.timestampString)}
-          </j:if>
-          <j:if test="${!it.building}">
-            ${%Took} <a href="${rootURL}/${it.parent.url}buildTimeTrend">${it.durationString}</a>
-          </j:if>
-          <st:include page="details.jelly" optional="true" />
-        </div>
-      </div>
+      </j:set>
+
+      <t:buildCaption controls="${controls}">${it.displayName}</t:buildCaption>
+
+      <t:editableDescription permission="${it.UPDATE}" />
 
-      <t:buildCaption>${it.displayName} (<i:formatDate value="${it.timestamp.time}" type="both" dateStyle="medium" timeStyle="medium"/>)</t:buildCaption>
+      <l:card title="${%Details}">
+        <div class="populisms">
+          <div class="populism">
+            <j:set var="minutes" value="${360 * (it.timestamp.time.minutes / 60)}" />
+            <i:formatDate var="hours" value="${it.timestamp.time}" pattern="h" />
+            <j:set var="hours" value="${360 * (hours / 12) + (30 * (it.timestamp.time.minutes / 60))}" />
 
-      <div>
-        <t:editableDescription permission="${it.UPDATE}" />
-      </div>
+            <div class="populism__icon">
+              <div class="cssclock" style="--hours: ${hours}deg; --minutes: ${minutes}deg">
+                <span class="hours"></span>
+                <span class="minutes"></span>
+              </div>
+            </div>
+            <div class="hideything">
+              <span>${%startedAgo(it.timestampString)}</span>
+              <span class="jenkins-hidden">
+                Started <i:formatDate value="${it.timestamp.time}" type="both" dateStyle="long" timeStyle="medium" />
+              </span>
+            </div>
+          </div>
+
+          <script>
+            const hideything = document.querySelector(".hideything");
+            const firstSpan = hideything.querySelector("span:first-of-type");
+            const secondSpan = hideything.querySelector("span:last-of-type");
+
+            hideything.addEventListener("click", () => {
+              firstSpan.classList.toggle("jenkins-hidden");
+              secondSpan.classList.toggle("jenkins-hidden");
+            });
+          </script>
+
+          <div class="populism">
+            <div class="populism__icon">
+              <l:icon src="symbol-timer" />
+            </div>
+            <j:choose>
+              <j:when test="${it.building}">
+                ${%beingExecuted(it.executor.timestampString)}
+              </j:when>
+              <j:otherwise>
+                ${%Took} ${it.durationString}
+              </j:otherwise>
+            </j:choose>
+            <j:if test="${!empty(app.nodes) or (it.builtOnStr != null and it.builtOnStr != '')}">
+              ${%on} <t:node value="${it.builtOn}" valueStr="${it.builtOnStr}"/>
+            </j:if>
+          </div>
+        </div>
+      </l:card>
 
       <table>
         <t:artifactList build="${it}" caption="${%Build Artifacts}"

core/src/main/resources/lib/layout/card.jelly

@@ -43,7 +43,7 @@ THE SOFTWARE.
     <div class="jenkins-card__title">
       ${attrs.title}
       <div class="jenkins-card__controls">
-        <j:out value="${controls}"/>
+        <j:out value="${attrs.controls}"/>
         <j:if test="${attrs.expandable != null}">
           <a href="${attrs.expandable}" class="jenkins-card__reveal" tooltip="${%Expand}">
             <l:icon src="symbol-expand" />

war/src/main/scss/styles.scss

@@ -3,3 +3,103 @@
 @use "components";
 @use "form";
 @use "pages";
+
+$icon-size: 1.375rem;
+
+.populisms {
+  display: flex; flex-direction: column; gap: 0.75rem;
+}
+
+.hideything {
+  cursor: pointer;
+  transition: var(--standard-transition);
+  user-select: none;
+
+  &:hover {
+    opacity: 0.75;
+  }
+
+  &:active {
+    scale: 0.95;
+  }
+}
+
+.cssclock {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  scale: 0.75;
+
+  &::after {
+    position: absolute;
+    content: "";
+    inset: 0;
+    border-radius: 100%;
+    border: 2px solid currentColor;
+  }
+
+  .hours, .minutes {
+    position: absolute;
+    inset: 0;
+    border-radius: 100%;
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 11px;
+      left: 11px;
+      width: 2px;
+      background: currentColor;
+      border-radius: 2px;
+    }
+  }
+  .hours {
+    rotate: var(--hours);
+
+    &::after {
+      height: 6px;
+    }
+  }
+
+  .minutes {
+    rotate: var(--minutes);
+
+    &::after {
+      height: 8px;
+    }
+  }
+}
+
+.populism {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--text-color);
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: start;
+    width: $icon-size;
+    height: $icon-size;
+
+    svg {
+      width: $icon-size;
+      height: $icon-size;
+    }
+
+    .jenkins-avatar {
+      width: calc($icon-size - 1px);
+      height: calc($icon-size - 1px);
+      font-size: 0.6rem !important;
+    }
+  }
+
+  a {
+    font-weight: normal;
+    text-underline-offset: 3px;
+    text-decoration-thickness: 2px;
+  }
+}