tools/paste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style an upload button for phones/tablets

Browse Source
This commit is contained in:
ellotheth
2023-08-17 21:02:28 +02:00
committed by Gunwant Jain
parent 3bbd64611f
commit fc821be03f
3 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
static/css/index.css
View File

@@ -42,6 +42,24 @@ form.highlight {
grid-row: 1/2; grid-row: 1/2;
} }
.fileUpload {
margin-bottom: 1.5em;
}
.fileUpload label {
color: #83837b;
border: 1px solid #83837b;
border-radius: .3em;
padding: 1em;
display: block;
text-align: center;
}
@media (min-width: 992px) {
.fileUpload {
display: none;
}
}
textarea { textarea {
height: 90%; height: 90%;
width: 100%; width: 100%;

2
static/js/index.js
View File

@@ -1,6 +1,7 @@
const body = document.querySelector('body'); const body = document.querySelector('body');
const form = document.querySelector('form'); const form = document.querySelector('form');
const grid_form = document.querySelector('.grid_form'); const grid_form = document.querySelector('.grid_form');
const fileInput = document.querySelector('.fileUpload');
const upload_card = document.querySelector('#upload_card'); const upload_card = document.querySelector('#upload_card');
const textarea = document.querySelector('textarea'); const textarea = document.querySelector('textarea');
const select = document.querySelector('select'); const select = document.querySelector('select');
@@ -18,6 +19,7 @@ window.onload = () => {
const onInput = () => { const onInput = () => {
submitButton.classList.toggle('hidden', !textarea.value); submitButton.classList.toggle('hidden', !textarea.value);
select.classList.toggle('hidden', !textarea.value); select.classList.toggle('hidden', !textarea.value);
fileInput.classList.toggle('hidden', textarea.value);
} }
textarea.addEventListener('input', onInput); textarea.addEventListener('input', onInput);
onInput(); onInput();

4
templates/index.html.tera
View File

@@ -4,6 +4,10 @@
<form action="/submit" method="post" ondrop="dropHandler(event)"> <form action="/submit" method="post" ondrop="dropHandler(event)">
<div class="grid_form"> <div class="grid_form">
<div class="textareaBox"> <div class="textareaBox">
<div class="fileUpload">
<input type="file" name="file-upload" id="file-upload" hidden />
<label for="file-upload">Upload a file</label>
</div>
<textarea name="content" id="textarea_content" style="resize: none" placeholder=" <textarea name="content" id="textarea_content" style="resize: none" placeholder="
bin(3) BIN bin(3) bin(3) BIN bin(3)