Fix comments and sponsors from overflowing + Standardize site headers…

… in social/analytics (#306)
BesLogic · Nov 28, 2024 · e053f69 · e053f69
1 parent 5e9af52
commit e053f69
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 79 deletions.
diff --git a/canopeum_frontend/src/assets/styles/muiCustomTheme.ts b/canopeum_frontend/src/assets/styles/muiCustomTheme.ts
@@ -22,6 +22,13 @@ const muiCustomTheme = createTheme({
     },
   },
   components: {
+    MuiDialog: {
+      styleOverrides: {
+        root: {
+          wordWrap: 'break-word', // Same as .card
+        },
+      },
+    },
     MuiDialogActions: {
       styleOverrides: {
         spacing: {

diff --git a/canopeum_frontend/src/components/SiteHeaderSponsors.tsx b/canopeum_frontend/src/components/SiteHeaderSponsors.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next'
+
+import BatchSponsorLogo from '@components/batches/BatchSponsorLogo'
+import type { BatchSponsor } from '@services/api'
+
+type Props = {
+  readonly sponsors: BatchSponsor[],
+}
+
+const SiteHeaderSponsors = (props: Props) => {
+  const { t } = useTranslation<'analytics'>()
+
+  return (
+    <div className='d-flex flex-wrap gap-2 align-items-center'>
+      <label className='fw-bold'>
+        <span className='material-symbols-outlined align-bottom'>group</span>
+        <span className='ms-1'>{t('analyticsSite.sponsors')}:</span>
+      </label>
+      <div className='d-flex flex-wrap gap-4'>
+        {props.sponsors.map(sponsor => <BatchSponsorLogo key={sponsor.id} sponsor={sponsor} />)}
+      </div>
+    </div>
+  )
+}
+
+export default SiteHeaderSponsors
diff --git a/canopeum_frontend/src/components/analytics/AnalyticsSiteHeader.tsx b/canopeum_frontend/src/components/analytics/AnalyticsSiteHeader.tsx
@@ -5,10 +5,11 @@ import { useTranslation } from 'react-i18next'
 
 import SiteCountBadge from '@components/analytics/SiteCountBadge'
 import SiteSponsorProgress from '@components/analytics/SiteSponsorProgress'
-import BatchSponsorLogo from '@components/batches/BatchSponsorLogo'
 import { LanguageContext } from '@components/context/LanguageContext'
-import CustomIconBadge from '@components/CustomIconBadge'
+import IconBadge from '@components/IconBadge'
+import SiteHeaderSponsors from '@components/SiteHeaderSponsors'
 import { getImageNameByWMOCategories } from '@constants/weatherImageMap'
+import { getSiteTypeIconKey } from '@models/SiteType'
 import type { SiteSummaryDetail } from '@services/api'
 
 type Props = {
@@ -50,16 +51,17 @@ const AnalyticsSiteHeader = ({ siteSummary }: Props) => {
         </div>
       </div>
 
-      <div className='site-info-container pb-4 pt-5 px-5 flex-grow-1'>
+      <div className='card-body d-flex flex-column gap-4'>
         <div>
-          <h2>{siteSummary.name}</h2>
-          <div className='d-flex align-items-center'>
-            <CustomIconBadge icon='siteTypeCanopeumIcon' />
-            <span className='ms-2'>{translateValue(siteSummary.siteType)}</span>
+          <h1 className='card-title mb-0'>{siteSummary.name}</h1>
+          <div className='d-flex align-items-center gap-2'>
+            <IconBadge iconKey={getSiteTypeIconKey(siteSummary.siteType.id)} />
+            {/* <CustomIconBadge icon='siteTypeCanopeumIcon' /> */}
+            <h4 className='fw-bold text-primary mb-0'>{translateValue(siteSummary.siteType)}</h4>
           </div>
         </div>
 
-        <div className='row mt-4 row-gap-3'>
+        <div className='row row-gap-3'>
           <SiteCountBadge
             count={siteSummary.plantCount}
             icon='sitePlantedIcon'
@@ -82,22 +84,9 @@ const AnalyticsSiteHeader = ({ siteSummary }: Props) => {
           />
         </div>
 
-        <div
-          className='d-flex align-items-center fw-bold overflow-x-auto pb-2 mt-4'
-          style={{ maxWidth: '800px' }} // TODO: Magic number
-        >
-          <span className='material-symbols-outlined'>group</span>
-          <span className='ms-1 me-2'>{translate('analyticsSite.sponsors')}:</span>
-          <div className='d-flex gap-4'>
-            {siteSummary.sponsors.map(sponsor => (
-              <BatchSponsorLogo key={sponsor.id} sponsor={sponsor} />
-            ))}
-          </div>
-        </div>
+        <SiteSponsorProgress progress={siteSummary.sponsorProgress} />
 
-        <div className='mt-1'>
-          <SiteSponsorProgress progress={siteSummary.sponsorProgress} />
-        </div>
+        <SiteHeaderSponsors sponsors={siteSummary.sponsors} />
       </div>
     </div>
   )

diff --git a/canopeum_frontend/src/components/social/PostComment.tsx b/canopeum_frontend/src/components/social/PostComment.tsx
@@ -47,7 +47,7 @@ const PostComment = ({ comment, onDelete, siteId }: Props) => {
       </div>
 
       <div className='mt-1'>
-        <span>{comment.body}</span>
+        {comment.body}
       </div>
     </div>
   )

diff --git a/canopeum_frontend/src/components/social/SiteSocialHeader.scss b/canopeum_frontend/src/components/social/SiteSocialHeader.scss
@@ -21,7 +21,7 @@
     .site-social-image {
       border-radius: $border-radius 0 0 $border-radius;
       min-width: 256px;
-      flex-basis: 25%;
+      flex-basis: 33%;
       height: unset;
     }
   }

diff --git a/canopeum_frontend/src/components/social/SiteSocialHeader.tsx b/canopeum_frontend/src/components/social/SiteSocialHeader.tsx
@@ -3,11 +3,11 @@ import './SiteSocialHeader.scss'
 import { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import BatchSponsorLogo from '@components/batches/BatchSponsorLogo'
 import { AuthenticationContext } from '@components/context/AuthenticationContext'
 import { LanguageContext } from '@components/context/LanguageContext'
 import IconBadge from '@components/IconBadge'
 import ToggleSwitch from '@components/inputs/ToggleSwitch'
+import SiteHeaderSponsors from '@components/SiteHeaderSponsors'
 import useApiClient from '@hooks/ApiClientHook'
 import type { PageViewMode } from '@models/PageViewMode.type'
 import { getSiteTypeIconKey } from '@models/SiteType'
@@ -84,66 +84,53 @@ const SiteSocialHeader = ({ site, viewMode }: Props) => {
           }}
         />
 
-        <div className='card-body'>
-          <div className='d-flex flex-row justify-content-between align-items-start gap-3'>
-            <h1 className='fw-bold card-title'>{site.name}</h1>
+        <div className='card-body d-flex flex-column gap-4'>
+          <div>
+            <div className='d-flex flex-row justify-content-between align-items-center gap-3'>
+              <h1 className='card-title mb-0'>{site.name}</h1>
 
-            <div className='
+              <div className='
               d-flex
               align-items-center
               column-gap-3
               row-gap-2
               flex-wrap
               justify-content-end'>
-              {viewMode === 'admin' && (
-                <ToggleSwitch
-                  additionalClassNames='fs-4'
-                  checked={isPublic}
-                  onChange={toggleSitePublicStatus}
-                  text={translate('social.site-social-header.public')}
-                />
-              )}
-
-              {currentUser
-                && currentUser.role !== 'MegaAdmin'
-                && isFollowing !== undefined
-                && (
-                  <button
-                    className='btn btn-secondary'
-                    onClick={onFollowClick}
-                    type='button'
-                  >
-                    {isFollowing
-                      ? translate('social.site-social-header.unfollow')
-                      : translate('social.site-social-header.follow')}
-                  </button>
+                {viewMode === 'admin' && (
+                  <ToggleSwitch
+                    additionalClassNames='fs-4'
+                    checked={isPublic}
+                    onChange={toggleSitePublicStatus}
+                    text={translate('social.site-social-header.public')}
+                  />
                 )}
+
+                {currentUser
+                  && currentUser.role !== 'MegaAdmin'
+                  && isFollowing !== undefined
+                  && (
+                    <button
+                      className='btn btn-secondary'
+                      onClick={onFollowClick}
+                      type='button'
+                    >
+                      {isFollowing
+                        ? translate('social.site-social-header.unfollow')
+                        : translate('social.site-social-header.follow')}
+                    </button>
+                  )}
+              </div>
             </div>
-          </div>
 
-          <div className='card-text d-flex flex-row align-items-center gap-1'>
-            <IconBadge iconKey={getSiteTypeIconKey(site.siteType.id)} />
-            <h4 className='fw-bold text-primary mb-0'>{translateValue(site.siteType)}</h4>
+            <div className='d-flex align-items-center gap-2'>
+              <IconBadge iconKey={getSiteTypeIconKey(site.siteType.id)} />
+              <h4 className='fw-bold text-primary mb-0'>{translateValue(site.siteType)}</h4>
+            </div>
           </div>
 
           <p className='card-text mt-2'>{site.description ?? ''}</p>
 
-          <div className='fw-bold'>
-            <div className='mb-2'>
-              <span className='material-symbols-outlined align-middle'>person</span>
-              <span>{translate('social.site-social-header.sponsors')}:</span>
-            </div>
-            <div className='row'>
-              {site.sponsors.map(sponsor => (
-                <div
-                  className='col-12 col-sm-6 col-md-4 col-lg-3 mb-3'
-                  key={`site-${site.id}-sponsor-${sponsor.id}`}
-                >
-                  <BatchSponsorLogo sponsor={sponsor} />
-                </div>
-              ))}
-            </div>
-          </div>
+          <SiteHeaderSponsors sponsors={site.sponsors} />
         </div>
       </div>
     </div>

diff --git a/canopeum_frontend/src/locale/en/analyticsSite.ts b/canopeum_frontend/src/locale/en/analyticsSite.ts
@@ -3,9 +3,8 @@ export default {
   'batch-tracking': 'Batch Tracking',
   'site-tabs': {
     analytics: 'Analytics',
-    social: 'Social',
+    social: 'Social Page',
   },
-  'social-page': 'Social Page',
   sponsors: 'Sponsors',
   'add-new-batch': 'Add a New Batch',
   'edit-batch': 'Edit Batch',

diff --git a/canopeum_frontend/src/locale/en/social.ts b/canopeum_frontend/src/locale/en/social.ts
@@ -2,7 +2,6 @@ export default {
   'site-social-header': {
     follow: 'Follow',
     unfollow: 'Unfollow',
-    sponsors: 'Sponsors',
     public: 'Public',
   },
   comments: {

diff --git a/canopeum_frontend/src/locale/fr/analyticsSite.ts b/canopeum_frontend/src/locale/fr/analyticsSite.ts
@@ -5,10 +5,9 @@ export default {
   'batch-tracking': 'Suivi des lots',
   'site-tabs': {
     analytics: 'Analytique',
-    social: 'Social',
+    social: 'Page Social',
   },
-  'social-page': 'Page Sociale',
-  sponsors: 'Sponsors',
+  sponsors: 'Commenditaires',
   'add-new-batch': 'Ajouter un Nouveau Lot',
   'edit-batch': 'Modifier un Lot',
   'delete-batch': {

diff --git a/canopeum_frontend/src/locale/fr/social.ts b/canopeum_frontend/src/locale/fr/social.ts
@@ -4,7 +4,6 @@ export default {
   'site-social-header': {
     follow: 'Suivre',
     unfollow: 'Ne plus suivre',
-    sponsors: 'Commanditaires',
     public: 'Publique',
   },
   comments: {
-Original file line number
+Diff line change
@@ Expand Up @@
           </div>
           <div className='mt-1'>
-            <span>{comment.body}</span>
+            {comment.body}
           </div>
         </div>
       )
@@ Expand Down @@