Merged PR 427: #1318 Sticky Speichern Button, eine scss Datei für alle Adress-Forms

#1318 Sticky Speichern Button, eine scss Datei für alle Adress-Forms Related work items: #1318
2025-12-28 22:42:11 +01:00 · 2021-01-14 16:44:51 +00:00
parent 5b2e96b113 e157c4ee2c
commit dbb531550b
21 changed files with 21 additions and 173 deletions
--- a/apps/page/customer/src/lib/customer-details/address/payer-create/payer-create.component.scss
+++ b/apps/page/customer/src/lib/customer-details/address/payer-create/payer-create.component.scss
@@ -26,8 +26,9 @@ h1 {
  }
 }

-.center {
-  @apply text-center;
+.submit-wrapper {
+  @apply text-center sticky;
+  bottom: 0px;
 }

 .default-address {
@@ -39,7 +40,7 @@ h1 {
 }

 .create-customer-submit {
-  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full my-8;
+  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full mt-8 my-4;

  &:disabled {
    @apply bg-inactive-branch;
--- a/apps/page/customer/src/lib/customer-details/address/payer-create/payer-create-b2b.component.html
+++ b/apps/page/customer/src/lib/customer-details/address/payer-create/payer-create-b2b.component.html
@@ -81,7 +81,7 @@
      <input uiInput type="checkbox" formControlName="isDefault" />
    </ui-form-control>

-    <div class="center">
+    <div class="submit-wrapper">
      <button class="create-customer-submit" type="submit" [disabled]="control.invalid || control.disabled" [ngSwitch]="control.enabled">
        <ng-container *ngSwitchCase="true">
          Speichern
--- a/apps/page/customer/src/lib/customer-details/address/payer-create/payer-create-b2b.component.ts
+++ b/apps/page/customer/src/lib/customer-details/address/payer-create/payer-create-b2b.component.ts
@@ -5,7 +5,7 @@ import { PayerCreateComponent } from './payer-create.component';
@Component({
  selector: 'page-payer-create-b2b',
  templateUrl: 'payer-create-b2b.component.html',
-  styleUrls: ['payer-create.component.scss'],
+  styleUrls: ['../address.component.scss'],
 })
 export class PayerCreateB2BComponent extends PayerCreateComponent {
  initForm(): FormGroup {
--- a/apps/page/customer/src/lib/customer-details/address/payer-create/payer-create-b2c.component.html
+++ b/apps/page/customer/src/lib/customer-details/address/payer-create/payer-create-b2c.component.html
@@ -83,7 +83,7 @@
      <input uiInput type="checkbox" formControlName="isDefault" />
    </ui-form-control>

-    <div class="center">
+    <div class="submit-wrapper">
      <button class="create-customer-submit" type="submit" [disabled]="control.invalid || control.disabled" [ngSwitch]="control.enabled">
        <ng-container *ngSwitchCase="true">
          Speichern
--- a/apps/page/customer/src/lib/customer-details/address/payer-create/payer-create-b2c.component.ts
+++ b/apps/page/customer/src/lib/customer-details/address/payer-create/payer-create-b2c.component.ts
@@ -6,7 +6,7 @@ import { PayerCreateComponent } from './payer-create.component';
@Component({
  selector: 'page-payer-create-b2c',
  templateUrl: 'payer-create-b2c.component.html',
-  styleUrls: ['payer-create.component.scss'],
+  styleUrls: ['../address.component.scss'],
 })
 export class PayerCreateB2CComponent extends PayerCreateComponent implements OnInit, OnDestroy {
  formsSubscription: Subscription;
--- a/apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2b.component.html
+++ b/apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2b.component.html
@@ -81,7 +81,7 @@
      <input uiInput type="checkbox" formControlName="isDefault" />
    </ui-form-control>

-    <div class="center">
+    <div class="submit-wrapper">
      <button class="create-customer-submit" type="submit" [disabled]="control.invalid || control.disabled" [ngSwitch]="control.enabled">
        <ng-container *ngSwitchCase="true">
          Speichern
--- a/apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2b.component.ts
+++ b/apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2b.component.ts
@@ -5,7 +5,7 @@ import { PayerEditComponent } from './payer-edit.component';
@Component({
  selector: 'page-payer-create-b2b',
  templateUrl: 'payer-edit-b2b.component.html',
-  styleUrls: ['payer-edit.component.scss'],
+  styleUrls: ['../address.component.scss'],
 })
 export class PayerEditB2BComponent extends PayerEditComponent {
  async initForm() {
--- a/apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2c.component.html
+++ b/apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2c.component.html
@@ -82,7 +82,7 @@
    <ui-form-control class="default-address" label="Als Standardadresse verwenden">
      <input uiInput type="checkbox" formControlName="isDefault" />
    </ui-form-control>
-    <div class="center">
+    <div class="submit-wrapper">
      <button class="create-customer-submit" type="submit" [disabled]="control.invalid || control.disabled" [ngSwitch]="control.enabled">
        <ng-container *ngSwitchCase="true">
          Speichern
--- a/apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2c.component.ts
+++ b/apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2c.component.ts
@@ -6,7 +6,7 @@ import { PayerEditComponent } from './payer-edit.component';
@Component({
  selector: 'page-payer-edit-b2c',
  templateUrl: 'payer-edit-b2c.component.html',
-  styleUrls: ['payer-edit.component.scss'],
+  styleUrls: ['../address.component.scss'],
 })
 export class PayerEditB2CComponent extends PayerEditComponent implements OnDestroy {
  formsSubscription: Subscription;
--- a/apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit.component.scss
+++ b/apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit.component.scss
@@ -1,51 +0,0 @@
-:host {
-  @apply flex flex-col box-border;
-}
-
-.card {
-  @apply bg-white rounded-card p-card;
-}
-
-form {
-  max-width: 650px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-h1 {
-  @apply m-0 text-center;
-  font-size: 26px;
-  margin-top: 27px;
-}
-
-.control-row {
-  @apply flex flex-row gap-8;
-
-  ui-form-control {
-    width: 50%;
-  }
-}
-
-.center {
-  @apply text-center;
-}
-
-.default-address {
-  @apply flex-col justify-around text-cta-l mt-8;
-
-  input {
-    @apply text-cta-l;
-  }
-}
-
-.create-customer-submit {
-  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full my-8;
-
-  &:disabled {
-    @apply bg-inactive-branch;
-  }
-}
-
-.spin {
-  @apply animate-spin;
-}
--- a/apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create-b2b.component.html
+++ b/apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create-b2b.component.html
@@ -96,7 +96,7 @@
      <input uiInput type="checkbox" formControlName="isDefault" />
    </ui-form-control>

-    <div class="center">
+    <div class="submit-wrapper">
      <button class="create-customer-submit" type="submit" [disabled]="control.invalid || control.disabled" [ngSwitch]="control.enabled">
        <ng-container *ngSwitchCase="true">
          Speichern
--- a/apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create-b2b.component.ts
+++ b/apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create-b2b.component.ts
@@ -5,7 +5,7 @@ import { ShippingCreateComponent } from './shipping-create.component';
@Component({
  selector: 'page-shipping-create-b2b',
  templateUrl: 'shipping-create-b2b.component.html',
-  styleUrls: ['shipping-create.component.scss'],
+  styleUrls: ['../address.component.scss'],
 })
 export class ShippingCreateB2BComponent extends ShippingCreateComponent {
  initForm(): FormGroup {
--- a/apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create-b2c.component.html
+++ b/apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create-b2c.component.html
@@ -83,7 +83,7 @@
      <input uiInput type="checkbox" formControlName="isDefault" />
    </ui-form-control>

-    <div class="center">
+    <div class="submit-wrapper">
      <button class="create-customer-submit" type="submit" [disabled]="control.invalid || control.disabled" [ngSwitch]="control.enabled">
        <ng-container *ngSwitchCase="true">
          Speichern
--- a/apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create-b2c.component.ts
+++ b/apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create-b2c.component.ts
@@ -5,7 +5,7 @@ import { ShippingCreateComponent } from './shipping-create.component';
@Component({
  selector: 'page-shipping-create-b2c',
  templateUrl: 'shipping-create-b2c.component.html',
-  styleUrls: ['shipping-create.component.scss'],
+  styleUrls: ['../address.component.scss'],
 })
 export class ShippingCreateB2CComponent extends ShippingCreateComponent {
  initForm(): FormGroup {
--- a/apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create.component.scss
+++ b/apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create.component.scss
@@ -1,51 +0,0 @@
-:host {
-  @apply flex flex-col box-border;
-}
-
-.card {
-  @apply bg-white rounded-card p-card;
-}
-
-form {
-  max-width: 650px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-h1 {
-  @apply m-0 text-center;
-  font-size: 26px;
-  margin-top: 27px;
-}
-
-.control-row {
-  @apply flex flex-row gap-8;
-
-  ui-form-control {
-    width: 50%;
-  }
-}
-
-.center {
-  @apply text-center;
-}
-
-.default-address {
-  @apply flex-col justify-around text-cta-l mt-8;
-
-  input {
-    @apply text-cta-l;
-  }
-}
-
-.create-customer-submit {
-  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full my-8;
-
-  &:disabled {
-    @apply bg-inactive-branch;
-  }
-}
-
-.spin {
-  @apply animate-spin;
-}
--- a/apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2b.component.html
+++ b/apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2b.component.html
@@ -96,7 +96,7 @@
      <input uiInput type="checkbox" formControlName="isDefault" />
    </ui-form-control>

-    <div class="center">
+    <div class="submit-wrapper">
      <button class="create-customer-submit" type="submit" [disabled]="control.invalid || control.disabled" [ngSwitch]="control.enabled">
        <ng-container *ngSwitchCase="true">
          Speichern
--- a/apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2b.component.ts
+++ b/apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2b.component.ts
@@ -5,7 +5,7 @@ import { ShippingEditComponent } from './shipping-edit.component';
@Component({
  selector: 'page-shipping-edit-b2b',
  templateUrl: 'shipping-edit-b2b.component.html',
-  styleUrls: ['shipping-edit.component.scss'],
+  styleUrls: ['../address.component.scss'],
 })
 export class ShippingEditB2BComponent extends ShippingEditComponent {
  async initForm() {
--- a/apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2c.component.html
+++ b/apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2c.component.html
@@ -83,7 +83,7 @@
      <input uiInput type="checkbox" formControlName="isDefault" />
    </ui-form-control>

-    <div class="center">
+    <div class="submit-wrapper">
      <button class="create-customer-submit" type="submit" [disabled]="control.invalid || control.disabled" [ngSwitch]="control.enabled">
        <ng-container *ngSwitchCase="true">
          Speichern
--- a/apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2c.component.ts
+++ b/apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2c.component.ts
@@ -5,7 +5,7 @@ import { ShippingEditComponent } from './shipping-edit.component';
@Component({
  selector: 'page-shipping-edit-b2c',
  templateUrl: 'shipping-edit-b2c.component.html',
-  styleUrls: ['shipping-edit.component.scss'],
+  styleUrls: ['../address.component.scss'],
 })
 export class ShippingEditB2CComponent extends ShippingEditComponent {
  async initForm() {
--- a/apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit.component.scss
+++ b/apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit.component.scss
@@ -1,51 +0,0 @@
-:host {
-  @apply flex flex-col box-border;
-}
-
-.card {
-  @apply bg-white rounded-card p-card;
-}
-
-form {
-  max-width: 650px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-h1 {
-  @apply m-0 text-center;
-  font-size: 26px;
-  margin-top: 27px;
-}
-
-.control-row {
-  @apply flex flex-row gap-8;
-
-  ui-form-control {
-    width: 50%;
-  }
-}
-
-.center {
-  @apply text-center;
-}
-
-.default-address {
-  @apply flex-col justify-around text-cta-l mt-8;
-
-  input {
-    @apply text-cta-l;
-  }
-}
-
-.create-customer-submit {
-  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full my-8;
-
-  &:disabled {
-    @apply bg-inactive-branch;
-  }
-}
-
-.spin {
-  @apply animate-spin;
-}
--- a/apps/ui/select/src/lib/ui-select.component.html
+++ b/apps/ui/select/src/lib/ui-select.component.html
@@ -1,6 +1,6 @@
 <div class="ui-input-wrapper">
  <div class="ui-select-value">{{ label }}</div>
-  <button type="button" class="ui-select-toggle" (click)="toggle()" [disabled]="disabled">
+  <button type="button" class="ui-select-toggle" [disabled]="disabled" (click)="toggle()">
    <ui-icon icon="arrow_head"></ui-icon>
  </button>
 </div>