refactor(openalex): simplify RorBadge component and improve layout in…

… ListView
dataesr · Nov 20, 2024 · 90cb89f · 90cb89f
1 parent bb61c8f
commit 90cb89f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 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
@@ -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
@@ -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
@@ -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">