forked from Kieran/void.cat
Cleanup preview styles
This commit is contained in:
parent
cb4ec890d4
commit
a8541ec700
@ -1,13 +1,7 @@
|
|||||||
.file-edit {
|
.file-edit {
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-edit > div {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-edit svg {
|
.file-edit svg {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
|
@ -34,8 +34,8 @@ export function FileEdit(props) {
|
|||||||
|
|
||||||
const meta = file.metadata;
|
const meta = file.metadata;
|
||||||
return (
|
return (
|
||||||
<div className="file-edit">
|
<div className="file-edit flex">
|
||||||
<div>
|
<div className="flx-1">
|
||||||
<h3>File info</h3>
|
<h3>File info</h3>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Filename:</dt>
|
<dt>Filename:</dt>
|
||||||
@ -45,7 +45,7 @@ export function FileEdit(props) {
|
|||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="flx-1">
|
||||||
<h3>Paywall Config</h3>
|
<h3>Paywall Config</h3>
|
||||||
Type:
|
Type:
|
||||||
<select onChange={(e) => setPaywall(parseInt(e.target.value))} value={paywall}>
|
<select onChange={(e) => setPaywall(parseInt(e.target.value))} value={paywall}>
|
||||||
|
@ -1,30 +1,19 @@
|
|||||||
.preview {
|
.preview {
|
||||||
margin-top: 2vh;
|
margin-top: 2vh;
|
||||||
width: 720px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview > a {
|
.preview img, .preview video, .preview object {
|
||||||
margin-bottom: 1vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview img {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview video {
|
.preview .file-stats {
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-stats {
|
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-stats svg {
|
.preview .file-stats svg {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
@ -56,6 +56,9 @@ export function FilePreview() {
|
|||||||
case "application/pdf": {
|
case "application/pdf": {
|
||||||
return <object data={link}/>;
|
return <object data={link}/>;
|
||||||
}
|
}
|
||||||
|
default: {
|
||||||
|
return <h3>{info.metadata?.name ?? info.id}</h3>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
@ -102,7 +105,7 @@ export function FilePreview() {
|
|||||||
}, [info]);
|
}, [info]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="preview">
|
<div className="preview page">
|
||||||
{info ? (
|
{info ? (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<Helmet>
|
<Helmet>
|
||||||
@ -110,7 +113,14 @@ export function FilePreview() {
|
|||||||
<meta name="description" content={info.metadata?.description}/>
|
<meta name="description" content={info.metadata?.description}/>
|
||||||
{renderOpenGraphTags()}
|
{renderOpenGraphTags()}
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<a className="btn" href={link}>{info.metadata?.name ?? info.id}</a>
|
<div className="flex flex-center">
|
||||||
|
<div className="flx-grow">
|
||||||
|
{info.uploader ? <InlineProfile profile={info.uploader}/> : null}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a className="btn" href={link} download={info.metadata?.name ?? info.id}>Download</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{renderTypes()}
|
{renderTypes()}
|
||||||
<div className="file-stats">
|
<div className="file-stats">
|
||||||
<div>
|
<div>
|
||||||
@ -122,7 +132,6 @@ export function FilePreview() {
|
|||||||
{FormatBytes(info?.metadata?.size ?? 0, 2)}
|
{FormatBytes(info?.metadata?.size ?? 0, 2)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{info.uploader ? <InlineProfile profile={info.uploader}/> : null}
|
|
||||||
<FileEdit file={info}/>
|
<FileEdit file={info}/>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
) : "Not Found"}
|
) : "Not Found"}
|
||||||
|
@ -40,6 +40,14 @@ a:hover {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flx-2 {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flx-grow {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-center {
|
.flex-center {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user