Cosmetic tweaks & fixes

This commit is contained in:
Andrei Marcu 2019-01-16 01:15:24 -08:00
parent fd0f3d9e46
commit b731e17c1e
8 changed files with 120 additions and 114 deletions

View File

@ -121,6 +121,7 @@ func fileDisplayHandler(c web.C, w http.ResponseWriter, r *http.Request) {
"filename": fileName, "filename": fileName,
"size": sizeHuman, "size": sizeHuman,
"expiry": expiryHuman, "expiry": expiryHuman,
"expirylist": listExpirationTimes(),
"extra": extra, "extra": extra,
"lines": lines, "lines": lines,
"files": metadata.ArchiveFiles, "files": metadata.ArchiveFiles,

View File

@ -49,6 +49,7 @@
div.dz-default { div.dz-default {
border: 2px dashed #C9C9C9; border: 2px dashed #C9C9C9;
border-radius: 5px;
color: #C9C9C9; color: #C9C9C9;
font: 14px "helvetica neue",helvetica,arial,sans-serif; font: 14px "helvetica neue",helvetica,arial,sans-serif;
background-color: #FAFBFC; background-color: #FAFBFC;

View File

@ -1,56 +1,56 @@
body { body {
background-color: #E8ECF0; background-color: #E8ECF0;
color: #556A7F; color: #556A7F;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 14px; font-size: 14px;
} }
#container_container { #container_container {
display: table; display: table;
table-layout: fixed; table-layout: fixed;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
#container { #container {
display: table-cell; display: table-cell;
min-width: 200px; min-width: 200px;
} }
#header a { #header a {
text-decoration: none; text-decoration: none;
color: #556A7F; color: #556A7F;
} }
#navigation { #navigation {
margin-top: 4px; margin-top: 4px;
} }
#navigation a { #navigation a {
text-decoration: none; text-decoration: none;
border-bottom: 1px dotted #556A7F; border-bottom: 1px dotted #556A7F;
color: #556A7F; color: #556A7F;
} }
#navigation a:hover { #navigation a:hover {
background-color: #C7D1EB; background-color: #C7D1EB;
} }
#main { #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; -moz-box-shadow: 1px 1px 1px 1px #ccc;
-webkit-box-shadow: 1px 1px 1px 1px #ccc; -webkit-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc;
text-align: center; text-align: center;
} }
#main a { #main a {
color: #556A7F; color: #556A7F;
} }
#normal-content { #normal-content {
@ -62,10 +62,6 @@ body {
margin-bottom: 0; margin-bottom: 0;
} }
.ninfo {
margin-bottom: 5px;
}
.dinfo { .dinfo {
-moz-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc;
-webkit-box-shadow: 1px 1px 1px 1px #ccc; -webkit-box-shadow: 1px 1px 1px 1px #ccc;
@ -73,16 +69,12 @@ body {
margin-bottom: 15px; margin-bottom: 15px;
} }
.dinfo #filename {
margin: 2px 15px 0 0;
}
#info { #info {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
background-color: white; background-color: white;
padding: 5px 5px 5px 5px; padding: 5px 5px 5px 5px;
} }
#info #extension, #info #extension,
@ -91,7 +83,7 @@ body {
} }
#info .text-right { #info .text-right {
font-size: 13px; font-size: 13px;
} }
#info a { #info a {
@ -104,56 +96,50 @@ body {
background-color: #E8ECF0; background-color: #E8ECF0;
} }
#info input[type=text] {
border: 0;
color: #556A7F;
}
#info input[type=checkbox] { #info input[type=checkbox] {
margin: 0; margin: 0;
vertical-align: bottom; vertical-align: bottom;
} }
#footer { #footer {
color: gray; color: gray;
text-align: right; text-align: right;
margin-top: 30px; margin-top: 30px;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 11px; font-size: 11px;
} }
#footer a { #footer a {
color: gray; color: gray;
text-decoration: none; text-decoration: none;
} }
.normal { .normal {
text-align: left; text-align: left;
font-size: 13px; font-size: 13px;
} }
.normal a { .normal a {
text-decoration: none; text-decoration: none;
border-bottom: 1px dotted gray; border-bottom: 1px dotted gray;
} }
.normal a:hover { .normal a:hover {
color: black; color: black;
background-color: #E8ECF0; background-color: #E8ECF0;
} }
.normal ul { .normal ul {
padding-left: 15px; padding-left: 15px;
} }
.normal li { .normal li {
margin-bottom: 3px; margin-bottom: 3px;
list-style: none; list-style: none;
} }
.normal li a { .normal li a {
font-weight: bold; font-weight: bold;
} }
.fixed { .fixed {
@ -161,37 +147,46 @@ body {
max-width: 800px; max-width: 800px;
} }
.paste {
width: 70vw;
max-width: 700px;
}
.needs-border { .needs-border {
border-top: 1px solid rgb(214, 214, 214); border-top: 1px solid rgb(214, 214, 214);
} }
.left { .left {
text-align: left; text-align: left;
} }
.float-left { .float-left {
float: left; float: left;
}
.pad-left {
padding-left: 10px;
} }
.pad-right { .pad-right {
padding-right: 10px; padding-right: 10px;
} }
.text-right { .text-right {
text-align: right; text-align: right;
} }
.center { .center {
text-align: center; text-align: center;
} }
.float-right, .right { .float-right, .right {
float: right; float: right;
} }
.clear { .clear {
clear: both; clear: both;
} }
#upload_header { #upload_header {
@ -255,7 +250,7 @@ body {
} }
#choices label:first-child { #choices label:first-child {
margin-right: 15px; margin-right: 15px;
} }
#expiry { #expiry {
@ -280,14 +275,34 @@ body {
max-width: 90vw; max-width: 90vw;
} }
.padme {
padding-left: 5px;
padding-right: 5px;
}
.editor { .editor {
width: 90vw; width: 100%;
max-width: 705px; height: 450px;
height: 450px; border: 1px solid #eaeaea;
border-color: #cccccc; font-family: monospace;
font-family: monospace; resize: none;
resize: none; overflow: auto;
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 { .storygreen {
@ -329,15 +344,16 @@ body {
#editform, #editform,
#editform .editor { #editform .editor {
display: none; display: none;
width: 100%
} }
#codeb { #codeb {
white-space: pre-wrap; white-space: pre-wrap;
} }
#editor { #inplace-editor {
display: none; display: none;
width: 794px; width: 100%;
height: 800px; height: 800px;
font-size: 13px; font-size: 13px;
} }

View File

@ -32,13 +32,13 @@ function edit(ev) {
var normalcontent = document.getElementById("normal-content"); var normalcontent = document.getElementById("normal-content");
normalcontent.removeChild(document.getElementById("normal-code")); normalcontent.removeChild(document.getElementById("normal-code"));
var editordiv = document.getElementById("editor"); var editordiv = document.getElementById("inplace-editor");
editordiv.style.display = "block"; editordiv.style.display = "block";
editordiv.addEventListener('keydown', handleTab); editordiv.addEventListener('keydown', handleTab);
} }
function paste(ev) { function paste(ev) {
var editordiv = document.getElementById("editor"); var editordiv = document.getElementById("inplace-editor");
document.getElementById("newcontent").value = editordiv.value; document.getElementById("newcontent").value = editordiv.value;
document.forms["reply"].submit(); document.forms["reply"].submit();
} }

View File

@ -11,7 +11,7 @@
{{ filename }} {{ filename }}
</div> </div>
<div class='text-right'> <div class='text-right pad-left'>
{% if expiry %} {% if expiry %}
<span>file expires in {{ expiry }}</span> | <span>file expires in {{ expiry }}</span> |
{% endif %} {% endif %}

View File

@ -12,23 +12,17 @@
{% block infoleft %} {% block infoleft %}
<div id="editform"> <div id="editform">
<form id="reply" action='{{ sitepath }}upload' method='post' > <form id="reply" action='{{ sitepath }}upload' method='post' >
<div class="right"> <div class="right pad-left">
<button id="save">save</button>
<select id="expiry" name="expires"> <select id="expiry" name="expires">
<option disabled=disabled>Expires:</option> <option disabled=disabled>Expires:</option>
<option value="0">never</option> {% for expiry in expirylist %}
<option value="60">a minute</option> <option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
<option value="300">5 minutes</option> {% endfor %}
<option value="3600">an hour</option>
<option value="86400">a day</option>
<option value="604800">a week</option>
<option value="2419200">a month</option>
<option value="29030400">a year</option>
</select> </select>
<button id="save">save</button>
</div> </div>
<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)">.<input id="extension" class="codebox" name='extension' type='text' value="{{ extra.extension }}" placeholder="txt"> <input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename">.<input id="extension" class="codebox" name='extension' type='text' value="{{ extra.extension }}" placeholder="txt">
<textarea name='content' id="newcontent" class="editor"></textarea> <textarea name='content' id="newcontent" class="editor"></textarea>
</form> </form>
</div> </div>
@ -41,7 +35,7 @@
{% block main %} {% block main %}
<div id="normal-content" class="normal fixed"> <div id="normal-content" class="normal fixed">
<pre id="normal-code"><code id="codeb" class="{{ extra.lang_hl }}">{{ extra.contents }}</code></pre> <pre id="normal-code"><code id="codeb" class="{{ extra.lang_hl }}">{{ extra.contents }}</code></pre>
<textarea id="editor" class="editor">{{ extra.contents }}</textarea> <textarea id="inplace-editor" class="editor">{{ extra.contents }}</textarea>
</div> </div>

View File

@ -10,23 +10,17 @@
{% block infoleft %} {% block infoleft %}
<div id="editform"> <div id="editform">
<form id="reply" action='{{ sitepath }}upload' method='post' > <form id="reply" action='{{ sitepath }}upload' method='post' >
<div class="right"> <div class="right pad-left">
<button id="save">save</button>
<select id="expiry" name="expires"> <select id="expiry" name="expires">
<option disabled=disabled>Expires:</option> <option disabled=disabled>Expires:</option>
<option value="0">never</option> {% for expiry in expirylist %}
<option value="60">a minute</option> <option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
<option value="300">5 minutes</option> {% endfor %}
<option value="3600">an hour</option>
<option value="86400">a day</option>
<option value="604800">a week</option>
<option value="2419200">a month</option>
<option value="29030400">a year</option>
</select> </select>
<button id="save">save</button>
</div> </div>
<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)">.<input id="extension" class="codebox" name='extension' type='text' value="story" placeholder="txt"> <input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename">.<input id="extension" class="codebox" name='extension' type='text' value="story" placeholder="txt">
<textarea name='content' id="newcontent" class="editor"></textarea> <textarea name='content' id="newcontent" class="editor"></textarea>
</form> </form>
</div> </div>
@ -39,7 +33,7 @@
{% block main %} {% block main %}
<div id="normal-content" class="normal"> <div id="normal-content" class="normal">
<pre id="normal-code"><code id="codeb" class="story">{% for line in lines %}{% if line|make_list|first == ">" %}<span class="storygreen">{{ line }}</span>{% else %}<span class="storyred">{{ line }}</span>{% endif %}{% endfor %}</code></pre> <pre id="normal-code"><code id="codeb" class="story">{% for line in lines %}{% if line|make_list|first == ">" %}<span class="storygreen">{{ line }}</span>{% else %}<span class="storyred">{{ line }}</span>{% endif %}{% endfor %}</code></pre>
<textarea id="editor" class="editor">{{ extra.contents }}</textarea> <textarea id="inplace-editor" class="editor">{{ extra.contents }}</textarea>
</div> </div>

View File

@ -2,10 +2,10 @@
{% block content %} {% block content %}
<form id="reply" action='{{ sitepath }}upload' method='post'> <form id="reply" action='{{ sitepath }}upload' method='post'>
<div id="main"> <div id="main" class="paste">
<div id="info" class="ninfo"> <div id="info">
<div> <div>
<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)" />.<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> <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>.<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>
<div> <div>
<input type="submit" value="Paste"> <input type="submit" value="Paste">
@ -18,8 +18,8 @@
</div> </div>
</div> </div>
<div id="inner_content"> <div id="inner_content" class="padme">
<textarea name='content' id="content" class="editor"></textarea> <textarea name='content' id="content" class="editor"></textarea>
</div> </div>
</div> </div>
</form> </form>