Improve multiple publication.about display (#445)

hbz · Dec 15, 2021 · 1eca2e0 · 1eca2e0
1 parent 4d886b7
commit 1eca2e0
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/gatsby/lobid/src/components/publications.html.js b/gatsby/lobid/src/components/publications.html.js
@@ -11,16 +11,19 @@ export default class Publications extends React.Component {
           <p className="lead">{this.props.publications}</p>
           <table className="table table-striped table-condensed">
             <thead>
-              <tr><th width="10%" /><th width="65%" /><th width="12%" /><th width="10%" /><th width="3%" /></tr>
+              <tr><th width="10%" /><th width="57%" /><th width="20%" /><th width="10%" /><th width="3%" /></tr>
             </thead>
             <tbody>
               {this.props.pubs.map(publication =>
                 <tr key={publication.id}>
                   <td><small>{publication.datePublished}</small></td>
                   <td><a target="_blank" rel="noopener noreferrer" href={publication.id}>{publication.name.de || publication.name.en || publication.id}</a></td>
-                  <td>{publication.about && publication.about.map(a =>
-                    <p key={a.id}><small><span className="glyphicon glyphicon-tag" aria-hidden="true"></span></small>&nbsp;<a href={stripLobidOrg(a.id)}>{simpleId(a.id)}</a></p>
-                  )}</td>
+                  <td>
+                    {publication.about && <small><span className="glyphicon glyphicon-tag" aria-hidden="true"></span>&nbsp;</small>}
+                    {publication.about && publication.about.map((a,i) =>
+                      <small><span key={a.id}><a href={stripLobidOrg(a.id)}>{simpleId(a.id)}</a>{i < publication.about.length - 1 && ", "}</span></small>
+                    )}
+                  </td>
                   <td align="right"><small>{publication.type.map(t => t.match(/[A-Z][a-z]+/)[0])}</small></td>
                   <td><a title="Beschreibung als JSON-LD anzeigen" href={publication.fields.jsonFile}><img height="20px" src={jsonLdPng} alt="JSON-LD" /></a></td>
                 </tr>