Add margin to table, initial work on manage old data page

janfaracik · Dec 19, 2021 · 615222f · 615222f
1 parent 267f43a
commit 615222f
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 73 deletions.
diff --git a/core/src/main/resources/hudson/diagnosis/OldDataMonitor/manage.jelly b/core/src/main/resources/hudson/diagnosis/OldDataMonitor/manage.jelly
@@ -28,42 +28,58 @@ THE SOFTWARE.
   <st:include page="sidepanel.jelly" it="${app}"/>
   <l:main-panel>
     <h1>${%Manage Old Data}</h1>
-    <p>${%blurb.1}</p>
-    <p>${%blurb.2}</p>
-    <table class="sortable pane bigtable width-auto">
-      <tr>
-         <th initialSortDir="down">${%Type}</th>
-         <th>${%Name}</th>
-         <th>${%Version}</th>
-         <th>${%Error}</th>
-      </tr>
-      <j:forEach var="item" items="${it.data.entrySet()}">
-        <j:set var="obj" value="${item.key}"/>
-        <j:choose>
-          <j:when test="${item.value!=''}">
+    <p class="jenkins-description">${%blurb.1}</p>
+    <p class="jenkins-description">${%blurb.2}</p>
+
+    <h2>${%TODO} ${it.data.size()}</h2>
+    <j:choose>
+      <j:when test="${it.data.size() > 0}">
+        <table class="jenkins-table sortable">
+          <thead>
             <tr>
-              <td>${obj.class.name}</td>
-              <!-- fullName is first to avoid calling User.get(String) for User object -->
-              <td>${obj.fullName?:obj.fullDisplayName?:obj.displayName?:obj.name}</td>
-              <td>
-                <j:choose>
-                  <j:when test="${item.value.isOld(150)}">
-                    <b title="${%Very old version}">${item.value}</b>
-                  </j:when>
-                  <j:otherwise>
-                    ${item.value}
-                  </j:otherwise>
-                </j:choose>
-              </td>
-              <td style="white-space:normal">${item.value.extra}</td>
+              <th initialSortDir="down">${%Type}</th>
+              <th>${%Name}</th>
+              <th>${%Version}</th>
+              <th>${%Error}</th>
             </tr>
-          </j:when>
-          <j:otherwise>
-            <j:if test="${item.value.extra!=null}"><j:set var="hasExtra" value="${true}"/></j:if>
-          </j:otherwise>
-        </j:choose>
-      </j:forEach>
-    </table>
+          </thead>
+          <tbody>
+            <j:forEach var="item" items="${it.data.entrySet()}">
+              <j:set var="obj" value="${item.key}"/>
+              <j:choose>
+                <j:when test="${item.value!=''}">
+                  <tr>
+                    <td>${obj.class.name}</td>
+                    <!-- fullName is first to avoid calling User.get(String) for User object -->
+                    <td>${obj.fullName?:obj.fullDisplayName?:obj.displayName?:obj.name}</td>
+                    <td>
+                      <j:choose>
+                        <j:when test="${item.value.isOld(150)}">
+                          <b title="${%Very old version}">${item.value}</b>
+                        </j:when>
+                        <j:otherwise>
+                          ${item.value}
+                        </j:otherwise>
+                      </j:choose>
+                    </td>
+                    <td style="white-space:normal">${item.value.extra}</td>
+                  </tr>
+                </j:when>
+                <j:otherwise>
+                  <j:if test="${item.value.extra!=null}"><j:set var="hasExtra" value="${true}"/></j:if>
+                </j:otherwise>
+              </j:choose>
+            </j:forEach>
+          </tbody>
+        </table>
+      </j:when>
+      <j:otherwise>
+        <p class="jenkins-description">${%No old data was found.}</p>
+      </j:otherwise>
+    </j:choose>
+
+    <h2>${%TODO Version stuff?} ${it.data.size()}</h2>
+    <!--    TODO stuff-->
     <j:set var="vers" value="${it.versionList}"/>
     <j:choose>
       <j:when test="${vers.hasNext()}">
@@ -83,31 +99,35 @@ THE SOFTWARE.
         </form>
       </j:when>
       <j:otherwise>
-        ${%No old data was found.}
+        <p class="jenkins-description">${%No old data was found.}</p>
       </j:otherwise>
     </j:choose>
+
     <j:if test="${hasExtra}">
-      <br/>
       <h2>${%Unreadable Data}</h2>
-      <p>${%blurb.6}</p>
-      <table class="sortable pane bigtable width-auto">
-        <tr>
+      <p class="jenkins-description">${%blurb.6}</p>
+      <table class="jenkins-table sortable">
+        <thead>
+          <tr>
             <th initialSortDir="down">${%Type}</th>
             <th>${%Name}</th>
             <th>${%Error}</th>
-        </tr>
-        <j:forEach var="item" items="${it.data.entrySet()}">
-          <j:if test="${item.value.extra!=null and item.value==''}">
-            <j:set var="obj" value="${item.key}"/>
-            <tr>
-              <td>${obj.class.name}</td>
-              <td>${obj.fullName?:obj.fullDisplayName?:obj.displayName?:obj.name}</td>
-              <td style="white-space:normal">${item.value.extra}</td>
-            </tr>
-          </j:if>
-        </j:forEach>
+          </tr>
+        </thead>
+        <tbody>
+          <j:forEach var="item" items="${it.data.entrySet()}">
+            <j:if test="${item.value.extra!=null and item.value==''}">
+              <j:set var="obj" value="${item.key}"/>
+              <tr>
+                <td>${obj.class.name}</td>
+                <td>${obj.fullName?:obj.fullDisplayName?:obj.displayName?:obj.name}</td>
+                <td style="white-space:normal">${item.value.extra}</td>
+              </tr>
+            </j:if>
+          </j:forEach>
+        </tbody>
       </table>
-      <br/>
+
       <form action="discard" method="POST" name="discardUnreadable">
         <f:submit value="${%Discard Unreadable Data}"/>
       </form>

diff --git a/war/src/main/less/base/typography.less b/war/src/main/less/base/typography.less
@@ -51,24 +51,8 @@ h6,
   line-height: var(--line-height-heading);
   font-weight: bold;
   display: block;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
   margin-top: 0;
-  margin-bottom: 2rem;
+  margin-bottom: var(--section-padding);
 }
 
 h1,

diff --git a/war/src/main/less/modules/app-bar.less b/war/src/main/less/modules/app-bar.less
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 2rem;
+  margin-bottom: var(--section-padding);
 
   .jenkins-app-bar__content {
     display: flex;
@@ -16,7 +16,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-left: 2rem;
+    margin-left: var(--section-padding);
     min-height: 36px;
 
     .jenkins-search {
@@ -25,8 +25,8 @@
   }
 
   &--border {
-    margin-bottom: 2rem;
-    padding-bottom: 2rem;
+    margin-bottom: var(--section-padding);
+    padding-bottom: var(--section-padding);
     border-bottom: 2px solid var(--panel-border-color);
   }
 

diff --git a/war/src/main/less/modules/table.less b/war/src/main/less/modules/table.less
@@ -5,7 +5,7 @@
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 0 0 5px var(--table-background);
-  margin: 5px;
+  margin: 5px 5px calc(var(--section-padding) + 5px);
   --table-padding: 0.55rem;
 
   * {