feat(openalex): update RorBadge and RorName components for improved s…

…tyling and structure
dataesr · Nov 20, 2024 · bb61c8f · bb61c8f
1 parent 7f7165d
commit bb61c8f
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 49 deletions.
diff --git a/client/src/pages/openalex-ror/components/ror-badge.jsx b/client/src/pages/openalex-ror/components/ror-badge.jsx
@@ -21,14 +21,14 @@ export default function RorBadge({
       {isRemoved ? (
         <strike>
           https://ror.org/
-          <Link href={`https://ror.org/${ror.rorId}`} target="_blank">
+          <Link href={`https://ror.org/${ror.rorId}`} target="_blank" style={{ fontFamily: 'monospace' }}>
             {` ${ror.rorId}`}
           </Link>
         </strike>
       ) : (
         <>
           https://ror.org/
-          <Link href={`https://ror.org/${ror.rorId}`} target="_blank">
+          <Link href={`https://ror.org/${ror.rorId}`} target="_blank" style={{ fontFamily: 'monospace' }}>
             {` ${ror.rorId}`}
           </Link>
         </>

diff --git a/client/src/pages/openalex-ror/components/ror-badge_old.jsx b/client/src/pages/openalex-ror/components/ror-badge_old.jsx
@@ -1,9 +1,7 @@
 import { Link } from '@dataesr/dsfr-plus';
 import PropTypes from 'prop-types';
 
-export default function RorBadge({ ror, setFilteredAffiliationName, rorColor }) {
-  console.log(rorColor, getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`));
-
+export default function RorBadge({ isRemoved, ror, setFilteredAffiliationName, rorColor }) {
   return (
     <div className="wm-ror-badge">
       <span style={{ backgroundColor: getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`) }} />
@@ -15,40 +13,27 @@ export default function RorBadge({ ror, setFilteredAffiliationName, rorColor })
           height="16"
         />
       </div>
-      https://ror.org/
-      <Link href={`https://ror.org/${ror.rorId}`} target="_blank">
-        {` ${ror.rorId}`}
-      </Link>
+      {isRemoved ? (
+        <strike>
+          https://ror.org/
+          <Link href={`https://ror.org/${ror.rorId}`} target="_blank" style={{ fontFamily: 'monospace' }}>
+            {` ${ror.rorId}`}
+          </Link>
+        </strike>
+      ) : (
+        <>
+          https://ror.org/
+          <Link href={`https://ror.org/${ror.rorId}`} target="_blank" style={{ fontFamily: 'monospace' }}>
+            {` ${ror.rorId}`}
+          </Link>
+        </>
+      )}
       <button
         type="button"
         aria-label="filter on this ROR id"
         className="fr-icon fr-fi-filter-line fr-icon--sm"
         onClick={() => setFilteredAffiliationName(ror.rorId)}
       />
-
-      {/* <img
-        alt="ROR logo"
-        className="vertical-middle fr-mx-1w"
-        src="https://raw.githubusercontent.com/ror-community/ror-logos/main/ror-icon-rgb.svg"
-        height="16"
-      />
-      https://ror.org/
-      <Badge
-        className="fr-mr-1w"
-        color={defineRorColor.find((r) => r.ror === ror.rorId)?.color || 'yellow-tournesol'}
-        size="sm"
-      >
-        <Link className="fr-mr-1w" href={`https://ror.org/${ror.rorId}`} target="_blank">
-          {` ${ror.rorId}`}
-        </Link>
-      </Badge>
-      <Button
-        aria-label="filter on this ROR id"
-        icon="filter-line"
-        onClick={() => setFilteredAffiliationName(ror.rorId)}
-        size="sm"
-        variant="text"
-      /> */}
     </div>
   );
 }

diff --git a/client/src/pages/openalex-ror/components/ror-name.jsx b/client/src/pages/openalex-ror/components/ror-name.jsx
@@ -3,17 +3,14 @@ import PropTypes from 'prop-types';
 export default function RorName({ isRemoved, ror }) {
   return (
     <div style={{ display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }}>
-      <img
-        alt={`${ror.rorCountry} flag`}
-        src={`https://flagsapi.com/${ror.rorCountry}/flat/16.png`}
-      />
+      <span className="fr-icon-arrow-right-s-fill" aria-hidden="true" />
       <span
-        className="fr-ml-1w"
+        className="fr-mr-1w"
         style={{
-          width: '300px',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
+          fontSize: '0.8rem',
+          fontStyle: 'italic',
+          width: '100%',
+          wordBreak: 'break-all',
           display: 'inline-block',
         }}
       >
@@ -25,6 +22,10 @@ export default function RorName({ isRemoved, ror }) {
           ror.rorName
         )}
       </span>
+      <img
+        alt={`${ror.rorCountry} flag`}
+        src={`https://flagsapi.com/${ror.rorCountry}/flat/16.png`}
+      />
     </div>
   );
 }

diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -1,8 +1,8 @@
-import { Badge, Button, Col, Link, Row, Text } from '@dataesr/dsfr-plus';
+import { Col, Row, Text } from '@dataesr/dsfr-plus';
 import PropTypes from 'prop-types';
 
 import WorksList from '../components/works-list';
-import RorBadge from '../components/ror-badge';
+import RorBadge from '../components/ror-badge_old';
 import RorName from '../components/ror-name';
 
 export default function ListView({
@@ -12,7 +12,6 @@ export default function ListView({
   setSelectedOpenAlex,
 }) {
   const defineRorColor = [];
-  // const dsColors = ['ror-1', 'ror-2', 'ror-3', 'ror-4', 'ror-5'];
   const dsColors = ['green-archipel', 'purple-glycine', 'pink-tuile', 'green-menthe', 'brown-cafe-creme'];
   const rorCount = {};
   allAffiliations.forEach((affiliation) => {
@@ -47,13 +46,13 @@ export default function ListView({
                   }}
                 />
               </Col>
-              <Col md={5}>
+              <Col>
                 <Text as="label" htmlFor={`affiliation-${affiliation.key}`}>
                   <div dangerouslySetInnerHTML={{ __html: affiliation.nameHtml }} />
                 </Text>
                 <WorksList works={affiliation.works} />
               </Col>
-              <Col md={6}>
+              <Col md={4}>
                 <table className="wm-table">
                   {affiliation.rors.map((ror) => (
                     <tr>
@@ -65,8 +64,7 @@ export default function ListView({
                           // rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'ror-x'}
                           setFilteredAffiliationName={setFilteredAffiliationName}
                         />
-                      </td>
-                      <td>
+                        <br />
                         <RorName
                           // isRemoved
                           ror={ror}

diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss
@@ -234,6 +234,12 @@ html, body {
   --ror-4: #6f0018;
   --ror-5: #046f00;
   --ror-x: #fff;
+  --green-archipel: #00a99d;
+  --purple-glycine: #8a2be2;
+  --pink-tuile: #ff69b4;
+  --green-menthe: #00ff7f;
+  --brown-cafe-creme: #6f4e37;
+  --beige-gris-galet: #d3d3d3;
 }
 
 .loader{