fix(openalex): Highlight selected affiliations in the list view

dataesr · Nov 26, 2024 · 55edc66 · 55edc66
1 parent e7ae702
commit 55edc66
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -30,7 +30,10 @@ export default function ListView({
     <ul className="wm-list">
       {
         allAffiliations.map((affiliation) => (
-          <li key={affiliation.key}>
+          <li
+            className={selectedOpenAlex.some((a) => a.key === affiliation.key) ? 'selected' : ''}
+            key={affiliation.key}
+          >
             <Row>
               <Col>
                 <div style={{ display: 'inline-flex' }}>
@@ -54,7 +57,7 @@ export default function ListView({
                     }
                   </div>
                   <div className="fr-ml-1w" style={{ display: 'inline-block', maxWidth: '95%' }}>
-                    <Text as="label" htmlFor={`affiliation-${affiliation.key}`} style={{ cursor: 'pointer' }}>
+                    <Text as="span">
                       <div dangerouslySetInnerHTML={{ __html: affiliation.nameHtml.replace(' [ source: OpenAlex ]', '') }} />
                     </Text>
                     <WorksList works={affiliation.works} />

diff --git a/client/src/pages/openalex-ror/results/views-selector.jsx b/client/src/pages/openalex-ror/results/views-selector.jsx
@@ -126,7 +126,6 @@ export default function ViewsSelector({
           <Col xs="3">
             <Checkbox
               checked={(selectedOpenAlex.length === filteredAffiliations.length) && (selectedOpenAlex.length > 0)}
-              className="fr-ml-2w"
               onChange={() => {
                 if (selectedOpenAlex.length === 0) {
                   setSelectedOpenAlex(filteredAffiliations);

diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss
@@ -198,11 +198,16 @@ html, body {
     background-color: #eee;
     list-style: none;
     border: #777 1px solid;
+    padding-left: 1px;
 
     li {
       padding: 10px;
       border-bottom: 1px solid #ddd;
       font-size: 0.9rem;
+
+    }
+    .selected {
+      background-color: #d7cdf1;
     }
   }