Style new field similar to other form fields

pinterest · Oct 17, 2024 · d69cc66 · d69cc66
1 parent 7b80bb4
commit d69cc66
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/deploy-board/deploy_board/templates/clusters/cluster_capacity.tmpl b/deploy-board/deploy_board/templates/clusters/cluster_capacity.tmpl
@@ -2,12 +2,6 @@
     <panel-heading title="Cluster Capacity" target="#clusterConfigId" initcollapse="false"></panel-heading>
     <div id="clusterConfigId" class="collapse in panel-body">
         <div class="container-fluid">
-            {% if is_managed_resource %}
-            <div>
-                <input type="checkbox" id="isManagedResourceCheckboxId">
-                <label for="isManagedResourceCheckboxId"><i>By checking this box, I understand this cluster is managed and updating it through this form is discouraged and will pause management, in which case I will resolve any configuration drift before management can be resumed.<i></label>
-            </div>
-            {% endif %}
             <form id="clusterConfigFormId" class="form-horizontal" role="form">
                 <fieldset id="clusterConfigFieldSetId" {% if is_managed_resource %}disabled{% endif %}>
                     <label-info title="Cluster State" name="Cluster State" v-bind:text="clusterstate" v-bind:styleclass="clusterStateStyle"></label-info>
@@ -23,6 +17,14 @@
                         :remaining-capacity="remainingCapacity" :placements="placements">
                     </asg-capacity-config>
                 </fieldset>
+                {% if is_managed_resource %}
+                <div>
+                    <label class="col-xs-4 text-right deployToolTip" data-toggle="tooltip" data-original-title="By checking this box, I understand this cluster is managed and updating it through this form is discouraged and will pause management, in which case I will resolve any configuration drift before management can be resumed." for="isManagedResourceCheckboxId">Disable Management</label>
+                    <div class="col-xs-2">
+                        <input type="checkbox" id="isManagedResourceCheckboxId">
+                    </div>
+                </div>
+                {% endif %}
             </form>
         </div>
     </div>

diff --git a/deploy-board/deploy_board/templates/clusters/cluster_configuration.html b/deploy-board/deploy_board/templates/clusters/cluster_configuration.html
@@ -64,12 +64,6 @@ <h4 class="panel-title pull-left">Capacity</h4>
     <div id="envCapacityId" class="collapse in panel-body" v-on:show.bs.collapse="showcontent" v-on:hide.bs.collapse="hidecontent">
         <div class="container-fluid">
             <form id="clusterConfigFormId" class="form-horizontal" role="form">
-                {% if is_managed_resource %}
-                <div>
-                    <input type="checkbox" id="isManagedResourceCheckboxId">
-                    <label for="isManagedResourceCheckboxId"><i>By checking this box, I understand this cluster is managed and updating it through this form is discouraged and will pause management, in which case I will resolve any configuration drift before management can be resumed.<i></label>
-                </div>
-                {% endif %}
                 <fieldset id="clusterConfigFieldSetId" {% if is_managed_resource %}disabled{% endif %}>
                     <cloudprovider-select v-bind:cloudproviders="providers" v-bind:value="currentProvider" v-show="inAdvanced"></cloudprovider-select>
                     <accounts-select v-bind:accounts="accounts" v-bind:value="currentAccountId" v-bind:disabled="!canChangeAccount"></accounts-select>
@@ -119,6 +113,14 @@ <h4 class="panel-title pull-left">Capacity</h4>
                         />
                     </div>
                 </fieldset>
+                {% if is_managed_resource %}
+                <div>
+                    <label class="col-xs-2 text-right deployToolTip" data-toggle="tooltip" data-original-title="By checking this box, I understand this cluster is managed and updating it through this form is discouraged and will pause management, in which case I will resolve any configuration drift before management can be resumed." for="isManagedResourceCheckboxId">Disable Management</label>
+                    <div>
+                        <input type="checkbox" id="isManagedResourceCheckboxId">
+                    </div>
+                </div>
+                {% endif %}
             </form>
         </div>
     </div>