From b731e17c1ef56373f93eb760c45c0c1cf647cf8b Mon Sep 17 00:00:00 2001 From: Andrei Marcu Date: Wed, 16 Jan 2019 01:15:24 -0800 Subject: [PATCH] Cosmetic tweaks & fixes --- display.go | 1 + static/css/dropzone.css | 1 + static/css/linx.css | 176 +++++++++++++++++++---------------- static/js/bin.js | 4 +- templates/display/base.html | 2 +- templates/display/bin.html | 20 ++-- templates/display/story.html | 20 ++-- templates/paste.html | 10 +- 8 files changed, 120 insertions(+), 114 deletions(-) diff --git a/display.go b/display.go index ca5bc6f..63ba765 100644 --- a/display.go +++ b/display.go @@ -121,6 +121,7 @@ func fileDisplayHandler(c web.C, w http.ResponseWriter, r *http.Request) { "filename": fileName, "size": sizeHuman, "expiry": expiryHuman, + "expirylist": listExpirationTimes(), "extra": extra, "lines": lines, "files": metadata.ArchiveFiles, diff --git a/static/css/dropzone.css b/static/css/dropzone.css index f3c4cb2..e19794f 100644 --- a/static/css/dropzone.css +++ b/static/css/dropzone.css @@ -49,6 +49,7 @@ div.dz-default { border: 2px dashed #C9C9C9; + border-radius: 5px; color: #C9C9C9; font: 14px "helvetica neue",helvetica,arial,sans-serif; background-color: #FAFBFC; diff --git a/static/css/linx.css b/static/css/linx.css index a759dc6..82e256a 100644 --- a/static/css/linx.css +++ b/static/css/linx.css @@ -1,56 +1,56 @@ body { - background-color: #E8ECF0; - color: #556A7F; + background-color: #E8ECF0; + color: #556A7F; - font-family: Arial, Helvetica, sans-serif; - font-size: 14px; + font-family: Arial, Helvetica, sans-serif; + font-size: 14px; } #container_container { - display: table; - table-layout: fixed; - margin-left: auto; - margin-right: auto; + display: table; + table-layout: fixed; + margin-left: auto; + margin-right: auto; } #container { - display: table-cell; - min-width: 200px; + display: table-cell; + min-width: 200px; } #header a { - text-decoration: none; - color: #556A7F; + text-decoration: none; + color: #556A7F; } #navigation { - margin-top: 4px; + margin-top: 4px; } #navigation a { - text-decoration: none; - border-bottom: 1px dotted #556A7F; - color: #556A7F; + text-decoration: none; + border-bottom: 1px dotted #556A7F; + color: #556A7F; } #navigation a:hover { - background-color: #C7D1EB; + background-color: #C7D1EB; } #main { - background-color: white; + background-color: white; - padding: 6px 5px 8px 5px; + padding: 6px 5px 8px 5px; - -moz-box-shadow: 1px 1px 1px 1px #ccc; - -webkit-box-shadow: 1px 1px 1px 1px #ccc; - box-shadow: 1px 1px 1px 1px #ccc; + -moz-box-shadow: 1px 1px 1px 1px #ccc; + -webkit-box-shadow: 1px 1px 1px 1px #ccc; + box-shadow: 1px 1px 1px 1px #ccc; - text-align: center; + text-align: center; } #main a { - color: #556A7F; + color: #556A7F; } #normal-content { @@ -62,10 +62,6 @@ body { margin-bottom: 0; } -.ninfo { - margin-bottom: 5px; -} - .dinfo { -moz-box-shadow: 1px 1px 1px 1px #ccc; -webkit-box-shadow: 1px 1px 1px 1px #ccc; @@ -73,16 +69,12 @@ body { margin-bottom: 15px; } -.dinfo #filename { - margin: 2px 15px 0 0; -} - #info { - display: flex; - flex-wrap: wrap; - justify-content: space-between; + display: flex; + flex-wrap: wrap; + justify-content: space-between; background-color: white; - padding: 5px 5px 5px 5px; + padding: 5px 5px 5px 5px; } #info #extension, @@ -91,7 +83,7 @@ body { } #info .text-right { - font-size: 13px; + font-size: 13px; } #info a { @@ -104,56 +96,50 @@ body { background-color: #E8ECF0; } -#info input[type=text] { - border: 0; - color: #556A7F; -} - #info input[type=checkbox] { - margin: 0; - vertical-align: bottom; + margin: 0; + vertical-align: bottom; } #footer { - color: gray; - text-align: right; - margin-top: 30px; - margin-bottom: 10px; - font-size: 11px; + color: gray; + text-align: right; + margin-top: 30px; + margin-bottom: 10px; + font-size: 11px; } #footer a { - color: gray; - text-decoration: none; + color: gray; + text-decoration: none; } - .normal { - text-align: left; - font-size: 13px; + text-align: left; + font-size: 13px; } .normal a { - text-decoration: none; - border-bottom: 1px dotted gray; + text-decoration: none; + border-bottom: 1px dotted gray; } .normal a:hover { - color: black; - background-color: #E8ECF0; + color: black; + background-color: #E8ECF0; } .normal ul { - padding-left: 15px; + padding-left: 15px; } .normal li { - margin-bottom: 3px; - list-style: none; + margin-bottom: 3px; + list-style: none; } .normal li a { - font-weight: bold; + font-weight: bold; } .fixed { @@ -161,37 +147,46 @@ body { max-width: 800px; } +.paste { + width: 70vw; + max-width: 700px; +} + .needs-border { - border-top: 1px solid rgb(214, 214, 214); + border-top: 1px solid rgb(214, 214, 214); } .left { - text-align: left; + text-align: left; } .float-left { - float: left; + float: left; +} + +.pad-left { + padding-left: 10px; } .pad-right { - padding-right: 10px; + padding-right: 10px; } .text-right { - text-align: right; + text-align: right; } .center { - text-align: center; + text-align: center; } .float-right, .right { - float: right; + float: right; } .clear { - clear: both; + clear: both; } #upload_header { @@ -255,7 +250,7 @@ body { } #choices label:first-child { - margin-right: 15px; + margin-right: 15px; } #expiry { @@ -280,14 +275,34 @@ body { max-width: 90vw; } +.padme { + padding-left: 5px; + padding-right: 5px; +} + .editor { - width: 90vw; - max-width: 705px; - height: 450px; - border-color: #cccccc; - font-family: monospace; - resize: none; - overflow: auto; + width: 100%; + height: 450px; + border: 1px solid #eaeaea; + font-family: monospace; + resize: none; + overflow: auto; + border-radius: 2px; + padding: 2px; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + } + + + +#info input[type=text] { + border: 1px solid #eaeaea; + color: #556A7F; + border-radius: 4px 4px 4px 4px; + padding-left: 4px; + padding-right: 4px; + height: 15px; } .storygreen { @@ -329,15 +344,16 @@ body { #editform, #editform .editor { display: none; + width: 100% } #codeb { white-space: pre-wrap; } -#editor { +#inplace-editor { display: none; - width: 794px; + width: 100%; height: 800px; font-size: 13px; } diff --git a/static/js/bin.js b/static/js/bin.js index bcaf4f1..7aed334 100644 --- a/static/js/bin.js +++ b/static/js/bin.js @@ -32,13 +32,13 @@ function edit(ev) { var normalcontent = document.getElementById("normal-content"); normalcontent.removeChild(document.getElementById("normal-code")); - var editordiv = document.getElementById("editor"); + var editordiv = document.getElementById("inplace-editor"); editordiv.style.display = "block"; editordiv.addEventListener('keydown', handleTab); } function paste(ev) { - var editordiv = document.getElementById("editor"); + var editordiv = document.getElementById("inplace-editor"); document.getElementById("newcontent").value = editordiv.value; document.forms["reply"].submit(); } diff --git a/templates/display/base.html b/templates/display/base.html index 29d21b8..011534c 100644 --- a/templates/display/base.html +++ b/templates/display/base.html @@ -11,7 +11,7 @@ {{ filename }} -
+
{% if expiry %} file expires in {{ expiry }} | {% endif %} diff --git a/templates/display/bin.html b/templates/display/bin.html index 12e49c9..bd029a2 100644 --- a/templates/display/bin.html +++ b/templates/display/bin.html @@ -12,23 +12,17 @@ {% block infoleft %}
-
+
+ - -
- . + .
@@ -41,7 +35,7 @@ {% block main %} 
{{ extra.contents }}
- +
diff --git a/templates/display/story.html b/templates/display/story.html index 763fd4a..20e772c 100644 --- a/templates/display/story.html +++ b/templates/display/story.html @@ -10,23 +10,17 @@ {% block infoleft %}
-
+
+ - -
- . + .
@@ -39,7 +33,7 @@ {% block main %} 
{% for line in lines %}{% if line|make_list|first == ">" %}{{ line }}{% else %}{{ line }}{% endif %}{% endfor %}
- +
diff --git a/templates/paste.html b/templates/paste.html index c4e88e9..7737760 100644 --- a/templates/paste.html +++ b/templates/paste.html @@ -2,10 +2,10 @@ {% block content %}
-
-
+
+
- . + .
@@ -18,8 +18,8 @@
-
- +
+