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

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;
+  font-size: 13px;
-}
-
-#choices label:first-child {
-  margin-right: 15px;
 }
 
 #expiry {
@@ -295,14 +297,11 @@ body {
  }
 
 
-
 #info input[type=text] {
   border: 1px solid #eaeaea;
   color: #556A7F;
-  border-radius: 4px 4px 4px 4px;
+  padding: 2px 4px;
-  padding-left: 4px;
+  font-family: Arial, Helvetica, sans-serif;
-  padding-right: 4px;
-  height: 15px;
 }
 
 .storygreen {

static/js/bin.js

@@ -1,6 +1,6 @@
 // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
 
-var navlist = document.getElementById("info").getElementsByClassName("text-right")[0];
+var navlist = document.getElementById("info").getElementsByClassName("info-actions")[0];
 
 init();
 

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 %}

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 %}

templates/display/bin.html

@@ -11,24 +11,27 @@
 
 {% block infoleft %}
     <div id="editform">
-        <form id="reply" action='{{ sitepath }}upload' method='post' >
+        <form id="reply" action='{{ sitepath }}upload' method='post'>
-            <div class="right pad-left">
+            <div class="info-flex">
-                <button id="save">save</button>
+                <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=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" 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 %}

templates/display/story.html

@@ -9,18 +9,22 @@
 
 {% block infoleft %}
     <div id="editform">
-        <form id="reply" action='{{ sitepath }}upload' method='post' >
+        <form id="reply" action='{{ sitepath }}upload' method='post'>
-            <div class="right pad-left">
+            <div class="info-flex">
-                <button id="save">save</button>
+                <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=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" 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 %}

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>