css: change placeholder and made the UI generally tighter

Also I have encouraged the user to change their monospace font
accordingly for the best personal satisfaction.

Signed-off-by: Gunwant Jain <mail@wantguns.dev>
This commit is contained in:
Gunwant Jain
2021-06-19 08:02:41 +05:30
parent 1f84fd28b9
commit 150bade1e5
2 changed files with 36 additions and 50 deletions

View File

@@ -12,22 +12,17 @@
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@460&display=swap');
/* fill entire page */
code {
padding: 0px;
background: transparent !important;
font-family: 'Fira Code', monospace;
font-family: monospace;
}
body {
/* Change background color to that of your theme's */
background: #191f26;
padding: 20px 50px;
margin: 0px;
padding: 10px;
color: #E6E1CF;
/* color: #5c6773; */
}
::selection {

View File

@@ -9,7 +9,6 @@ overflow-y:hidden;
body {
height: 100vh;
font-family: monospace;
padding: 3rem;
display: flex;
}
@@ -23,13 +22,11 @@ width: 100%;
background: none;
border: none;
padding-left: 10px
resize: none;
overflow: auto;
color: inherit;
font-family: 'Fira Code', monospace;
font-family: monospace;
line-height: inherit;
}
@@ -49,53 +46,40 @@ font-size: 0rem;
cursor: pointer;
}
textarea:focus, input:focus {
outline: none;
}
*:focus {
outline: none;
}
button[type="submit"].hidden { display: none; }
#drop_zone {
border: 1px dashed grey;
width: 100%;
height: 100%;
}
{% endblock styles %}
{% block body %}
<form action="/submit" method="post">
<textarea style="resize: none" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" placeholder="
<textarea name="val" style="resize: none" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" placeholder="
========
bin(3) Bin Manual bin(3)
NAME
bin - A highly opinionated and minamalistic Pastebin
WEB USAGE
---------
Drag a file and drop it here.
or
After typing, press the big yellow button to paste.
or
Drag a file and drop it here, or
After typing, press the big yellow button to paste, or
Just press Ctrl + Enter once done.
CLI USAGE
---------
curl -Ls -o /dev/null -w %{url_effective} --data-binary @file.txt https://bin.wantguns.dev
Better use-cases of CLI mentioned at Github.
Better use cases of CLI mentioned at Github
========
SEE ALSO
github.com/wantguns/bin
open-sourced at: github.com/wantguns/bin" autofocus autocomplete="off" autocorrect="off" autocapitalize="off"
AUTHOR
Gunwant Jain
2021-06-19 bin(3)
" autofocus autocomplete="off" autocorrect="off" autocapitalize="off"
spellcheck="false"></textarea>
<button type="submit" title="Paste">&#x2398</button>
@@ -106,6 +90,16 @@ open-sourced at: github.com/wantguns/bin" autofocus autocomplete="off" autoco
const input = document.querySelector('textarea');
const button = document.querySelector('button[type="submit"]');
const onInput = () => button.classList.toggle('hidden', !input.value);
input.addEventListener('input', onInput);
onInput();
document.body.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && e.ctrlKey) {
form.submit();
}
});
async function postData(url = '', data) {
const response = await fetch(url, {
method: 'POST',
@@ -117,16 +111,6 @@ open-sourced at: github.com/wantguns/bin" autofocus autocomplete="off" autoco
return response;
}
const onInput = () => button.classList.toggle('hidden', !input.value);
input.addEventListener('input', onInput);
onInput();
document.body.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && e.ctrlKey) {
form.submit();
}
});
function dropHandler(ev) {
console.log('File(s) dropped');
@@ -155,5 +139,12 @@ open-sourced at: github.com/wantguns/bin" autofocus autocomplete="off" autoco
}
}
}
function dragOverHandler(ev) {
console.log('File(s) in drop zone');
ev.preventDefault();
}
</script>
{% endblock body %}