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

Files styling

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-03-25 18:29:34 +01:00
parent 19c4d1c662
commit 4977b28f1b
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/molecules/Asset.module.scss
View File

@ -37,6 +37,7 @@
padding-bottom: $spacer / 2; padding-bottom: $spacer / 2;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
&:hover, &:hover,
&:focus { &:focus {

11
client/src/routes/Publish/Files/Item.module.scss
View File

@ -1,9 +1,9 @@
@import '../../../styles/variables'; @import '../../../styles/variables';
.linkUrl { .linkUrl {
font-size: $font-size-mini; font-size: $font-size-small;
display: block; display: block;
font-family: $font-family-base; margin-bottom: $spacer / 8;
// TODO: truncate long urls with ellipsis // TODO: truncate long urls with ellipsis
} }
@ -23,7 +23,7 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
position: absolute; position: absolute;
top: $spacer / 4; top: $spacer / 8;
right: 0; right: 0;
transition: .2s ease-out; transition: .2s ease-out;
@ -35,10 +35,9 @@
.details { .details {
font-size: $font-size-mini; font-size: $font-size-mini;
font-size: .85rem; color: $brand-grey-light;
color: #6e7e93;
span { span {
padding-right: .5rem; padding-right: $spacer;
} }
} }

15
client/src/routes/Publish/Files/Item.tsx
View File

@ -4,14 +4,19 @@ import filesize from 'filesize'
const Item = ({ item, removeItem }: { item: any; removeItem: any }) => ( const Item = ({ item, removeItem }: { item: any; removeItem: any }) => (
<li> <li>
<a href={item.url}>{item.url}</a> <a href={item.url} className={styles.linkUrl}>
{item.url}
</a>
<div className={styles.details}> <div className={styles.details}>
<span>url: {item.found ? 'confirmed' : 'unconfirmed'}</span> <span>URL {item.found ? 'confirmed' : ' not confirmed'}</span>
<span> <span>
size: {item.found && item.size ? filesize(item.size) : 'unknown size'}
{item.found && item.size ? filesize(item.size) : 'unknown'} </span>
<span>
{item.found && item.type
? item.type.split('/')[1]
: 'unknown type'}
</span> </span>
<span>type: {item.found && item.type ? item.type : 'unknown'}</span>
</div> </div>
<button <button
type="button" type="button"