hugo/PyCanvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Added collapse code editor button
All checks were successful
FTP Upload on Push / deploy (push) Successful in 8s
Details
FTP Upload on Push / release (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Hugo H
2025-12-31 18:47:41 +01:00
parent 4ecdd3a419
commit c9d19538da
1 changed files with 40 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
index.html
View File

@@ -119,6 +119,13 @@
flex-direction: column;
background-color: var(--bg-editor);
border-right: 2px solid #333;
transition: width 0.3s ease, transform 0.3s ease;
}
#editor-container.collapsed {
width: 0;
transform: translateX(-100%);
border-right: none;
}
#editor {
@@ -136,6 +143,11 @@
align-items: center;
justify-content: center;
overflow: hidden;
transition: width 0.3s ease;
}
#preview-container.full-width {
width: 100%;
}
canvas {
@@ -286,6 +298,11 @@
<path d="M6 6h12v12H6z" />
</svg>
</button>
<button class="icon-btn" id="toggleEditorBtn" title="Toggle Code Editor" onclick="toggleEditorLayout()">
<svg viewBox="0 0 24 24">
<path d="M4 4h16v16H4V4zm2 2v12h12V6H6zm2 2h4v8H8V8z" />
</svg>
</button>
</div>
<div class="header-right">
<button class="icon-btn" title="Share Code" onclick="shareCode()">
@@ -469,6 +486,29 @@
});
}
function toggleEditorLayout() {
const editorContainer = document.getElementById('editor-container');
const previewContainer = document.getElementById('preview-container');
const toggleBtn = document.getElementById('toggleEditorBtn');
editorContainer.classList.toggle('collapsed');
previewContainer.classList.toggle('full-width');
// Toggle icon/title
if (editorContainer.classList.contains('collapsed')) {
toggleBtn.title = "Show Code Editor";
toggleBtn.innerHTML = `<svg viewBox="0 0 24 24"><path d="M4 4h16v16H4V4zm2 2v12h12V6H6zm10 2h-4v8h4V8z" /></svg>`;
} else {
toggleBtn.title = "Hide Code Editor";
toggleBtn.innerHTML = `<svg viewBox="0 0 24 24"><path d="M4 4h16v16H4V4zm2 2v12h12V6H6zm2 2h4v8H8V8z" /></svg>`;
}
// Trigger resize after transition
setTimeout(() => {
window.dispatchEvent(new Event('resize'));
}, 300);
}
function toggleEditor() {
runCurrentCode();
}