Fix content overflowing responsive issue in MapSwipe Stats page

hotosm · Oct 21, 2024 · f10eae6 · f10eae6
1 parent bc4d753
commit f10eae6
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 27 deletions.
diff --git a/frontend/src/components/partnerMapswipeStats/overview.js b/frontend/src/components/partnerMapswipeStats/overview.js
@@ -86,7 +86,7 @@ export const Overview = () => {
         {data?.nameInsideProvider}
       </h3>
       <div
-        className="flex justify-between items-stretch flex-wrap flex-nowrap-ns"
+        className="flex justify-between items-stretch flex-wrap flex-nowrap-l"
         style={{ gap: '1.6rem' }}
       >
         <div

diff --git a/frontend/src/components/partnerMapswipeStats/projectTypeAreaStats.js b/frontend/src/components/partnerMapswipeStats/projectTypeAreaStats.js
@@ -46,7 +46,7 @@ export const ProjectTypeAreaStats = ({
 
   return (
     <div
-      className="flex justify-between items-center flex-wrap flex-nowrap-ns"
+      className="flex justify-between items-center flex-wrap flex-nowrap-l"
       style={{ gap: '1.6rem' }}
     >
       <div className="pa4 flex items-center bg-white shadow-6 w-100" style={{ gap: '1.75rem' }}>

diff --git a/frontend/src/components/partnerMapswipeStats/swipesByOrganization.js b/frontend/src/components/partnerMapswipeStats/swipesByOrganization.js
@@ -80,11 +80,10 @@ export const SwipesByOrganization = ({ contributionsByOrganization = [] }) => {
   }, []);
 
   return (
-    <div style={{ width: '48.5%' }}>
+    <div className="mapswipe-stats-piechart">
       <h3 className="f2 fw6 ttu barlow-condensed blue-dark mt0 pt2 mb4">
         <FormattedMessage {...messages.swipesByOrganization} />
       </h3>
-
       <div className="bg-white pa4 shadow-6 relative" style={{ height: '450px' }}>
         <canvas ref={chartRef}></canvas>
         {contributionsByOrganization.length === 0 && (

diff --git a/frontend/src/components/partnerMapswipeStats/swipesByProjectType.js b/frontend/src/components/partnerMapswipeStats/swipesByProjectType.js
@@ -82,7 +82,7 @@ export const SwipesByProjectType = ({ contributionsByProjectType = [] }) => {
   }, []);
 
   return (
-    <div style={{ width: '48.5%' }}>
+    <div className="mapswipe-stats-piechart">
       <h3 className="f2 fw6 ttu barlow-condensed blue-dark mt0 pt2 mb4">
         <FormattedMessage {...messages.swipesByProjectType} />
       </h3>

diff --git a/frontend/src/views/partnersMapswipeStats.css b/frontend/src/views/partnersMapswipeStats.css
diff --git a/frontend/src/views/partnersMapswipeStats.js b/frontend/src/views/partnersMapswipeStats.js
@@ -19,7 +19,7 @@ import { SwipesByProjectType } from '../components/partnerMapswipeStats/swipesBy
 import { SwipesByOrganization } from '../components/partnerMapswipeStats/swipesByOrganization';
 import messages from './messages';
 import { fetchLocalJSONAPI } from '../network/genericJSONRequest';
-import './partnersMapswipeStats.css';
+import './partnersMapswipeStats.scss';
 
 const PagePlaceholder = () => (
   <div className="bg-tan flex flex-column" style={{ gap: '1.25rem' }}>
@@ -141,24 +141,24 @@ export const PartnersMapswipeStats = () => {
             </div>
 
             <div
-              className="mt4 flex items-center justify-between f1 barlow-condensed"
+              className="mt4 mapswipe-stats-swipes-container f1 barlow-condensed"
               style={{ gap: '1.6rem' }}
             >
-              <div className="pa4 shadow-6 bg-white" style={{ flexBasis: '32.5%' }}>
+              <div className="pa4 shadow-6 bg-white" style={{ flex: '0 0 32.5%' }}>
                 <span className="red fw6">{getSwipes()}</span>
                 <span className="silver fw2 ml3">
                   <FormattedMessage {...messages.swipes} />
                 </span>
               </div>
-              <div className="pa4 shadow-6 bg-white" style={{ flexBasis: '66.5%' }}>
+              <div className="pa4 shadow-6 bg-white" style={{ flexBasis: '100%' }}>
                 <span className="red fw6">{getTimeSpentContributing()}</span>
                 <span className="silver fw2 ml3">
                   <FormattedMessage {...messages.timeSpentContributing} />
                 </span>
               </div>
             </div>
 
-            <div className="mt3 flex items-center justify-between">
+            <div className="mt3 items-center justify-between mapswipe-stats-piechart-container">
               <SwipesByProjectType contributionsByProjectType={data?.contributionsByProjectType} />
               <SwipesByOrganization
                 contributionsByOrganization={data?.contributionsByorganizationName}

diff --git a/frontend/src/views/partnersMapswipeStats.scss b/frontend/src/views/partnersMapswipeStats.scss
@@ -0,0 +1,42 @@
+.mapswipe-stats-info-banner {
+  background-color: #d9d7d7;
+  width: fit-content;
+  margin-left: 20px;
+  border-radius: 3px;
+  &::before {
+    content: '';
+    position: absolute;
+    left: -20px;
+    top: 0;
+    bottom: 0;
+    width: 20px;
+    /* background-color: #d9d7d7; */
+    clip-path: polygon(100% 0, 0 50%, 100% 100%);
+  }
+}
+
+$medium: 960px;
+
+.mapswipe-stats-piechart-container {
+  display: flex;
+  flex-direction: row;
+  @media screen and (max-width: $medium) {
+    flex-direction: column;
+    gap: 2rem;
+  }
+}
+
+.mapswipe-stats-piechart {
+  width: 48.5%;
+  @media screen and (max-width: $medium) {
+    width: 100%;
+  }
+}
+
+.mapswipe-stats-swipes-container {
+  display: flex;
+  flex-direction: row;
+  @media screen and (max-width: $medium) {
+    flex-direction: column;
+  }
+}