SiteSummaryCard Code cleanup (#71)

Co-authored-by: Samuel Poirier <[email protected]> Co-authored-by: Olivier B <[email protected]>
BesLogic · Mar 24, 2024 · fee5359 · fee5359
1 parent 2bf7d29
commit fee5359
Show file tree

Hide file tree

Showing 10 changed files with 270 additions and 68 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -16,7 +16,17 @@
 	"features": {
 		"ghcr.io/devcontainers/features/node:1": {}
 	},
-  "runArgs": ["--env-file",".devcontainer/devcontainer.env"]
+"runArgs": [
+	"--env-file",
+	".devcontainer/devcontainer.env"
+],
+"customizations": {
+	"vscode": {
+		"extensions": [
+			"dprint.dprint"
+		]
+	}
+}
 	// Configure tool-specific properties.
 	// "customizations": {},
 

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -97,7 +97,7 @@
   "[dockerfile]": {
     "editor.defaultFormatter": "dprint.dprint"
   },
-  "dprint.path": "canopeum_frontend/node_modules/dprint/dprint.exe",
+  "dprint.path": "canopeum_frontend/node_modules/dprint/dprint",
   "typescript.tsdk": "canopeum_frontend/node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "js/ts.implicitProjectConfig.checkJs": true,

diff --git a/canopeum_frontend/package-lock.json b/canopeum_frontend/package-lock.json
diff --git a/canopeum_frontend/package.json b/canopeum_frontend/package.json
@@ -37,6 +37,7 @@
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-react": "^4.2.1",
+    "dprint": "^0.45.0",
     "eslint-config-beslogic": "^1.6.5",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.1",

diff --git a/canopeum_frontend/src/components/PrimaryIconBadge.tsx b/canopeum_frontend/src/components/PrimaryIconBadge.tsx
@@ -0,0 +1,38 @@
+type Props = {
+  readonly type: 'account_circle'
+  | 'add_a_photo'
+  | 'add'
+  | 'cancel'
+  | 'donut_small'
+  | 'eco'
+  | 'edit_square'
+  | 'forest'
+  | 'home_work'
+  | 'home'
+  | 'location_on'
+  | 'mail'
+  | 'mood'
+  | 'perm_phone_msg'
+  | 'person'
+  | 'pin_drop'
+  | 'psychiatry'
+  | 'school'
+  | 'smart_display'
+  | 'sms'
+  | 'source_environment'
+  | 'workspaces'
+}
+
+const PrimaryIconBadge = (props: Props) => (
+  <div className='text-bg-primary text-center rounded-circle'
+    style={{ height: '2em', width: '2em' }}>
+    <span
+      className='material-symbols-outlined text-light align-middle'
+      style={{ fontSize: 24, marginTop: '0.15em' }}
+    >
+      {props.type}
+    </span>
+  </div>
+)
+
+export default PrimaryIconBadge
diff --git a/canopeum_frontend/src/components/site/SiteSummaryCard.tsx b/canopeum_frontend/src/components/site/SiteSummaryCard.tsx
@@ -1,36 +1,37 @@
 import headerLogo from '@assets/images/map/MARR4059.png'
-
-import type { SiteSocial } from '../../services/api'
+import PrimaryIconBadge from '@components/PrimaryIconBadge'
+import type { SiteSocial } from '@services/api'
 
 type Props = {
   readonly site: SiteSocial,
 }
 
 const SiteSummaryCard = ({ site }: Props) => (
-  <div className='bg-white rounded-4 d-flex flex-row gap-0'>
-    {/* TODO: replace img source when backend offers an image endpoint */}
-    <img alt='header logo' height={352} src={headerLogo} width={553} />
-    <div className='d-flex flex-column px-5 py-5'>
-      <h1 className='fw-bold'>{site.name}</h1>
-
-      <div className='d-flex flex-row gap-1'>
-        <div className='text-bg-primary rounded-4 text=center h-75 px-1'>
-          <span
-            className='material-symbols-outlined text-light align-middle'
-            style={{ width: 21, fontSize: 24, marginLeft: -2, marginRight: 2 }}
-          >
-            school
-          </span>
-        </div>
-        <h4 className='fw-bold text-primary'>{site.type.en}</h4>
+  <div className='card mb-3'>
+    <div className='row g-0'>
+      <div className='col-md-4'>
+        {/* TODO: replace img source when backend offers an image endpoint */}
+        <img alt='header logo' className='img-fluid' src={headerLogo} />
       </div>
-      <p>{site.description ?? ''}</p>
-      <div className='container'>
-        <div className='row row-cols-5 fw-bold'>
-          <div className='col'>
-            <span className='material-symbols-outlined align-middle'>person</span>Sponsors:
+      <div className='col-md-8'>
+        <div className='card-body'>
+          <h1 className='fw-bold card-title'>{site.name}</h1>
+          <div className='card-text d-flex flex-row gap-1'>
+            <PrimaryIconBadge type='school' />
+            <h4 className='fw-bold text-primary'>{site.type.en}</h4>
+          </div>
+          <p className='card-text'>{site.description ?? ''}</p>
+          <div className='container fw-bold'>
+            <div className='mb-2'>
+              <span className='material-symbols-outlined align-middle'>person</span>
+              <span>Sponsors:</span>
+            </div>
+            <div className='row'>
+              {site.sponsors.map(sponsorName => (
+                <div className='col-12 col-sm-6 col-md-4 col-lg-3 mb-3' key={sponsorName}>{sponsorName}</div>
+              ))}
+            </div>
           </div>
-          {site.sponsors.map(sponsorName => <div className='col' key={sponsorName}>{sponsorName}</div>)}
         </div>
       </div>
     </div>