mirror of
https://github.com/mollersuite/monofile.git
synced 2024-11-24 22:56:26 -08:00
srdgd
This commit is contained in:
parent
62d3db6bd0
commit
37c6537abb
|
|
@ -21,8 +21,7 @@ TOKEN=KILL-YOURSELF.NOW
|
|||
- [X] 1.2.1 add file counter to main page
|
||||
- [X] 1.2.2 clean up this shitty code
|
||||
- [X] 1.2.3 bugfixes
|
||||
- [ ] 1.3.0 new ui; accounts; utility endpoints
|
||||
- [ ] 1.3.0 add utility endpoints: `/embed/:fileId` for discord, `/:fileId` for quick access
|
||||
- [ ] 1.3.0 new ui; accounts; utility endpoints; multi file uploads
|
||||
- [ ] 1.3.1 disable cloning of local ips
|
||||
- [ ] 1.4.0 admin panel
|
||||
- [ ] 2.0.0 rewrite using theUnfunny's code as a base/rewrite using monofile-core
|
||||
|
|
|
|||
104
src/style/app/uploader/add_new_files.scss
Normal file
104
src/style/app/uploader/add_new_files.scss
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
#uploadWindow {
|
||||
#add_new_files {
|
||||
background-color:#191919;
|
||||
border: 1px solid gray;
|
||||
padding: 0px 0px 10px 0px;
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Fira Code", monospace;
|
||||
text-align: left;
|
||||
margin: 0px 0px 0px 10px;
|
||||
font-size: 30px;
|
||||
|
||||
span {
|
||||
font-size:16px;
|
||||
position:relative;
|
||||
top:-4px;
|
||||
left:10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:500px) {
|
||||
font-size: 40px;
|
||||
|
||||
span {
|
||||
font-size:20px;
|
||||
position:relative;
|
||||
top:-6px;
|
||||
left:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#file_add_btns {
|
||||
width:calc( 100% - 20px );
|
||||
margin:auto;
|
||||
position:relative;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
column-gap:10px;
|
||||
|
||||
button, input[type=text] {
|
||||
background-color:#333333;
|
||||
color:#DDDDDD;
|
||||
border:none;
|
||||
outline:none;
|
||||
padding:5px;
|
||||
|
||||
flex-basis:50%;
|
||||
flex-grow:1;
|
||||
transition-duration:250ms;
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
font-size:16px;
|
||||
padding:10px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
cursor:pointer;
|
||||
|
||||
&:hover {
|
||||
@media screen and (min-width: 500px) {
|
||||
transition-duration:250ms;
|
||||
flex-basis: 60%;
|
||||
}
|
||||
background-color:#393939;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.fileUpload {
|
||||
width:100%;
|
||||
height:100px;
|
||||
position:relative;
|
||||
|
||||
background-color:#262626;
|
||||
|
||||
input[type=file] {
|
||||
opacity: 0;
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
width:100%;
|
||||
height:100%;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
transform:translateY(-50%);
|
||||
font-size:12px;
|
||||
width:100%;
|
||||
text-align:center;
|
||||
padding:0px;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
@use "uploader/add_new_files";
|
||||
|
||||
#uploadWindow {
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
padding:5px 10px 10px 10px;
|
||||
padding:10px 15px 10px 15px;
|
||||
|
||||
width:350px;
|
||||
|
||||
background-color:#222222;
|
||||
color:#ddd;
|
||||
|
|
@ -26,77 +30,6 @@
|
|||
font-family: "Inconsolata", monospace;
|
||||
}
|
||||
|
||||
#add_new_files {
|
||||
background-color:#191919;
|
||||
border: 1px solid gray;
|
||||
width:350px;
|
||||
padding: 0px 0px 10px 0px;
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Fira Code", monospace;
|
||||
text-align: left;
|
||||
margin: 0px 0px 0px 10px;
|
||||
font-size: 30px;
|
||||
|
||||
span {
|
||||
font-size:16px;
|
||||
position:relative;
|
||||
top:-4px;
|
||||
left:10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:500px) {
|
||||
font-size: 40px;
|
||||
|
||||
span {
|
||||
font-size:20px;
|
||||
position:relative;
|
||||
top:-6px;
|
||||
left:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#file_add_btns {
|
||||
width:calc( 100% - 20px );
|
||||
margin:auto;
|
||||
position:relative;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
column-gap:10px;
|
||||
|
||||
button {
|
||||
background-color:#333333;
|
||||
color:#DDDDDD;
|
||||
border:none;
|
||||
padding:5px;
|
||||
|
||||
flex-basis:50%;
|
||||
flex-grow:1;
|
||||
transition-duration:250ms;
|
||||
cursor:pointer;
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
font-size:16px;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@media screen and (min-width: 500px) {
|
||||
transition-duration:250ms;
|
||||
flex-basis: 60%;
|
||||
}
|
||||
background-color:#393939;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
width: calc( 100% - 20px );
|
||||
height: calc( 100% - 20px );
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
// stats
|
||||
|
||||
import AttachmentZone from "./uploader/AttachmentZone.svelte";
|
||||
|
||||
let ServerStats = {}
|
||||
|
||||
fetch("/server").then(async (data) => {
|
||||
|
|
@ -10,6 +12,7 @@
|
|||
|
||||
// uploads
|
||||
|
||||
let attachmentZone;
|
||||
let uploads = new Map()
|
||||
|
||||
</script>
|
||||
|
|
@ -22,7 +25,7 @@
|
|||
|
||||
<div>
|
||||
{#each Array.from(uploads.entries()) as upload (upload[0])}
|
||||
<div class="Upload">
|
||||
<div class="file">
|
||||
|
||||
</div>
|
||||
{/each}
|
||||
|
|
@ -30,21 +33,21 @@
|
|||
|
||||
<div style:height="10px" />
|
||||
|
||||
<div id="add_new_files">
|
||||
<p>+<span>add files</span></p>
|
||||
<div id="file_add_btns">
|
||||
<button>upload file...</button><button>clone url...</button>
|
||||
</div>
|
||||
</div>
|
||||
{#if uploads.size < 1}
|
||||
<AttachmentZone bind:this={attachmentZone}/>
|
||||
{/if}
|
||||
|
||||
<div style:height="10px" />
|
||||
|
||||
<p style:color="#999999" style:text-align="center">
|
||||
Hosting <span class="number" style:font-weight="600">{ServerStats.files || "•••"}</span> files
|
||||
—
|
||||
Maximum filesize is <span class="number" style:font-weight="600">{((ServerStats.maxDiscordFileSize || 0)*(ServerStats.maxDiscordFiles || 0))/1048576 || "•••"}MB</span>
|
||||
<br />
|
||||
</p>
|
||||
|
||||
<p style:color="#999999" style:text-align="center" style:font-size="12px">
|
||||
Made with ❤ by <a href="https://github.com/nbitzz" style:font-size="12px">@nbitzz</a> — <a href="https://github.com/nbitzz/monofile" style:font-size="12px">source</a>
|
||||
</p>
|
||||
<div style:height="10px" />
|
||||
</div>
|
||||
56
src/svelte/elem/uploader/AttachmentZone.svelte
Normal file
56
src/svelte/elem/uploader/AttachmentZone.svelte
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<script>
|
||||
import { fade, scale } from "svelte/transition";
|
||||
import { circIn, circOut } from "svelte/easing"
|
||||
|
||||
let uploadTypes = {
|
||||
files: 1,
|
||||
clone: 2
|
||||
}
|
||||
|
||||
let uploadType = undefined
|
||||
|
||||
function _void(node, { duration, easingFunc, op }) {
|
||||
let rect = node.getBoundingClientRect()
|
||||
|
||||
return {
|
||||
duration: duration||300,
|
||||
css: t => {
|
||||
let eased = (easingFunc || circIn)(t)
|
||||
|
||||
return `
|
||||
white-space: nowrap;
|
||||
height: ${(eased)*(rect.height)}px;
|
||||
padding: 0px;
|
||||
opacity:${eased};
|
||||
overflow: clip;
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- there are 100% better ways to do this but idgaf, it's still easier to manage than <1.3 lmao -->
|
||||
|
||||
<div id="add_new_files" transition:_void={{duration:200}}>
|
||||
<p>+<span>add files</span></p>
|
||||
{#if !uploadType}
|
||||
<div id="file_add_btns" out:_void in:_void={{easingFunc:circOut}}>
|
||||
<button on:click={() => uploadType = uploadTypes.files} >upload files...</button>
|
||||
<button on:click={() => uploadType = uploadTypes.clone} >clone url...</button>
|
||||
</div>
|
||||
{:else}
|
||||
{#if uploadType == uploadTypes.files}
|
||||
<div id="file_add_btns" out:_void in:_void={{easingFunc:circOut}}>
|
||||
<div class="fileUpload">
|
||||
<p>click/tap to browse<br/>or drag files into this box</p>
|
||||
<input type="file" multiple>
|
||||
</div>
|
||||
</div>
|
||||
{:else if uploadType == uploadTypes.clone}
|
||||
<div id="file_add_btns" out:_void in:_void={{easingFunc:circOut}}>
|
||||
<input placeholder="url" type="text">
|
||||
<button style:flex-basis="30%">add file</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
Loading…
Reference in a new issue