Remove logos, show numbers as list

src/fragmentarium/ui/info/ExternalNumberLink.tsx

@@ -1,28 +1,20 @@
 import ExternalLink from 'common/ExternalLink'
-import cdliLogo from './logos/cdli.png'
-import bdtnsLogo from './logos/bdtns.png'
-import archibabLogo from './logos/archibab.jpeg'
-import urOnlineLogo from './logos/ur-online.jpeg'
-import hilprechtJenaLogo from './logos/hilprecht-jena.png'
-import hilprechtHeidelbergLogo from './logos/hilprecht-heidelberg.png'
 import React from 'react'
 
 interface Props {
   externalNumber: string
   baseUrl: string
   label: string
-  logo: string
 }
 function ExternalNumberLink({
   baseUrl,
   externalNumber,
   label,
-  logo,
 }: Props): JSX.Element {
   const url = `${baseUrl}${encodeURIComponent(externalNumber)}`
   return (
     <ExternalLink href={url} aria-label={`${label} text ${externalNumber}`}>
-      <img className="ExternalResources__image" src={logo} alt={label} />
+      {`${label} (${externalNumber})`}
     </ExternalLink>
   )
 }
@@ -33,7 +25,6 @@ export function CdliLink({ number }: { number: string }): JSX.Element {
       externalNumber={number}
       baseUrl={'https://cdli.mpiwg-berlin.mpg.de/'}
       label={'CDLI'}
-      logo={cdliLogo}
     />
   )
 }
@@ -43,7 +34,6 @@ export function BdtnsLink({ number }: { number: string }): JSX.Element {
       externalNumber={number}
       baseUrl={'http://bdtns.filol.csic.es/'}
       label={'BDTNS'}
-      logo={bdtnsLogo}
     />
   )
 }
@@ -53,7 +43,6 @@ export function ArchibabLink({ number }: { number: string }): JSX.Element {
       externalNumber={number}
       baseUrl={'http://www.archibab.fr/'}
       label={'Archibab'}
-      logo={archibabLogo}
     />
   )
 }
@@ -63,7 +52,6 @@ export function UrOnlineLink({ number }: { number: string }): JSX.Element {
       externalNumber={number}
       baseUrl={'http://www.ur-online.org/subject/'}
       label={'Ur Online'}
-      logo={urOnlineLogo}
     />
   )
 }
@@ -73,7 +61,6 @@ export function HilprechtJenaLink({ number }: { number: string }): JSX.Element {
       externalNumber={number}
       baseUrl={'https://hilprecht.mpiwg-berlin.mpg.de/object3d/'}
       label={'Hilprecht Collection'}
-      logo={hilprechtJenaLogo}
     />
   )
 }
@@ -87,7 +74,6 @@ export function HilprechtHeidelbergLink({
       externalNumber={number}
       baseUrl={'https://doi.org/10.11588/heidicon/'}
       label={'Hilprecht Collection – HeiCuBeDa'}
-      logo={hilprechtHeidelbergLogo}
     />
   )
 }

src/fragmentarium/ui/info/ExternalResources.sass

@@ -0,0 +1,10 @@
+.ExternalResources
+  &__image
+    height: auto
+    max-height: 3.5em
+    max-width: 100%
+    margin: 0.2em
+
+  &__items
+    padding: 0
+    list-style-position: inside

src/fragmentarium/ui/info/ExternalResources.tsx

@@ -5,7 +5,7 @@ import ExternalLink from 'common/ExternalLink'
 import { Fragment } from 'fragmentarium/domain/fragment'
 import { FragmentLink } from 'fragmentarium/domain/museum'
 
-import './ExternalResources.css'
+import './ExternalResources.sass'
 import {
   BdtnsLink,
   CdliLink,
@@ -43,12 +43,16 @@ export default function ExternalResources({
     [fragment.hilprechtHeidelbergNumber, HilprechtHeidelbergLink],
   ]
   return (
-    <p className="ExternalResources">
+    <ul className="ExternalResources__items">
       {fragment.hasLink && <MuseumLink link={fragment.getLink()} />}
       {externalNumbers.map(
         ([number, LinkComponent], index) =>
-          number && <LinkComponent number={number} key={index} />
+          number && (
+            <li>
+              <LinkComponent number={number} key={index} />
+            </li>
+          )
       )}
-    </p>
+    </ul>
   )
 }