improvement: add individual CSS classes to info items (via #5051)

This makes it easier to style them individually or retrieve the
elements in user scripts.
This commit is contained in:
mirabilos
2019-01-11 17:12:18 +01:00
committed by kyle
parent b714810bfe
commit 669ec1c081

View File

@@ -38,7 +38,7 @@ class Contact extends React.Component {
const Link = getComponent("Link") const Link = getComponent("Link")
return ( return (
<div> <div className="info__contact">
{ url && <div><Link href={ sanitizeUrl(url) } target="_blank">{ name } - Website</Link></div> } { url && <div><Link href={ sanitizeUrl(url) } target="_blank">{ name } - Website</Link></div> }
{ email && { email &&
<Link href={sanitizeUrl(`mailto:${email}`)}> <Link href={sanitizeUrl(`mailto:${email}`)}>
@@ -66,7 +66,7 @@ class License extends React.Component {
let url = license.get("url") let url = license.get("url")
return ( return (
<div> <div className="info__license">
{ {
url ? <Link target="_blank" href={ sanitizeUrl(url) }>{ name }</Link> url ? <Link target="_blank" href={ sanitizeUrl(url) }>{ name }</Link>
: <span>{ name }</span> : <span>{ name }</span>
@@ -133,7 +133,7 @@ export default class Info extends React.Component {
</div> </div>
{ {
termsOfService && <div> termsOfService && <div className="info__tos">
<Link target="_blank" href={ sanitizeUrl(termsOfService) }>Terms of service</Link> <Link target="_blank" href={ sanitizeUrl(termsOfService) }>Terms of service</Link>
</div> </div>
} }
@@ -141,7 +141,7 @@ export default class Info extends React.Component {
{contact && contact.size ? <Contact getComponent={getComponent} data={ contact } /> : null } {contact && contact.size ? <Contact getComponent={getComponent} data={ contact } /> : null }
{license && license.size ? <License getComponent={getComponent} license={ license } /> : null } {license && license.size ? <License getComponent={getComponent} license={ license } /> : null }
{ externalDocsUrl ? { externalDocsUrl ?
<Link target="_blank" href={sanitizeUrl(externalDocsUrl)}>{externalDocsDescription || externalDocsUrl}</Link> <Link className="info__extdocs" target="_blank" href={sanitizeUrl(externalDocsUrl)}>{externalDocsDescription || externalDocsUrl}</Link>
: null } : null }
</div> </div>