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
andreimarcu · Jan 29, 2019 · 73f1273 · 73f1273
1 parent f46b613
commit 73f1273
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 99 deletions.
diff --git a/static/css/linx.css b/static/css/linx.css
@@ -70,22 +70,28 @@ 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,
 #editform #extension {
     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;
 }
-/* }}} */
+/* }}} */
diff --git 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
@@ -4,7 +4,7 @@
 	<title>{% block title %}{{ sitename }}{% endblock %}</title>
 	<meta charset='utf-8' content='text/html' http-equiv='content-type'>
 	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
-	<link href='{{ sitepath }}static/css/linx.css' media='screen, projection' rel='stylesheet' type='text/css'>
+	<link href='{{ sitepath }}static/css/linx.css?v=1' media='screen, projection' rel='stylesheet' type='text/css'>
 	<link href='{{ sitepath }}static/css/hint.css' rel='stylesheet' type='text/css'>
 	<link href='{{ sitepath }}static/images/favicon.gif' rel='icon' type='image/gif'>
 	{% block head %}{% endblock %}

diff --git a/templates/display/base.html b/templates/display/base.html
@@ -6,12 +6,12 @@
 
 {% block content %}
 
-    <div id="info" class="dinfo">
+    <div id="info" class="dinfo info-flex">
         <div id="filename">
             {{ filename }}
         </div>
 
-        <div class='text-right pad-left'>
+        <div class="info-actions">
             {% if expiry %}
             <span>file expires in {{ expiry }}</span> | 
             {% endif %}

diff --git a/templates/display/bin.html b/templates/display/bin.html
@@ -11,24 +11,27 @@
 
 {% block infoleft %}
     <div id="editform">
-        <form id="reply" action='{{ sitepath }}upload' method='post' >
-            <div class="right pad-left">
-                <button id="save">save</button>
-                <select id="expiry" name="expires">
-                    <option disabled=disabled>Expires:</option>
+        <form id="reply" action='{{ sitepath }}upload' method='post'>
+            <div class="info-flex">
+                <div>
+                {% if not forcerandom %}<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename">{% endif %}.<input id="extension" class="codebox" name='extension' type='text' value="{{ extra.extension }}" placeholder="txt">
+                </div>
+                <div class="info-actions">
+                    <select id="expiry" name="expires">
+                        <option disabled>Expires:</option>
                         {% for expiry in expirylist %}
                         <option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
                         {% endfor %}
-                </select>
+                    </select>
+                    <button type="submit" id="save">Save</button>
+                </div>
             </div>
-
-            {% if not forcerandom %}<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename">{% endif %}.<input id="extension" class="codebox" name='extension' type='text' value="{{ extra.extension }}" placeholder="txt">
             <textarea name='content' id="newcontent" class="editor"></textarea>
         </form>
     </div>
 {% endblock %}
 
-{%block infomore %}
+{% block infomore %}
 <label>wrap <input id="wordwrap" type="checkbox" checked></label> | 
 {% endblock %}
 
@@ -45,5 +48,5 @@
 {% endif %}
 
 <script src="{{ sitepath }}static/js/util.js"></script>
-<script src="{{ sitepath }}static/js/bin.js"></script>
+<script src="{{ sitepath }}static/js/bin.js?v=1"></script>
 {% endblock %}
diff --git a/templates/display/story.html b/templates/display/story.html
@@ -9,18 +9,22 @@
 
 {% block infoleft %}
     <div id="editform">
-        <form id="reply" action='{{ sitepath }}upload' method='post' >
-            <div class="right pad-left">
-                <button id="save">save</button>
-                <select id="expiry" name="expires">
-                    <option disabled=disabled>Expires:</option>
+        <form id="reply" action='{{ sitepath }}upload' method='post'>
+            <div class="info-flex">
+                <div>
+                    {% if not forcerandom %}<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename">{% endif %}.<input id="extension" class="codebox" name='extension' type='text' value="story" placeholder="txt">
+                </div>
+                <div class="info-actions">
+                    <select id="expiry" name="expires">
+                        <option disabled>Expires:</option>
                         {% for expiry in expirylist %}
                         <option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
                         {% endfor %}
-                </select>
+                    </select>
+                    <button type="submit" id="save">Save</button>
+                </div>
             </div>
 
-            {% if not forcerandom %}<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename">{% endif %}.<input id="extension" class="codebox" name='extension' type='text' value="story" placeholder="txt">
             <textarea name='content' id="newcontent" class="editor"></textarea>
         </form>
     </div>
@@ -38,5 +42,5 @@
 
 
 <script src="{{ sitepath }}static/js/util.js"></script>
-<script src="{{ sitepath }}static/js/bin.js"></script>
+<script src="{{ sitepath }}static/js/bin.js?v=1"></script>
 {% endblock %}
diff --git a/templates/paste.html b/templates/paste.html
@@ -3,18 +3,18 @@
 {% block content %}
     <form id="reply" action='{{ sitepath }}upload' method='post'>
         <div id="main" class="paste">
-            <div id="info">
+            <div id="info" class="info-flex">
                 <div>
                     {% if not forcerandom %}<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>{% endif %}.<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">
                     <select id="expiry" name="expires">
-                        <option disabled="disabled">Expires:</option>
+                        <option disabled>Expires:</option>
                         {% for expiry in expirylist %}
                         <option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
                         {% endfor %}
                     </select>
+                    <button type="submit">Paste</button>
                 </div>
             </div>