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--"
} }

104
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,58 +39,63 @@ 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>
)}
<tr> {!SIMPLE_SITE && (
<td> {__('URL')}</td> <>
<td>{claim.canonical_url}</td> {languages && (
</tr> <div className="media__details">
<span>{__('Languages')}</span>
<span>{languages.join(' ')}</span>
</div>
)}
<tr> {languages && (
<td> {__('Claim ID')}</td> <div className="media__details">
<td>{claim.claim_id}</td> <span>{__('Media Type')}</span>
</tr> <span>{mediaType}</span>
</div>
)}
{languages && ( <div className="media__details">
<tr> <span>{__('License')}</span>
<td>{__('Languages')}</td> <span>{license}</span>
<td>{languages.join(' ')}</td> </div>
</tr>
)} {downloadPath && (
<tr> <div className="media__details">
<td>{__('License')}</td> <span>{__('Downloaded to')}</span>
<td>{license}</td> <span>
</tr> <Button
{downloadPath && ( button="link"
<tr> className="button--download-link"
<td>{__('Downloaded to')}</td> onClick={() => {
<td> if (downloadPath) {
<Button openFolder(downloadPath);
button="link" }
className="button--download-link" }}
onClick={() => { label={downloadNote || downloadPath.replace(/(.{10})/g, '$1\u200b')}
if (downloadPath) { />
openFolder(downloadPath); </span>
} </div>
}} )}
label={downloadNote || downloadPath.replace(/(.{10})/g, '$1\u200b')} </>
/> )}
</td>
</tr> {fileSize && (
)} <div className="media__details">
</tbody> <span>{fileSize}</span>
</table> </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);
}
}