refactor: keep legacy style when no descriptions to be shown

impress-org · Apr 23, 2024 · befa008 · befa008
1 parent ff26956
commit befa008
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/DonationForms/resources/registrars/templates/fields/Amount/DonationAmountLevels.tsx b/src/DonationForms/resources/registrars/templates/fields/Amount/DonationAmountLevels.tsx
@@ -36,7 +36,11 @@ export default function DonationAmountLevels({
     const allLevels = [...groupedLevels.labeled, ...groupedLevels.unlabeled];
 
     return (
-        <div className={'givewp-fields-amount__levels-container'}>
+        <div
+            className={classNames('givewp-fields-amount__levels-container', {
+                'givewp-fields-amount__levels-container--has-descriptions': groupedLevels.labeled.length > 0,
+            })}
+        >
             {allLevels.map((level, index) => {
                 const label = formatter.format(level.value);
                 const selected = level.value === amount;
@@ -51,7 +55,7 @@ export default function DonationAmountLevels({
                         <button
                             className={classNames('givewp-fields-amount__level', {
                                 'givewp-fields-amount__level--selected': selected,
-                                'givewp-fields-amount__level--description': !hasDescription,
+                                'givewp-fields-amount__level--description': hasDescription,
                             })}
                             type="button"
                             onClick={() => {

diff --git a/src/DonationForms/resources/styles/components/_amount.scss b/src/DonationForms/resources/styles/components/_amount.scss
@@ -113,12 +113,21 @@ $borderColor: #9A9A9A;
     }
 
     &__levels-container {
-        display: flex;
-        flex-wrap: wrap;
+        display: grid;
         gap: var(--givewp-spacing-2);
+        grid-template-rows: repeat(2, 1fr);
         inline-size: 100%;
         list-style: none;
 
+        @media screen and (min-width: variables.$givewp-breakpoint-sm) {
+            grid-template-columns: repeat(3, 1fr);
+        }
+
+        &--has-descriptions {
+            display: flex;
+            flex-wrap: wrap;
+        }
+
         .givewp-fields-amount__level-container {
             display: flex;
             align-items: center;
@@ -137,10 +146,9 @@ $borderColor: #9A9A9A;
 
             .givewp-fields-amount__level {
                 height: 100%;
-                max-width: 144px;
 
                 &--description {
-                    max-width: none;
+                    max-width: 144px;
                 }
             }