From 059488ee1a65e4675cb4146802d33f9e4ab1118a Mon Sep 17 00:00:00 2001 From: Killy Date: Mon, 23 Oct 2017 16:57:21 +0300 Subject: www: comment form fixes removing hardcoded width--- juick-www/src/main/static/scripts.js | 46 ++++++++++++++++++------------------ juick-www/src/main/static/style.css | 32 ++++++++++++------------- 2 files changed, 39 insertions(+), 39 deletions(-) (limited to 'juick-www/src') 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; -- cgit v1.2.3