feat(viewer): improve style of date input (DSP-1724) (#301)

* feat(viewer): show start and end date side by side * feat(viewer): improve style of error message * feat(viewer): adjust width of column in grid for date input
dasch-swiss · Jun 10, 2021 · 4c3d1b3 · 4c3d1b3
1 parent d23e844
commit 4c3d1b3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 12 deletions.
diff --git a/...sp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.html b/...sp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.html
@@ -11,12 +11,14 @@
         <mat-label>Year</mat-label>
         <input class="year" matInput placeholder="Year" type="number" [formControlName]="'year'" min="1"
                (input)="_handleInput()">
-        <mat-error *ngIf="yearControl.hasError('required')">
-            <span class="custom-error-message">A year is <strong>required</strong>.</span>
-        </mat-error>
-        <mat-error *ngIf="yearControl.hasError('min')">
-            <span class="custom-error-message">A valid year is greater than 0.</span>
-        </mat-error>
+        <div class="date-form-error">
+            <mat-error *ngIf="yearControl.hasError('required')">
+                <span class="custom-error-message">A year is <strong>required</strong>.</span>
+            </mat-error>
+            <mat-error *ngIf="yearControl.hasError('min')">
+                <span class="custom-error-message">A valid year is greater than 0.</span>
+            </mat-error>
+        </div>
     </mat-form-field>
     <mat-form-field>
         <mat-label>Month</mat-label>

diff --git a/...sp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.scss b/...sp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.scss
@@ -3,3 +3,7 @@
 .era-radio {
   margin-bottom: 15px;
 }
+
+.date-form-error {
+  margin-top: -16px;
+}
diff --git a/...ts/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.html b/...ts/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.html
@@ -21,20 +21,20 @@
     <div class="date-form-grid">
         <div class="date-form-field">
             <mat-form-field>
+                <mat-label *ngIf="isPeriodControl.value">Start</mat-label>
                 <dsp-date-edit class="start-date" [formControlName]="'startDate'" [calendar]="calendarControl.value" [valueRequiredValidator]="valueRequiredValidator"></dsp-date-edit>
             </mat-form-field>
         </div>
-    </div>
 
-    <span *ngIf="isPeriodControl.value">
-        <div class="date-form-grid">
+        <span *ngIf="isPeriodControl.value">
             <div class="date-form-field">
                 <mat-form-field>
+                    <mat-label>End</mat-label>
                     <dsp-date-edit class="end-date" [formControlName]="'endDate'" [calendar]="calendarControl.value" [valueRequiredValidator]="valueRequiredValidator"></dsp-date-edit>
                 </mat-form-field>
             </div>
-        </div>
-    </span>
+        </span>
+    </div>
 
     <div class="date-form-error">
         <mat-error *ngIf="startDate.hasError('required')">

diff --git a/...ts/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.scss b/...ts/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.scss
@@ -7,7 +7,7 @@
 
 .date-form-grid {
   display: grid;
-  grid-template-columns: 49% 49%;
+  grid-template-columns: 30% 30%;
   grid-template-rows: auto;
   column-gap: 12px;
 }