From 90cb89ffa26b83892875b4a02f2d5ecc378bc70d Mon Sep 17 00:00:00 2001
From: jerem <jeremy.peglion@gmail.com>
Date: Wed, 20 Nov 2024 16:24:55 +0100
Subject: [PATCH] refactor(openalex): simplify RorBadge component and improve
 layout in ListView

---
 .../openalex-ror/components/ror-badge_old.jsx | 12 ++----
 .../openalex-ror/components/works-list.jsx    |  2 +-
 .../pages/openalex-ror/results/list-view.jsx  | 42 +++++++++++--------
 3 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/client/src/pages/openalex-ror/components/ror-badge_old.jsx b/client/src/pages/openalex-ror/components/ror-badge_old.jsx
index a55d437..ef3b411 100644
--- a/client/src/pages/openalex-ror/components/ror-badge_old.jsx
+++ b/client/src/pages/openalex-ror/components/ror-badge_old.jsx
@@ -15,18 +15,14 @@ export default function RorBadge({ isRemoved, ror, setFilteredAffiliationName, r
       </div>
       {isRemoved ? (
         <strike>
-          https://ror.org/
           <Link href={`https://ror.org/${ror.rorId}`} target="_blank" style={{ fontFamily: 'monospace' }}>
-            {` ${ror.rorId}`}
+            {`https://ror.org/${ror.rorId}`}
           </Link>
         </strike>
       ) : (
-        <>
-          https://ror.org/
-          <Link href={`https://ror.org/${ror.rorId}`} target="_blank" style={{ fontFamily: 'monospace' }}>
-            {` ${ror.rorId}`}
-          </Link>
-        </>
+        <Link href={`https://ror.org/${ror.rorId}`} target="_blank" style={{ fontFamily: 'monospace' }}>
+          {`https://ror.org/${ror.rorId}`}
+        </Link>
       )}
       <button
         type="button"
diff --git a/client/src/pages/openalex-ror/components/works-list.jsx b/client/src/pages/openalex-ror/components/works-list.jsx
index 9007b3e..da2e609 100644
--- a/client/src/pages/openalex-ror/components/works-list.jsx
+++ b/client/src/pages/openalex-ror/components/works-list.jsx
@@ -6,7 +6,7 @@ export default function WorksList({ works }) {
 
   const _works = showMore ? works : works.slice(0, 5);
   return (
-    <Text size="sm" className="fr-mt-1w fr-pl-1w" style={{ borderLeft: '5px solid #aaa' }}>
+    <Text size="sm" className="fr-my-1w fr-pl-1w" style={{ borderLeft: '5px solid #aaa' }}>
       <i>
         <span className="fr-mr-1w">
           works:
diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
index 44b9384..e53420c 100644
--- a/client/src/pages/openalex-ror/results/list-view.jsx
+++ b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -32,25 +32,31 @@ export default function ListView({
         allAffiliations.map((affiliation) => (
           <li key={affiliation.key}>
             <Row>
-              <Col md={1}>
-                <input
-                  id={`affiliation-${affiliation.key}`}
-                  type="checkbox"
-                  checked={selectedOpenAlex.includes(affiliation)}
-                  onChange={(e) => {
-                    if (e.target.checked) {
-                      setSelectedOpenAlex([...selectedOpenAlex, affiliation]);
-                    } else {
-                      setSelectedOpenAlex(selectedOpenAlex.filter((a) => a.key !== affiliation.key));
-                    }
-                  }}
-                />
-              </Col>
               <Col>
-                <Text as="label" htmlFor={`affiliation-${affiliation.key}`}>
-                  <div dangerouslySetInnerHTML={{ __html: affiliation.nameHtml }} />
-                </Text>
-                <WorksList works={affiliation.works} />
+                <div style={{ display: 'inline-flex' }}>
+
+                  <div style={{ display: 'inline-block', width: '20px' }}>
+                    <input
+                      id={`affiliation-${affiliation.key}`}
+                      type="checkbox"
+                      checked={selectedOpenAlex.includes(affiliation)}
+                      onChange={(e) => {
+                        if (e.target.checked) {
+                          setSelectedOpenAlex([...selectedOpenAlex, affiliation]);
+                        } else {
+                          setSelectedOpenAlex(selectedOpenAlex.filter((a) => a.key !== affiliation.key));
+                        }
+                      }}
+                    />
+                  </div>
+                  <div style={{ display: 'inline-block', maxWidth: '95%' }}>
+
+                    <Text as="label" htmlFor={`affiliation-${affiliation.key}`}>
+                      <div dangerouslySetInnerHTML={{ __html: affiliation.nameHtml }} />
+                    </Text>
+                    <WorksList works={affiliation.works} />
+                  </div>
+                </div>
               </Col>
               <Col md={4}>
                 <table className="wm-table">