Fixed the issue where the text edit controller would scroll right off the screen. Now it stick when it's the bottom of the header. Also changed the background color of page links on the Start and Book pages to indicate there is no image. It's just cleaner
This commit is contained in:
parent
fa4b252d9c
commit
a9c88f1430
6 changed files with 39 additions and 18 deletions
|
@ -51,7 +51,7 @@
|
||||||
</a>
|
</a>
|
||||||
{% else %}
|
{% else %}
|
||||||
<a class="page-link" href="/dashboard/page/edit/{{ page.uuid }}">
|
<a class="page-link" href="/dashboard/page/edit/{{ page.uuid }}">
|
||||||
<div class="page-bg" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
|
<div class="page-bg" style="background: url({{ page.media[0].file }}) no-repeat center center / cover #fc6399">
|
||||||
<div id="meta">
|
<div id="meta">
|
||||||
{{ include("dash/partials/recent-meta.twig") }}
|
{{ include("dash/partials/recent-meta.twig") }}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link recent-link" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
|
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link recent-link" style="background: url({{ page.media[0].file }}) no-repeat center center / cover #fc6399">
|
||||||
{{ include("dash/partials/recent-meta.twig") }}
|
{{ include("dash/partials/recent-meta.twig") }}
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -304,6 +304,13 @@ main > section[role="text-editor"] > div[role="text-editor-control"] {
|
||||||
grid-template-columns: repeat(10, 1fr);
|
grid-template-columns: repeat(10, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.control-freeze {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 300;
|
||||||
|
width: 97%;
|
||||||
|
top: 65px;
|
||||||
|
}
|
||||||
|
|
||||||
main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
|
main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
|
|
|
@ -2358,6 +2358,15 @@ class $e6c02983873e6cdf$var$TextEditor extends (0, $68b475f2a0292491$export$2e2b
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor(textEditor, scrollLimit){
|
constructor(textEditor, scrollLimit){
|
||||||
super();
|
super();
|
||||||
|
document.querySelector('[role="text-editor-control"]').addEventListener("scroll", (e)=>{
|
||||||
|
console.log("HERE");
|
||||||
|
});
|
||||||
|
document.body.addEventListener("scroll", (e)=>{
|
||||||
|
var fixLimit = scrollLimit;
|
||||||
|
console.log("POSITION", document.body.scrollTop + " : " + fixLimit);
|
||||||
|
if (document.body.scrollTop + 5 >= fixLimit) document.querySelector('[role="text-editor-control"]').classList.add("control-freeze");
|
||||||
|
else document.querySelector('[role="text-editor-control"]').classList.remove("control-freeze");
|
||||||
|
});
|
||||||
document.getElementById("edit").addEventListener("input", (e)=>{
|
document.getElementById("edit").addEventListener("input", (e)=>{
|
||||||
let result_element = document.querySelector("#highlight-content");
|
let result_element = document.querySelector("#highlight-content");
|
||||||
this.textEditor = textEditor;
|
this.textEditor = textEditor;
|
||||||
|
@ -2379,11 +2388,6 @@ class $e6c02983873e6cdf$var$TextEditor extends (0, $68b475f2a0292491$export$2e2b
|
||||||
document.getElementById("edit").dispatchEvent(new Event("input"));
|
document.getElementById("edit").dispatchEvent(new Event("input"));
|
||||||
this.setInputs();
|
this.setInputs();
|
||||||
//freeze editor formatting so it doesn't scroll off screen
|
//freeze editor formatting so it doesn't scroll off screen
|
||||||
window.addEventListener("scroll", ()=>{
|
|
||||||
var fixLimit = scrollLimit;
|
|
||||||
if (window.pageYOffset + 5 >= fixLimit) document.getElementById("edit-control").style.position = "fixed";
|
|
||||||
else document.getElementById("edit-control").style.position = "relative";
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// methods
|
// methods
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -15,6 +15,25 @@ class TextEditor extends EventEmitter {
|
||||||
constructor(textEditor, scrollLimit) {
|
constructor(textEditor, scrollLimit) {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
|
document
|
||||||
|
.querySelector('[role="text-editor-control"]')
|
||||||
|
.addEventListener('scroll', e => {
|
||||||
|
console.log('HERE');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.addEventListener('scroll', e => {
|
||||||
|
var fixLimit = scrollLimit;
|
||||||
|
console.log('POSITION', document.body.scrollTop + ' : ' + fixLimit);
|
||||||
|
if (document.body.scrollTop + 5 >= fixLimit) {
|
||||||
|
document
|
||||||
|
.querySelector('[role="text-editor-control"]')
|
||||||
|
.classList.add('control-freeze');
|
||||||
|
} else {
|
||||||
|
document
|
||||||
|
.querySelector('[role="text-editor-control"]')
|
||||||
|
.classList.remove('control-freeze');
|
||||||
|
}
|
||||||
|
});
|
||||||
document.getElementById('edit').addEventListener('input', e => {
|
document.getElementById('edit').addEventListener('input', e => {
|
||||||
let result_element = document.querySelector('#highlight-content');
|
let result_element = document.querySelector('#highlight-content');
|
||||||
this.textEditor = textEditor;
|
this.textEditor = textEditor;
|
||||||
|
@ -42,15 +61,6 @@ class TextEditor extends EventEmitter {
|
||||||
this.setInputs();
|
this.setInputs();
|
||||||
|
|
||||||
//freeze editor formatting so it doesn't scroll off screen
|
//freeze editor formatting so it doesn't scroll off screen
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
var fixLimit = scrollLimit;
|
|
||||||
|
|
||||||
if (window.pageYOffset + 5 >= fixLimit) {
|
|
||||||
document.getElementById('edit-control').style.position = 'fixed';
|
|
||||||
} else {
|
|
||||||
document.getElementById('edit-control').style.position = 'relative';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// methods
|
// methods
|
||||||
|
|
Loading…
Reference in a new issue