Docker
/
linx-server
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

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
pull/162/head v2.1.2
mutantmonkey 6 years ago
committed by Andrei Marcu
parent
f46b61399b
commit
73f127306c
7 changed files with 105 additions and 99 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      static/css/linx.css
  2. 116
      static/js/bin.js
  3. 2
      templates/base.html
  4. 4
      templates/display/base.html
  5. 23
      templates/display/bin.html
  6. 20
      templates/display/story.html
  7. 6
      templates/paste.html

33
static/css/linx.css
View File

@ -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;
}
#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;
}
/* }}} */
/* }}} */

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

2
templates/base.html
View File

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

4
templates/display/base.html
View File

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

23
templates/display/bin.html
View File

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

20
templates/display/story.html
View File

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

6
templates/paste.html
View File

@ -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>

Write Preview
Loading…
Cancel
Save