From 09ce2f5c91a230642a314dcb78356c481cafbf8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Queiruga?= <fqueiruga@cloudbees.com>
Date: Mon, 16 Mar 2020 12:53:39 +0100
Subject: [PATCH] Refactor the sectioning of the /manage page

- Use the <section> HTML elements
- Add some spacing between sections to improve readability
---
 .../jenkins/model/Jenkins/manage.jelly        | 93 ++++++++++---------
 war/src/main/less/modules/manage-jenkins.less |  5 +
 2 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/core/src/main/resources/jenkins/model/Jenkins/manage.jelly b/core/src/main/resources/jenkins/model/Jenkins/manage.jelly
index d290e210d2..4c815b6298 100644
--- a/core/src/main/resources/jenkins/model/Jenkins/manage.jelly
+++ b/core/src/main/resources/jenkins/model/Jenkins/manage.jelly
@@ -47,51 +47,54 @@ THE SOFTWARE.
     </div>
 
     <j:forEach var="category" items="${it.categorizedManagementLinks.entrySet()}">
-      <h2>${category.key.label}</h2>
-      <div class="manage-page__row">
-      <j:forEach var="m" items="${category.value}">
-        <j:set var="icon" value="${m.iconClassName != null ? m.iconClassName : m.iconFileName}" />
-        <j:if test="${icon!=null}">
-          <div class="manage-option manage-page__column">
-          <j:set var="iconUrl" value="${icon.startsWith('/') ? resURL+icon : imagesURL + '/48x48/' + icon}" />
-          <j:set var="alt" value="${icon.replaceAll('\\d*\\.[^.]+$', '')}"/>
-          ${taskTags!=null and attrs.contextMenu!='false' ? taskTags.add(m.urlName, iconUrl, m.displayName, m.requiresPOST, m.requiresConfirmation) : null}
-          <j:choose>
-            <j:when test="${m.requiresConfirmation}">
-              <l:confirmationLink href="${m.urlName}" post="${m.requiresPOST}" message="${%are.you.sure(m.displayName)}">
-                <img class="icon" src="${iconUrl}" />
-                <dl>
-                  <dt>${m.displayName}</dt>
-                  <dd><j:out value="${m.description}"/></dd>
-                  <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
-                </dl>
-              </l:confirmationLink>
-            </j:when>
-            <j:when test="${m.requiresPOST}">
-              <f:link href="${m.urlName}" post="${m.requiresPOST}">
-                <img class="icon" src="${iconUrl}" alt="[${%alt}]"/>
-                <dl>
-                  <dt>${m.displayName}</dt>
-                  <dd><j:out value="${m.description}"/></dd>
-                  <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
-                </dl>
-              </f:link>
-            </j:when>
-            <j:otherwise>
-              <a href="${m.urlName}" title="${m.displayName}">
-                <img class="icon" src="${iconUrl}" alt="manage-option"/>
-                <dl>
-                  <dt>${m.displayName}</dt>
-                  <dd><j:out value="${m.description}"/></dd>
-                  <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
-                </dl>
-              </a>
-            </j:otherwise>
-          </j:choose>
-          </div>
-        </j:if>
-      </j:forEach>
-      </div>
+      <section class="manage-page__category">
+        <h2>${category.key.label}</h2>
+
+        <div class="manage-page__row">
+        <j:forEach var="m" items="${category.value}">
+          <j:set var="icon" value="${m.iconClassName != null ? m.iconClassName : m.iconFileName}" />
+          <j:if test="${icon!=null}">
+            <div class="manage-option manage-page__column">
+            <j:set var="iconUrl" value="${icon.startsWith('/') ? resURL+icon : imagesURL + '/48x48/' + icon}" />
+            <j:set var="alt" value="${icon.replaceAll('\\d*\\.[^.]+$', '')}"/>
+            ${taskTags!=null and attrs.contextMenu!='false' ? taskTags.add(m.urlName, iconUrl, m.displayName, m.requiresPOST, m.requiresConfirmation) : null}
+            <j:choose>
+              <j:when test="${m.requiresConfirmation}">
+                <l:confirmationLink href="${m.urlName}" post="${m.requiresPOST}" message="${%are.you.sure(m.displayName)}">
+                  <img class="icon" src="${iconUrl}" />
+                  <dl>
+                    <dt>${m.displayName}</dt>
+                    <dd><j:out value="${m.description}"/></dd>
+                    <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
+                  </dl>
+                </l:confirmationLink>
+              </j:when>
+              <j:when test="${m.requiresPOST}">
+                <f:link href="${m.urlName}" post="${m.requiresPOST}">
+                  <img class="icon" src="${iconUrl}" alt="[${%alt}]"/>
+                  <dl>
+                    <dt>${m.displayName}</dt>
+                    <dd><j:out value="${m.description}"/></dd>
+                    <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
+                  </dl>
+                </f:link>
+              </j:when>
+              <j:otherwise>
+                <a href="${m.urlName}" title="${m.displayName}">
+                  <img class="icon" src="${iconUrl}" alt="manage-option"/>
+                  <dl>
+                    <dt>${m.displayName}</dt>
+                    <dd><j:out value="${m.description}"/></dd>
+                    <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
+                  </dl>
+                </a>
+              </j:otherwise>
+            </j:choose>
+            </div>
+          </j:if>
+        </j:forEach>
+        </div>
+      </section>
     </j:forEach>
 
   </l:main-panel>
diff --git a/war/src/main/less/modules/manage-jenkins.less b/war/src/main/less/modules/manage-jenkins.less
index fa52d2c434..4bf62dc3d9 100644
--- a/war/src/main/less/modules/manage-jenkins.less
+++ b/war/src/main/less/modules/manage-jenkins.less
@@ -1,3 +1,8 @@
+.manage-page__category {
+  &:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+}
 .manage-page__row {
   display: block;
   display: flex;
-- 
GitLab