1
0
mirror of https://github.com/vichan-devel/vichan.git synced 2024-11-24 15:40:12 +01:00

New post form part 2

This commit is contained in:
Fredrick Brennan 2015-03-11 18:04:31 +08:00
parent 0171adc8df
commit dfbad99cfb
5 changed files with 253 additions and 199 deletions

View File

@ -28,16 +28,6 @@
dummy_reply.remove();
$('<style type="text/css" id="quick-reply-css">\
#quick-reply {\
position: fixed;\
right: 5%;\
top: 5%;\
float: right;\
display: block;\
padding: 0 0 0 0;\
width: 300px;\
z-index: 100;\
}\
#quick-reply table {\
border-collapse: collapse;\
background: ' + reply_background + ';\
@ -47,76 +37,6 @@
margin: 0;\
width: 100%;\
}\
#quick-reply tr td:nth-child(2) {\
white-space: nowrap;\
text-align: right;\
padding-right: 4px;\
}\
#quick-reply tr td:nth-child(2) input[type="submit"] {\
width: 100%;\
}\
#quick-reply th, #quick-reply td {\
margin: 0;\
padding: 0;\
}\
#quick-reply th {\
text-align: center;\
padding: 2px 0;\
border: 1px solid #222;\
}\
#quick-reply th .handle {\
float: left;\
width: 100%;\
display: inline-block;\
}\
#quick-reply th .close-btn {\
float: right;\
padding: 0 5px;\
}\
#quick-reply input[type="text"], #quick-reply select {\
width: 100%;\
padding: 2px;\
font-size: 10pt;\
box-sizing: border-box;\
-webkit-box-sizing:border-box;\
-moz-box-sizing: border-box;\
}\
#quick-reply textarea {\
width: 100%;\
box-sizing: border-box;\
-webkit-box-sizing:border-box;\
-moz-box-sizing: border-box;\
font-size: 10pt;\
resize: both;\
}\
#quick-reply input, #quick-reply select, #quick-reply textarea {\
margin: 0 0 1px 0;\
}\
#quick-reply input[type="file"] {\
padding: 5px 2px;\
}\
#quick-reply .nonsense {\
display: none;\
}\
#quick-reply td.recaptcha {\
text-align: center;\
padding: 0 0 1px 0;\
}\
#quick-reply td.recaptcha span {\
display: inline-block;\
width: 100%;\
background: white;\
border: 1px solid #ccc;\
cursor: pointer;\
}\
#quick-reply td.recaptcha-response {\
padding: 0 0 1px 0;\
}\
@media screen and (max-width: 600px) {\
#quick-reply {\
display: none !important;\
}\
}\
</style>').appendTo($('head'));
};
@ -128,7 +48,7 @@
do_css();
var $postForm = $('form[name="post"]').clone();
var $postForm = $('#post-form-outer').clone();
$postForm.clone();
@ -243,34 +163,6 @@
$(this).remove();
}
// Remove oekaki if existent
if ($(this).is('#oekaki')) {
$(this).remove();
}
// Remove upload selection
if ($td.is('#upload_selection')) {
$(this).remove();
}
// Remove mod controls, because it looks shit.
/*if ($td.find('input[type="checkbox"]').length) {
var tr = this;
$td.find('input[type="checkbox"]').each(function() {
if ($(this).attr('name') == 'spoiler') {
$td.find('label').remove();
$(this).attr('id', 'q-spoiler-image');
$postForm.find('input[type="file"]').parent()
.removeAttr('colspan')
.after($('<td class="spoiler"></td>').append(this, ' ', $('<label for="q-spoiler-image">').text(_('Spoiler Image'))));
} else if ($(this).attr('name') == 'no_country') {
$td.find('label,input[type="checkbox"]').remove();
} else {
$(tr).remove();
}
});
}*/
$td.find('small').hide();
}
});
@ -285,8 +177,10 @@
$postForm.find('textarea:not([name="body"]),input[type="hidden"]:not(.captcha_cookie)').removeAttr('id').appendTo($dummyStuff);
$postForm.find('br').remove();
$postForm.find('table').prepend('<tr><th colspan="2">\
$postForm.find('br,p.board-settings,.unimportant,#oekaki,.required-field-cell').remove();
$postForm.find('.show-options-cell').attr('colspan', '2');
$postForm.find('table:first').prepend('<tr><th colspan="2">\
<span class="handle">\
<a class="close-btn" href="javascript:void(0)">X</a>\
' + _('Quick Reply') + '\

View File

@ -46,10 +46,10 @@ oekaki.do_css = function() {
}
oekaki.init = function() {
var oekaki_form = '<tr id="oekaki"><th>Oekaki</th><td><div id="wpaintctr"><div id="wpaintdiv"></div></div></td></tr>';
var oekaki_form = '<div id="wpaintctr"><div id="wpaintdiv"></div></div>';
// Add oekaki after the file input
$('form[name="post"]:not(#quick-reply) input[type="file"]').parent().parent().after(oekaki_form);
$('.oekaki-applet').html(oekaki_form);
$('<link class="wpaintcss" rel="stylesheet" href="'+configRoot+'js/wPaint/wPaint.min.css" />').appendTo($("head"));
$('<link class="wpaintcss" rel="stylesheet" href="'+configRoot+'js/wPaint/lib/wColorPicker.min.css" />').appendTo($("head"));
@ -122,7 +122,8 @@ oekaki.load_img = function() {
};
oekaki.deinit = function() {
$('#oekaki, .wpaintcss').remove();
$('.oekaki-applet').empty();
$('.wpaintcss').remove();
$(document).off("ajax_before_post.wpaint");

View File

@ -8,6 +8,34 @@ body {
padding-right: 4px;
}
#post-form-outer {
text-align: center;
}
#post-form-inner {
display: inline-block;
}
.post-table, .post-table-options, textarea {
width: 100%;
}
.post-table th, .post-table-options th {
width: 75px;
}
.post-table-options {
display: none;
}
.required-field-cell {
vertical-align: top;
}
.show-options-cell {
text-align: right;
}
.hidden {
display:none;
}
@ -93,8 +121,8 @@ input[type="text"],input[type="password"],textarea {
text-shadow: none;
text-transform: none;
word-spacing: normal;
max-width: 75%;
font-size: inherit;
font-family: sans-serif;
}
#quick-reply input[type="text"], input[type="password"], #quick-reply textarea {
@ -133,14 +161,14 @@ form table tr td div.center {
margin: 2px
}
form table tr td div input {
/*form table tr td div input {
display: block;
margin: 2px auto 0 auto;
}
form table tr td div label {
font-size: 10px;
}
}*/
.unimportant,.unimportant * {
font-size: 10px;
@ -265,6 +293,10 @@ p.intro a {
font-weight: bold;
}
.required-star {
color: maroon;
}
div.delete {
float: right;
}
@ -1045,3 +1077,103 @@ div.mix {
text-align: right;
display: inline-block;
}
.dice-option table {
border: 1px dotted black;
margin: 0;
border-collapse: collapse;
}
.dice-option table td {
text-align: center;
border-left: 1px dotted black;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
}
/* Quick reply (why was most of this ever in the script?) */
#quick-reply {
position: fixed;
right: 5%;
top: 5%;
float: right;
display: block;
padding: 0 0 0 0;
width: 300px;
z-index: 100;
}
#quick-reply #post-form-inner {
min-width: 300px;
}
#quick-reply .post-table tr td:nth-child(2) {
width: 33%;
text-align: right;
padding-right: 4px;
}
#quick-reply tr td:nth-child(2) input[type="submit"] {
width: 99%;
}
#quick-reply th, #quick-reply td {
margin: 0;
padding: 0;
}
#quick-reply th {
text-align: center;
padding: 2px 0;
border: 1px solid #222;
}
#quick-reply th .handle {
float: left;
width: 100%;
display: inline-block;
}
#quick-reply th .close-btn {
float: right;
padding: 0 5px;
}
#quick-reply input[type="text"], #quick-reply select {
width: 100%;
padding: 2px;
font-size: 10pt;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
#quick-reply textarea {
min-width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
font-size: 10pt;
resize: both;
}
#quick-reply input, #quick-reply select, #quick-reply textarea {
margin: 0 0 1px 0;
}
#quick-reply input[type="file"] {
padding: 5px 2px;
}
#quick-reply .nonsense {
display: none;
}
#quick-reply td.recaptcha {
text-align: center;
padding: 0 0 1px 0;
}
#quick-reply td.recaptcha span {
display: inline-block;
width: 100%;
background: white;
border: 1px solid #ccc;
cursor: pointer;
}
#quick-reply td.recaptcha-response {
padding: 0 0 1px 0;
}
@media screen and (max-width: 600px) {
#quick-reply {
display: none !important;
}
}

View File

@ -456,6 +456,23 @@ function init() {
sessionStorage.quoteClipboard = window.getSelection().toString();
});
// just enable jquery, almost every script requires it by now. more and more main.js functions are going to start requiring it
$('.post-table-options').css('display', 'none');
window.optionsShowing = false;
$(document).on('click', '.show-post-table-options', function(e) {
if (!window.optionsShowing) {
$('.show-post-table-options').html('[&#9660; '+_('Hide post options &amp; limits')+']');
$('.post-table-options').css('display', 'table');
window.optionsShowing = true;
} else {
$('.show-post-table-options').html('[&#9654; '+_('Show post options &amp; limits')+']');
$('.post-table-options').css('display', 'none');
window.optionsShowing = false;
};
return false;
});
{% endraw %}
{% if config.allow_delete %}
if (document.forms.postcontrols) {

View File

@ -1,28 +1,24 @@
<div id="post-form-outer">
<div id="post-form-inner">
<form name="post" onsubmit="return dopost(this);" enctype="multipart/form-data" action="{{ config.post_url }}" method="post">
{{ antibot.html() }}
{% if id %}<input type="hidden" name="thread" value="{{ id }}">{% endif %}
{{ antibot.html() }}
<input type="hidden" name="board" value="{{ board.uri }}">
{{ antibot.html() }}
{% if current_page %}
<input type="hidden" name="page" value="{{ current_page }}">
{% endif %}
{% if mod %}<input type="hidden" name="mod" value="1">{% endif %}
<table>
<table class="post-table">
{% if not config.field_disable_name or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri)) %}<tr>
<th>
{% trans %}Name{% endtrans %} <span class="unimportant optional-text">{% trans %}(optional){% endtrans %}</span>
{{ antibot.html() }}
{% trans %}Name{% endtrans %}
</th>
<td>
<input type="text" name="name" size="25" maxlength="35" autocomplete="off">
{{ antibot.html() }}
</td>
</tr>{% endif %}
{% if not config.field_disable_email or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri)) %}<tr>
<th>
{% trans %}Email{% endtrans %} <span class="unimportant optional-text">{% trans %}(optional){% endtrans %}</span>
{{ antibot.html() }}
{% trans %}Email{% endtrans %}
</th>
<td>
{% if config.field_email_selectbox and not (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri)) %}
@ -34,17 +30,14 @@
{% else %}
<input type="text" name="email" size="25" maxlength="40" autocomplete="off">
{% endif %}
{{ antibot.html() }}
{% if not (not (config.field_disable_subject or (id and config.field_disable_reply_subject)) or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri))) %}
<input accesskey="s" style="margin-left:2px;" type="submit" name="post" value="{% if id %}{{ config.button_reply }}{% else %}{{ config.button_newtopic }}{% endif %}" />
{% endif %}
{{ antibot.html() }}
</td>
</tr>{% endif %}
{% if not (config.field_disable_subject or (id and config.field_disable_reply_subject)) or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri)) %}<tr>
<th>
{% trans %}Subject{% endtrans %} {% if not config.force_subject_op or id %}<span class="unimportant optional-text">{% trans %}(optional){% endtrans %}</span>{% endif %}
{{ antibot.html() }}
{% trans %}Subject{% endtrans %} {% if config.force_subject_op and not id %}<span class="required-star">*</span>{% endif %}
</th>
<td>
<input style="float:left;" type="text" name="subject" size="25" maxlength="100" autocomplete="off">
@ -54,12 +47,10 @@
{% endif %}
<tr>
<th>
{% trans %}Comment{% endtrans %}
{{ antibot.html() }}
{% trans %}Comment <span class="required-star">*</span>{% endtrans %}
</th>
<td>
<textarea name="body" id="body" rows="5" cols="35"></textarea>
{{ antibot.html() }}
{% if not (not (config.field_disable_subject or (id and config.field_disable_reply_subject)) or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri))) %}
{% if not (not config.field_disable_email or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri))) %}
<input accesskey="s" style="margin-left:2px;" type="submit" name="post" value="{% if id %}{{ config.button_reply }}{% else %}{{ config.button_newtopic }}{% endif %}" />{% if config.spoiler_images %} <input id="spoiler" name="spoiler" type="checkbox"> <label for="spoiler">{% trans %}Spoiler Image{% endtrans %}</label>{% endif %}
@ -71,11 +62,9 @@
<tr>
<th>
{% trans %}Verification{% endtrans %}
{{ antibot.html() }}
</th>
<td>
<script type="text/javascript" src="//www.google.com/recaptcha/api/challenge?k={{ config.recaptcha_public }}"></script>
{{ antibot.html() }}
</td>
</tr>
{% endif %}
@ -95,10 +84,38 @@
</td>
</tr>
{% endif %}
{% if not config.disable_images %}
<tr id="upload">
<th>
{% trans %}File{% endtrans %} {% if config.force_image_op and not id %}<span class="required-star">*</span>{% endif %}
</th>
<td>
<input type="file" name="file" id="upload_file">
{% if config.allow_upload_by_url %}
<div style="float:none;text-align:left" id="upload_url">
<label for="file_url">{% trans %}Or URL{% endtrans %}</label>:
<input style="display:inline" type="text" id="file_url" name="file_url" size="35">
</div>
{% endif %}
</td>
</tr>
{% endif %}
<tr>
<td class="required-field-cell">
<span class="required-wrap">
<span class="required-star">*</span> <span class="unimportant">{% trans %}= required field{% endtrans %}</span>
</span>
</td>
<td class="show-options-cell">
<a href="#" class="show-post-table-options">[&#9654; {% trans %}Show post options &amp; limits{% endtrans %}]</a>
<strong class="faq-message unimportant"><br />Confused? See the <a href="/faq.html">FAQ</a>.</strong>
</td>
</tr>
</tbody></table><table class="post-table-options"><tbody>
{% if config.user_flag %}
<tr>
<th>{% trans %}Flag{% endtrans %} <span class="unimportant optional-text">{% trans %}(optional){% endtrans %}</span></th>
<th>{% trans %}Flag{% endtrans %}</th>
<td>
<select name="user_flag" id="user_flag">
<option value="">{% trans %}None{% endtrans %}</option>
@ -109,32 +126,24 @@
</td>
</tr>
{% endif %}
{% if not config.disable_images %}
<tr id="upload">
<th>
{% trans %}File{% endtrans %} {% if not config.force_image_op or id %}<span class="unimportant optional-text">{% trans %}(optional){% endtrans %}</span>{% endif %}
</th>
<td>
<input type="file" name="file" id="upload_file">
{% if config.allow_upload_by_url %}
<div style="float:none;text-align:left" id="upload_url">
<label for="file_url">{% trans %}Or URL{% endtrans %}</label>:
<input style="display:inline" type="text" id="file_url" name="file_url" size="35">
</div>
{% endif %}
{{ antibot.html() }}
</td>
</tr>
{% endif %}
{% if config.enable_embedding %}
<tr id="upload_embed">
<th>
{% trans %}Embed{% endtrans %} {% if not config.force_image_op or id %}<span class="unimportant optional-text">{% trans %}(optional){% endtrans %}</span>{% else %}<span class="unimportant optional-text">{% trans %}(or file){% endtrans %}</span>{% endif %}
{{ antibot.html() }}
{% trans %}Embed{% endtrans %}
</th>
<td>
<input type="text" name="embed" value="" size="30" maxlength="120" autocomplete="off">
<input type="text" name="embed" value="" size="30" maxlength="120" autocomplete="off"><br> <span class="unimportant">{% trans %}(replaces files and can be used instead){% endtrans %}</span>
</td>
</tr>
{% endif %}
{% if config.oekaki %}
<tr id="oekaki">
<th>{% trans %}Oekaki{% endtrans %}</th>
<td>
<div class="oekaki-applet"></div>
<a href="#" onclick="if (oekaki && !oekaki.initialized) { oekaki.init(); this.innerHTML = '{% trans %}Close oekaki applet{% endtrans %}' } else { oekaki.deinit(); this.innerHTML = '{% trans %}Show oekaki applet{% endtrans %}' }; return false;">{% trans %}Show oekaki applet{% endtrans %}</a>
<br/>
<span class="unimportant">{% trans %}(replaces files and can be used instead){% endtrans %}</span>
</td>
</tr>
{% endif %}
@ -143,38 +152,41 @@
{% trans %}Options{% endtrans %}
</th>
<td>
<div class="center no-bump-option">
<label for="no-bump">{% trans %}No bump{% endtrans %}</label>
<input title="No bump" id="no-bump" name="no-bump" type="checkbox">
<div class="no-bump-option">
<label><input title="No bump" id="no-bump" name="no-bump" type="checkbox">
{% trans %}Do not bump{% endtrans %} <span class="unimportant">{% trans %}(you can also write sage in the email field){% endtrans %}</span></label>
</div>
{% if config.spoiler_images %}<div class="center spoiler-images-option">
<label for="spoiler">{% trans %}Spoiler images{% endtrans %}</label>
<input title="Spoiler images" id="spoiler" name="spoiler" type="checkbox">
{% if config.spoiler_images %}<div class="spoiler-images-option">
<label><input title="Spoiler images" id="spoiler" name="spoiler" type="checkbox">
{% trans %}Spoiler images{% endtrans %} <span class="unimportant">{% trans %}(this replaces the thumbnails of your images with question marks){% endtrans %}</label>
</div>{% endif %}
{% if config.allow_no_country and config.country_flags %}<div class="center no-country-option">
<label for="no_country">{% trans %}No country flag{% endtrans %}</label>
<input title="No country flag" id="no_country" name="no_country" type="checkbox">
</div>{% endif %}
{% if config.allow_roll %}<div class="center dice-option">
<label for="dy">{% trans %}Dice{% endtrans %}</label>
<div><input class="dx" name="dx" type="number">d<input class="dy" name="dy" type="number">&plusmn;<input class="dz" name="dz" type="number"></div>
{% if config.allow_no_country and config.country_flags %}<div class="no-country-option">
<label><input title="No country flag" id="no_country" name="no_country" type="checkbox">
{% trans %}Hide country{% endtrans %} <span class="unimportant">{% trans %}(this board displays your country when you post if this is unchecked){% endtrans %}</span></label>
</div>{% endif %}
{% if mod %}
{% if not id and post.mod|hasPermission(config.mod.sticky, board.uri) %}<div class="center sticky-option">
<label for="sticky">{% trans %}Sticky{% endtrans %}</label>
<input title="{% trans %}Sticky{% endtrans %}" type="checkbox" name="sticky" id="sticky">
{% if not id and post.mod|hasPermission(config.mod.sticky, board.uri) %}<div class="sticky-option">
<label><input title="{% trans %}Sticky{% endtrans %}" type="checkbox" name="sticky" id="sticky">
{% trans %}Sticky{% endtrans %}</label>
</div>{% endif %}
{% if not id and post.mod|hasPermission(config.mod.lock, board.uri) %}<div class="center lock-option">
<label for="lock">{% trans %}Lock{% endtrans %}</label><br>
<input title="{% trans %}Lock{% endtrans %}" type="checkbox" name="lock" id="lock">
{% if not id and post.mod|hasPermission(config.mod.lock, board.uri) %}<div class="lock-option">
<label><input title="{% trans %}Lock{% endtrans %}" type="checkbox" name="lock" id="lock">
{% trans %}Lock{% endtrans %}</label>
</div>{% endif %}
{% if post.mod|hasPermission(config.mod.rawhtml, board.uri) %}<div class="center raw-html-option">
<label for="raw">{% trans %}Raw HTML{% endtrans %}</label><br>
<input title="{% trans %}Raw HTML{% endtrans %}" type="checkbox" name="raw" id="raw">
{% if post.mod|hasPermission(config.mod.rawhtml, board.uri) %}<div class="raw-html-option">
<label><input title="{% trans %}Raw HTML{% endtrans %}" type="checkbox" name="raw" id="raw">
{% trans %}Raw HTML{% endtrans %}</label>
</div>{% endif %}
{# Should always be at the end #}
{% if config.allow_roll %}<div class="dice-option">
<table>
<tr><td>{% trans 'dice' %}</td><td>{% trans 'sides' %}</td><td>{% trans 'modifier' %}</td></tr>
<tr><td><input class="dx" name="dx" min="0" type="number"></td><td><input class="dy" name="dy" min="0" type="number"></td><td><input class="dz" name="dz" type="number"></td></tr>
</table>
</div>{% endif %}
{% endif %}
</td>
@ -182,34 +194,32 @@
{% if not config.field_disable_password or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri)) %}<tr>
<th>
{% trans %}Password{% endtrans %}
{{ antibot.html() }}
<!-- Chrome, you suck so hard with your autofill mechanism -->
<!-- I tried N different tricks, this sucks most, but only this one -->
<!-- disables autofill successfully -->
<!-- For Chrom(e|ium) -->
<input type='text' style='display: none'>
<input type='password' style='display: none'>
</th>
<td>
<input type="password" name="password" value="" size="12" maxlength="18" autocomplete="off">
<span class="unimportant">{% trans %}(For file deletion.){% endtrans %}</span>
{{ antibot.html() }}
<span class="unimportant">{% trans %}(For file and post deletion.){% endtrans %}</span>
</td>
</tr>{% endif %}
<tr>
<td colspan="2">
<p class="unimportant board-settings">
{% if not config.disable_images %}
{% trans %}Allowed file types:{% endtrans %} {{ config.allowed_ext|join(', ') }}{% if config.allowed_ext_files %}, {{ config.allowed_ext_files|join(', ') }}{% endif %}<br />
{% trans %}Max filesize is{% endtrans %} {{ config.max_filesize|filesize }}.<br />
{% trans %}Max image dimensions are{% endtrans %} {{ config.max_height }} x {{ config.max_width }}.<br />
{% set max_images = config.max_images %} {# workaround for "The text to be translated with "trans" can only contain references to simple variables" #}
{% trans %}You may upload {{ max_images }} per post.{% endtrans %}<br />
{% endif %}
</p>
</td>
</tr>
</table>
{{ antibot.html(true) }}
<input type="hidden" name="hash" value="{{ antibot.hash() }}">
</form>
</div>
</div>
<script type="text/javascript">{% raw %}
rememberStuff();
{% endraw %}</script>
<p class="unimportant board-settings">
{% if not config.disable_images %}
Allowed file types: {{ config.allowed_ext|join(', ') }}{% if config.allowed_ext_files %}, {{ config.allowed_ext_files|join(', ') }}{% endif %}<br />
Max filesize is {{ config.max_filesize|filesize }}.<br />
Max image dimensions are {{ config.max_height }} x {{ config.max_width }}.<br />
You may upload {{ config.max_images }} per post.<br />
{% endif %}
<strong class="faq-message"><br />Confused? See the <a href="/faq.html">FAQ</a>.</strong>
</p>