UI improvements.

src/Squidex/app/features/schemas/pages/schema/schema-preview-urls-form.component.html

@@ -5,14 +5,14 @@
         </ng-container>
 
         <ng-container content>
-            <h3 class="wizard-title">Preview Urls define where the content is used</h3>
+            <h3 class="title">Preview Urls define where the content is used</h3>
 
             <div class="content">
                 <div class="form-group row no-gutters" *ngFor="let form of editForm.form.controls; let i = index">
-                    <div class="col pr-1">
+                    <div class="col col-name pr-1">
                         <sqx-control-errors [for]="form.get('name')" fieldName="Name" [submitted]="editForm.submitted | async"></sqx-control-errors>
     
-                        <input type="text" class="form-control" maxlength="1000" [formControl]="form.get('name')" placeholder="Name, e.g. Web, Mobile" />
+                        <input type="text" class="form-control" maxlength="1000" [formControl]="form.get('name')" placeholder="Name, e.g. Web or Mobile" />
                     </div>
     
                     <div class="col pr-1">
@@ -32,16 +32,20 @@
                 </div>
 
                 <div class="form-group row no-gutters" [formGroup]="addForm.form">
-                    <div class="col pr-1">
+                    <div class="col col-name pr-1">
                         <sqx-control-errors for="name" fieldName="Name" [submitted]="addForm.submitted | async"></sqx-control-errors>
 
-                        <input type="text" class="form-control" maxlength="1000" formControlName="name" placeholder="Name, e.g. Web, Mobile" />
+                        <input type="text" class="form-control" maxlength="1000" formControlName="name" placeholder="Name, e.g. Web or Mobile" />
                     </div>
 
                     <div class="col pr-1">
                         <sqx-control-errors for="url" fieldName="Url" [submitted]="addForm.submitted | async"></sqx-control-errors>
 
                         <input type="text" class="form-control" maxlength="1000" formControlName="url" placeholder="Url" />
+
+                        <small class="form-text text-muted">
+                            {{editHelp}}
+                        </small>
                     </div>
 
                     <div class="col-auto col-options">

src/Squidex/app/features/schemas/pages/schema/schema-preview-urls-form.component.scss

@@ -5,15 +5,20 @@
     min-height: 200px;
 }
 
+.btn-delete {
+    margin-left: 42px;
+}
+
 .col-options {
     min-width: 6rem;
 }
 
-.btn-delete {
-    margin-left: 42px;
+.col-name {
+    min-width: 14rem;
+    max-width: 14rem;
 }
 
-.wizard-title {
+.title {
     background: $color-border;
     margin: -1rem;
     margin-bottom: 1rem;

src/Squidex/app/features/schemas/pages/schema/schema-preview-urls-form.component.ts

@@ -30,6 +30,7 @@ export class SchemaPreviewUrlsFormComponent implements OnInit {
     public addForm = new AddPreviewUrlForm(this.formBuilder);
 
     public editForm = new ConfigurePreviewUrlsForm(this.formBuilder);
+    public editHelp = 'Use placeholders like ${id}, ${data.slug} or ${data.title.en}.';
 
     constructor(
         private readonly formBuilder: FormBuilder,