1179 improve the layout of the examples

SAP · Aug 31, 2019 · 8f0fd05 · 8f0fd05
1 parent 178549d
commit 8f0fd05
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 28 deletions.
diff --git a/...p/documentation/component-docs/combobox/examples/combobox-disabled-example.component.html b/...p/documentation/component-docs/combobox/examples/combobox-disabled-example.component.html
@@ -1,13 +1,13 @@
 <form [formGroup]="customForm">
-    <div fd-form-set>
+    <div fd-form-set class="flex-form">
         <div fd-form-item>
             <label fd-form-label for="form-combo-1">Select Fruit:</label>
             <fd-combobox
                 formControlName="comboControl"
                 [dropdownValues]="dropdownValues"
                 fd-form-control
                 id="form-combo-1"></fd-combobox>
-            Disabled: {{ customForm.controls.comboControl.disabled }}
+            Disabled: {{ customForm.controls.comboControl.disabled }}<br/>
             Selected Value: {{ customForm.controls.comboControl.value }}
         </div>
         <div fd-form-item>
@@ -16,7 +16,7 @@
                 formControlName="disabledComboControl"
                 fd-form-control
                 id="form-combo-2"></fd-combobox>
-            Disabled: {{ customForm.controls.disabledComboControl.disabled }}
+            Disabled: {{ customForm.controls.disabledComboControl.disabled }}<br/>
             Selected Value: {{ customForm.controls.disabledComboControl.value }}
         </div>
     </div>

diff --git a/...app/documentation/component-docs/combobox/examples/combobox-disabled-example.component.ts b/...app/documentation/component-docs/combobox/examples/combobox-disabled-example.component.ts
@@ -3,6 +3,12 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 @Component({
     selector: 'fd-combobox-disabled-example',
+    styles: [`
+        .flex-form{
+            display:flex;
+            justify-content: space-between
+        }
+    `],
     templateUrl: './combobox-disabled-example.component.html'
 })
 export class ComboboxDisabledExampleComponent {

diff --git a/docs/app/documentation/component-docs/date-picker/date-picker-docs.component.html b/docs/app/documentation/component-docs/date-picker/date-picker-docs.component.html
@@ -61,7 +61,7 @@ <h2>Date Picker in Reactive Form</h2>
 <code-example [exampleFiles]="datePickerForm"></code-example>
 
 <separator></separator>
-<h2>Date Picker in Form with a Range of Dates</h2>
+<h2>Date Picker in Reactive Form with a Range of Dates</h2>
 <component-example [name]="'ex7'">
   <fd-date-picker-form-range-example></fd-date-picker-form-range-example>
 </component-example>

diff --git a/...p/documentation/component-docs/date-picker/examples/date-picker-form-example.component.ts b/...p/documentation/component-docs/date-picker/examples/date-picker-form-example.component.ts
@@ -4,20 +4,29 @@ import { FdDate } from '../../../../../../library/src/lib/calendar/models/fd-dat
 
 @Component({
     selector: 'fd-date-picker-form-example',
+    styles: [`
+        .flex-form{
+            display:flex;
+            justify-content: space-between;
+        }
+    `],
     template: `
-        <form [formGroup]="customForm">
-            <fd-date-picker formControlName="date"></fd-date-picker><br/>
-            Touched: {{customForm.controls.date.touched}}<br/>
-            Dirty: {{customForm.controls.date.dirty}}<br/>
-            Valid: {{customForm.controls.date.valid}}<br/>
-            Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toDateString() : 'null' }}
-            <br>
-            <fd-date-picker formControlName="disabledDate"></fd-date-picker><br/>
-            Touched: {{customForm.controls.disabledDate.touched}}<br/>
-            Dirty: {{customForm.controls.disabledDate.dirty}}<br/>
-            Valid: {{customForm.controls.disabledDate.valid}}<br/>
-            Disabled: {{customForm.controls.disabledDate.disabled}} <br/>
-            Selected Date: {{ customForm.controls.disabledDate.value ? customForm.controls.date.value.toDateString() : 'null' }}
+        <form [formGroup]="customForm" class="flex-form">
+            <div>
+                <fd-date-picker formControlName="date"></fd-date-picker><br/>
+                Touched: {{customForm.controls.date.touched}}<br/>
+                Dirty: {{customForm.controls.date.dirty}}<br/>
+                Valid: {{customForm.controls.date.valid}}<br/>
+                Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toDateString() : 'null' }}
+            </div>
+            <div>
+                <fd-date-picker formControlName="disabledDate"></fd-date-picker><br/>
+                Touched: {{customForm.controls.disabledDate.touched}}<br/>
+                Dirty: {{customForm.controls.disabledDate.dirty}}<br/>
+                Valid: {{customForm.controls.disabledDate.valid}}<br/>
+                Disabled: {{customForm.controls.disabledDate.disabled}} <br/>
+                Selected Date: {{ customForm.controls.disabledDate.value ? customForm.controls.date.value.toDateString() : 'null' }}
+            </div>
         </form>
     `
 })

diff --git a/...-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.html b/...-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.html
@@ -1,13 +1,17 @@
-<form [formGroup]="customForm">
+<form [formGroup]="customForm" class="flex-form">
+    <div>
     <fd-datetime-picker formControlName="date"></fd-datetime-picker><br/>
-    Touched: {{customForm.controls.date.touched}}<br/>
-    Dirty: {{customForm.controls.date.dirty}}<br/>
-    Valid: {{customForm.controls.date.valid}}<br/>
-    Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toLocaleDateString() : 'null' }} <br/>
-    <fd-datetime-picker formControlName="disabledDate"></fd-datetime-picker>
-    Touched: {{customForm.controls.disabledDate.touched}}<br/>
-    Dirty: {{customForm.controls.disabledDate.dirty}}<br/>
-    Valid: {{customForm.controls.disabledDate.valid}}<br/>
-    Disabled: {{customForm.controls.disabledDate.disabled}}<br/>
-    Selected Date: {{ customForm.controls.disabledDate.value ? customForm.controls.disabledDate.value.toLocaleDateString() : 'null' }}
+        Touched: {{customForm.controls.date.touched}}<br/>
+        Dirty: {{customForm.controls.date.dirty}}<br/>
+        Valid: {{customForm.controls.date.valid}}<br/>
+        Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toLocaleDateString() : 'null' }}
+    </div>
+    <div>
+        <fd-datetime-picker formControlName="disabledDate"></fd-datetime-picker><br/>
+        Touched: {{customForm.controls.disabledDate.touched}}<br/>
+        Dirty: {{customForm.controls.disabledDate.dirty}}<br/>
+        Valid: {{customForm.controls.disabledDate.valid}}<br/>
+        Disabled: {{customForm.controls.disabledDate.disabled}}<br/>
+        Selected Date: {{ customForm.controls.disabledDate.value ? customForm.controls.disabledDate.value.toLocaleDateString() : 'null' }}
+    </div>
 </form>
diff --git a/...nt-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.ts b/...nt-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.ts
@@ -4,6 +4,12 @@ import { FdDatetime } from '../../../../../../../library/src/lib/datetime-picker
 
 @Component({
     selector: 'fd-datetime-form-example',
+    styles: [`
+        .flex-form{
+            display:flex;
+            justify-content: space-between;
+        }
+    `],
     templateUrl: './datetime-form-example.component.html'
 })
 export class DatetimeFormExampleComponent {