1
0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00

asset files & fixed metadata tweaks

This commit is contained in:
Matthias Kretschmann 2019-05-27 19:05:17 +02:00
parent 5e94d73197
commit be6c478ca7
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 70 additions and 35 deletions

View File

@ -62,16 +62,20 @@
}
}
.meta {
border-top: 1px solid $brand-grey-lighter;
border-bottom: 1px solid $brand-grey-lighter;
padding-top: $spacer;
padding-bottom: $spacer;
.metaFixed {
border: 1px solid $brand-grey-lighter;
padding: $spacer;
border-radius: $border-radius;
margin-top: $spacer;
margin-bottom: $spacer;
list-style: none;
padding-left: 0;
margin-bottom: $spacer * $line-height;
font-size: $font-size-small;
position: relative;
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
width: 100%;
@ -79,7 +83,7 @@
@media (min-width: $break-point--small) {
display: flex;
margin-bottom: 0;
margin-bottom: $spacer / 3;
}
&:before {
@ -88,6 +92,17 @@
}
}
.metaFixedTitle {
font-size: $font-size-small;
margin: 0;
font-family: $font-family-base;
font-weight: $font-weight-base;
color: $brand-grey-light;
position: absolute;
bottom: $spacer / 4;
right: $spacer / 4;
}
.metaLabel {
display: block;
@ -104,10 +119,15 @@
overflow-wrap: break-word;
}
/* stylelint-disable declaration-no-important */
code {
display: inline;
display: block;
padding: 0 !important;
background: none !important;
}
/* stylelint-enable declaration-no-important */
@media (min-width: $break-point--small) {
width: 70%;
}

View File

@ -60,28 +60,40 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
/>
)}
<ul className={styles.meta}>
<li>
<span className={styles.metaLabel}>
<strong>Author</strong>
</span>
<span className={styles.metaValue}>{base.author}</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>License</strong>
</span>
<span className={styles.metaValue}>{base.license}</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>DID</strong>
</span>
<span className={styles.metaValue}>
<code>{ddo.id}</code>
</span>
</li>
</ul>
<div className={styles.metaFixed}>
<h2
className={styles.metaFixedTitle}
title="This metadata can not be changed because it is used to generate the checksums for the DDO, and to encrypt the file urls."
>
Fixed Metadata
</h2>
<ul>
<li>
<span className={styles.metaLabel}>
<strong>Author</strong>
</span>
<span className={styles.metaValue}>
{base.author}
</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>License</strong>
</span>
<span className={styles.metaValue}>
{base.license}
</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>DID</strong>
</span>
<span className={styles.metaValue}>
<code>{ddo.id}</code>
</span>
</li>
</ul>
</div>
<AssetFilesDetails
files={base.files ? base.files : []}

View File

@ -25,13 +25,16 @@
.file {
display: inline-block;
background: $brand-grey;
background: $brand-grey-dark
url('../../../../node_modules/@oceanprotocol/art/jellyfish/jellyfish-grid.svg')
no-repeat -1rem 4.5rem;
background-size: 100%;
padding: $spacer $spacer / 2;
margin-bottom: $spacer / 2;
text-align: left;
position: relative;
height: 8rem;
width: 6rem;
height: 8.5rem;
width: 6.5rem;
&:before {
content: '';