Broken date icon/#406 zubkov (#409)

* added min width-for date picker * clean up before pull request
ita-social-projects · Aug 9, 2021 · 53b69e5 · 53b69e5
1 parent f98a7da
commit 53b69e5
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 28 deletions.
diff --git a/src/app/shared/components/category-select/category-select.component.html b/src/app/shared/components/category-select/category-select.component.html
@@ -1,33 +1,35 @@
 <form [formGroup]="CategoryFormGroup">
-  <input  matInput  type="text" 
-          placeholder="Почніть вводити напрямок або виберіть зі списку"  class="step-input"
+  <input  matInput  type="text"
+          placeholder="Почніть вводити напрямок або виберіть зі списку"
+          class="step-input direction-step"
           [formControl]="directionsFormControl"
           [matAutocomplete]="auto"
-          disableOptionCentering 
+          disableOptionCentering
   >
-  <mat-autocomplete 
-    #auto="matAutocomplete" 
+  <mat-autocomplete
+    #auto="matAutocomplete"
     (optionSelected)="onSelectDirection($event.option.value)"
     [displayWith] = "optionDisplay">
     <mat-option *ngFor="let direction of filteredDirections$ | async" [value]="direction" class="dropdown-option">
       {{ direction.title }}
     </mat-option>
 </mat-autocomplete>
 
-  <app-validation-hint-for-input 
-    type = "requiredField" 
+  <app-validation-hint-for-input
+    type = "requiredField"
     [invalid] = "CategoryFormGroup.get('directionId').invalid && CategoryFormGroup.get('directionId').touched">
-  </app-validation-hint-for-input> 
+  </app-validation-hint-for-input>
 
   <ng-container *ngIf="(departments$ | async)?.length">
-    <input  matInput  type="text" 
-          placeholder="Почніть вводити відділ або виберіть зі списку"  class="step-input"
+    <input  matInput  type="text"
+          placeholder="Почніть вводити відділ або виберіть зі списку"
+          class="step-input direction-step"
           [formControl]="departmentsFormControl"
           [matAutocomplete]="autoDepartment"
           disableOptionCentering panelClass="dropdown-panel"
     >
-  <mat-autocomplete 
-    #autoDepartment="matAutocomplete" 
+  <mat-autocomplete
+    #autoDepartment="matAutocomplete"
     (optionSelected)="onSelectDepartment($event.option.value)"
     [displayWith] = "optionDisplayDepartment">
     <mat-option *ngFor="let department of filteredDepartments$ | async" [value]="department" class="dropdown-option">
@@ -36,20 +38,21 @@
   </mat-autocomplete>
 </ng-container>
 
-<app-validation-hint-for-input 
-type = "requiredField" 
+<app-validation-hint-for-input
+type = "requiredField"
 [invalid] = "CategoryFormGroup.get('departmentId').invalid && CategoryFormGroup.get('departmentId').touched">
-</app-validation-hint-for-input> 
+</app-validation-hint-for-input>
 
 <ng-container *ngIf="(classes$ | async)?.length">
-  <input  matInput  type="text" 
-          placeholder="Почніть вводити клас або виберіть зі списку"  class="step-input"
+  <input  matInput  type="text"
+          placeholder="Почніть вводити клас або виберіть зі списку"
+          class="step-input direction-step"
           [formControl]="classesFormControl"
           [matAutocomplete]="autoClasses"
           disableOptionCentering panelClass="dropdown-panel"
   >
-  <mat-autocomplete 
-    #autoClasses="matAutocomplete" 
+  <mat-autocomplete
+    #autoClasses="matAutocomplete"
     (optionSelected)="onSelectClasses($event.option.value)"
     [displayWith] = "optionDisplayClass"
     >
@@ -59,9 +62,9 @@
 </mat-autocomplete>
 </ng-container>
 
-<app-validation-hint-for-input 
-type = "requiredField" 
+<app-validation-hint-for-input
+type = "requiredField"
 [invalid] = "CategoryFormGroup.get('classId').invalid && CategoryFormGroup.get('classId').touched">
-</app-validation-hint-for-input> 
+</app-validation-hint-for-input>
 
-</form>
+</form>
diff --git a/src/app/shared/components/category-select/category-select.component.scss b/src/app/shared/components/category-select/category-select.component.scss
@@ -32,22 +32,22 @@ input:focus::placeholder {
   margin-bottom: none !important;
 }
 
-::ng-deep .mat-input-element{
+::ng-deep .mat-input-element.direction-step {
   padding: 0.5rem 1rem !important;
 }
 
 ::ng-deep .mat-option-ripple:hover{
   background: lightgray;
 }
 
-::ng-deep .dropdown-option .mat-option-text{
+::ng-deep .dropdown-option .mat-option-text {
   padding-left: 1rem !important;
   font-family: Roboto, "Helvetica Neue", sans-serif;
 
-  
+
 }
 
-::ng-deep .mat-option{
+::ng-deep .mat-option {
   padding: 0 !important;
   min-width: 425px;
 }

diff --git a/src/app/shared/styles/create-form.scss b/src/app/shared/styles/create-form.scss
@@ -20,6 +20,7 @@
 
     &-date{
     width: 35%;
+    min-width: 182px;
     padding: 0.1rem 1rem;
     }
 
@@ -40,7 +41,7 @@
     border: 1px solid #E3E3E3;
     box-sizing: border-box;
     border-radius: 21px;
-    padding: 1.2rem;
+    padding: 1.1rem;
     &-short{
       height: 100px;
       margin-top: 1rem;