JoeKung/print-calculator
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(front-enc):
All checks were successful
Build, Test and Deploy / test-backend (push) Successful in 34s
Details
Build, Test and Deploy / build-and-push (push) Successful in 23s
Details
Build, Test and Deploy / deploy (push) Successful in 9s
Details

Browse Source
This commit is contained in:
Joe Küng
2026-02-20 17:47:34 +01:00
parent 1d82230564
commit c3f9539988
4 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/features/payment/payment.component.html
View File

@@ -28,7 +28,7 @@
</div> </div>
</div> </div>
<div class="payment-details fade-in" *ngIf="selectedPaymentMethod === 'twint'"> <div class="payment-details fade-in text-center" *ngIf="selectedPaymentMethod === 'twint'">
<div class="details-header"> <div class="details-header">
<h4>{{ 'PAYMENT.TWINT_TITLE' | translate }}</h4> <h4>{{ 'PAYMENT.TWINT_TITLE' | translate }}</h4>
</div> </div>
@@ -42,7 +42,7 @@
<p>{{ 'PAYMENT.TWINT_DESC' | translate }}</p> <p>{{ 'PAYMENT.TWINT_DESC' | translate }}</p>
<p class="billing-hint">{{ 'PAYMENT.BILLING_INFO_HINT' | translate }}</p> <p class="billing-hint">{{ 'PAYMENT.BILLING_INFO_HINT' | translate }}</p>
<div class="twint-mobile-action"> <div class="twint-mobile-action">
<app-button (click)="openTwintPayment()" [fullWidth]="true"> <app-button variant="outline" (click)="openTwintPayment()" [fullWidth]="true">
{{ 'PAYMENT.TWINT_OPEN' | translate }} {{ 'PAYMENT.TWINT_OPEN' | translate }}
</app-button> </app-button>
</div> </div>

22
frontend/src/app/features/payment/payment.component.scss
View File

@@ -95,6 +95,28 @@
margin-bottom: var(--space-6); margin-bottom: var(--space-6);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
&.text-center {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
.details-header {
width: 100%;
text-align: center;
}
.qr-placeholder {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
}
.details-header { .details-header {
margin-bottom: var(--space-4); margin-bottom: var(--space-4);
h4 { h4 {

2
frontend/src/app/features/payment/payment.component.ts
View File

@@ -90,7 +90,7 @@ export class PaymentComponent implements OnInit {
openTwintPayment(): void { openTwintPayment(): void {
const openUrl = this.twintOpenUrl(); const openUrl = this.twintOpenUrl();
if (typeof window !== 'undefined' && openUrl) { if (typeof window !== 'undefined' && openUrl) {
window.location.href = openUrl; window.open(openUrl, '_blank');
} }
} }

10
frontend/src/app/shared/components/app-button/app-button.component.scss
View File

@@ -32,12 +32,14 @@
.btn-outline { .btn-outline {
background-color: transparent; background-color: transparent;
border-color: var(--color-border); border-color: var(--color-brand);
color: var(--color-text); border-width: 2px;
padding: calc(0.5rem - 1px) calc(1rem - 1px);
color: var(--color-neutral-900);
font-weight: 600;
&:hover:not(:disabled) { &:hover:not(:disabled) {
border-color: var(--color-brand); background-color: var(--color-brand);
color: var(--color-neutral-900); color: var(--color-neutral-900);
background-color: rgba(250, 207, 10, 0.1); /* Low opacity brand color */
} }
} }