feature: add grid to widgets in overview and make it responsive

impress-org · Dec 20, 2024 · ef04b24 · ef04b24
1 parent e327d58
commit ef04b24
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 36 deletions.
diff --git a/...mpaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx b/...mpaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
@@ -55,20 +55,16 @@ const CampaignStats = () => {
     return (
         <>
             <DateRangeFilters selected={dayRange} options={filterOptions} onSelect={onDayRangeChange} />
-            <Row>
-                <Column>
-                    <Row>
-                        <StatWidget label={__('Amount raised')} values={pluck(stats, 'amountRaised')} description={widgetDescription} formatter={currency} />
-                        <StatWidget label={__('Number of donations')} values={pluck(stats, 'donationCount')} description={widgetDescription} />
-                    </Row>
-                    <RevenueWidget />
-                </Column>
-                <Column>
+            <div className={styles.mainGrid}>
+                    <StatWidget label={__('Amount raised')} values={pluck(stats, 'amountRaised')} description={widgetDescription} formatter={currency} />
+                    <StatWidget label={__('Number of donations')} values={pluck(stats, 'donationCount')} description={widgetDescription} />
                     <StatWidget label={__('Number of donors')} values={pluck(stats, 'donorCount')} description={widgetDescription} />
+                    <RevenueWidget />
+                <div className={styles.nestedGrid}>
                     <GoalProgressWidget />
                     <DefaultFormWidget defaultForm={campaign.defaultFormTitle} />
-                </Column>
-            </Row>
+                </div>
+            </div>
         </>
     )
 }
@@ -174,16 +170,4 @@ const DateRangeFilters = ({options, onSelect, selected}) => {
 }
 
 
-const Row = ({children}) => (
-    <div className={styles.row}>
-        {children}
-    </div>
-)
-
-const Column = ({children}) => (
-    <div className={styles.column}>
-        {children}
-    </div>
-)
-
 export default CampaignStats;
diff --git a/...esources/admin/components/CampaignDetailsPage/Components/CampaignStats/styles.module.scss b/...esources/admin/components/CampaignDetailsPage/Components/CampaignStats/styles.module.scss
@@ -50,6 +50,7 @@
     color: var(--givewp-neutral-700);
     font-weight: 600;
     border-radius: var(--givewp-rounded-8);
+    grid-column: span 1;
 }
 
 .statWidget header, .statWidget footer {
@@ -83,6 +84,7 @@
     background-color: var(--givewp-shades-white);
     padding: 20px;
     border-radius: var(--givewp-rounded-8);
+    grid-column: span 2;
 }
 
 .percentChangePill {
@@ -98,20 +100,31 @@
     border-radius: var(--givewp-rounded-8);
 }
 
-.column {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    gap: var(--givewp-spacing-6);
+.mainGrid{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: var(--givewp-spacing-6);
+    column-gap: var(--givewp-spacing-4);
 }
 
-.column:first-child {
-    flex: 2;
+.nestedGrid {
+    grid-column: span 1;
+    display: grid;
+    gap: var(--givewp-spacing-6);
 }
 
-.row {
-    display: flex;
-    flex-direction: row;
-    gap: var(--givewp-spacing-4);
-}
+@media (max-width: 768px) {
+    .mainGrid {
+      grid-template-columns: 1fr;
+      gap: var(--givewp-spacing-3);
+    }
+
+    .revenueWidget {
+      grid-column: span 1;
+    }
+
+    .nestGrid {
+        grid-template-columns: 1fr;
+        gap: var(--givewp-spacing-3);
+    }
+}