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
.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%

24
client/html/comment_form.tpl
View file

@ -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>

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

@ -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';
}