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 { .metaFixed {
border-top: 1px solid $brand-grey-lighter; border: 1px solid $brand-grey-lighter;
border-bottom: 1px solid $brand-grey-lighter; padding: $spacer;
padding-top: $spacer; border-radius: $border-radius;
padding-bottom: $spacer;
margin-top: $spacer; margin-top: $spacer;
margin-bottom: $spacer; margin-bottom: $spacer * $line-height;
list-style: none;
padding-left: 0;
font-size: $font-size-small; font-size: $font-size-small;
position: relative;
ul {
padding: 0;
margin: 0;
list-style: none;
}
li { li {
width: 100%; width: 100%;
@ -79,7 +83,7 @@
@media (min-width: $break-point--small) { @media (min-width: $break-point--small) {
display: flex; display: flex;
margin-bottom: 0; margin-bottom: $spacer / 3;
} }
&:before { &: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 { .metaLabel {
display: block; display: block;
@ -104,10 +119,15 @@
overflow-wrap: break-word; overflow-wrap: break-word;
} }
/* stylelint-disable declaration-no-important */
code { code {
display: inline; display: block;
padding: 0 !important;
background: none !important;
} }
/* stylelint-enable declaration-no-important */
@media (min-width: $break-point--small) { @media (min-width: $break-point--small) {
width: 70%; width: 70%;
} }

View File

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

View File

@ -25,13 +25,16 @@
.file { .file {
display: inline-block; 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; padding: $spacer $spacer / 2;
margin-bottom: $spacer / 2; margin-bottom: $spacer / 2;
text-align: left; text-align: left;
position: relative; position: relative;
height: 8rem; height: 8.5rem;
width: 6rem; width: 6.5rem;
&:before { &:before {
content: ''; content: '';