Move business logic out of main, use askama and bound the ENTRIES

This commit is contained in:
Jordan Johnson-Doyle 2019-02-11 10:37:50 +00:00
parent 3093b06b4e
commit 9d4b3ecafc
No known key found for this signature in database
GPG key ID: A95F87B578CE79B6
8 changed files with 156 additions and 578 deletions

29
templates/base.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bin.</title>
<style>
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
height: 100vh;
padding: 2rem;
background: #263238;
color: #B0BEC5;
display: flex;
}
{% block styles %}
{% endblock styles %}
</style>
</head>
<body>
{% block content %}
{% endblock content %}
</body>
</html>

59
templates/index.html Normal file
View file

@ -0,0 +1,59 @@
{% extends "base.html" %}
{% block styles %}
form { flex: 1; }
textarea {
height: 100%;
width: 100%;
background: none;
border: none;
color: inherit;
font-family: monospace;
resize: none;
}
button[type="submit"] {
position: absolute;
bottom: 1rem;
right: 1rem;
height: 3rem;
width: 3rem;
border: none;
border-radius: 50%;
background: #2196F3;
color: white;
font-size: 2rem;
cursor: pointer;
}
button[type="submit"].hidden { display: none; }
{% endblock styles %}
{% block content %}
<form action="/" method="post">
<textarea name="val" placeholder="bin something" autofocus autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
<button type="submit" title="&#x2318;+&#x23ce;">&#x270e;</button>
</form>
<script>
const form = document.querySelector('form');
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.keyCode === 13 && e.metaKey) {
form.submit();
}
});
</script>
{% endblock content %}

16
templates/paste.html Normal file
View file

@ -0,0 +1,16 @@
{% extends "base.html" %}
{% block styles %}
pre {
height: 100%;
width: 100%;
margin: 0;
overflow: scroll;
font-family: Courier;
line-height: 1.1;
}
{% endblock styles %}
{% block content %}
<pre><code>{{ content|safe }}</code></pre>
{% endblock content %}