Update styling
This commit is contained in:
parent
7b7d119831
commit
170e23cba7
2 changed files with 48 additions and 20 deletions
|
@ -29,7 +29,7 @@ body {
|
|||
}
|
||||
|
||||
.unselectable {
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
|
@ -88,7 +88,9 @@ th {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
img, audio, video {
|
||||
img,
|
||||
audio,
|
||||
video {
|
||||
border-radius: $padding;
|
||||
margin-bottom: $padding;
|
||||
max-height: 75vh;
|
||||
|
@ -96,11 +98,9 @@ img, audio, video {
|
|||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 75vw;
|
||||
min-height: 75vh;
|
||||
box-sizing: border-box;
|
||||
@extend .paste;
|
||||
height: 75vh;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.primary {
|
||||
|
@ -117,3 +117,29 @@ textarea {
|
|||
padding-left: $padding;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@extend .hljs;
|
||||
|
||||
border: 1px solid white;
|
||||
border-radius: $padding;
|
||||
padding: $padding;
|
||||
margin: $padding;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.file-upload {
|
||||
@extend .button;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.text-upload {
|
||||
@extend .button;
|
||||
}
|
|
@ -34,9 +34,12 @@ const FileForm = () => {
|
|||
fr.readAsArrayBuffer(file);
|
||||
}
|
||||
|
||||
return (
|
||||
<input type="file" onChange={handleChange} />
|
||||
)
|
||||
return <>
|
||||
<label className="file-upload" >
|
||||
Select a file
|
||||
<input type="file" onChange={handleChange} />
|
||||
</label>
|
||||
</>
|
||||
}
|
||||
|
||||
const PasteForm = () => {
|
||||
|
@ -48,22 +51,21 @@ const PasteForm = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<pre className='paste'>
|
||||
<form className='hljs centered' onSubmit={handleSubmit}>
|
||||
<textarea
|
||||
placeholder="Sample text"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
/>
|
||||
<input type="submit" value="submit" />
|
||||
</form>
|
||||
</pre>
|
||||
<form className='hljs centered' onSubmit={handleSubmit}>
|
||||
<textarea
|
||||
placeholder="Sample text"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
/>
|
||||
<input className="text-upload" type="submit" value="submit" />
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
function createUploadUi() {
|
||||
const html = <main className='hljs centered fullscreen'>
|
||||
<FileForm />
|
||||
<p>or paste your data below</p>
|
||||
<PasteForm />
|
||||
</main>;
|
||||
|
||||
|
|
Loading…
Reference in a new issue