fix: unify budget input fields layout in phone view (#957)

intershop · Jan 7, 2022 · cb4355c · cb4355c
1 parent 4bf9575
commit cb4355c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/...c/app/components/cost-center-buyer-edit-dialog/cost-center-buyer-edit-dialog.component.ts b/...c/app/components/cost-center-buyer-edit-dialog/cost-center-buyer-edit-dialog.component.ts
@@ -48,20 +48,21 @@ export class CostCenterBuyerEditDialogComponent implements OnInit {
           {
             key: 'buyerName',
             type: 'ish-plain-text-field',
-            className: 'col-md-8 col-xs-12',
+            className: 'col-8',
             templateOptions: {
-              labelClass: 'col-md-4',
+              labelClass: 'col-4',
+              fieldClass: 'col-8',
               label: 'account.costcenter.details.buyers.list.header.name',
             },
           },
           {
             key: 'budgetValue',
             type: 'ish-text-input-field',
-            className: 'col-md-8 col-xs-12',
+            className: ' col-6 col-md-8',
             templateOptions: {
               postWrappers: [{ wrapper: 'input-addon', index: -1 }],
               labelClass: 'col-md-4',
-              fieldClass: 'col-md-8',
+              fieldClass: 'col-md-8  pr-0',
               label: 'account.costcenter.details.buyers.dialog.editbudget.budget.label',
               addonLeft: {
                 text: this.appFacade.currencySymbol$(this.buyer?.budget.currency),
@@ -79,7 +80,7 @@ export class CostCenterBuyerEditDialogComponent implements OnInit {
           {
             key: 'budgetPeriod',
             type: 'ish-select-field',
-            className: 'col-md-4 col-xs-12',
+            className: 'col-6 col-md-4',
             templateOptions: {
               fieldClass: 'col-12 label-empty',
               options: FormsService.getCostCenterBudgetPeriodOptions(),

diff --git a/...organization-management/src/app/components/cost-center-form/cost-center-form.component.ts b/...organization-management/src/app/components/cost-center-form/cost-center-form.component.ts
@@ -115,7 +115,7 @@ export class CostCenterFormComponent implements OnInit {
             fieldGroupClassName: 'row',
             fieldGroup: [
               {
-                className: 'col-8',
+                className: 'col-6 col-md-8',
                 key: 'budgetValue',
                 type: 'ish-text-input-field',
                 templateOptions: {
@@ -140,7 +140,7 @@ export class CostCenterFormComponent implements OnInit {
                 },
               },
               {
-                className: 'col-4',
+                className: 'col-6 col-md-4',
                 type: 'ish-select-field',
                 key: 'budgetPeriod',
                 templateOptions: {

diff --git a/...nization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.ts b/...nization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.ts
@@ -95,20 +95,23 @@ export class CostCenterBuyersPageComponent implements OnDestroy, OnInit {
               type: 'ish-checkbox-field',
               key: 'selected',
               defaultValue: false,
-              className: 'col-1 col-sm-2 list-item',
+              className: 'col-1 col-md-2 list-item pb-0',
               templateOptions: {
-                fieldClass: 'offset-md-2 col-3 mt-1',
+                fieldClass: 'offset-md-2 col-2 mt-1',
               },
             },
             {
               key: 'name',
               type: 'ish-plain-text-field',
-              className: 'col-11 col-sm-10 col-md-3 list-item',
+              className: 'col-11 col-sm-10 col-md-3 list-item pb-0',
+              templateOptions: {
+                inputClass: 'col-form-label pb-0',
+              },
             },
             {
               key: 'budgetValue',
               type: 'ish-text-input-field',
-              className: 'col-md-4 list-item',
+              className: 'col-6 col-md-4 list-item',
               templateOptions: {
                 fieldClass: 'col-12',
                 postWrappers: [{ wrapper: 'input-addon', index: -1 }],
@@ -128,7 +131,7 @@ export class CostCenterBuyersPageComponent implements OnDestroy, OnInit {
             {
               key: 'budgetPeriod',
               type: 'ish-select-field',
-              className: 'col-md-3 list-item',
+              className: 'col-6 col-md-3 list-item',
               templateOptions: {
                 fieldClass: 'col-12',
                 options: FormsService.getCostCenterBudgetPeriodOptions(),