1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

metadata display tweaks

* new lock icon for private algos
* visual updates for asset details
This commit is contained in:
Matthias Kretschmann 2021-04-20 14:07:23 +02:00
parent 9f38bba69a
commit 621aea64b5
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 32 additions and 33 deletions

View File

@ -1,9 +1,9 @@
.icon {
fill: var(--brand-grey-light);
width: 1.1em;
height: 1.1em;
fill: currentColor;
width: 1em;
height: 1em;
vertical-align: baseline;
margin-bottom: -0.2em;
margin-bottom: -0.1em;
display: inline-block;
}

View File

@ -3,6 +3,7 @@ import styles from './AssetType.module.css'
import classNames from 'classnames/bind'
import { ReactComponent as Compute } from '../../images/compute.svg'
import { ReactComponent as Download } from '../../images/download.svg'
import { ReactComponent as Lock } from '../../images/lock.svg'
const cx = classNames.bind(styles)
@ -25,6 +26,8 @@ export default function AssetType({
</div>
{accessType === 'access' ? (
<Download role="img" aria-label="Download" className={styles.icon} />
) : accessType === 'compute' && type === 'algorithm' ? (
<Lock role="img" aria-label="Private" className={styles.icon} />
) : (
<Compute role="img" aria-label="Compute" className={styles.icon} />
)}

View File

@ -1,25 +1,18 @@
.meta {
margin-bottom: calc(var(--spacer) / 1.5);
color: var(--color-secondary);
font-size: var(--font-size-small);
}
.meta p {
margin-bottom: 0;
}
.date {
.published {
margin-top: calc(var(--spacer) / 2);
font-size: var(--font-size-small);
}
.typeAndDate {
margin-bottom: calc(var(--spacer) / 12);
display: flex;
}
.typeDetails {
border-right: 1px solid var(--border-color);
padding-right: calc(var(--spacer) / 3.5);
margin-right: calc(var(--spacer) / 4);
width: auto;
font-size: var(--font-size-small);
.updated {
font-size: var(--font-size-mini);
}

View File

@ -15,22 +15,7 @@ export default function MetaMain(): ReactElement {
return (
<aside className={styles.meta}>
<div className={styles.typeAndDate}>
<AssetType
type={type}
accessType={accessType}
className={styles.typeDetails}
/>
<p className={styles.date}>
<Time date={ddo?.created} relative />
{ddo?.created !== ddo?.updated && (
<>
{' — '}
updated <Time date={ddo?.updated} relative />
</>
)}
</p>
</div>
<AssetType type={type} accessType={accessType} />
<p>
<ExplorerLink
networkId={networkId}
@ -43,7 +28,21 @@ export default function MetaMain(): ReactElement {
{`${ddo?.dataTokenInfo.name}${ddo?.dataTokenInfo.symbol}`}
</ExplorerLink>
</p>
Published By <Publisher account={owner} />
<div className={styles.published}>
Published By <Publisher account={owner} />
<p>
<Time date={ddo?.created} relative />
{ddo?.created !== ddo?.updated && (
<>
{' — '}
<span className={styles.updated}>
updated <Time date={ddo?.updated} relative />
</span>
</>
)}
</p>
</div>
</aside>
)
}

4
src/images/lock.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="15" height="20" viewBox="0 0 15 20" xmlns="http://www.w3.org/2000/svg">
<path d="M8 13.9146C8.5826 13.7087 9 13.1531 9 12.5C9 11.6716 8.32843 11 7.5 11C6.67157 11 6 11.6716 6 12.5C6 13.1531 6.4174 13.7087 7 13.9146V17H8V13.9146Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 8V5.18395C13 2.33746 10.3486 0 7.5 0C4.65139 0 2 2.33746 2 5.18395V8H0.775862C0.347365 8 0 8.56848 0 8.99331V19.2308C0 19.6556 0.347365 20 0.775862 20H14.2241C14.6526 20 15 19.6556 15 19.2308V8.99331C15 8.56848 14.6526 8 14.2241 8H13ZM7.5 2C5.54204 2 4 3.15337 4 5.18395V8H11V5.18395C11 3.15337 9.45796 2 7.5 2ZM2 10V18H13V10H2Z" />
</svg>

After

Width:  |  Height:  |  Size: 638 B