Adjust padding, adjust sizes

janfaracik · Dec 1, 2021 · 62a8614 · 62a8614
1 parent 19a04e8
commit 62a8614
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 21 deletions.
diff --git a/core/src/main/resources/jenkins/fingerprints/GlobalFingerprintConfiguration/config.jelly b/core/src/main/resources/jenkins/fingerprints/GlobalFingerprintConfiguration/config.jelly
@@ -20,7 +20,9 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form">
     <f:section title="${%Fingerprints}">
-        <f:checkbox title="Disable Fingerprint Cleanup" field="fingerprintCleanupDisabled" default="${it.fingerprintCleanupDisabled}" />
+        <f:entry>
+            <f:checkbox title="Disable Fingerprint Cleanup" field="fingerprintCleanupDisabled" default="${it.fingerprintCleanupDisabled}" />
+        </f:entry>
         <j:if test="${descriptor.fingerprintStorageDescriptors.size() gt 1}">
             <f:entry>
                 <f:dropdownDescriptorSelector field="storage" title="Fingerprint Storage Engine" descriptors="${descriptor.fingerprintStorageDescriptors}"/>

diff --git a/core/src/main/resources/jenkins/model/Jenkins/configure.jelly b/core/src/main/resources/jenkins/model/Jenkins/configure.jelly
@@ -37,7 +37,7 @@ THE SOFTWARE.
       </div>
     </div>
     <div class="behavior-loading"><l:spinner text="${%LOADING}"/></div>
-    <f:form method="post" name="config" action="configSubmit">
+    <f:form method="post" name="config" action="configSubmit" class="jenkins-form">
       <j:set var="instance" value="${it}" />
       <j:set var="descriptor" value="${instance.descriptor}" />
 

diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -61,13 +61,13 @@ THE SOFTWARE.
   </div>
 
   <s:form class="jenkins-form" method="post" id="createItemForm" action="${attrs.action?:'createItem'}" name="createItem">
-    <s:entry title="${attrs.nameTitle}">
+    <s:entry title="${attrs.nameTitle}" class="jenkins-form-item--medium">
       <s:textbox id="name" name="name" checkUrl="'${h.jsStringEscape(attrs.checkUrl)}?value='+encodeURIComponent(this.value)"
                  onchange="updateOk(this.form)" onkeyup="updateOk(this.form)" />
       <script>$('name').focus();</script>
     </s:entry>
 
-    <div class="jenkins-form-item">
+    <div class="jenkins-form-item jenkins-form-item--medium">
       <fieldset class="jenkins-fieldset">
         <legend class="jenkins-form-label">
           ${%View type}

diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
@@ -267,13 +267,14 @@
   --task-link-bg-color--hover: var(--very-light-grey);
 
   // Form
+  --section-padding: 1.85rem;
   --input-color: var(--white);
   --input-border: #C3CCD1;
   --input-border-hover: #5C7889;
   --input-hidden-password-bg-color: #f9f9f9;
-  --form-item-max-width: ~"min(47.5vw, 1000px)";
-  --form-item-max-width--medium: ~"min(33.75vw, 800px)";
-  --form-item-max-width--small: ~"min(20vw, 650px)";
+  --form-item-max-width: ~"min(56vw, 1200px)";
+  --form-item-max-width--medium: ~"min(41vw, 1000px)";
+  --form-item-max-width--small: ~"min(26vw, 850px)";
   --form-label-font-weight: bold;
   --form-input-padding: 8px;
   --form-input-border-radius: 6px;

diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
@@ -928,7 +928,7 @@ table.parameters > tbody:hover {
 
 .comboBoxSelectedItem {
   background-color: var(--primary);
-  color: var(--text-color);
+  color: var(--background);
 }
 
 .combobox-values {
@@ -1111,7 +1111,7 @@ table.fingerprint-in-build td {
 /* ========================= Other form related CSS ========================= */
 
 .radioBlock-container {
-  margin-bottom: 0.66rem;
+  margin-bottom: calc(var(--section-padding) / 3);
 
   &:last-of-type {
     margin-bottom: 0;
@@ -1145,7 +1145,7 @@ table.fingerprint-in-build td {
 }
 
 .dropdownList-container {
-  margin-bottom: 1.75rem;
+  margin-bottom: var(--section-padding);
 }
 
 .form-container--hidden {

diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
@@ -1,9 +1,10 @@
 .jenkins-form {
+  max-width: var(--form-item-max-width);
 }
 
 .jenkins-form-item {
   max-width: var(--form-item-max-width);
-  margin-bottom: 1.75rem;
+  margin-bottom: var(--section-padding);
 
   // Workaround for float:right button controls
   // (eg Global Credentials' Verify Configuration button being hidden by the floating submit bar)
@@ -26,10 +27,6 @@
   &--medium {
     max-width: var(--form-item-max-width--medium);
   }
-
-  &--full-width {
-    max-width: none;
-  }
 }
 
 .jenkins-fieldset {
@@ -278,7 +275,7 @@
   margin-top: 3px;
 
   &:not(:last-of-type) {
-    margin-bottom: 20px;
+    margin-bottom: calc(var(--section-padding) / 2);
   }
 
   &__input {

diff --git a/war/src/main/less/modules/section.less b/war/src/main/less/modules/section.less
@@ -1,7 +1,3 @@
-:root {
-  --section-padding: 1.75rem;
-}
-
 .jenkins-section {
   border-top: 2px solid var(--panel-border-color);
   padding: var(--section-padding) 0 0 0;

diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js
@@ -2349,7 +2349,7 @@ var hoverNotification = (function() {
 // Decrease vertical padding for checkboxes
 window.addEventListener('load', function () {
     document.querySelectorAll(".jenkins-form-item").forEach(function (element) {
-        if (element.querySelector(":scope > .optionalBlock-container > .row-group-start input[type='checkbox'], :scope > .optional-block-start input[type='checkbox'], :scope > div > .jenkins-checkbox") != null) {
+        if (element.querySelector(".optionalBlock-container > .row-group-start input[type='checkbox'], .optional-block-start input[type='checkbox'], div > .jenkins-checkbox") != null) {
             element.classList.add("jenkins-form-item--tight")
         }
     });