From f54264c47c815fbc1402235566617827fc161f85 Mon Sep 17 00:00:00 2001 From: mutantmonkey Date: Sun, 27 Jan 2019 19:11:24 -0800 Subject: [PATCH] Improve UI a bit * Remove right margin from expiration dropdown on index * Use flexbox for bin/story display * Move Paste/Save button after expire dropdown, instead of before --- static/css/linx.css | 33 +++++----- static/js/bin.js | 116 +++++++++++++++++------------------ templates/base.html | 2 +- templates/display/base.html | 4 +- templates/display/bin.html | 23 ++++--- templates/display/story.html | 20 +++--- templates/paste.html | 6 +- 7 files changed, 105 insertions(+), 99 deletions(-) diff --git a/static/css/linx.css b/static/css/linx.css index 82e256a..15abee4 100644 --- a/static/css/linx.css +++ b/static/css/linx.css @@ -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; } -/* }}} */ \ No newline at end of file +/* }}} */ diff --git a/static/js/bin.js b/static/js/bin.js index 7aed334..11c6c21 100644 --- a/static/js/bin.js +++ b/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 diff --git a/templates/base.html b/templates/base.html index 5392f8d..d1411d4 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,7 +4,7 @@ {% block title %}{{ sitename }}{% endblock %} - + {% block head %}{% endblock %} diff --git a/templates/display/base.html b/templates/display/base.html index 011534c..935979f 100644 --- a/templates/display/base.html +++ b/templates/display/base.html @@ -6,12 +6,12 @@ {% block content %} -
+
{{ filename }}
-
+
{% if expiry %} file expires in {{ expiry }} | {% endif %} diff --git a/templates/display/bin.html b/templates/display/bin.html index dee64d8..c3ee97c 100644 --- a/templates/display/bin.html +++ b/templates/display/bin.html @@ -11,24 +11,27 @@ {% block infoleft %}
-
-
- - {% endif %}. +
+
+ + + +
- - {% if not forcerandom %}{% endif %}.
{% endblock %} -{%block infomore %} +{% block infomore %} | {% endblock %} @@ -45,5 +48,5 @@ {% endif %} - + {% endblock %} diff --git a/templates/display/story.html b/templates/display/story.html index 1ef96b1..cb30323 100644 --- a/templates/display/story.html +++ b/templates/display/story.html @@ -9,18 +9,22 @@ {% block infoleft %}
-
-
- - {% endif %}. +
+
+ + + +
- {% if not forcerandom %}{% endif %}.
@@ -38,5 +42,5 @@ - + {% endblock %} diff --git a/templates/paste.html b/templates/paste.html index ab7965f..245b7a3 100644 --- a/templates/paste.html +++ b/templates/paste.html @@ -3,18 +3,18 @@ {% block content %}
-
+
{% if not forcerandom %}{% endif %}.
- +