improve form responsiveness

Author: chriskapp

projects/fusio-sdk/src/lib/component/app/form/app-form.component.html

@@ -2,8 +2,8 @@
 <fusio-message [response]="response"></fusio-message>
 <form *ngIf="entity">
   <div class="mb-3 row">
-    <label for="name" class="col-sm-2 col-form-label fw-bold">Name</label>
-    <div class="col-sm-10">
+    <label for="name" class="col-lg-2 col-form-label fw-bold">Name</label>
+    <div class="col-lg-10">
       <div class="input-group">
         <input type="text" id="name" name="name" [(ngModel)]="entity.name" [disabled]="mode === 3" class="form-control">
         <button class="btn btn-outline-secondary" type="button" [ngbPopover]="nameHelp"><i class="bi bi-question"></i></button>
@@ -12,8 +12,8 @@
     </div>
   </div>
   <div class="mb-3 row">
-    <label for="url" class="col-sm-2 col-form-label fw-bold">Url</label>
-    <div class="col-sm-10">
+    <label for="url" class="col-lg-2 col-form-label fw-bold">Url</label>
+    <div class="col-lg-10">
       <div class="input-group">
         <input type="url" id="url" name="url" [(ngModel)]="entity.url" [disabled]="mode === 3" class="form-control">
         <button class="btn btn-outline-secondary" type="button" [ngbPopover]="urlHelp"><i class="bi bi-question"></i></button>
@@ -22,8 +22,8 @@
     </div>
   </div>
   <div class="mb-3 row">
-    <label class="col-sm-2 col-form-label fw-bold">Scopes</label>
-    <div class="col-sm-10">
+    <label class="col-lg-2 col-form-label fw-bold">Scopes</label>
+    <div class="col-lg-10">
       <fusio-scope-categories [scopes]="entity.scopes" (dataChange)="entity.scopes = $event" [disabled]="mode === 3"></fusio-scope-categories>
     </div>
   </div>

projects/fusio-sdk/src/lib/component/form/map/form-map.component.html

@@ -1,7 +1,7 @@
 
 <div class="mb-3 row" *ngFor="let property of local; let i = index">
-  <label for="{{name}}-{{property.key}}" class="col-sm-2 col-form-label fw-bold">{{property.key}}</label>
-  <div class="col-sm-10">
+  <label for="{{name}}-{{property.key}}" class="col-lg-2 col-form-label fw-bold">{{property.key}}</label>
+  <div class="col-lg-10">
     <ng-container *ngIf="type !== 'autocomplete'">
       <div class="input-group">
         <input type="{{type}}" id="{{name}}-{{property.key}}" name="{{name}}-{{property.key}}" [ngModel]="property.value" (ngModelChange)="doChange(i, $event)" [disabled]="disabled" class="form-control">
@@ -15,10 +15,10 @@
   </div>
 </div>
 <div class="mb-3 row">
-  <div class="col-sm-2">
+  <div class="col-lg-2">
     <input type="text" id="{{name}}-newKey" name="{{name}}-newKey" [(ngModel)]="newKey" placeholder="Enter key" class="form-control">
   </div>
-  <div class="col-sm-10">
+  <div class="col-lg-10">
     <ng-container *ngIf="type !== 'autocomplete'">
       <div class="input-group">
         <input type="{{type}}" id="{{name}}-newValue" name="{{name}}-newValue" [(ngModel)]="newValue" (keydown.enter)="doAdd()" placeholder="Enter value" class="form-control">

projects/fusio-sdk/src/lib/component/token/form/token-form.component.html

@@ -9,8 +9,8 @@
 </div>
 <form *ngIf="entity">
   <div class="mb-3 row">
-    <label for="name" class="col-sm-2 col-form-label fw-bold">Name</label>
-    <div class="col-sm-10">
+    <label for="name" class="col-lg-2 col-form-label fw-bold">Name</label>
+    <div class="col-lg-10">
       <div class="input-group">
         <input type="text" id="name" name="name" [(ngModel)]="entity.name" [disabled]="mode === 3" class="form-control">
         <button class="btn btn-outline-secondary" type="button" [ngbPopover]="nameHelp"><i class="bi bi-question"></i></button>
@@ -19,8 +19,8 @@
     </div>
   </div>
   <div class="mb-3 row">
-    <label for="name" class="col-sm-2 col-form-label fw-bold">Expires</label>
-    <div class="col-sm-10">
+    <label for="name" class="col-lg-2 col-form-label fw-bold">Expires</label>
+    <div class="col-lg-10">
       <div class="input-group">
         <input type="date" id="expire" name="expire" [(ngModel)]="entity.expire" [disabled]="mode === 3" class="form-control">
         <button class="btn btn-outline-secondary" type="button" [ngbPopover]="expireHelp"><i class="bi bi-question"></i></button>
@@ -29,8 +29,8 @@
     </div>
   </div>
   <div class="mb-3 row" *ngIf="mode === 1">
-    <label class="col-sm-2 col-form-label fw-bold">Scopes</label>
-    <div class="col-sm-10">
+    <label class="col-lg-2 col-form-label fw-bold">Scopes</label>
+    <div class="col-lg-10">
       <fusio-scope-categories [scopes]="entity.scopes" (dataChange)="entity.scopes = $event"></fusio-scope-categories>
     </div>
   </div>

projects/fusio-sdk/src/lib/component/webhook/form/webhook-form.component.html

@@ -2,8 +2,8 @@
 <fusio-message [response]="response"></fusio-message>
 <form *ngIf="entity">
   <div class="mb-3 row">
-    <label for="name" class="col-sm-2 col-form-label fw-bold">Name</label>
-    <div class="col-sm-10">
+    <label for="name" class="col-lg-2 col-form-label fw-bold">Name</label>
+    <div class="col-lg-10">
       <div class="input-group">
         <input type="text" id="name" name="name" [(ngModel)]="entity.name" [disabled]="mode === 3" class="form-control">
         <button class="btn btn-outline-secondary" type="button" [ngbPopover]="nameHelp"><i class="bi bi-question"></i></button>
@@ -12,17 +12,17 @@
     </div>
   </div>
   <div class="mb-3 row">
-    <label for="event" class="col-sm-2 col-form-label fw-bold">Event</label>
-    <div class="col-sm-10">
+    <label for="event" class="col-lg-2 col-form-label fw-bold">Event</label>
+    <div class="col-lg-10">
       <fusio-form-autocomplete id="event" name="event" [service]="event" [useTilde]="true" [data]="entity.event" (dataChange)="entity.event = $event" [disabled]="mode === 3">
         <button class="btn btn-outline-secondary" type="button" [ngbPopover]="eventHelp"><i class="bi bi-question"></i></button>
         <ng-template #eventHelp>The target event</ng-template>
       </fusio-form-autocomplete>
     </div>
   </div>
   <div class="mb-3 row">
-    <label for="endpoint" class="col-sm-2 col-form-label fw-bold">Endpoint</label>
-    <div class="col-sm-10">
+    <label for="endpoint" class="col-lg-2 col-form-label fw-bold">Endpoint</label>
+    <div class="col-lg-10">
       <div class="input-group">
         <input type="url" id="endpoint" name="endpoint" [(ngModel)]="entity.endpoint" [disabled]="mode === 3" class="form-control">
         <button class="btn btn-outline-secondary" type="button" [ngbPopover]="endpointHelp"><i class="bi bi-question"></i></button>