Profouzors
/
ProfouzorsLinx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
mutantmonkey 2019-01-29 07:00:08 +00:00 committed by Andrei Marcu
parent f46b61399b
commit 73f127306c
7 changed files with 105 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
static/css/linx.css
View File

@ -70,11 +70,21 @@ body {
} }
#info { #info {
background-color: white;
padding: 5px;
}
.info-flex {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: baseline;
justify-content: space-between; 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, #info #extension,
@ -82,10 +92,6 @@ body {
width: 40px; width: 40px;
} }
#info .text-right {
font-size: 13px;
}
#info a { #info a {
text-decoration: none; text-decoration: none;
color: #556A7F; color: #556A7F;
@ -246,11 +252,7 @@ body {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
margin-top: 5px; margin-top: 5px;
font-size:13px; font-size: 13px;
}
#choices label:first-child {
margin-right: 15px;
} }
#expiry { #expiry {
@ -295,14 +297,11 @@ body {
} }
#info input[type=text] { #info input[type=text] {
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
color: #556A7F; 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 { .storygreen {
@ -357,4 +356,4 @@ body {
height: 800px; height: 800px;
font-size: 13px; font-size: 13px;
} }
/* }}} */ /* }}} */

116
static/js/bin.js
View File

@ -1,58 +1,58 @@
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later // @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(); init();
function init() { function init() {
var editA = document.createElement('a'); var editA = document.createElement('a');
editA.setAttribute("href", "#"); editA.setAttribute("href", "#");
editA.addEventListener('click', function(ev) { editA.addEventListener('click', function(ev) {
edit(ev); edit(ev);
return false; return false;
}); });
editA.innerHTML = "edit"; editA.innerHTML = "edit";
var separator = document.createTextNode(" | "); var separator = document.createTextNode(" | ");
navlist.insertBefore(editA, navlist.firstChild); navlist.insertBefore(editA, navlist.firstChild);
navlist.insertBefore(separator, navlist.children[1]); navlist.insertBefore(separator, navlist.children[1]);
document.getElementById('save').addEventListener('click', paste); document.getElementById('save').addEventListener('click', paste);
document.getElementById('wordwrap').addEventListener('click', wrap); document.getElementById('wordwrap').addEventListener('click', wrap);
} }
function edit(ev) { function edit(ev) {
ev.preventDefault(); ev.preventDefault();
navlist.remove(); navlist.remove();
document.getElementById("filename").remove(); document.getElementById("filename").remove();
document.getElementById("editform").style.display = "block"; document.getElementById("editform").style.display = "block";
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("inplace-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("inplace-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();
} }
function wrap(ev) { function wrap(ev) {
if (document.getElementById("wordwrap").checked) { if (document.getElementById("wordwrap").checked) {
document.getElementById("codeb").style.wordWrap = "break-word"; document.getElementById("codeb").style.wordWrap = "break-word";
document.getElementById("codeb").style.whiteSpace = "pre-wrap"; document.getElementById("codeb").style.whiteSpace = "pre-wrap";
} }
else { else {
document.getElementById("codeb").style.wordWrap = "normal"; document.getElementById("codeb").style.wordWrap = "normal";
document.getElementById("codeb").style.whiteSpace = "pre"; document.getElementById("codeb").style.whiteSpace = "pre";
} }
} }
// @license-end // @license-end

2
templates/base.html
View File

@ -4,7 +4,7 @@
<title>{% block title %}{{ sitename }}{% endblock %}</title> <title>{% block title %}{{ sitename }}{% endblock %}</title>
<meta charset='utf-8' content='text/html' http-equiv='content-type'> <meta charset='utf-8' content='text/html' http-equiv='content-type'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <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/css/hint.css' rel='stylesheet' type='text/css'>
<link href='{{ sitepath }}static/images/favicon.gif' rel='icon' type='image/gif'> <link href='{{ sitepath }}static/images/favicon.gif' rel='icon' type='image/gif'>
{% block head %}{% endblock %} {% block head %}{% endblock %}

4
templates/display/base.html
View File

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

23
templates/display/bin.html
View File

@ -11,24 +11,27 @@
{% 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 pad-left"> <div class="info-flex">
<button id="save">save</button> <div>
<select id="expiry" name="expires"> {% 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">
<option disabled=disabled>Expires:</option> </div>
<div class="info-actions">
<select id="expiry" name="expires">
<option disabled>Expires:</option>
{% for expiry in expirylist %} {% for expiry in expirylist %}
<option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option> <option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
{% endfor %} {% endfor %}
</select> </select>
<button type="submit" id="save">Save</button>
</div>
</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> <textarea name='content' id="newcontent" class="editor"></textarea>
</form> </form>
</div> </div>
{% endblock %} {% endblock %}
{%block infomore %} {% block infomore %}
<label>wrap <input id="wordwrap" type="checkbox" checked></label> | <label>wrap <input id="wordwrap" type="checkbox" checked></label> |
{% endblock %} {% endblock %}
@ -45,5 +48,5 @@
{% endif %} {% endif %}
<script src="{{ sitepath }}static/js/util.js"></script> <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 %} {% endblock %}

20
templates/display/story.html
View File

@ -9,18 +9,22 @@
{% 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 pad-left"> <div class="info-flex">
<button id="save">save</button> <div>
<select id="expiry" name="expires"> {% 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">
<option disabled=disabled>Expires:</option> </div>
<div class="info-actions">
<select id="expiry" name="expires">
<option disabled>Expires:</option>
{% for expiry in expirylist %} {% for expiry in expirylist %}
<option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option> <option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
{% endfor %} {% endfor %}
</select> </select>
<button type="submit" id="save">Save</button>
</div>
</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> <textarea name='content' id="newcontent" class="editor"></textarea>
</form> </form>
</div> </div>
@ -38,5 +42,5 @@
<script src="{{ sitepath }}static/js/util.js"></script> <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 %} {% endblock %}

6
templates/paste.html
View File

@ -3,18 +3,18 @@
{% block content %} {% block content %}
<form id="reply" action='{{ sitepath }}upload' method='post'> <form id="reply" action='{{ sitepath }}upload' method='post'>
<div id="main" class="paste"> <div id="main" class="paste">
<div id="info"> <div id="info" class="info-flex">
<div> <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> {% 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>
<div> <div>
<input type="submit" value="Paste">
<select id="expiry" name="expires"> <select id="expiry" name="expires">
<option disabled="disabled">Expires:</option> <option disabled>Expires:</option>
{% for expiry in expirylist %} {% for expiry in expirylist %}
<option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option> <option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
{% endfor %} {% endfor %}
</select> </select>
<button type="submit">Paste</button>
</div> </div>
</div> </div>