mgr/dashboard: Use custom classes for form label and inputs

With this change we are able to configura the col sizes of labels and inputs in
one single place.

Also increased the col size in smaller screens to be able to display longer
labels.

This was not applied in some situations where the col size was different than
usual.

Fixes: https://tracker.ceph.com/issues/40751
Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html
index 1940ff36118f2bad3e7f35a1b5973887dc2682ab..3562530be92511d3e8dc17b0f0a85741ca70a087 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html
@@ -10,10 +10,10 @@
       <div class="modal-body">
         <!-- User -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-4"
+          <label class="cd-col-form-label"
                  for="user"
                  i18n>User</label>
-          <div class="col-sm-8">
+          <div class="cd-col-form-input">
             <input id="user"
                    class="form-control"
                    formControlName="user"
@@ -31,10 +31,10 @@
 
         <!-- Password -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-4"
+          <label class="cd-col-form-label"
                  for="password"
                  i18n>Password</label>
-          <div class="col-sm-8">
+          <div class="cd-col-form-input">
             <div class="input-group">
               <input id="password"
                      class="form-control"
@@ -65,11 +65,11 @@
 
         <!-- mutual_user -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-4"
+          <label class="cd-col-form-label"
                  for="mutual_user">
             <ng-container i18n>Mutual User</ng-container>
           </label>
-          <div class="col-sm-8">
+          <div class="cd-col-form-input">
             <input id="mutual_user"
                    class="form-control"
                    formControlName="mutual_user"
@@ -88,10 +88,10 @@
 
         <!-- mutual_password -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-4"
+          <label class="cd-col-form-label"
                  for="mutual_password"
                  i18n>Mutual Password</label>
-          <div class="col-sm-8">
+          <div class="cd-col-form-input">
             <div class="input-group">
               <input id="mutual_password"
                      class="form-control"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
index dcd45ac81150f33e683870a983a7b3809994b2e2..48753ae24317c51a8ba00f0750c88af1700be7dd 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
@@ -1,4 +1,4 @@
-<div class="col-sm-12 col-lg-6">
+<div class="cd-col-form">
   <form name="targetForm"
         #formDir="ngForm"
         [formGroup]="targetForm"
@@ -11,12 +11,12 @@
       <div class="card-body">
         <!-- Target IQN -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="target_iqn">
             <ng-container i18n>Target IQN</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <div class="input-group">
               <input class="form-control"
                      type="text"
@@ -64,12 +64,12 @@
 
         <!-- Portals -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="portals">
             <ng-container i18n>Portals</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
 
             <ng-container *ngFor="let portal of portals.value; let i = index">
               <div class="input-group cd-mb">
@@ -117,10 +117,10 @@
 
         <!-- Images -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="disks"
                  i18n>Images</label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <ng-container *ngFor="let image of targetForm.getValue('disks'); let i = index">
               <div class="input-group cd-mb">
                 <input class="cd-form-control"
@@ -188,7 +188,7 @@
 
         <!-- acl_enabled -->
         <div class="form-group row">
-          <div class="offset-sm-3 col-sm-9">
+          <div class="cd-col-form-offset">
             <div class="custom-control custom-checkbox">
               <input type="checkbox"
                      class="custom-control-input"
@@ -210,11 +210,11 @@
 
           <!-- Target user -->
           <div class="form-group row">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="target_user">
               <ng-container i18n>User</ng-container>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <input class="form-control"
                      type="text"
                      id="target_user"
@@ -234,11 +234,11 @@
 
           <!-- Target password -->
           <div class="form-group row">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="target_password">
               <ng-container i18n>Password</ng-container>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <div class="input-group">
                 <input class="form-control"
                        type="password"
@@ -271,11 +271,11 @@
 
           <!-- Target mutual_user -->
           <div class="form-group row">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="target_mutual_user">
               <ng-container i18n>Mutual User</ng-container>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <input class="form-control"
                      type="text"
                      id="target_mutual_user"
@@ -295,11 +295,11 @@
 
           <!-- Target mutual_password -->
           <div class="form-group row">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="target_mutual_password">
               <ng-container i18n>Mutual Password</ng-container>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <div class="input-group">
                 <input class="form-control"
                        type="password"
@@ -336,10 +336,10 @@
         <!-- Initiators -->
         <div class="form-group row"
              *ngIf="targetForm.getValue('acl_enabled')">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="initiators"
                  i18n>Initiators</label>
-          <div class="col-sm-9"
+          <div class="cd-col-form-input"
                formArrayName="initiators">
             <div class="card mb-2"
                  *ngFor="let initiator of initiators.controls; let ii = index"
@@ -355,12 +355,12 @@
               <div class="card-body">
                 <!-- Initiator: Name -->
                 <div class="form-group row">
-                  <label class="col-form-label col-sm-3"
+                  <label class="cd-col-form-label"
                          for="client_iqn">
                     <ng-container i18n>Client IQN</ng-container>
                     <span class="required"></span>
                   </label>
-                  <div class="col-sm-9">
+                  <div class="cd-col-form-input">
                     <input class="form-control"
                            type="text"
                            formControlName="client_iqn"
@@ -384,10 +384,10 @@
                 <ng-container formGroupName="auth">
                   <!-- Initiator: User -->
                   <div class="form-group row">
-                    <label class="col-form-label col-sm-3"
+                    <label class="cd-col-form-label"
                            for="user"
                            i18n>User</label>
-                    <div class="col-sm-9">
+                    <div class="cd-col-form-input">
                       <input [id]="'user' + ii"
                              class="form-control"
                              formControlName="user"
@@ -405,10 +405,10 @@
 
                   <!-- Initiator: Password -->
                   <div class="form-group row">
-                    <label class="col-form-label col-sm-3"
+                    <label class="cd-col-form-label"
                            for="password"
                            i18n>Password</label>
-                    <div class="col-sm-9">
+                    <div class="cd-col-form-input">
                       <div class="input-group">
                         <input [id]="'password' + ii"
                                class="form-control"
@@ -440,11 +440,11 @@
 
                   <!-- Initiator: mutual_user -->
                   <div class="form-group row">
-                    <label class="col-form-label col-sm-3"
+                    <label class="cd-col-form-label"
                            for="mutual_user">
                       <ng-container i18n>Mutual User</ng-container>
                     </label>
-                    <div class="col-sm-9">
+                    <div class="cd-col-form-input">
                       <input [id]="'mutual_user' + ii"
                              class="form-control"
                              formControlName="mutual_user"
@@ -463,10 +463,10 @@
 
                   <!-- Initiator: mutual_password -->
                   <div class="form-group row">
-                    <label class="col-form-label col-sm-3"
+                    <label class="cd-col-form-label"
                            for="mutual_password"
                            i18n>Mutual Password</label>
-                    <div class="col-sm-9">
+                    <div class="cd-col-form-input">
                       <div class="input-group">
                         <input [id]="'mutual_password' + ii"
                                class="form-control"
@@ -498,10 +498,10 @@
 
                 <!-- Initiator: Images -->
                 <div class="form-group row">
-                  <label class="col-form-label col-sm-3"
+                  <label class="cd-col-form-label"
                          for="luns"
                          i18n>Images</label>
-                  <div class="col-sm-9">
+                  <div class="cd-col-form-input">
                     <ng-container *ngFor="let image of initiator.getValue('luns'); let li = index">
                       <div class="input-group cd-mb">
                         <input class="cd-form-control"
@@ -560,10 +560,10 @@
         <!-- Groups -->
         <div class="form-group row"
              *ngIf="targetForm.getValue('acl_enabled')">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="initiators"
                  i18n>Groups</label>
-          <div class="col-sm-9"
+          <div class="cd-col-form-input"
                formArrayName="groups">
             <div class="card mb-2"
                  *ngFor="let group of groups.controls; let gi = index"
@@ -579,12 +579,12 @@
               <div class="card-body">
                 <!-- Group: group_id -->
                 <div class="form-group row">
-                  <label class="col-form-label col-sm-3"
+                  <label class="cd-col-form-label"
                          for="group_id">
                     <ng-container i18n>Name</ng-container>
                     <span class="required"></span>
                   </label>
-                  <div class="col-sm-9">
+                  <div class="cd-col-form-input">
                     <input class="form-control"
                            type="text"
                            formControlName="group_id">
@@ -593,11 +593,11 @@
 
                 <!-- Group: members -->
                 <div class="form-group row">
-                  <label class="col-form-label col-sm-3"
+                  <label class="cd-col-form-label"
                          for="members">
                     <ng-container i18n>Initiators</ng-container>
                   </label>
-                  <div class="col-sm-9">
+                  <div class="cd-col-form-input">
                     <ng-container *ngFor="let member of group.getValue('members'); let i = index">
                       <div class="input-group cd-mb">
                         <input class="cd-form-control"
@@ -634,11 +634,11 @@
 
                 <!-- Group: disks -->
                 <div class="form-group row">
-                  <label class="col-form-label col-sm-3"
+                  <label class="cd-col-form-label"
                          for="disks">
                     <ng-container i18n>Images</ng-container>
                   </label>
-                  <div class="col-sm-9">
+                  <div class="cd-col-form-input">
                     <ng-container *ngFor="let disk of group.getValue('disks'); let i = index">
                       <div class="input-group cd-mb">
                         <input class="cd-form-control"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
index c2905342230a1af675cf1253e6761c50bcfd6105..a0e3bf8b308ece796eaa0d2e48c94406b20d886f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
@@ -15,10 +15,10 @@
          [hidden]="!sectionVisibility[section.class]">
       <div class="form-group row"
            *ngFor="let option of section.options">
-        <label class="col-form-label col-sm-3"
+        <label class="cd-col-form-label"
                [for]="option.name">{{ option.displayName }}<cd-helper>{{ option.description }}</cd-helper></label>
 
-        <div class="col-sm-9 {{ section.heading }}">
+        <div class="cd-col-form-input {{ section.heading }}">
           <div class="input-group">
             <ng-container [ngSwitch]="option.type">
               <ng-container *ngSwitchCase="configurationType.milliseconds">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
index 8e19837e72a68ceb0ea6a22c0ca78f973d996452..44a58ad494829e83d1eac3d5a53a48856766aabd 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
@@ -1,4 +1,4 @@
-<div class="col-sm-12 col-lg-6">
+<div class="cd-col-form">
   <form name="rbdForm"
         #formDir="ngForm"
         [formGroup]="rbdForm"
@@ -12,9 +12,9 @@
         <div class="form-group row"
              *ngIf="rbdForm.getValue('parent')">
           <label i18n
-                 class="col-form-label col-sm-3"
+                 class="cd-col-form-label"
                  for="name">{{ action | titlecase }} from</label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    id="parent"
@@ -26,12 +26,12 @@
 
         <!-- Name -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="name">
             <ng-container i18n>Name</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    placeholder="Name..."
@@ -53,13 +53,13 @@
         <!-- Pool -->
         <div class="form-group row"
              (change)="onPoolChange($event.target.value)">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="pool">
             Pool
             <span class="required"
                   *ngIf="mode !== 'editing'"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    placeholder="Pool name..."
@@ -93,17 +93,17 @@
         <!-- Namespace -->
         <div class="form-group row"
              *ngIf="mode !== 'editing' && rbdForm.getValue('pool') && namespaces === null">
-          <div class="col-sm-9 offset-sm-3">
+          <div class="cd-col-form-offset">
             <i [ngClass]="[icons.spinner, icons.spin]"></i>
           </div>
         </div>
         <div class="form-group row"
              *ngIf="(mode === 'editing' && rbdForm.getValue('namespace')) || mode !== 'editing' && (namespaces && namespaces.length > 0 || !poolPermission.read)">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="pool">
             Namespace
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    placeholder="Namespace..."
@@ -133,7 +133,7 @@
 
         <!-- Use a dedicated pool -->
         <div class="form-group row">
-          <div class="offset-sm-3 col-sm-9">
+          <div class="cd-col-form-offset">
             <div class="custom-control custom-checkbox">
               <input type="checkbox"
                      class="custom-control-input"
@@ -151,7 +151,7 @@
         <!-- Data Pool -->
         <div class="form-group row"
              *ngIf="rbdForm.getValue('useDataPool')">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="dataPool">
             <ng-container i18n>Data pool</ng-container>
             <span class="required"
@@ -160,7 +160,7 @@
                        html="Dedicated pool that stores the object-data of the RBD.">
             </cd-helper>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    placeholder="Data pool name..."
@@ -194,12 +194,12 @@
 
         <!-- Size -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="size">
             <ng-container i18n>Size</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input id="size"
                    name="size"
                    class="form-control"
@@ -222,9 +222,9 @@
         <div class="form-group row"
              formGroupName="features">
           <label i18n
-                 class="col-sm-3 col-form-label"
+                 class="cd-col-form-label"
                  for="features">Features</label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <div class="custom-control custom-checkbox"
                  *ngFor="let feature of featuresList">
               <input type="checkbox"
@@ -264,9 +264,9 @@
             <!-- Object Size -->
             <div class="form-group row">
               <label i18n
-                     class="col-form-label col-sm-3"
+                     class="cd-col-form-label"
                      for="size">Object size</label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <select id="obj_size"
                         name="obj_size"
                         class="form-control custom-select"
@@ -279,14 +279,14 @@
 
             <!-- stripingUnit -->
             <div class="form-group row">
-              <label class="col-form-label col-sm-3"
+              <label class="cd-col-form-label"
                      for="stripingUnit">
                 <span i18n>Stripe unit</span>
                 <span class="required"
                       *ngIf="rbdForm.getValue('stripingCount')">
                 </span>
               </label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <select id="stripingUnit"
                         name="stripingUnit"
                         class="form-control custom-select"
@@ -307,14 +307,14 @@
 
             <!-- Stripe Count -->
             <div class="form-group row">
-              <label class="col-form-label col-sm-3"
+              <label class="cd-col-form-label"
                      for="stripingCount">
                 <span i18n>Stripe count</span>
                 <span class="required"
                       *ngIf="rbdForm.getValue('stripingUnit')">
                 </span>
               </label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <input id="stripingCount"
                        name="stripingCount"
                        formControlName="stripingCount"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form.component.html
index 13454fea4623e52fb2115ff70690855ac35ca95a..4f563ddf9bedd8d0adc3aa9bfc14ad2d85de5c7d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form.component.html
@@ -16,12 +16,12 @@
 
     <!-- Pool -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="pool">
         Pool
         <span class="required"></span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input class="form-control"
                type="text"
                placeholder="Pool name..."
@@ -54,12 +54,12 @@
 
     <!-- Name -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="namespace">
         <ng-container i18n>Name</ng-container>
         <span class="required"></span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input class="form-control"
                type="text"
                placeholder="Namespace name..."

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
index ed8c8bfac47368d1236507f3961b7a1253b38584..792f1a908adea03e2590d4e609063ed5975bb245 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
@@ -16,12 +16,12 @@
 
     <!-- Name -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="snapshotName">
         <ng-container i18n>Name</ng-container>
         <span class="required"></span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input class="form-control"
                type="text"
                placeholder="Snapshot name..."

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
index 4ced34d15e9b90af623c6d0066fa4573d0986fa5..3be3ac9789a55ef933fbe7dd3eb60be7a0b02499 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
@@ -1,4 +1,4 @@
-<div class="col-sm-12 col-md-12 col-lg-6">
+<div class="cd-col-form">
   <form name="configForm"
         #formDir="ngForm"
         [formGroup]="configForm"
@@ -12,8 +12,8 @@
         <!-- Name -->
         <div class="form-group row">
           <label i18n
-                 class="col-form-label col-sm-3">Name</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Name</label>
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    id="name"
@@ -26,8 +26,8 @@
         <div class="form-group row"
              *ngIf="configForm.getValue('desc')">
           <label i18n
-                 class="col-form-label col-sm-3">Description</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Description</label>
+          <div class="cd-col-form-input">
             <textarea class="form-control resize-vertical"
                       id="desc"
                       formControlName="desc"
@@ -40,8 +40,8 @@
         <div class="form-group row"
              *ngIf="configForm.getValue('long_desc')">
           <label i18n
-                 class="col-form-label col-sm-3">Long description</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Long description</label>
+          <div class="cd-col-form-input">
             <textarea class="form-control resize-vertical"
                       id="long_desc"
                       formControlName="long_desc"
@@ -54,8 +54,8 @@
         <div class="form-group row"
              *ngIf="configForm.getValue('default') !== ''">
           <label i18n
-                 class="col-form-label col-sm-3">Default</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Default</label>
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    id="default"
@@ -68,8 +68,8 @@
         <div class="form-group row"
              *ngIf="configForm.getValue('daemon_default') !== ''">
           <label i18n
-                 class="col-form-label col-sm-3">Daemon default</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Daemon default</label>
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    id="daemon_default"
@@ -82,8 +82,8 @@
         <div class="form-group row"
              *ngIf="configForm.getValue('services').length > 0">
           <label i18n
-                 class="col-form-label col-sm-3">Services</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Services</label>
+          <div class="cd-col-form-input">
             <span *ngFor="let service of configForm.getValue('services')"
                   class="form-component-badge">
               <span class="badge badge-dark">{{ service }}</span>
@@ -98,10 +98,10 @@
           <ng-container *ngFor="let section of availSections">
             <div class="form-group row"
                  *ngIf="type === 'bool'">
-              <label class="col-form-label col-sm-3"
+              <label class="cd-col-form-label"
                      [for]="section">{{ section }}
               </label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <select id="pool"
                         name="pool"
                         class="form-control custom-select"
@@ -118,10 +118,10 @@
 
             <div class="form-group row"
                  *ngIf="type !== 'bool'">
-              <label class="col-form-label col-sm-3"
+              <label class="cd-col-form-label"
                      [for]="section">{{ section }}
               </label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <input class="form-control"
                        [type]="inputType"
                        [id]="section"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html
index 8146c526136e2697dc9b4857c6b3381c5b02d269..5e4efe45961e5299318b603d6c8310e4ea057480 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html
@@ -1,7 +1,7 @@
 <cd-loading-panel *ngIf="loading"
                   i18n>Loading...</cd-loading-panel>
 
-<div class="col-sm-12 col-lg-6">
+<div class="cd-col-form">
   <form name="hostForm"
         *ngIf="!loading"
         #formDir="ngForm"
@@ -15,12 +15,12 @@
 
         <!-- Hostname -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="hostname">
             <ng-container i18n>Hostname</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    placeholder="mon-123"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html
index 1829ef671571ab09f5469d2e244f4d5f6d3908bc..2d555b395923de14b2b5e6a2d0bdf15dcb51ee13 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html
@@ -4,7 +4,7 @@
                 *ngIf="loading && error"
                 i18n>The configuration could not be loaded.</cd-alert-panel>
 
-<div class="col-sm-12 col-lg-6"
+<div class="cd-col-form"
      *ngIf="!loading && !error">
   <form name="mgrModuleForm"
         #frm="ngForm"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html
index fc1df4ef84955f56e24c3f9e28b2dee6eea82fdc..a4b42e1da301bf58f6eebbd53a025a8fdc6937c9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html
@@ -1,6 +1,6 @@
 <!-- button -->
 <div class="form-group row">
-  <label class="col-sm-3 col-form-label"
+  <label class="cd-col-form-label"
          for="createDeleteButton">
     <ng-container i18n>{{ name }} devices</ng-container>
     <cd-helper>
@@ -12,7 +12,7 @@
             *ngIf="type === 'db'">DB devices can be used for storing BlueStore’s internal metadata.  It is only helpful to provision a DB device if it is faster than the primary device (e.g. NVME devices or SSD).</span>
     </cd-helper>
   </label>
-  <div class="col-sm-9">
+  <div class="cd-col-form-input">
     <ng-container *ngIf="devices.length === 0; else blockClearDevices">
       <button type="button"
               class="btn btn-light"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.spec.ts
index bed5e0b0b19125a38907ab9cd6d8e3c326079484..6895a4bd85d3aa1abfa6250612bf868462917ac7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.spec.ts
@@ -37,7 +37,7 @@ describe('OsdDevicesSelectionGroupsComponent', () => {
     }
   ];
 
-  const buttonSelector = '.col-sm-9 button';
+  const buttonSelector = '.cd-col-form-input button';
   const getButton = () => {
     const debugElement = fixtureHelper.getElementByCss(buttonSelector);
     return debugElement.nativeElement;

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html
index 4b0a0c158c542b35de9dc7d6fe173ef53b95c290..132795dd52b679041e2b239efd3d097dd8c10e6a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html
@@ -6,7 +6,7 @@
   <a href="{{ docsUrl }}"
      target="_blank">documentation</a> on how to
   configure and enable the orchestrator functionality.</cd-alert-panel>
-<div class="col-sm-10"
+<div class="cd-col-form"
      *ngIf="!loading && orchestratorExist">
   <form name="form"
         #formDir="ngForm"
@@ -44,7 +44,7 @@
           <!-- WAL slots -->
           <div class="form-group row"
                *ngIf="walDeviceSelectionGroups.devices.length !== 0">
-            <label class="col-sm-3 col-form-label"
+            <label class="cd-col-form-label"
                    for="walSlots">
               <ng-container i18n>WAL slots</ng-container>
               <cd-helper>
@@ -53,7 +53,7 @@
                 <span i18n>Specify 0 to let Orchestrator backend decide it.</span>
               </cd-helper>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <input class="form-control"
                      id="walSlots"
                      name="walSlots"
@@ -79,7 +79,7 @@
           <!-- DB slots -->
           <div class="form-group row"
                *ngIf="dbDeviceSelectionGroups.devices.length !== 0">
-            <label class="col-sm-3 col-form-label"
+            <label class="cd-col-form-label"
                    for="dbSlots">
               <ng-container i18n>DB slots</ng-container>
               <cd-helper>
@@ -88,7 +88,7 @@
                 <span i18n>Specify 0 to let Orchestrator backend decide it.</span>
               </cd-helper>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <input class="form-control"
                      id="dbSlots"
                      name="dbSlots"
@@ -110,9 +110,9 @@
           <div class="form-group row"
                formGroupName="features">
             <label i18n
-                   class="col-sm-3 col-form-label"
+                   class="cd-col-form-label"
                    for="features">Features</label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <div class="custom-control custom-checkbox"
                    *ngFor="let feature of featureList">
                 <input type="checkbox"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.spec.ts
index c882534520c6adc59b72e42bdc232ac6eaefa2ac..b4bb63b458627cd200eb5e72c39aa429af08c0a0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.spec.ts
@@ -149,7 +149,7 @@ describe('OsdFormComponent', () => {
 
     it('should display form', () => {
       fixtureHelper.expectElementVisible('cd-alert-panel', false);
-      fixtureHelper.expectElementVisible('.col-sm-10 form', true);
+      fixtureHelper.expectElementVisible('.cd-col-form form', true);
     });
 
     describe('without data devices selected', () => {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
index 52dac6807d21362988938084cdcbc60be6a67222..ec2ad0ff4e28caaae3c63c1df7eba43c7d0f0335 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
@@ -55,7 +55,7 @@
   <span class="help-block"></span>
 </ng-template>
 
-<div class="col-sm-12 col-lg-6">
+<div class="cd-col-form">
   <form #formDir="ngForm"
         [formGroup]="form"
         class="form"
@@ -73,12 +73,12 @@
       <!-- Creator -->
       <div class="card-body">
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="created-by">
             <ng-container i18n>Creator</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    formControlName="createdBy"
                    id="created-by"
@@ -92,12 +92,12 @@
 
         <!-- Comment -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="comment">
             <ng-container i18n>Comment</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <textarea class="form-control"
                       formControlName="comment"
                       id="comment"
@@ -112,13 +112,13 @@
 
         <!-- Start time -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="starts-at">
             <ng-container i18n>Start time</ng-container>
             <cd-helper i18n>If the start time lies in the past the creation time will be used</cd-helper>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input [bsConfig]="bsConfig"
                    bsDatepicker
                    class="form-control"
@@ -133,12 +133,12 @@
 
         <!-- Duration -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="duration">
             <ng-container i18n>Duration</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    formControlName="duration"
                    id="duration"
@@ -152,12 +152,12 @@
 
         <!-- End time -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="ends-at">
             <ng-container i18n>End time</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input [bsConfig]="bsConfig"
                    bsDatepicker
                    class="form-control"
@@ -174,7 +174,7 @@
         <fieldset>
           <legend i18n>Matchers<span class="required">*</span></legend>
 
-          <div class="offset-sm-3 col-sm-9">
+          <div class="cd-col-form-offset">
             <h5 *ngIf="matchers.length === 0"
                 [ngClass]="{'text-warning': !formDir.submitted, 'text-danger': formDir.submitted}">
               <strong i18n>A silence requires at least one matcher</strong>
@@ -199,7 +199,7 @@
           </div>
 
           <div *ngIf="matchers.length && matcherMatch"
-               class="offset-sm-3 col-sm-9 {{matcherMatch.cssClass}}"
+               class="cd-col-form-offset {{matcherMatch.cssClass}}"
                id="match-state">
             <span class="text-muted {{matcherMatch.cssClass}}">
               {{ matcherMatch.status }}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html
index 3ca8dfdccd0cb99b3082a5cd25f8a205d28c7d80..df0c60dace01e47b353b8eb900c3eb5b165efc38 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html
@@ -16,12 +16,12 @@
   <div class="modal-body">
     <!-- Name -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="name">
         <ng-container i18n>Name</ng-container>
         <span class="required"></span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <select class="form-control"
                 id="name"
                 formControlName="name"
@@ -41,12 +41,12 @@
 
     <!-- Value -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="value">
         <ng-container i18n>Value</ng-container>
         <span class="required"></span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input id="value"
                class="form-control"
                type="text"
@@ -58,7 +58,7 @@
               i18n>This field is required!</span>
       </div>
       <div *ngIf="form.getValue('value') && !form.getValue('isRegex') && matcherMatch"
-           class="offset-sm-3 col-sm-9 {{matcherMatch.cssClass}}"
+           class="cd-col-form-offset {{matcherMatch.cssClass}}"
            id="match-state">
         <span class="text-muted {{matcherMatch.cssClass}}">
           {{matcherMatch.status}}
@@ -68,7 +68,7 @@
 
     <!-- isRegex -->
     <div class="form-group row">
-      <div class="offset-sm-3 col-sm-9">
+      <div class="cd-col-form-offset">
         <div class="custom-control custom-checkbox">
           <input type="checkbox"
                  class="custom-control-input"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html
index 22d082b212e17578c02a4ae6896f260cd42dc2f2..03fdc53c8d9a41fc783733b16ec6b10b3cbf45bf 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html
@@ -1,8 +1,8 @@
 <div class="form-group row">
-  <label class="col-sm-3 col-form-label"
+  <label class="cd-col-form-label"
          i18n>Clients</label>
 
-  <div class="col-sm-9"
+  <div class="cd-col-form-input"
        [formGroup]="form"
        #formDir="ngForm">
     <span *ngIf="form.get('clients').value.length === 0"
@@ -26,9 +26,9 @@
             <!-- Addresses -->
             <div class="form-group row">
               <label i18n
-                     class="col-sm-3 col-form-label"
+                     class="cd-col-form-label"
                      for="addresses">Addresses</label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <input type="text"
                        class="form-control"
                        name="addresses"
@@ -51,9 +51,9 @@
             <!-- Access Type-->
             <div class="form-group row">
               <label i18n
-                     class="col-sm-3 col-form-label"
+                     class="cd-col-form-label"
                      for="access_type">Access Type</label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <select class="form-control custom-select"
                         name="access_type"
                         id="access_type"
@@ -72,9 +72,9 @@
             <!-- Squash -->
             <div class="form-group row">
               <label i18n
-                     class="col-sm-3 col-form-label"
+                     class="cd-col-form-label"
                      for="squash">Squash</label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <select class="form-control custom-select"
                         name="squash"
                         id="squash"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
index 588b1edeacac80f9637eef68e77a00443d197877..7566c6298074e13b829357244e6ffa495ec2a448 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
@@ -1,4 +1,4 @@
-<div class="col-sm-12 col-lg-6">
+<div class="cd-col-form">
   <form name="nfsForm"
         #formDir="ngForm"
         [formGroup]="nfsForm"
@@ -11,12 +11,12 @@
         <!-- cluster_id -->
         <div class="form-group row"
              *ngIf="!isDefaultCluster">
-          <label class="col-sm-3 col-form-label"
+          <label class="cd-col-form-label"
                  for="cluster_id">
             <ng-container i18n>Cluster</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <select class="form-control custom-select"
                     formControlName="cluster_id"
                     name="cluster_id"
@@ -42,11 +42,11 @@
 
         <!-- daemons -->
         <div class="form-group row">
-          <label class="col-sm-3 col-form-label"
+          <label class="cd-col-form-label"
                  for="daemons">
             <ng-container i18n>Daemons</ng-container>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <ng-container *ngFor="let daemon of nfsForm.getValue('daemons'); let i = index">
               <div class="input-group cd-mb">
                 <input class="cd-form-control"
@@ -83,12 +83,12 @@
         <div formGroupName="fsal">
           <!-- Name -->
           <div class="form-group row">
-            <label class="col-sm-3 col-form-label"
+            <label class="cd-col-form-label"
                    for="name">
               <ng-container i18n>Storage Backend</ng-container>
               <span class="required"></span>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <select class="form-control custom-select"
                       formControlName="name"
                       name="name"
@@ -115,12 +115,12 @@
           <!-- RGW user -->
           <div class="form-group row"
                *ngIf="nfsForm.getValue('name') === 'RGW'">
-            <label class="col-sm-3 col-form-label"
+            <label class="cd-col-form-label"
                    for="rgw_user_id">
               <ng-container i18n>Object Gateway User</ng-container>
               <span class="required"></span>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <select class="form-control custom-select"
                       formControlName="rgw_user_id"
                       name="rgw_user_id"
@@ -147,12 +147,12 @@
           <!-- CephFS user_id -->
           <div class="form-group row"
                *ngIf="nfsForm.getValue('name') === 'CEPH'">
-            <label class="col-sm-3 col-form-label"
+            <label class="cd-col-form-label"
                    for="user_id">
               <ng-container i18n>CephFS User ID</ng-container>
               <span class="required"></span>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <select class="form-control custom-select"
                       formControlName="user_id"
                       name="user_id"
@@ -178,12 +178,12 @@
           <!-- CephFS fs_name -->
           <div class="form-group row"
                *ngIf="nfsForm.getValue('name') === 'CEPH'">
-            <label class="col-sm-3 col-form-label"
+            <label class="cd-col-form-label"
                    for="fs_name">
               <ng-container i18n>CephFS Name</ng-container>
               <span class="required"></span>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <select class="form-control custom-select"
                       formControlName="fs_name"
                       name="fs_name"
@@ -211,14 +211,14 @@
         <!-- Secutiry Label -->
         <div class="form-group row"
              *ngIf="nfsForm.getValue('name') === 'CEPH'">
-          <label class="col-sm-3 col-form-label"
+          <label class="cd-col-form-label"
                  for="security_label">
             <ng-container i18n>Security Label</ng-container>
             <span class="required"
                   *ngIf="nfsForm.getValue('security_label')"></span>
           </label>
 
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <div class="custom-control custom-checkbox">
               <input type="checkbox"
                      class="custom-control-input"
@@ -248,12 +248,12 @@
         <!-- Path -->
         <div class="form-group row"
              *ngIf="nfsForm.getValue('name') === 'CEPH'">
-          <label class="col-sm-3 col-form-label"
+          <label class="cd-col-form-label"
                  for="path">
             <ng-container i18n>CephFS Path</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input type="text"
                    class="form-control"
                    name="path"
@@ -278,12 +278,12 @@
         <!-- Bucket -->
         <div class="form-group row"
              *ngIf="nfsForm.getValue('name') === 'RGW'">
-          <label class="col-sm-3 col-form-label"
+          <label class="cd-col-form-label"
                  for="path">
             <ng-container i18n>Path</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input type="text"
                    class="form-control"
                    name="path"
@@ -309,12 +309,12 @@
 
         <!-- NFS Protocol -->
         <div class="form-group row">
-          <label class="col-sm-3 col-form-label"
+          <label class="cd-col-form-label"
                  for="protocols">
             <ng-container i18n>NFS Protocol</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <div class="custom-control custom-checkbox">
               <input type="checkbox"
                      class="custom-control-input"
@@ -345,7 +345,7 @@
         <!-- Tag -->
         <div class="form-group row"
              *ngIf="nfsForm.getValue('protocolNfsv3')">
-          <label class="col-sm-3 col-form-label"
+          <label class="cd-col-form-label"
                  for="tag">
             <ng-container i18n>NFS Tag</ng-container>
             <cd-helper>
@@ -354,7 +354,7 @@
               <p i18n>By using different Tag options, the same Path may be exported multiple times.</p>
             </cd-helper>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input type="text"
                    class="form-control"
                    name="tag"
@@ -366,7 +366,7 @@
         <!-- Pseudo -->
         <div class="form-group row"
              *ngIf="nfsForm.getValue('protocolNfsv4')">
-          <label class="col-sm-3 col-form-label"
+          <label class="cd-col-form-label"
                  for="pseudo">
             <ng-container i18n>Pseudo</ng-container>
             <span class="required"></span>
@@ -376,7 +376,7 @@
               <p i18n>By using different Pseudo options, the same Path may be exported multiple times.</p>
             </cd-helper>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input type="text"
                    class="form-control"
                    name="pseudo"
@@ -393,12 +393,12 @@
 
         <!-- Access Type -->
         <div class="form-group row">
-          <label class="col-sm-3 col-form-label"
+          <label class="cd-col-form-label"
                  for="access_type">
             <ng-container i18n>Access Type</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <select class="form-control custom-select"
                     formControlName="access_type"
                     name="access_type"
@@ -435,12 +435,12 @@
 
         <!-- Squash -->
         <div class="form-group row">
-          <label class="col-sm-3 col-form-label"
+          <label class="cd-col-form-label"
                  for="squash">
             <ng-container i18n>Squash</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <select class="form-control custom-select"
                     name="squash"
                     formControlName="squash"
@@ -466,12 +466,12 @@
 
         <!-- Transport Protocol -->
         <div class="form-group row">
-          <label class="col-sm-3 col-form-label"
+          <label class="cd-col-form-label"
                  for="transports">
             <ng-container i18n>Transport Protocol</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <div class="custom-control custom-checkbox">
               <input type="checkbox"
                      class="custom-control-input"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html
index dff7bc5e046f97820dabb168d5c24d018cdf1397..dd28a4bb2dc39422c265cdf05b8ef15e255faba1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html
@@ -16,11 +16,11 @@
   <div class="modal-body">
     <div class="form-group row">
       <label for="name"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Name</ng-container>
         <span class="required"></span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input type="text"
                id="name"
                name="name"
@@ -42,13 +42,13 @@
 
     <div class="form-group row">
       <label for="plugin"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Plugin</ng-container>
         <span class="required"></span>
         <cd-helper [html]="tooltips.plugins[plugin].description">
         </cd-helper>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <select class="form-control custom-select"
                 id="plugin"
                 name="plugin"
@@ -69,14 +69,14 @@
 
     <div class="form-group row">
       <label for="k"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Data chunks (k)</ng-container>
         <span class="required"
               *ngIf="requiredControls.includes('k')"></span>
         <cd-helper [html]="tooltips.k">
         </cd-helper>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input type="number"
                id="k"
                name="k"
@@ -95,14 +95,14 @@
 
     <div class="form-group row">
       <label for="m"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Coding chunks (m)</ng-container>
         <span class="required"
               *ngIf="requiredControls.includes('m')"></span>
         <cd-helper [html]="tooltips.m">
         </cd-helper>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input type="number"
                id="m"
                name="m"
@@ -121,12 +121,12 @@
     <div class="form-group row"
          *ngIf="plugin === 'shec'">
       <label for="c"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Durability estimator (c)</ng-container>
         <cd-helper [html]="tooltips.plugins.shec.c">
         </cd-helper>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input type="number"
                id="c"
                name="c"
@@ -142,13 +142,13 @@
     <div class="form-group row"
          *ngIf="plugin === PLUGIN.LRC">
       <label for="l"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Locality (l)</ng-container>
         <span class="required"></span>
         <cd-helper [html]="tooltips.plugins.lrc.l">
         </cd-helper>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input type="number"
                id="l"
                name="l"
@@ -166,12 +166,12 @@
 
     <div class="form-group row">
       <label for="crushFailureDomain"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Crush failure domain</ng-container>
         <cd-helper [html]="tooltips.crushFailureDomain">
         </cd-helper>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <select class="form-control custom-select"
                 id="crushFailureDomain"
                 name="crushFailureDomain"
@@ -190,12 +190,12 @@
     <div class="form-group row"
          *ngIf="plugin === PLUGIN.LRC">
       <label for="crushLocality"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Crush Locality</ng-container>
         <cd-helper [html]="tooltips.plugins.lrc.crushLocality">
         </cd-helper>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <select class="form-control custom-select"
                 id="crushLocality"
                 name="crushLocality"
@@ -217,12 +217,12 @@
     <div class="form-group row"
          *ngIf="[PLUGIN.JERASURE, PLUGIN.ISA].includes(plugin)">
       <label for="technique"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Technique</ng-container>
         <cd-helper [html]="tooltips.plugins[plugin].technique">
         </cd-helper>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <select class="form-control custom-select"
                 id="technique"
                 name="technique"
@@ -238,12 +238,12 @@
     <div class="form-group row"
          *ngIf="plugin === PLUGIN.JERASURE">
       <label for="packetSize"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Packetsize</ng-container>
         <cd-helper [html]="tooltips.plugins.jerasure.packetSize">
         </cd-helper>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input type="number"
                id="packetSize"
                name="packetSize"
@@ -258,12 +258,12 @@
 
     <div class="form-group row">
       <label for="crushRoot"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Crush root</ng-container>
         <cd-helper [html]="tooltips.crushRoot">
         </cd-helper>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input type="text"
                id="crushRoot"
                name="crushRoot"
@@ -275,12 +275,12 @@
 
     <div class="form-group row">
       <label for="crushDeviceClass"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Crush device class</ng-container>
         <cd-helper [html]="tooltips.crushDeviceClass">
         </cd-helper>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <select class="form-control custom-select"
                 id="crushDeviceClass"
                 name="crushDeviceClass"
@@ -297,12 +297,12 @@
 
     <div class="form-group row">
       <label for="directory"
-             class="col-form-label col-sm-3">
+             class="cd-col-form-label">
         <ng-container i18n>Directory</ng-container>
         <cd-helper [html]="tooltips.directory">
         </cd-helper>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input type="text"
                id="directory"
                name="directory"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
index f3cca0fcfab90410494b0dc794476aba7dc414cc..9c52943e1038337130262668b88f3c84692a09f4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
@@ -1,7 +1,7 @@
 <cd-loading-panel *ngIf="!(info && ecProfiles)"
                   i18n>Loading...</cd-loading-panel>
 
-<div class="col-sm-12 col-lg-6">
+<div class="cd-col-form">
   <form name="form"
         *ngIf="info && ecProfiles"
         #formDir="ngForm"
@@ -14,12 +14,12 @@
       <div class="card-body">
         <!-- Name -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="name">
             <ng-container i18n>Name</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input id="name"
                    name="name"
                    type="text"
@@ -46,12 +46,12 @@
 
         <!-- Pool type selection -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="poolType">
             <ng-container i18n>Pool type</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <select class="form-control custom-select"
                     id="poolType"
                     formControlName="poolType"
@@ -73,9 +73,9 @@
           <!-- PG Autoscale Mode -->
           <div class="form-group row">
             <label i18n
-                   class="col-form-label col-sm-3"
+                   class="cd-col-form-label"
                    for="pgAutoscaleMode">PG Autoscale</label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <select class="form-control custom-select"
                       id="pgAutoscaleMode"
                       name="pgAutoscaleMode"
@@ -91,12 +91,12 @@
           <!-- Pg number -->
           <div class="form-group row"
                *ngIf="form.getValue('pgAutoscaleMode') !== 'on'">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="pgNum">
               <ng-container i18n>Placement groups</ng-container>
               <span class="required"></span>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <input class="form-control"
                      id="pgNum"
                      name="pgNum"
@@ -130,12 +130,12 @@
           <!-- Replica Size -->
           <div class="form-group row"
                *ngIf="form.getValue('poolType') === 'replicated'">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="size">
               <ng-container i18n>Replicated size</ng-container>
               <span class="required"></span>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <input class="form-control"
                      id="size"
                      [max]="getMaxSize()"
@@ -161,8 +161,8 @@
           <div class="form-group row"
                *ngIf="info.is_all_bluestore && form.getValue('poolType') === 'erasure'">
             <label i18n
-                   class="col-form-label col-sm-3">Flags</label>
-            <div class="col-sm-9">
+                   class="cd-col-form-label">Flags</label>
+            <div class="cd-col-form-input">
               <div class="custom-control custom-checkbox">
                 <input type="checkbox"
                        class="custom-control-input"
@@ -179,9 +179,9 @@
         <!-- Applications -->
         <div class="form-group row">
           <label i18n
-                 class="col-sm-3 col-form-label"
+                 class="cd-col-form-label"
                  for="applications">Applications</label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <cd-select-badges id="applications"
                               [customBadges]="true"
                               [customBadgeValidators]="data.applications.validators"
@@ -203,9 +203,9 @@
           <div class="form-group row"
                *ngIf="form.getValue('poolType') === 'erasure'">
             <label i18n
-                   class="col-form-label col-sm-3"
+                   class="cd-col-form-label"
                    for="erasureProfile">Erasure code profile</label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <div class="input-group">
                 <select class="form-control custom-select"
                         id="erasureProfile"
@@ -263,10 +263,10 @@
 
           <!-- Crush ruleset selection -->
           <div class="form-group row">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="crushRule"
                    i18n>Crush ruleset</label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <ng-template #noRules>
                 <span class="form-text text-muted">
                   <span i18n>There are no rules.</span>&nbsp;
@@ -339,9 +339,9 @@
           <!-- Compression Mode -->
           <div class="form-group row">
             <label i18n
-                   class="col-form-label col-sm-3"
+                   class="cd-col-form-label"
                    for="mode">Mode</label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <select class="form-control custom-select"
                       id="mode"
                       name="mode"
@@ -357,9 +357,9 @@
             <!-- Compression algorithm selection -->
             <div class="form-group row">
               <label i18n
-                     class="col-form-label col-sm-3"
+                     class="cd-col-form-label"
                      for="algorithm">Algorithm</label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <select class="form-control custom-select"
                         id="algorithm"
                         name="algorithm"
@@ -381,9 +381,9 @@
             <!-- Compression min blob size -->
             <div class="form-group row">
               <label i18n
-                     class="col-form-label col-sm-3"
+                     class="cd-col-form-label"
                      for="minBlobSize">Minimum blob size</label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <input id="minBlobSize"
                        name="minBlobSize"
                        formControlName="minBlobSize"
@@ -406,9 +406,9 @@
             <!-- Compression max blob size -->
             <div class="form-group row">
               <label i18n
-                     class="col-form-label col-sm-3"
+                     class="cd-col-form-label"
                      for="maxBlobSize">Maximum blob size</label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <input id="maxBlobSize"
                        type="text"
                        min="0"
@@ -430,9 +430,9 @@
             <!-- Compression ratio -->
             <div class="form-group row">
               <label i18n
-                     class="col-form-label col-sm-3"
+                     class="cd-col-form-label"
                      for="ratio">Ratio</label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <input id="ratio"
                        name="ratio"
                        formControlName="ratio"
@@ -458,7 +458,7 @@
 
           <!-- Max Bytes -->
           <div class="form-group row">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="max_bytes">
               <ng-container i18n>Max bytes</ng-container>
               <cd-helper>
@@ -467,7 +467,7 @@
                 <span i18n>A valid quota should be greater than 0.</span>
               </cd-helper>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <input class="form-control"
                      id="max_bytes"
                      name="max_bytes"
@@ -482,7 +482,7 @@
 
           <!-- Max Objects -->
           <div class="form-group row">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="max_objects">
               <ng-container i18n>Max objects</ng-container>
               <cd-helper>
@@ -491,7 +491,7 @@
                 <span i18n>A valid quota should be greater than 0.</span>
               </cd-helper>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <input class="form-control"
                      id="max_objects"
                      min="0"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
index b5a0c3638e22f7f64213f0bfdaab4f505f34caf1..375c3f37a6daac7806ae039f0bae230375488259 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
@@ -1,7 +1,7 @@
 <cd-loading-panel *ngIf="editing && loading && !error"
                   i18n>Loading bucket data...</cd-loading-panel>
 
-<div class="col-sm-12 col-lg-6"
+<div class="cd-col-form"
      *ngIf="!loading && !error">
   <form name="bucketForm"
         #frm="ngForm"
@@ -16,9 +16,9 @@
         <div class="form-group row"
              *ngIf="editing">
           <label i18n
-                 class="col-form-label col-sm-3"
+                 class="cd-col-form-label"
                  for="id">Id</label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input id="id"
                    name="id"
                    class="form-control"
@@ -30,13 +30,13 @@
 
         <!-- Name -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="bid">
             <ng-container i18n>Name</ng-container>
             <span class="required"
                   *ngIf="!editing"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input id="bid"
                    name="bid"
                    class="form-control"
@@ -60,12 +60,12 @@
 
         <!-- Owner -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="owner">
             <ng-container i18n>Owner</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <select id="owner"
                     name="owner"
                     class="form-control custom-select"
@@ -88,13 +88,13 @@
 
         <!-- Placement target -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="placement-target">
             <ng-container i18n>Placement target</ng-container>
             <span class="required"
                   *ngIf="!editing"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <ng-template #placementTargetSelect>
               <select id="placement-target"
                       name="placement-target"
@@ -129,7 +129,7 @@
              *ngIf="editing">
           <legend class="cd-header ml-5 mr-5"
                   i18n>Versioning</legend>
-          <div class="col-sm-9 offset-sm-3">
+          <div class="cd-col-form-offset">
             <input type="radio"
                    id="enabled"
                    name="versioning"
@@ -144,7 +144,7 @@
                    i18n>Enables versioning for the objects in the bucket.</div>
             </label>
           </div>
-          <div class="col-sm-9 offset-sm-3">
+          <div class="cd-col-form-offset">
             <input type="radio"
                    id="suspended"
                    name="versioning"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html
index f1fdb7d29962e1ee0bc5ff1ced757bce90fb81bb..ab9db752de10a39cb956a9a4cd56741ff7c7a16e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html
@@ -16,14 +16,14 @@
 
     <!-- Type -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="type">
         <ng-container i18n>Type</ng-container>
         <span class="required"
               *ngIf="!editing">
         </span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input id="type"
                class="form-control"
                type="text"
@@ -49,12 +49,12 @@
 
     <!-- Permission -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="perm">
         <ng-container i18n>Permission</ng-container>
         <span class="required"></span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <select id="perm"
                 class="form-control custom-select"
                 formControlName="perm">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
index f676c677dbd88ecadd0ac2ea0111ae52e3cdbc2f..1fad53ff7b8a0cb3c45d42ccb624f59bf9502cce 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
@@ -5,7 +5,7 @@
                 (backAction)="goToListView()"
                 i18n>The user data could not be loaded.</cd-alert-panel>
 
-<div class="col-sm-12 col-lg-6"
+<div class="cd-col-form"
      *ngIf="!loading && !error">
   <form #frm="ngForm"
         [formGroup]="userForm"
@@ -17,14 +17,14 @@
       <div class="card-body">
         <!-- Username -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="uid">
             <ng-container i18n>Username</ng-container>
             <span class="required"
                   *ngIf="!editing">
             </span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input id="uid"
                    class="form-control"
                    type="text"
@@ -42,14 +42,14 @@
 
         <!-- Full name -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="display_name">
             <ng-container i18n>Full name</ng-container>
             <span class="required"
                   *ngIf="!editing">
             </span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input id="display_name"
                    class="form-control"
                    type="text"
@@ -62,10 +62,10 @@
 
         <!-- Email address -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="email"
                  i18n>Email address</label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input id="email"
                    class="form-control"
                    type="text"
@@ -81,12 +81,12 @@
 
         <!-- Max. buckets -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="max_buckets">
             <ng-container i18n>Max. buckets</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input id="max_buckets"
                    class="form-control"
                    type="number"
@@ -102,7 +102,7 @@
 
         <!-- Suspended -->
         <div class="form-group row">
-          <div class="offset-sm-3 col-sm-9">
+          <div class="cd-col-form-offset">
             <div class="custom-control custom-checkbox">
               <input class="custom-control-input"
                      id="suspended"
@@ -121,7 +121,7 @@
 
           <!-- Auto-generate key -->
           <div class="form-group row">
-            <div class="offset-sm-3 col-sm-9">
+            <div class="cd-col-form-offset">
               <div class="custom-control custom-checkbox">
                 <input class="custom-control-input"
                        id="generate_key"
@@ -137,12 +137,12 @@
           <!-- Access key -->
           <div class="form-group row"
                *ngIf="!editing && !userForm.getValue('generate_key')">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="access_key">
               <ng-container i18n>Access key</ng-container>
               <span class="required"></span>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <div class="input-group">
                 <input id="access_key"
                        class="form-control"
@@ -168,12 +168,12 @@
           <!-- Secret key -->
           <div class="form-group row"
                *ngIf="!editing && !userForm.getValue('generate_key')">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="secret_key">
               <ng-container i18n>Secret key</ng-container>
               <span class="required"></span>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <div class="input-group">
                 <input id="secret_key"
                        class="form-control"
@@ -201,7 +201,7 @@
         <fieldset *ngIf="editing">
           <legend i18n>Subusers</legend>
           <div class="row">
-            <div class="offset-sm-3 col-sm-9">
+            <div class="cd-col-form-offset">
               <span *ngIf="subusers.length === 0"
                     class="no-border">
                 <span class="form-text text-muted"
@@ -270,9 +270,9 @@
 
           <!-- S3 keys -->
           <div class="form-group row">
-            <label class="col-sm-3 col-form-label"
+            <label class="cd-col-form-label"
                    i18n>S3</label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <span *ngIf="s3Keys.length === 0"
                     class="no-border">
                 <span class="form-text text-muted"
@@ -330,10 +330,10 @@
 
           <!-- Swift keys -->
           <div class="form-group row">
-            <label class="col-sm-3 col-form-label"
+            <label class="cd-col-form-label"
                    i18n>Swift</label>
 
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <span *ngIf="swiftKeys.length === 0"
                     class="no-border">
                 <span class="form-text text-muted"
@@ -372,7 +372,7 @@
           <legend i18n>Capabilities</legend>
 
           <div class="form-group row">
-            <div class="offset-sm-3 col-sm-9">
+            <div class="cd-col-form-offset">
               <span *ngIf="capabilities.length === 0"
                     class="no-border">
                 <span class="form-text text-muted"
@@ -432,7 +432,7 @@
 
           <!-- Enabled -->
           <div class="form-group row">
-            <div class="offset-sm-3 col-sm-9">
+            <div class="cd-col-form-offset">
               <div class="custom-control custom-checkbox">
                 <input class="custom-control-input"
                        id="user_quota_enabled"
@@ -448,7 +448,7 @@
           <!-- Unlimited size -->
           <div class="form-group row"
                *ngIf="userForm.controls.user_quota_enabled.value">
-            <div class="offset-sm-3 col-sm-9">
+            <div class="cd-col-form-offset">
               <div class="custom-control custom-checkbox">
                 <input class="custom-control-input"
                        id="user_quota_max_size_unlimited"
@@ -464,12 +464,12 @@
           <!-- Maximum size -->
           <div class="form-group row"
                *ngIf="userForm.controls.user_quota_enabled.value && !userForm.getValue('user_quota_max_size_unlimited')">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="user_quota_max_size">
               <ng-container i18n>Max. size</ng-container>
               <span class="required"></span>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <input id="user_quota_max_size"
                      class="form-control"
                      type="text"
@@ -487,7 +487,7 @@
           <!-- Unlimited objects -->
           <div class="form-group row"
                *ngIf="userForm.controls.user_quota_enabled.value">
-            <div class="offset-sm-3 col-sm-9">
+            <div class="cd-col-form-offset">
               <div class="custom-control custom-checkbox">
                 <input class="custom-control-input"
                        id="user_quota_max_objects_unlimited"
@@ -503,12 +503,12 @@
           <!-- Maximum objects -->
           <div class="form-group row"
                *ngIf="userForm.controls.user_quota_enabled.value && !userForm.getValue('user_quota_max_objects_unlimited')">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="user_quota_max_objects">
               <ng-container i18n>Max. objects</ng-container>
               <span class="required"></span>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <input id="user_quota_max_objects"
                      class="form-control"
                      type="number"
@@ -529,7 +529,7 @@
 
           <!-- Enabled -->
           <div class="form-group row">
-            <div class="offset-sm-3 col-sm-9">
+            <div class="cd-col-form-offset">
               <div class="custom-control custom-checkbox">
                 <input class="custom-control-input"
                        id="bucket_quota_enabled"
@@ -545,7 +545,7 @@
           <!-- Unlimited size -->
           <div class="form-group row"
                *ngIf="userForm.controls.bucket_quota_enabled.value">
-            <div class="offset-sm-3 col-sm-9">
+            <div class="cd-col-form-offset">
               <div class="custom-control custom-checkbox">
                 <input class="custom-control-input"
                        id="bucket_quota_max_size_unlimited"
@@ -561,12 +561,12 @@
           <!-- Maximum size -->
           <div class="form-group row"
                *ngIf="userForm.controls.bucket_quota_enabled.value && !userForm.getValue('bucket_quota_max_size_unlimited')">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="bucket_quota_max_size">
               <ng-container i18n>Max. size</ng-container>
               <span class="required"></span>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <input id="bucket_quota_max_size"
                      class="form-control"
                      type="text"
@@ -584,7 +584,7 @@
           <!-- Unlimited objects -->
           <div class="form-group row"
                *ngIf="userForm.controls.bucket_quota_enabled.value">
-            <div class="offset-sm-3 col-sm-9">
+            <div class="cd-col-form-offset">
               <div class="custom-control custom-checkbox">
                 <input class="custom-control-input"
                        id="bucket_quota_max_objects_unlimited"
@@ -600,12 +600,12 @@
           <!-- Maximum objects -->
           <div class="form-group row"
                *ngIf="userForm.controls.bucket_quota_enabled.value && !userForm.getValue('bucket_quota_max_objects_unlimited')">
-            <label class="col-form-label col-sm-3"
+            <label class="cd-col-form-label"
                    for="bucket_quota_max_objects">
               <ng-container i18n>Max. objects</ng-container>
               <span class="required"></span>
             </label>
-            <div class="col-sm-9">
+            <div class="cd-col-form-input">
               <input id="bucket_quota_max_objects"
                      class="form-control"
                      type="number"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
index 80e460886df777aa57fb78b1da2d461d9cbf4a5a..981cf7ec32bdf50f239609e526d374927b7e90fc 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
@@ -16,14 +16,14 @@
 
     <!-- Username -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="user">
         <ng-container i18n>Username</ng-container>
         <span class="required"
               *ngIf="!viewing">
         </span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input id="user"
                class="form-control"
                type="text"
@@ -50,7 +50,7 @@
     <!-- Auto-generate key -->
     <div class="form-group row"
          *ngIf="!viewing">
-      <div class="offset-sm-3 col-sm-9">
+      <div class="cd-col-form-offset">
         <div class="custom-control custom-checkbox">
           <input class="custom-control-input"
                  id="generate_key"
@@ -66,14 +66,14 @@
     <!-- Access key -->
     <div class="form-group row"
          *ngIf="!formGroup.getValue('generate_key')">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="access_key">
         <ng-container i18n>Access key</ng-container>
         <span class="required"
               *ngIf="!viewing">
         </span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <div class="input-group">
           <input id="access_key"
                  class="form-control"
@@ -100,14 +100,14 @@
     <!-- Secret key -->
     <div class="form-group row"
          *ngIf="!formGroup.getValue('generate_key')">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="secret_key">
         <ng-container i18n>Secret key</ng-container>
         <span class="required"
               *ngIf="!viewing">
         </span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <div class="input-group">
           <input id="secret_key"
                  class="form-control"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
index 70baacf414cbe5579f7f89976a3dcd87dd02874a..17d76baa2e65a96944d65c6e15d5007793567de0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
@@ -15,10 +15,10 @@
 
     <!-- Username -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="uid"
              i18n>Username</label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input id="uid"
                class="form-control"
                type="text"
@@ -29,14 +29,14 @@
 
     <!-- Subuser -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="subuid">
         <ng-container i18n>Subuser</ng-container>
         <span class="required"
               *ngIf="!editing">
         </span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <input id="subuid"
                class="form-control"
                type="text"
@@ -54,12 +54,12 @@
 
     <!-- Permission -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="perm">
         <ng-container i18n>Permission</ng-container>
         <span class="required"></span>
       </label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-input">
         <select id="perm"
                 class="form-control custom-select"
                 formControlName="perm">
@@ -86,7 +86,7 @@
 
       <!-- Auto-generate key -->
       <div class="form-group row">
-        <div class="offset-sm-3 col-sm-9">
+        <div class="cd-col-form-offset">
           <div class="custom-control custom-checkbox">
             <input class="custom-control-input"
                    id="generate_secret"
@@ -102,12 +102,12 @@
       <!-- Secret key -->
       <div class="form-group row"
            *ngIf="!editing && !formGroup.getValue('generate_secret')">
-        <label class="col-form-label col-sm-3"
+        <label class="cd-col-form-label"
                for="secret_key">
           <ng-container i18n>Secret key</ng-container>
           <span class="required"></span>
         </label>
-        <div class="col-sm-9">
+        <div class="cd-col-form-input">
           <div class="input-group">
             <input id="secret_key"
                    class="form-control"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-swift-key-modal/rgw-user-swift-key-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-swift-key-modal/rgw-user-swift-key-modal.component.html
index 284b20328dfe74395eff06412cb1d8f85ed9873d..52d8e0fed0c3f49c436ff29a47317068f97a731c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-swift-key-modal/rgw-user-swift-key-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-swift-key-modal/rgw-user-swift-key-modal.component.html
@@ -14,10 +14,10 @@
 
     <!-- Username -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="user"
              i18n>Username</label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-inpu">
         <input id="user"
                name="user"
                class="form-control"
@@ -29,10 +29,10 @@
 
     <!-- Secret key -->
     <div class="form-group row">
-      <label class="col-form-label col-sm-3"
+      <label class="cd-col-form-label"
              for="secret_key"
              i18n>Secret key</label>
-      <div class="col-sm-9">
+      <div class="cd-col-form-inpu">
         <div class="input-group">
           <input id="secret_key"
                  name="secret_key"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
index fd6ff143e141ace965dc1555318e95c3f9edf654..901bc6937c8e268833635175f70d737e2036e5e0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
@@ -1,4 +1,4 @@
-<div class="col-sm-12 col-lg-6">
+<div class="cd-col-form">
   <form name="roleForm"
         #formDir="ngForm"
         [formGroup]="roleForm"
@@ -10,13 +10,13 @@
 
         <!-- Name -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="name">
             <ng-container i18n>Name</ng-container>
             <span class="required"
                   *ngIf="mode !== roleFormMode.editing"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    i18n-placeholder
@@ -37,9 +37,9 @@
         <!-- Description -->
         <div class="form-group row">
           <label i18n
-                 class="col-form-label col-sm-3"
+                 class="cd-col-form-label"
                  for="description">Description</label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    i18n-placeholder
@@ -53,8 +53,8 @@
         <!-- Permissions -->
         <div class="form-group row">
           <label i18n
-                 class="col-form-label col-sm-3">Permissions</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Permissions</label>
+          <div class="cd-col-form-input">
             <cd-table [data]="scopes_permissions"
                       [columns]="columns"
                       columnMode="flex"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
index e8e0eeb32d96e5c0b07cbe56d0a7af65e0dee86f..30b128f0e0498913568b4a3a7b5c458a2fa9cb84 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
@@ -1,7 +1,7 @@
 <cd-loading-panel *ngIf="!pwdExpirationSettings"
                   i18n>Loading...</cd-loading-panel>
 
-<div class="col-sm-12 col-lg-6">
+<div class="cd-col-form">
   <form name="userForm"
         #formDir="ngForm"
         [formGroup]="userForm"
@@ -14,13 +14,13 @@
 
         <!-- Username -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="username">
             <ng-container i18n>Username</ng-container>
             <span class="required"
                   *ngIf="mode !== userFormMode.editing"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    placeholder="Username..."
@@ -36,14 +36,14 @@
 
         <!-- Password -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="password">
-          <ng-container i18n>Password</ng-container>
-        <cd-helper class="text-pre"
-                   html="{{ passwordPolicyHelpText }}">
-        </cd-helper>
+            <ng-container i18n>Password</ng-container>
+            <cd-helper class="text-pre"
+                       html="{{ passwordPolicyHelpText }}">
+            </cd-helper>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <div class="input-group">
               <input class="form-control"
                      type="password"
@@ -78,9 +78,9 @@
         <!-- Confirm password -->
         <div class="form-group row">
           <label i18n
-                 class="col-form-label col-sm-3"
+                 class="cd-col-form-label"
                  for="confirmpassword">Confirm password</label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <div class="input-group">
               <input class="form-control"
                      type="password"
@@ -106,7 +106,7 @@
         <!-- Password expiration date -->
         <div class="form-group row"
              *ngIf="!authStorageService.isSSO()">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="pwdExpirationDate">
             <ng-container i18n>Password expiration date</ng-container>
             <cd-helper class="text-pre"
@@ -126,7 +126,7 @@
             <span class="required"
                   *ngIf="pwdExpirationSettings.pwdExpirationSpan > 0"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <div class="input-group">
               <input type="text"
                      class="form-control"
@@ -155,9 +155,9 @@
         <!-- Name -->
         <div class="form-group row">
           <label i18n
-                 class="col-form-label col-sm-3"
+                 class="cd-col-form-label"
                  for="name">Full name</label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    placeholder="Full name..."
@@ -170,9 +170,9 @@
         <!-- Email -->
         <div class="form-group row">
           <label i18n
-                 class="col-form-label col-sm-3"
+                 class="cd-col-form-label"
                  for="email">Email</label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="email"
                    placeholder="Email..."
@@ -188,9 +188,9 @@
 
         <!-- Roles -->
         <div class="form-group row">
-          <label class="col-sm-3 col-form-label"
+          <label class="cd-col-form-label"
                  i18n>Roles</label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <span class="no-border full-height"
                   *ngIf="allRoles">
               <cd-select-badges [data]="userForm.controls.roles.value"
@@ -203,7 +203,7 @@
         <!-- Enabled -->
         <div class="form-group row"
              *ngIf="!isCurrentUser()">
-          <div class="offset-sm-3 col-sm-9">
+          <div class="cd-col-form-offset">
             <div class="custom-control custom-checkbox">
               <input type="checkbox"
                      class="custom-control-input"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html
index a318f0e1bde6c566c4f2b9730bc83bbeb97fbcd4..45b87b8beb64e9e03221f772d787abeaf7e440c9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html
@@ -1,4 +1,4 @@
-<div class="col-sm-12 col-lg-6">
+<div class="cd-col-form">
   <form #frm="ngForm"
         [formGroup]="userForm"
         novalidate>
@@ -9,12 +9,12 @@
       <div class="card-body">
         <!-- Old password -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="oldpassword">
             <ng-container i18n>Old password</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <div class="input-group">
               <input class="form-control"
                      type="password"
@@ -40,7 +40,7 @@
 
         <!-- New password -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="newpassword">
             <ng-container i18n>New password</ng-container>
             <cd-helper class="text-pre"
@@ -48,7 +48,7 @@
             </cd-helper>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <div class="input-group">
               <input class="form-control"
                      type="password"
@@ -84,12 +84,12 @@
 
         <!-- Confirm new password -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-3"
+          <label class="cd-col-form-label"
                  for="confirmnewpassword">
             <ng-container i18n>Confirm new password</ng-container>
             <span class="required"></span>
           </label>
-          <div class="col-sm-9">
+          <div class="cd-col-form-input">
             <div class="input-group">
               <input class="form-control"
                      type="password"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html
index ced902d67cf5b898347793dfab07b1451ddc7580..651c68b9267772863e0f5cacc1a41222ba5e1e9d 100755 (executable)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html
@@ -12,11 +12,11 @@
         <ng-container *ngFor="let field of fields">
           <div class="form-group row cd-{{field.name}}-form-group">
             <label *ngIf="field.label"
-                   class="col-form-label col-sm-3"
+                   class="cd-col-form-label"
                    [for]="field.name">
               {{ field.label }}
             </label>
-            <div [ngClass]="{'col-sm-9': field.label, 'col-sm-12': !field.label}">
+            <div [ngClass]="{'cd-col-form-input': field.label, 'col-sm-12': !field.label}">
               <input *ngIf="['text', 'number'].includes(field.type)"
                      [type]="field.type"
                      class="form-control"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.spec.ts
index 5dde3e7621f9881ed83491655be8ef19cc27616f..48dfb26fda8dba514575e1b2eecbb05365be16d9 100755 (executable)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.spec.ts
@@ -89,7 +89,7 @@ describe('InputModalComponent', () => {
   });
 
   it('has one defined label field', () => {
-    fh.expectTextToBe('.col-form-label', 'Optional');
+    fh.expectTextToBe('.cd-col-form-label', 'Optional');
   });
 
   it('has a predefined values for requiredField', () => {

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 226081747d56018d1118c5197dcf1821f82f4523..3c0fbf6a36f0c6941cc1d5ce7415a7bf78117c36 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -306,6 +306,41 @@ a {
   padding-top: 7px;
 }
 
+.cd-col-form {
+  @extend .col-12;
+  @extend .col-lg-8;
+  @extend .col-xl-6;
+}
+
+.cd-col-form-label {
+  @extend .col-form-label;
+  @extend .col-sm-4;
+  @extend .col-md-4;
+  @extend .col-lg-3;
+}
+
+.cd-col-form-input {
+  @extend .col-sm-8;
+  @extend .col-md-8;
+  @extend .col-lg-9;
+}
+
+.cd-col-form-offset {
+  @extend .offset-sm-4;
+  @extend .offset-lg-3;
+  @extend .cd-col-form-input;
+}
+
+cd-modal {
+  .cd-col-form-label {
+    @extend .col-lg-4;
+  }
+
+  .cd-col-form-input {
+    @extend .col-lg-8;
+  }
+}
+
 /* Card */
 .card-footer button.btn:not(:first-child) {
   margin-left: 5px;