ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/css: improve comment edit form background

Browse source 
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.
This commit is contained in:
rr- 2016-08-27 20:32:15 +02:00
parent 514c4349e0
commit f63d024777
3 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
client/css/comment-control.styl
View file

@ -13,13 +13,12 @@
display: none display: none
.tabs-wrapper .tabs-wrapper
background: $active-tab-background-color background: $active-tab-background-color
.tab
padding: 0.3em padding: 0.3em
.comment-content-wrapper .tab-wrapper[data-tab='preview']
background: $window-color background: $window-color
overflow: hidden .tab.preview
.comment-content padding: 1em
margin: 1em .tab.edit
textarea textarea
resize: vertical resize: vertical
width: 100% width: 100%

24
client/html/comment_form.tpl
View file

@ -1,18 +1,18 @@
<div class='tabs'> <div class='tabs'>
<form> <form>
<div class='tabs-wrapper'><!-- <div class='tabs-wrapper'><%
--><div class='preview tab'><!-- %><div class='tab-wrapper'><%
--><div class='comment-content-wrapper'><!-- %><div class='preview tab'><%
--><div class='comment-content'><!-- %><div class='comment-content'><%
--><%= ctx.makeMarkdown(ctx.comment.text) %><!-- %><%= ctx.makeMarkdown(ctx.comment.text) %><%
--></div><!-- %></div><%
--></div><!-- %></div><%
--></div><!--
--><div class='edit tab'><!-- %><div class='edit tab'><%
--><textarea required minlength=1><%- ctx.comment.text %></textarea><!-- %><textarea required minlength=1><%- ctx.comment.text %></textarea><%
--></div><!-- %></div><%
--></div> %></div><%
%></div>
<nav class='buttons'> <nav class='buttons'>
<ul> <ul>

6
client/js/controls/comment_form_control.js
View file

@ -64,7 +64,7 @@ class CommentFormControl extends events.EventTarget {
exitEditMode() { exitEditMode() {
this._hostNode.classList.remove('editing'); 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); views.clearMessages(this._hostNode);
this.setText(this._comment.text); this.setText(this._comment.text);
} }
@ -117,13 +117,15 @@ class CommentFormControl extends events.EventTarget {
_selectTab(tabName) { _selectTab(tabName) {
this._freezeTabHeights(); this._freezeTabHeights();
const tabWrapperNode = this._hostNode.querySelector('.tab-wrapper');
tabWrapperNode.setAttribute('data-tab', tabName);
for (let tab of this._hostNode.querySelectorAll('.tab, .buttons li')) { for (let tab of this._hostNode.querySelectorAll('.tab, .buttons li')) {
tab.classList.toggle('active', tab.classList.contains(tabName)); tab.classList.toggle('active', tab.classList.contains(tabName));
} }
} }
_freezeTabHeights() { _freezeTabHeights() {
const tabsNode = this._hostNode.querySelector('.tabs-wrapper'); const tabsNode = this._hostNode.querySelector('.tab-wrapper');
const tabsHeight = tabsNode.getBoundingClientRect().height; const tabsHeight = tabsNode.getBoundingClientRect().height;
tabsNode.style.minHeight = tabsHeight + 'px'; tabsNode.style.minHeight = tabsHeight + 'px';
} }