riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 14 Activity

fix placeholder consoles

Browse source
This commit is contained in:
りき萌 2024-02-21 23:26:53 +01:00
parent a1464bb865
commit e0cdcc46c5
4 changed files with 15 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

11
static/css/main.css
View file

@ -609,18 +609,18 @@ th-literate-program[data-mode="output"] {
border-radius: 0;
& iframe,
& img.placeholder {
& img.placeholder-image {
border-style: none;
border-radius: 4px;
display: block;
}
& img.placeholder.js {
& img.placeholder-image.js {
transition: opacity var(--transition-duration);
}
& iframe,
& img.placeholder.loading {
& img.placeholder-image.loading {
opacity: 50%;
}
@ -659,8 +659,11 @@ th-literate-program[data-mode="output"] {
}
}
& pre.console {
& pre.console,
& pre.placeholder-console {
position: relative;
margin-top: 0;
margin-bottom: 0;
&:empty {
display: none;

4
static/js/components/literate-programming.js
View file

@ -200,6 +200,7 @@ class OutputMode {
}
clearConsole() {
this.frame.removeChild(this.frame.placeholderConsole);
this.console.replaceChildren();
}
@ -264,7 +265,8 @@ class LiterateProgram extends HTMLElement {
this.frameIndex = this.program.frames.length;
this.program.frames.push(this);
this.placeholderImage = this.getElementsByClassName("placeholder")[0];
this.placeholderImage = this.getElementsByClassName("placeholder-image")[0];
this.placeholderConsole = this.getElementsByClassName("placeholder-console")[0];
this.mode = this.getAttribute("data-mode");
if (this.mode == "input") {