LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

make file details smaller

Browse source
This commit is contained in:
Sean Yesmunt 2020-10-29 23:47:18 -04:00
parent 57a69be7e8
commit b33f14cca4
3 changed files with 68 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/app-strings.json
View file

@ -1480,5 +1480,6 @@
"Español": "Español", "Español": "Español",
"Türkçe": "Türkçe", "Türkçe": "Türkçe",
"Česky": "Česky", "Česky": "Česky",
"LBRY LATAM": "LBRY LATAM",
"--end--": "--end--" "--end--": "--end--"
} }

78
ui/component/fileDetails/view.jsx
View file

@ -1,4 +1,5 @@
// @flow // @flow
import { SIMPLE_SITE } from 'config';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import Button from 'component/button'; import Button from 'component/button';
import path from 'path'; import path from 'path';
@ -38,43 +39,41 @@ class FileDetails extends PureComponent<Props> {
} }
return ( return (
<table className="table table--condensed table--fixed table--file-details"> <>
<tbody> <div className="media__details">
<tr> <span>{__('LBRY URL')}</span>
<td> {__('Content Type')}</td> <span>{claim.canonical_url}</span>
<td>{mediaType}</td> </div>
</tr> <div className="media__details">
{fileSize && ( <span>{__('Claim ID')}</span>
<tr> <span>{claim.claim_id}</span>
<td> {__('File Size')}</td> </div>
<td>{fileSize}</td>
</tr> {!SIMPLE_SITE && (
<>
{languages && (
<div className="media__details">
<span>{__('Languages')}</span>
<span>{languages.join(' ')}</span>
</div>
)} )}
<tr>
<td> {__('URL')}</td>
<td>{claim.canonical_url}</td>
</tr>
<tr>
<td> {__('Claim ID')}</td>
<td>{claim.claim_id}</td>
</tr>
{languages && ( {languages && (
<tr> <div className="media__details">
<td>{__('Languages')}</td> <span>{__('Media Type')}</span>
<td>{languages.join(' ')}</td> <span>{mediaType}</span>
</tr> </div>
)} )}
<tr>
<td>{__('License')}</td> <div className="media__details">
<td>{license}</td> <span>{__('License')}</span>
</tr> <span>{license}</span>
</div>
{downloadPath && ( {downloadPath && (
<tr> <div className="media__details">
<td>{__('Downloaded to')}</td> <span>{__('Downloaded to')}</span>
<td> <span>
<Button <Button
button="link" button="link"
className="button--download-link" className="button--download-link"
@ -85,11 +84,18 @@ class FileDetails extends PureComponent<Props> {
}} }}
label={downloadNote || downloadPath.replace(/(.{10})/g, '$1\u200b')} label={downloadNote || downloadPath.replace(/(.{10})/g, '$1\u200b')}
/> />
</td> </span>
</tr> </div>
)} )}
</tbody> </>
</table> )}
{fileSize && (
<div className="media__details">
<span>{fileSize}</span>
</div>
)}
</>
); );
} }
} }

12
ui/scss/component/_media.scss
View file

@ -153,3 +153,15 @@
} }
} }
} }
.media__details {
@extend .help;
font-size: var(--font-xxsmall);
display: flex;
flex-direction: column;
// margin-top: 0;
&:first-of-type {
// margin-top: var(--spacing-m);
}
}