fix editor buttons overlapping field content

https://anki.tenderapp.com/discussions/ankidesktop/31235-editor-second-row-for-buttons-feature-request
This commit is contained in:
Damien Elmes 2018-12-03 09:54:51 +10:00
parent 429cb2ce7f
commit 2c30ad9593
3 changed files with 18 additions and 8 deletions

View file

@ -35,7 +35,7 @@ _html = """
html { background: %s; }
#topbuts { background: %s; }
</style>
<div id="topbuts">%s</div>
<div id="topbutsOuter"><div id="topbuts" class="clearfix">%s</div></div>
<div id="fields"></div>
<div id="dupes" style="display:none;"><a href="#" onclick="pycmd('dupes');return false;">%s</a></div>
"""

View file

@ -6,13 +6,10 @@
overflow-wrap: break-word;
}
/* prevent floated images from being displayed outside field */
.field:after {
.clearfix:after {
content: "";
display: block;
height: 0;
display: table;
clear: both;
visibility: hidden;
}
.fname {
@ -28,7 +25,7 @@ body {
margin: 5px;
}
#topbuts {
#topbutsOuter {
position: fixed;
height: 24px;
top: 0;
@ -40,6 +37,7 @@ body {
.topbut {
width: 16px;
height: 16px;
margin-top: 4px;
}
.rainbow {

View file

@ -297,7 +297,7 @@ function setFields(fields) {
}
txt += "<tr><td class=fname>{0}</td></tr><tr><td width=100%>".format(n);
txt += "<div id=f{0} onkeydown='onKey();' oninput='onInput()' onmouseup='onKey();'".format(i);
txt += " onfocus='onFocus(this);' onblur='onBlur();' class=field ";
txt += " onfocus='onFocus(this);' onblur='onBlur();' class='field clearfix' ";
txt += "ondragover='onDragOver(this);' onpaste='onPaste(this);' ";
txt += "oncopy='onCutOrCopy(this);' oncut='onCutOrCopy(this);' ";
txt += "contentEditable=true class=field>{0}</div>".format(f);
@ -448,6 +448,12 @@ var filterNode = function (node, extendedMode) {
}
};
var adjustFieldsTopMargin = function() {
var topHeight = $("#topbuts").height();
var margin = topHeight + 8;
document.getElementById("fields").style.marginTop = margin + "px";
};
var mouseDown = 0;
$(function () {
@ -477,4 +483,10 @@ $(function () {
$("button.linkb").on("mousedown", function (e) {
e.preventDefault();
});
window.onresize = function() {
adjustFieldsTopMargin();
};
adjustFieldsTopMargin();
});