From f63d024777ca832826e804a9054ecadbab48f9e9 Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Sat, 27 Aug 2016 20:32:15 +0200
Subject: [PATCH] client/css: improve comment edit form background

If text area was bigger than the post, switching to preview mode
showed gray space under the text. Now the preview pane's background
should fill the whole edit box size.
---
 client/css/comment-control.styl            | 11 +++++-----
 client/html/comment_form.tpl               | 24 +++++++++++-----------
 client/js/controls/comment_form_control.js |  6 ++++--
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/client/css/comment-control.styl b/client/css/comment-control.styl
index 4a9075c2..aa12f111 100644
--- a/client/css/comment-control.styl
+++ b/client/css/comment-control.styl
@@ -13,13 +13,12 @@
             display: none
         .tabs-wrapper
             background: $active-tab-background-color
-        .tab
             padding: 0.3em
-            .comment-content-wrapper
-                background: $window-color
-                overflow: hidden
-                .comment-content
-                    margin: 1em
+        .tab-wrapper[data-tab='preview']
+            background: $window-color
+        .tab.preview
+            padding: 1em
+        .tab.edit
             textarea
                 resize: vertical
                 width: 100%
diff --git a/client/html/comment_form.tpl b/client/html/comment_form.tpl
index 5c60149f..e5839ed3 100644
--- a/client/html/comment_form.tpl
+++ b/client/html/comment_form.tpl
@@ -1,18 +1,18 @@
 <div class='tabs'>
     <form>
-        <div class='tabs-wrapper'><!--
-            --><div class='preview tab'><!--
-                --><div class='comment-content-wrapper'><!--
-                    --><div class='comment-content'><!--
-                        --><%= ctx.makeMarkdown(ctx.comment.text) %><!--
-                    --></div><!--
-                --></div><!--
-            --></div><!--
+        <div class='tabs-wrapper'><%
+            %><div class='tab-wrapper'><%
+                %><div class='preview tab'><%
+                    %><div class='comment-content'><%
+                        %><%= ctx.makeMarkdown(ctx.comment.text) %><%
+                    %></div><%
+                %></div><%
 
-            --><div class='edit tab'><!--
-                --><textarea required minlength=1><%- ctx.comment.text %></textarea><!--
-            --></div><!--
-        --></div>
+                %><div class='edit tab'><%
+                    %><textarea required minlength=1><%- ctx.comment.text %></textarea><%
+                %></div><%
+            %></div><%
+        %></div>
 
         <nav class='buttons'>
             <ul>
diff --git a/client/js/controls/comment_form_control.js b/client/js/controls/comment_form_control.js
index bef30ac0..8a611c53 100644
--- a/client/js/controls/comment_form_control.js
+++ b/client/js/controls/comment_form_control.js
@@ -64,7 +64,7 @@ class CommentFormControl extends events.EventTarget {
 
     exitEditMode() {
         this._hostNode.classList.remove('editing');
-        this._hostNode.querySelector('.tabs-wrapper').style.minHeight = null;
+        this._hostNode.querySelector('.tab-wrapper').style.minHeight = null;
         views.clearMessages(this._hostNode);
         this.setText(this._comment.text);
     }
@@ -117,13 +117,15 @@ class CommentFormControl extends events.EventTarget {
 
     _selectTab(tabName) {
         this._freezeTabHeights();
+        const tabWrapperNode = this._hostNode.querySelector('.tab-wrapper');
+        tabWrapperNode.setAttribute('data-tab', tabName);
         for (let tab of this._hostNode.querySelectorAll('.tab, .buttons li')) {
             tab.classList.toggle('active', tab.classList.contains(tabName));
         }
     }
 
     _freezeTabHeights() {
-        const tabsNode = this._hostNode.querySelector('.tabs-wrapper');
+        const tabsNode = this._hostNode.querySelector('.tab-wrapper');
         const tabsHeight = tabsNode.getBoundingClientRect().height;
         tabsNode.style.minHeight = tabsHeight + 'px';
     }