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 2019-01-29 07:00:08 +00:00 committed by Andrei Marcu
parent f46b61399b
commit 73f127306c
7 changed files with 105 additions and 99 deletions

View file

@ -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;
}
/* }}} */
/* }}} */

View file

@ -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