www: comment form fixes

removing hardcoded width

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;