Refactor the sectioning of the /manage page

- Use the <section> HTML elements - Add some spacing between sections to improve readability

Refactor the sectioning of the /manage page
- Use the <section> HTML elements - Add some spacing between sections to improve readability
09ce2f5c · Félix Queiruga · b46cfa4b · 09ce2f5c · 09ce2f5c
2 changed file
--- 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>
+      <section class="manage-page__category">
-      <div class="manage-page__row">
+        <h2>${category.key.label}</h2>
-      <j:forEach var="m" items="${category.value}">
-        <j:set var="icon" value="${m.iconClassName != null ? m.iconClassName : m.iconFileName}" />
+        <div class="manage-page__row">
-        <j:if test="${icon!=null}">
+        <j:forEach var="m" items="${category.value}">
-          <div class="manage-option manage-page__column">
+          <j:set var="icon" value="${m.iconClassName != null ? m.iconClassName : m.iconFileName}" />
-          <j:set var="iconUrl" value="${icon.startsWith('/') ? resURL+icon : imagesURL + '/48x48/' + icon}" />
+          <j:if test="${icon!=null}">
-          <j:set var="alt" value="${icon.replaceAll('\\d*\\.[^.]+$', '')}"/>
+            <div class="manage-option manage-page__column">
-          ${taskTags!=null and attrs.contextMenu!='false' ? taskTags.add(m.urlName, iconUrl, m.displayName, m.requiresPOST, m.requiresConfirmation) : null}
+            <j:set var="iconUrl" value="${icon.startsWith('/') ? resURL+icon : imagesURL + '/48x48/' + icon}" />
-          <j:choose>
+            <j:set var="alt" value="${icon.replaceAll('\\d*\\.[^.]+$', '')}"/>
-            <j:when test="${m.requiresConfirmation}">
+            ${taskTags!=null and attrs.contextMenu!='false' ? taskTags.add(m.urlName, iconUrl, m.displayName, m.requiresPOST, m.requiresConfirmation) : null}
-              <l:confirmationLink href="${m.urlName}" post="${m.requiresPOST}" message="${%are.you.sure(m.displayName)}">
+            <j:choose>
-                <img class="icon" src="${iconUrl}" />
+              <j:when test="${m.requiresConfirmation}">
-                <dl>
+                <l:confirmationLink href="${m.urlName}" post="${m.requiresPOST}" message="${%are.you.sure(m.displayName)}">
-                  <dt>${m.displayName}</dt>
+                  <img class="icon" src="${iconUrl}" />
-                  <dd><j:out value="${m.description}"/></dd>
+                  <dl>
-                  <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
+                    <dt>${m.displayName}</dt>
-                </dl>
+                    <dd><j:out value="${m.description}"/></dd>
-              </l:confirmationLink>
+                    <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
-            </j:when>
+                  </dl>
-            <j:when test="${m.requiresPOST}">
+                </l:confirmationLink>
-              <f:link href="${m.urlName}" post="${m.requiresPOST}">
+              </j:when>
-                <img class="icon" src="${iconUrl}" alt="[${%alt}]"/>
+              <j:when test="${m.requiresPOST}">
-                <dl>
+                <f:link href="${m.urlName}" post="${m.requiresPOST}">
-                  <dt>${m.displayName}</dt>
+                  <img class="icon" src="${iconUrl}" alt="[${%alt}]"/>
-                  <dd><j:out value="${m.description}"/></dd>
+                  <dl>
-                  <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
+                    <dt>${m.displayName}</dt>
-                </dl>
+                    <dd><j:out value="${m.description}"/></dd>
-              </f:link>
+                    <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
-            </j:when>
+                  </dl>
-            <j:otherwise>
+                </f:link>
-              <a href="${m.urlName}" title="${m.displayName}">
+              </j:when>
-                <img class="icon" src="${iconUrl}" alt="manage-option"/>
+              <j:otherwise>
-                <dl>
+                <a href="${m.urlName}" title="${m.displayName}">
-                  <dt>${m.displayName}</dt>
+                  <img class="icon" src="${iconUrl}" alt="manage-option"/>
-                  <dd><j:out value="${m.description}"/></dd>
+                  <dl>
-                  <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
+                    <dt>${m.displayName}</dt>
-                </dl>
+                    <dd><j:out value="${m.description}"/></dd>
-              </a>
+                    <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
-            </j:otherwise>
+                  </dl>
-          </j:choose>
+                </a>
-          </div>
+              </j:otherwise>
-        </j:if>
+            </j:choose>
-      </j:forEach>
+            </div>
-      </div>
+          </j:if>
+        </j:forEach>
+        </div>
+      </section>
    </j:forEach>
  </l:main-panel>

--- a/war/src/main/less/modules/manage-jenkins.less
+++ b/war/src/main/less/modules/manage-jenkins.less
+.manage-page__category {
+  &:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+}
 .manage-page__row {
  display: block;
  display: flex;