From ae6ac90c53c174cbbbbf7fc4d4dfc44776173d2e Mon Sep 17 00:00:00 2001
From: Eric Schultz
Date: Sun, 11 Jun 2023 20:50:22 -0500
Subject: [PATCH] Use flexbox in wizard
---
.../stylesheets/common/layouts.css.scss | 34 +++++++++++--------
.../legacy/nonprofits/donate/amount-step.js | 8 ++---
.../recurring_donations/edit/amount-step.js | 8 ++---
app/views/nonprofits/donate/_amount.html.erb | 2 +-
4 files changed, 29 insertions(+), 23 deletions(-)
diff --git a/app/assets/stylesheets/common/layouts.css.scss b/app/assets/stylesheets/common/layouts.css.scss
index 4b6e7bfd1..cba23dfb0 100644
--- a/app/assets/stylesheets/common/layouts.css.scss
+++ b/app/assets/stylesheets/common/layouts.css.scss
@@ -101,9 +101,9 @@ Full license explanation at https://github.com/houdiniproject/houdini/blob/main/
.fieldsLayout--three {
@include fieldsLayout;
& > .field { width: 33.333%; }
- & > .field:nth-of-type(3n -2) { padding: 0 10px 0 0; }
- & > .field:nth-of-type(3n -1) { padding: 0 5px; }
- & > .field:nth-of-type(3n) { padding:0 0 0 10px; }
+ // & > .field:nth-of-type(3n -2) { padding: 0 10px 0 0; }
+ // & > .field:nth-of-type(3n -1) { padding: 0 5px; }
+ // & > .field:nth-of-type(3n) { padding:0 0 0 10px; }
}
.fieldsLayout--four {
@@ -127,14 +127,14 @@ Full license explanation at https://github.com/houdiniproject/houdini/blob/main/
}
@mixin fieldsetLayout {
- clear: both;
- overflow: auto;
- fieldset {
- display: inline-block;
- float: left;
- margin-left: 0;
- margin-right: 0;
- }
+ // clear: both;
+ // overflow: auto;
+ // fieldset {
+ // display: inline-block;
+ // float: left;
+ // margin-left: 0;
+ // margin-right: 0;
+ // }
}
@@ -167,9 +167,15 @@ Full license explanation at https://github.com/houdiniproject/houdini/blob/main/
.fieldsetLayout--three--evenPadding {
@include fieldsetLayout;
- fieldset {
- width: 33.33% !important;
- padding: 0 5px;
+ display: flex;
+ align-content: stretch;
+ row-gap: 10px;
+ column-gap: 10px;
+ flex-wrap: wrap;
+ justify-items: stretch;
+
+ > * {
+ flex: 1 1 25%;
}
}
diff --git a/app/javascript/legacy/nonprofits/donate/amount-step.js b/app/javascript/legacy/nonprofits/donate/amount-step.js
index c528bcea8..6dd18b14b 100644
--- a/app/javascript/legacy/nonprofits/donate/amount-step.js
+++ b/app/javascript/legacy/nonprofits/donate/amount-step.js
@@ -142,9 +142,9 @@ function composeTranslation(full, bold) {
// All the buttons and the custom input for the amounts to select
function amountFields(state) {
if(state.params$().single_amount) return ''
- return h('div.u-inline.fieldsetLayout--three--evenPadding', [
- h('span',
- R.map(
+ return h('div.fieldsetLayout--three--evenPadding', [
+
+ ...R.map(
amt => h('fieldset', [
h('button.button.u-width--full.white.amount', {
class: {'is-selected': state.buttonAmountSelected$() && state.donation$().amount === amt*100}
@@ -159,7 +159,7 @@ function amountFields(state) {
])
])
, state.params$().custom_amounts || [] )
- )
+
, h('fieldset.' + prependCurrencyClassname(), [
h('input.amount.other', {
props: {name: 'amount', step: 'any', type: 'number', min: 1, placeholder: I18n.t('nonprofits.donate.amount.custom')}
diff --git a/app/javascript/legacy/recurring_donations/edit/amount-step.js b/app/javascript/legacy/recurring_donations/edit/amount-step.js
index c6a793155..ec6214f33 100644
--- a/app/javascript/legacy/recurring_donations/edit/amount-step.js
+++ b/app/javascript/legacy/recurring_donations/edit/amount-step.js
@@ -69,9 +69,9 @@ function chooseNewDonationAmount() {
// All the buttons and the custom input for the amounts to select
function amountFields(state) {
if(state.params$().single_amount) return ''
- return h('div.u-inline.fieldsetLayout--three--evenPadding', [
- h('span',
- R.map(
+ return h('div.fieldsetLayout--three--evenPadding', [
+
+ ...R.map(
amt => h('fieldset', [
h('button.button.u-width--full.white.amount', {
class: {'is-selected': state.buttonAmountSelected$() && state.donation$().amount === amt*100}
@@ -86,7 +86,7 @@ function amountFields(state) {
])
])
, state.params$().custom_amounts || [] )
- )
+
, h('fieldset.prepend--dollar', [
h('input.amount', {
props: {name: 'amount', step: 'any', type: 'number', min: 1, placeholder: 'Custom'}
diff --git a/app/views/nonprofits/donate/_amount.html.erb b/app/views/nonprofits/donate/_amount.html.erb
index bddacb1bf..c55014473 100644
--- a/app/views/nonprofits/donate/_amount.html.erb
+++ b/app/views/nonprofits/donate/_amount.html.erb
@@ -36,7 +36,7 @@
Select an amount for your monthly contribution
-