aboutsummaryrefslogtreecommitdiff
path: root/juick-www
diff options
context:
space:
mode:
authorGravatar Killy2017-10-23 16:57:21 +0300
committerGravatar Vitaly Takmazov2017-10-23 23:43:21 +0300
commit059488ee1a65e4675cb4146802d33f9e4ab1118a (patch)
tree2a0044550705dba2c3f43b319166f54e23a45726 /juick-www
parent8e01b06453db87bb6040ad53ee432c355c9c247d (diff)
www: comment form fixes
removing hardcoded width
Diffstat (limited to 'juick-www')
-rw-r--r--juick-www/src/main/static/scripts.js46
-rw-r--r--juick-www/src/main/static/style.css32
2 files changed, 39 insertions, 39 deletions
diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index ecef6f1a..ad6d2e66 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -322,17 +322,17 @@ function showMoreReplies(el, id) {
}
function replyForm(mid, rid) {
- var form = document.createElement('form');
+ let form = document.createElement('form');
form.setAttribute('action', '/comment');
form.setAttribute('method', 'POST');
form.setAttribute('enctype', 'multipart/form-data');
- var input = document.createElement('input');
+ let input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'mid');
input.setAttribute('value', mid);
form.appendChild(input);
if (rid) {
- var inputRid = document.createElement('input');
+ let inputRid = document.createElement('input');
inputRid.setAttribute('type', 'hidden');
inputRid.setAttribute('name', 'rid');
inputRid.setAttribute('value', rid);
@@ -342,19 +342,19 @@ function replyForm(mid, rid) {
}
function taWrapper() {
- var txtarea = document.createElement('textarea');
+ let txtarea = document.createElement('textarea');
txtarea.setAttribute('name', 'body');
txtarea.setAttribute('rows', 1);
txtarea.setAttribute('class', 'reply narrow');
txtarea.setAttribute('placeholder', i18n('comment.writeComment'));
- var txtKeypress = function (e) {
+ let txtKeypress = function (e) {
postformListener(e.target, e);
};
txtarea.addEventListener('keypress', txtKeypress);
- var wrapper = document.createElement('div');
+ let wrapper = document.createElement('div');
wrapper.setAttribute('class', 'ta-wrapper');
wrapper.appendChild(txtarea);
- var att = document.createElement('div');
+ let att = document.createElement('div');
att.setAttribute('class', 'attach-photo');
att.addEventListener('click', function () {
attachCommentPhoto(this);
@@ -364,14 +364,14 @@ function taWrapper() {
}
function showCommentForm(mid, rid) {
- var reply = document.getElementById(rid);
+ let reply = document.getElementById(rid);
if (reply && !reply.querySelector('textarea')) {
- var c = reply.querySelector('div.msg-cont > .msg-comment'),
- newNode = c.cloneNode(true),
- form = replyForm(mid, rid);
+ let c = reply.querySelector('div.msg-cont > .msg-comment');
+ let newNode = c.cloneNode(true);
+ let form = replyForm(mid, rid);
form.appendChild(newNode);
newNode.appendChild(taWrapper());
- var subm = document.createElement('input');
+ let subm = document.createElement('input');
subm.setAttribute('type', 'submit');
subm.setAttribute('value', 'OK');
newNode.appendChild(subm);
@@ -379,9 +379,9 @@ function showCommentForm(mid, rid) {
c.remove();
}
- var commentBlock = reply.querySelector('div.msg-cont > form > div.msg-comment');
- commentBlock.style.display = 'block';
- var commentText = commentBlock.querySelector('textarea');
+ let commentBlock = reply.querySelector('div.msg-cont > form > div.msg-comment');
+ commentBlock.classList.remove('msg-comment-hidden');
+ let commentText = commentBlock.querySelector('textarea');
if (commentText) {
autosize(commentText);
commentText.focus();
@@ -389,13 +389,13 @@ function showCommentForm(mid, rid) {
}
function showCommentFooter(e, mid, rid) {
- var a = e.closest('article');
+ let a = e.closest('article');
if (!a.querySelector('footer.comm')) {
- var form = replyForm(mid, rid),
- footer = document.createElement('footer');
+ let form = replyForm(mid, rid);
+ let footer = document.createElement('footer');
footer.setAttribute('class', 'comm');
footer.appendChild(taWrapper());
- var subm = document.createElement('input');
+ let subm = document.createElement('input');
subm.setAttribute('type', 'submit');
subm.setAttribute('value', 'OK');
footer.appendChild(subm);
@@ -407,7 +407,7 @@ function showCommentFooter(e, mid, rid) {
}
function attachInput() {
- var inp = document.createElement('input');
+ let inp = document.createElement('input');
inp.setAttribute('type', 'file');
inp.setAttribute('name', 'attach');
inp.setAttribute('accept', 'image/jpeg,image/png');
@@ -417,15 +417,15 @@ function attachInput() {
function attachCommentPhoto(div) {
if (div.children.length === 0) {
- var inp = attachInput();
+ let inp = attachInput();
inp.addEventListener('change', function () {
- inp.parentNode.classList.add('attach-photo-active');
+ div.classList.add('attach-photo-active');
});
inp.click();
div.appendChild(inp);
} else {
div.innerHTML = null;
- div.classList.add('attach-photo');
+ div.classList.remove('attach-photo-active');
}
}
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index 2a888b90..1b4dd0e3 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -254,16 +254,19 @@ article .replies {
margin-left: 18px;
}
article .comm {
+ display: flex;
margin: 13px 0 0 0;
+ width: 100%;
}
-article textarea {
+article .comm textarea {
border: 0;
+ flex-grow: 1;
padding: 2px;
resize: vertical;
vertical-align: top;
- width: 530px;
}
-article input {
+article .comm input {
+ align-self: flex-start;
background: #EEE;
border: 1px solid #CCC;
color: #999;
@@ -361,40 +364,37 @@ article .t {
}
.ta-wrapper {
border: 1px solid #DDD;
- display: inline-block;
+ display: flex;
+ flex-grow: 1;
}
.msg-comment textarea {
border: 0;
+ flex-grow: 1;
padding: 2px;
resize: vertical;
vertical-align: top;
- width: 634px;
}
-.msg-comment .narrow {
- width: 554px;
+.msg-comment {
+ display: flex;
+ width: 100%;
}
-.msg-comment .narrowpm {
- width: 580px;
+.msg-comment-hidden {
+ display: none;
}
.attach-photo {
background: url("photo-attachment.png") no-repeat 3px 4px;
cursor: pointer;
display: inline-block;
- height: 13px;
+ height: 16px;
overflow: hidden;
padding: 2px 4px;
width: 16px;
}
.attach-photo-active {
background: url("photo-attachment-active.png") no-repeat 3px 4px;
- cursor: pointer;
- display: inline-block;
- height: 13px;
- overflow: hidden;
- padding: 2px 4px;
- width: 16px;
}
.msg-comment input {
+ align-self: flex-start;
background: #EEE;
border: 1px solid #CCC;
color: #999;