Improve UI a bit (#161)
* Remove right margin from expiration dropdown on index * Use flexbox for bin/story display * Move Paste/Save button after expire dropdown, instead of before
This commit is contained in:
mutantmonkey
Andrei Marcu
parent
f46b61399b
commit
73f127306c
|
|
@ -70,11 +70,21 @@ body {
|
|||
}
|
||||
|
||||
#info {
|
||||
background-color: white;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.info-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
background-color: white;
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.info-actions {
|
||||
margin-left: 15px;
|
||||
font-size: 13px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#info #extension,
|
||||
|
|
@ -82,10 +92,6 @@ body {
|
|||
width: 40px;
|
||||
}
|
||||
|
||||
#info .text-right {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#info a {
|
||||
text-decoration: none;
|
||||
color: #556A7F;
|
||||
|
|
@ -246,11 +252,7 @@ body {
|
|||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
#choices label:first-child {
|
||||
margin-right: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#expiry {
|
||||
|
|
@ -295,14 +297,11 @@ body {
|
|||
}
|
||||
|
||||
|
||||
|
||||
#info input[type=text] {
|
||||
border: 1px solid #eaeaea;
|
||||
color: #556A7F;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
height: 15px;
|
||||
padding: 2px 4px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.storygreen {
|
||||
|
|
@ -357,4 +356,4 @@ body {
|
|||
height: 800px;
|
||||
font-size: 13px;
|
||||
}
|
||||
/* }}} */
|
||||
/* }}} */
|
||||
|
|
|
|||
116
static/js/bin.js
116
static/js/bin.js
|
|
@ -1,58 +1,58 @@
|
|||
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
|
||||
|
||||
var navlist = document.getElementById("info").getElementsByClassName("text-right")[0];
|
||||
|
||||
init();
|
||||
|
||||
function init() {
|
||||
var editA = document.createElement('a');
|
||||
|
||||
editA.setAttribute("href", "#");
|
||||
editA.addEventListener('click', function(ev) {
|
||||
edit(ev);
|
||||
return false;
|
||||
});
|
||||
editA.innerHTML = "edit";
|
||||
|
||||
var separator = document.createTextNode(" | ");
|
||||
navlist.insertBefore(editA, navlist.firstChild);
|
||||
navlist.insertBefore(separator, navlist.children[1]);
|
||||
|
||||
document.getElementById('save').addEventListener('click', paste);
|
||||
document.getElementById('wordwrap').addEventListener('click', wrap);
|
||||
}
|
||||
|
||||
function edit(ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
navlist.remove();
|
||||
document.getElementById("filename").remove();
|
||||
document.getElementById("editform").style.display = "block";
|
||||
|
||||
var normalcontent = document.getElementById("normal-content");
|
||||
normalcontent.removeChild(document.getElementById("normal-code"));
|
||||
|
||||
var editordiv = document.getElementById("inplace-editor");
|
||||
editordiv.style.display = "block";
|
||||
editordiv.addEventListener('keydown', handleTab);
|
||||
}
|
||||
|
||||
function paste(ev) {
|
||||
var editordiv = document.getElementById("inplace-editor");
|
||||
document.getElementById("newcontent").value = editordiv.value;
|
||||
document.forms["reply"].submit();
|
||||
}
|
||||
|
||||
function wrap(ev) {
|
||||
if (document.getElementById("wordwrap").checked) {
|
||||
document.getElementById("codeb").style.wordWrap = "break-word";
|
||||
document.getElementById("codeb").style.whiteSpace = "pre-wrap";
|
||||
}
|
||||
|
||||
else {
|
||||
document.getElementById("codeb").style.wordWrap = "normal";
|
||||
document.getElementById("codeb").style.whiteSpace = "pre";
|
||||
}
|
||||
}
|
||||
|
||||
// @license-end
|
||||
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
|
||||
|
||||
var navlist = document.getElementById("info").getElementsByClassName("info-actions")[0];
|
||||
|
||||
init();
|
||||
|
||||
function init() {
|
||||
var editA = document.createElement('a');
|
||||
|
||||
editA.setAttribute("href", "#");
|
||||
editA.addEventListener('click', function(ev) {
|
||||
edit(ev);
|
||||
return false;
|
||||
});
|
||||
editA.innerHTML = "edit";
|
||||
|
||||
var separator = document.createTextNode(" | ");
|
||||
navlist.insertBefore(editA, navlist.firstChild);
|
||||
navlist.insertBefore(separator, navlist.children[1]);
|
||||
|
||||
document.getElementById('save').addEventListener('click', paste);
|
||||
document.getElementById('wordwrap').addEventListener('click', wrap);
|
||||
}
|
||||
|
||||
function edit(ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
navlist.remove();
|
||||
document.getElementById("filename").remove();
|
||||
document.getElementById("editform").style.display = "block";
|
||||
|
||||
var normalcontent = document.getElementById("normal-content");
|
||||
normalcontent.removeChild(document.getElementById("normal-code"));
|
||||
|
||||
var editordiv = document.getElementById("inplace-editor");
|
||||
editordiv.style.display = "block";
|
||||
editordiv.addEventListener('keydown', handleTab);
|
||||
}
|
||||
|
||||
function paste(ev) {
|
||||
var editordiv = document.getElementById("inplace-editor");
|
||||
document.getElementById("newcontent").value = editordiv.value;
|
||||
document.forms["reply"].submit();
|
||||
}
|
||||
|
||||
function wrap(ev) {
|
||||
if (document.getElementById("wordwrap").checked) {
|
||||
document.getElementById("codeb").style.wordWrap = "break-word";
|
||||
document.getElementById("codeb").style.whiteSpace = "pre-wrap";
|
||||
}
|
||||
|
||||
else {
|
||||
document.getElementById("codeb").style.wordWrap = "normal";
|
||||
document.getElementById("codeb").style.whiteSpace = "pre";
|
||||
}
|
||||
}
|
||||
|
||||
// @license-end
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>{% block title %}{{ sitename }}{% endblock %}</title>
|
||||
<meta charset='utf-8' content='text/html' http-equiv='content-type'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||
<link href='{{ sitepath }}static/css/linx.css' media='screen, projection' rel='stylesheet' type='text/css'>
|
||||
<link href='{{ sitepath }}static/css/linx.css?v=1' media='screen, projection' rel='stylesheet' type='text/css'>
|
||||
<link href='{{ sitepath }}static/css/hint.css' rel='stylesheet' type='text/css'>
|
||||
<link href='{{ sitepath }}static/images/favicon.gif' rel='icon' type='image/gif'>
|
||||
{% block head %}{% endblock %}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
<div id="info" class="dinfo">
|
||||
<div id="info" class="dinfo info-flex">
|
||||
<div id="filename">
|
||||
{{ filename }}
|
||||
</div>
|
||||
|
||||
<div class='text-right pad-left'>
|
||||
<div class="info-actions">
|
||||
{% if expiry %}
|
||||
<span>file expires in {{ expiry }}</span> |
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -11,24 +11,27 @@
|
|||
|
||||
{% block infoleft %}
|
||||
<div id="editform">
|
||||
<form id="reply" action='{{ sitepath }}upload' method='post' >
|
||||
<div class="right pad-left">
|
||||
<button id="save">save</button>
|
||||
<select id="expiry" name="expires">
|
||||
<option disabled=disabled>Expires:</option>
|
||||
<form id="reply" action='{{ sitepath }}upload' method='post'>
|
||||
<div class="info-flex">
|
||||
<div>
|
||||
{% if not forcerandom %}<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename">{% endif %}.<input id="extension" class="codebox" name='extension' type='text' value="{{ extra.extension }}" placeholder="txt">
|
||||
</div>
|
||||
<div class="info-actions">
|
||||
<select id="expiry" name="expires">
|
||||
<option disabled>Expires:</option>
|
||||
{% for expiry in expirylist %}
|
||||
<option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</select>
|
||||
<button type="submit" id="save">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if not forcerandom %}<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename">{% endif %}.<input id="extension" class="codebox" name='extension' type='text' value="{{ extra.extension }}" placeholder="txt">
|
||||
<textarea name='content' id="newcontent" class="editor"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{%block infomore %}
|
||||
{% block infomore %}
|
||||
<label>wrap <input id="wordwrap" type="checkbox" checked></label> |
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -45,5 +48,5 @@
|
|||
{% endif %}
|
||||
|
||||
<script src="{{ sitepath }}static/js/util.js"></script>
|
||||
<script src="{{ sitepath }}static/js/bin.js"></script>
|
||||
<script src="{{ sitepath }}static/js/bin.js?v=1"></script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -9,18 +9,22 @@
|
|||
|
||||
{% block infoleft %}
|
||||
<div id="editform">
|
||||
<form id="reply" action='{{ sitepath }}upload' method='post' >
|
||||
<div class="right pad-left">
|
||||
<button id="save">save</button>
|
||||
<select id="expiry" name="expires">
|
||||
<option disabled=disabled>Expires:</option>
|
||||
<form id="reply" action='{{ sitepath }}upload' method='post'>
|
||||
<div class="info-flex">
|
||||
<div>
|
||||
{% if not forcerandom %}<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename">{% endif %}.<input id="extension" class="codebox" name='extension' type='text' value="story" placeholder="txt">
|
||||
</div>
|
||||
<div class="info-actions">
|
||||
<select id="expiry" name="expires">
|
||||
<option disabled>Expires:</option>
|
||||
{% for expiry in expirylist %}
|
||||
<option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</select>
|
||||
<button type="submit" id="save">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if not forcerandom %}<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename">{% endif %}.<input id="extension" class="codebox" name='extension' type='text' value="story" placeholder="txt">
|
||||
<textarea name='content' id="newcontent" class="editor"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -38,5 +42,5 @@
|
|||
|
||||
|
||||
<script src="{{ sitepath }}static/js/util.js"></script>
|
||||
<script src="{{ sitepath }}static/js/bin.js"></script>
|
||||
<script src="{{ sitepath }}static/js/bin.js?v=1"></script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -3,18 +3,18 @@
|
|||
{% block content %}
|
||||
<form id="reply" action='{{ sitepath }}upload' method='post'>
|
||||
<div id="main" class="paste">
|
||||
<div id="info">
|
||||
<div id="info" class="info-flex">
|
||||
<div>
|
||||
{% if not forcerandom %}<span class="hint--top hint--bounce" data-hint="Leave empty for random filename"><input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename" /></span>{% endif %}.<span class="hint--top hint--bounce" data-hint="Enable syntax highlighting by adding the extension"><input id="extension" class="codebox" name='extension' type='text' value="" placeholder="txt" /></span>
|
||||
</div>
|
||||
<div>
|
||||
<input type="submit" value="Paste">
|
||||
<select id="expiry" name="expires">
|
||||
<option disabled="disabled">Expires:</option>
|
||||
<option disabled>Expires:</option>
|
||||
{% for expiry in expirylist %}
|
||||
<option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit">Paste</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue