i hate css, mobile works good, and now you can upload files
parent
7ef2c74344
commit
b8e65797de
|
|
@ -4,13 +4,19 @@
|
|||
import { onMount } from 'svelte';
|
||||
import { uploadIntro } from './api.js';
|
||||
|
||||
let enteredUploadTitle = '';
|
||||
let selectedUploadGuild = null;
|
||||
let selectedFile = null;
|
||||
let uploadPromise = null;
|
||||
|
||||
let enteredUrl = '';
|
||||
let enteredTitle = '';
|
||||
let selectedFile = null;
|
||||
let selectedGuild = null;
|
||||
let canDownloadAny = false;
|
||||
let downloadPromise = null;
|
||||
let uploadPromise = null;
|
||||
|
||||
let canDownloadAny = false;
|
||||
|
||||
|
||||
let allowedGuildList = [];
|
||||
|
||||
$: allowedGuildList = $member.guilds
|
||||
|
|
@ -32,9 +38,9 @@
|
|||
|
||||
const upload = () => {
|
||||
// TODO: limit to 1 file
|
||||
if (!!selectedGuild) {
|
||||
if (!!selectedUploadGuild) {
|
||||
uploadPromise = (async () => {
|
||||
await uploadIntro(selectedGuild.id, enteredTitle, selectedFile[0], $member.token);
|
||||
await uploadIntro(selectedUploadGuild.id, enteredUploadTitle, selectedFile[0], $member.token);
|
||||
await intros.fetchIntros($member.guilds);
|
||||
})();
|
||||
} else {
|
||||
|
|
@ -45,7 +51,7 @@
|
|||
|
||||
{#if canDownloadAny}
|
||||
<div id="cardContent">
|
||||
<div>
|
||||
<div id="uploader">
|
||||
<h3>Download New Intro</h3>
|
||||
{#if !!downloadPromise}
|
||||
{#await downloadPromise}
|
||||
|
|
@ -60,7 +66,9 @@
|
|||
{:else}
|
||||
<select bind:value={selectedGuild}>
|
||||
{#each allowedGuildList as guild}
|
||||
<option value={guild}>{guild.name}</option>
|
||||
<option value={guild}>
|
||||
{guild.name}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
<input bind:value={enteredTitle} placeholder='enter intro title'>
|
||||
|
|
@ -68,7 +76,7 @@
|
|||
<button on:click={download}>Download</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<div id="uploader">
|
||||
<h3>Upload New Intro</h3>
|
||||
{#if !!uploadPromise}
|
||||
{#await uploadPromise}
|
||||
|
|
@ -81,13 +89,20 @@
|
|||
<button on:click={() => {uploadPromise = null}}>Ok</button>
|
||||
{/await}
|
||||
{:else}
|
||||
<select bind:value={selectedGuild}>
|
||||
<select bind:value={selectedUploadGuild} placeholder='Choose Guild'>
|
||||
{#each allowedGuildList as guild}
|
||||
<option value={guild}>{guild.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<input bind:value={enteredTitle} placeholder='enter intro title'>
|
||||
<input type="file" accept="audio/*, video/*" bind:files={selectedFile}>
|
||||
<input bind:value={enteredUploadTitle} placeholder='enter intro title'>
|
||||
<label for="fileSelect" id="uploadLabel">
|
||||
{#if !!selectedFile}
|
||||
{selectedFile[0].name}
|
||||
{:else}
|
||||
Select Intro
|
||||
{/if}
|
||||
<input id="fileSelect" type="file" accept="audio/*, video/*" bind:files={selectedFile}>
|
||||
</label>
|
||||
<button on:click={upload}>Upload</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -95,16 +110,17 @@
|
|||
{/if}
|
||||
|
||||
<style>
|
||||
div {
|
||||
div#uploader {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 85%;
|
||||
height: 85%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #2a2a4a;
|
||||
padding: 1.5em;
|
||||
padding: 16px;
|
||||
box-shadow: 1px 3px 4px 1px #1f1f36;
|
||||
margin: 0.5em;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -112,14 +128,47 @@
|
|||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
background-color: #393963;
|
||||
color: lightgrey;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
option {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input, button {
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
label#uploadLabel {
|
||||
width: 100%;
|
||||
color: lightgray;
|
||||
text-align: center;
|
||||
border-style: none;
|
||||
border-radius: 4px;
|
||||
background-image: linear-gradient(0deg, #1f1f36, #23233d);
|
||||
padding: 0.5em 0.5em 0.5em;
|
||||
margin: 0 0 16px 0px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
label#uploadLabel:hover {
|
||||
background-image: linear-gradient(0deg, #34345b, #393963);
|
||||
box-shadow: 1px 3px 15px 1px #1f1f36;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input#fileSelect {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border-style: solid;
|
||||
border-color: #323259;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: lightgrey;
|
||||
background-image: linear-gradient(0deg, #23233d, #1f1f36);
|
||||
|
|
|
|||
16
src/app.html
16
src/app.html
|
|
@ -13,7 +13,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #313052;
|
||||
font-family: 'Cantarell';
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, p, label, li {
|
||||
|
|
@ -22,13 +22,15 @@
|
|||
|
||||
div#cardContent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
width: 85%;
|
||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
background-color: #323259;
|
||||
box-shadow: 1px 3px 15px 1px #1f1f36;
|
||||
margin: 2em;
|
||||
margin-bottom: 2em;
|
||||
padding: 2em;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
div#list {
|
||||
|
|
@ -43,6 +45,7 @@
|
|||
|
||||
button, #list-item {
|
||||
color: lightgray;
|
||||
font-family: 'JetBrains Mono';
|
||||
border-style: none;
|
||||
border-radius: 4px;
|
||||
background-image: linear-gradient(0deg, #1f1f36, #23233d);
|
||||
|
|
@ -50,6 +53,7 @@
|
|||
margin: 0 0 16px 0px;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
button:hover, #list-item:hover {
|
||||
|
|
@ -64,7 +68,5 @@
|
|||
background-image: linear-gradient(0deg, #40406e, #444475);
|
||||
}
|
||||
</style>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
<body data-sveltekit-preload-data="hover" style="display: block; margin: 0; width: 100%; overflow-x: hidden; overflow-y: scroll;">%sveltekit.body%</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import './global.css';
|
||||
</script>
|
||||
|
||||
<slot></slot>
|
||||
|
|
@ -28,11 +28,10 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<h1>MemeJoin - A bot for user intros</h1>
|
||||
|
||||
{#if !!$member}
|
||||
<div id="mainContent">
|
||||
<p>{$member.username}</p>
|
||||
<h1>MemeJoin - A bot for user intros</h1>
|
||||
<p style='text-align:center;'>{$member.username}</p>
|
||||
|
||||
<IntroDownloader />
|
||||
<div id="cardContent">
|
||||
|
|
@ -82,13 +81,15 @@
|
|||
{/if}
|
||||
|
||||
<style>
|
||||
div#mainContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 85%;
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#mainContent {
|
||||
display: grid;
|
||||
top: 10em;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
div#guild {
|
||||
display: flex;
|
||||
|
|
@ -108,7 +109,7 @@
|
|||
|
||||
div#channel-settings {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
width: 85%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #2a2a4a;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff');
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'JetBrains Mono';
|
||||
}
|
||||
Binary file not shown.
Reference in New Issue