Cosmetic tweaks & fixes

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,

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;

static/css/linx.css

@@ -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,10 +69,6 @@ body {
   margin-bottom: 15px;
 }
 
-.dinfo #filename {
-	margin: 2px 15px 0 0;
-}
-
 #info {
   display: flex;
   flex-wrap: wrap;
@@ -104,11 +96,6 @@ body {
   background-color: #E8ECF0;
 }
 
-#info input[type=text] {
-  border: 0;
-    color: #556A7F;
-}
-
 #info input[type=checkbox] {
   margin: 0;
   vertical-align: bottom;
@@ -127,7 +114,6 @@ body {
   text-decoration: none;
 }
 
-
 .normal {
   text-align: left;
   font-size: 13px;
@@ -161,6 +147,11 @@ body {
     max-width: 800px;
 }
 
+.paste {
+    width: 70vw;
+    max-width: 700px;
+}
+
 .needs-border {
   border-top: 1px solid rgb(214, 214, 214);
 }
@@ -173,6 +164,10 @@ body {
   float: left;
 }
 
+.pad-left {
+  padding-left: 10px;
+}
+
 .pad-right {
   padding-right: 10px;
 }
@@ -280,14 +275,34 @@ body {
     max-width: 90vw;
 }
 
+.padme {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
 .editor {
-    width: 90vw;
+  width: 100%;
-    max-width: 705px;
   height: 450px;
-    border-color: #cccccc;
+  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;
 }

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();
 }

templates/display/base.html

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

templates/display/bin.html

@@ -12,23 +12,17 @@
 {% block infoleft %}
     <div id="editform">
         <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">
                     <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>
-
-                <button id="save">save</button>
             </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>
         </form>
     </div>
@@ -41,7 +35,7 @@
 {% block main %}
 <div id="normal-content" class="normal fixed">
     <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>
 
 

templates/display/story.html

@@ -10,23 +10,17 @@
 {% block infoleft %}
     <div id="editform">
         <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">
                     <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>
-
-                <button id="save">save</button>
             </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>
         </form>
     </div>
@@ -39,7 +33,7 @@
 {% block main %}
 <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>
-    <textarea id="editor" class="editor">{{ extra.contents }}</textarea>
+    <textarea id="inplace-editor" class="editor">{{ extra.contents }}</textarea>
 </div>
 
 

templates/paste.html

@@ -2,10 +2,10 @@
 
 {% block content %}
     <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>
-                    <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>
                     <input type="submit" value="Paste">
@@ -18,7 +18,7 @@
                 </div>
             </div>
 
-            <div id="inner_content">
+            <div id="inner_content" class="padme">
                     <textarea name='content' id="content" class="editor"></textarea>
             </div>
         </div>