tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve responsiveness of checkout payment panel and help sidebar components

Browse Source
This commit is contained in:
ncoronel
2026-08-06 08:53:23 -03:00
parent 4b98df4058
commit 6b9087262a
5 changed files with 55 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/features/store/pages/checkout-page/checkout-payment-step.component.html
View File

@@ -34,7 +34,7 @@
</div>
</section>
<section class="payment-panel d-flex justify-content-end" aria-live="polite">
<section class="payment-panel" aria-live="polite">
@if (isGeneratingIntent()) {
<div class="payment-panel__card" style="text-align: center; padding: 2rem">
<h3 class="payment-panel__title">Cargando información de pago...</h3>

19
src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss
View File

@@ -32,6 +32,11 @@
.payment-methods {
min-width: 0;
@media (max-width: 760px) {
width: min(100%, 300px);
justify-self: center;
}
&__title {
margin: 0 0 1.75rem;
color: #8a8a8a;
@@ -109,8 +114,22 @@
}
.payment-panel {
display: flex;
justify-content: flex-end;
min-width: 0;
> app-checkout-payment-qr,
> app-checkout-payment-transfer,
> app-checkout-payment-telepagos {
display: block;
width: 100%;
max-width: 320px;
}
@media (max-width: 760px) {
justify-content: center;
}
&__card {
width: 100%;
max-width: 320px;