Skip to content
Permalink
Browse files

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
  • Loading branch information
mutantmonkey authored and andreimarcu committed Jan 29, 2019
1 parent f46b613 commit 73f127306c15789eb1da4b37b6f2bc49061d0fcf
Showing with 105 additions and 99 deletions.
  1. +16 −17 static/css/linx.css
  2. +58 −58 static/js/bin.js
  3. +1 −1 templates/base.html
  4. +2 −2 templates/display/base.html
  5. +13 −10 templates/display/bin.html
  6. +12 −8 templates/display/story.html
  7. +3 −3 templates/paste.html
@@ -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;
}
/* }}} */
/* }}} */
@@ -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
@@ -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 %}
@@ -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 %}
@@ -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 %}
@@ -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 %}
@@ -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>

0 comments on commit 73f1273

Please sign in to comment.
You can’t perform that action at this time.