fix: banner移入content-wrapper,标签栏下方直接是两栏布局
This commit is contained in:
+8
-7
@@ -84,13 +84,6 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- External modification banner -->
|
|
||||||
<div id="modified-banner" class="hidden">
|
|
||||||
<span>文件已被外部程序修改</span>
|
|
||||||
<button id="btn-reload" class="banner-btn">重新加载</button>
|
|
||||||
<button id="btn-dismiss" class="banner-btn">忽略</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Workspace: Sidebar + Main Content -->
|
<!-- Workspace: Sidebar + Main Content -->
|
||||||
<div id="workspace">
|
<div id="workspace">
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
@@ -108,6 +101,13 @@
|
|||||||
|
|
||||||
<!-- Main content area -->
|
<!-- Main content area -->
|
||||||
<div id="main-content">
|
<div id="main-content">
|
||||||
|
<div id="content-wrapper">
|
||||||
|
<!-- External modification banner -->
|
||||||
|
<div id="modified-banner" class="hidden">
|
||||||
|
<span>文件已被外部程序修改</span>
|
||||||
|
<button id="btn-reload" class="banner-btn">重新加载</button>
|
||||||
|
<button id="btn-dismiss" class="banner-btn">忽略</button>
|
||||||
|
</div>
|
||||||
<!-- Editor panel -->
|
<!-- Editor panel -->
|
||||||
<div id="editor-panel">
|
<div id="editor-panel">
|
||||||
<!-- Search & Replace Bar -->
|
<!-- Search & Replace Bar -->
|
||||||
@@ -144,6 +144,7 @@
|
|||||||
<div id="preview-panel">
|
<div id="preview-panel">
|
||||||
<div id="preview" class="markdown-body"></div>
|
<div id="preview" class="markdown-body"></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Welcome screen -->
|
<!-- Welcome screen -->
|
||||||
<div id="welcome-screen">
|
<div id="welcome-screen">
|
||||||
|
|||||||
@@ -17,6 +17,7 @@
|
|||||||
const editorPanel = document.getElementById('editor-panel');
|
const editorPanel = document.getElementById('editor-panel');
|
||||||
const previewPanel = document.getElementById('preview-panel');
|
const previewPanel = document.getElementById('preview-panel');
|
||||||
const mainContent = document.getElementById('main-content');
|
const mainContent = document.getElementById('main-content');
|
||||||
|
const contentWrapper = document.getElementById('content-wrapper');
|
||||||
const tabList = document.getElementById('tab-list');
|
const tabList = document.getElementById('tab-list');
|
||||||
|
|
||||||
// Sidebar
|
// Sidebar
|
||||||
@@ -822,7 +823,7 @@
|
|||||||
|
|
||||||
document.addEventListener('mousemove', (e) => {
|
document.addEventListener('mousemove', (e) => {
|
||||||
if (!isResizing) return;
|
if (!isResizing) return;
|
||||||
const rect = mainContent.getBoundingClientRect();
|
const rect = contentWrapper.getBoundingClientRect();
|
||||||
const pct = Math.max(20, Math.min(80, ((e.clientX - rect.left) / rect.width) * 100));
|
const pct = Math.max(20, Math.min(80, ((e.clientX - rect.left) / rect.width) * 100));
|
||||||
editorPanel.style.flex = `0 0 ${pct}%`;
|
editorPanel.style.flex = `0 0 ${pct}%`;
|
||||||
previewPanel.style.flex = `0 0 ${100 - pct}%`;
|
previewPanel.style.flex = `0 0 ${100 - pct}%`;
|
||||||
|
|||||||
@@ -308,11 +308,20 @@ html, body {
|
|||||||
#main-content {
|
#main-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#content-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* ===== Editor Panel ===== */
|
/* ===== Editor Panel ===== */
|
||||||
#editor-panel {
|
#editor-panel {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
Reference in New Issue
Block a user