feat: scrollable view layout, discussions extend page, word wrap toggle, divider-style comments
This commit is contained in:
parent
89e194a435
commit
24d70aeb08
|
|
@ -183,6 +183,14 @@ body {
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
/* On the view page, override to allow the discussions to extend below */
|
||||
.full-page.view-page {
|
||||
overflow: visible;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ── Editor textarea ───────────────────────────────────────────────────── */
|
||||
.full-editor {
|
||||
flex: 1;
|
||||
|
|
@ -202,10 +210,8 @@ body {
|
|||
|
||||
/* ── View: full-page code ──────────────────────────────────────────────── */
|
||||
.view-full {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
min-height: calc(100vh - 42px); /* at least full viewport below navbar */
|
||||
background: var(--code-bg);
|
||||
min-height: 0;
|
||||
}
|
||||
.view-full pre {
|
||||
margin: 0;
|
||||
|
|
@ -218,6 +224,12 @@ body {
|
|||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
/* Word wrap toggle */
|
||||
.view-full.wrap-lines pre,
|
||||
.view-full.wrap-lines code {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* ── Inline error (view page) ──────────────────────────────────────────── */
|
||||
.error-inline {
|
||||
|
|
@ -401,14 +413,10 @@ pre[class*="language-"], code[class*="language-"] {
|
|||
|
||||
/* ── Discussions panel ────────────────────────────────────────────────── */
|
||||
.discussions-panel {
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid var(--border);
|
||||
border-top: 2px solid var(--border);
|
||||
background: var(--surface);
|
||||
max-height: 45vh;
|
||||
}
|
||||
.discussions-panel.collapsed {
|
||||
max-height: none;
|
||||
/* no max-height — extends the page naturally */
|
||||
}
|
||||
.discussions-panel.collapsed .discussions-body {
|
||||
display: none;
|
||||
|
|
@ -417,39 +425,40 @@ pre[class*="language-"], code[class*="language-"] {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.35rem 1rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-sub);
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
position: sticky;
|
||||
top: 42px; /* stick just below navbar */
|
||||
background: var(--surface);
|
||||
z-index: 5;
|
||||
}
|
||||
.discussions-header:hover { background: var(--bg); }
|
||||
.discussions-title { font-weight: 600; }
|
||||
.discussions-chevron { font-size: 0.7rem; color: var(--text-muted); }
|
||||
.discussions-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.comments-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.25rem 1rem;
|
||||
min-height: 0;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.comment-item {
|
||||
padding: 0.45rem 0;
|
||||
padding: 0.6rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.comment-item:last-child { border-bottom: none; }
|
||||
.comment-meta {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.2rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.comment-meta.has-nick {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.comment-content {
|
||||
font-size: 0.85rem;
|
||||
|
|
@ -460,22 +469,22 @@ pre[class*="language-"], code[class*="language-"] {
|
|||
.comments-loading, .comments-empty {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
padding: 0.5rem 0;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
.comment-form-wrap {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 1rem;
|
||||
padding: 0.75rem 1.5rem 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
align-items: flex-start;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.25rem;
|
||||
background: var(--surface);
|
||||
}
|
||||
.comment-form-fields {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
gap: 0.35rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.comment-nick {
|
||||
|
|
@ -484,26 +493,24 @@ pre[class*="language-"], code[class*="language-"] {
|
|||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 0.78rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
outline: none;
|
||||
width: 160px;
|
||||
width: 180px;
|
||||
}
|
||||
.comment-nick:focus { border-color: var(--primary); }
|
||||
.comment-input {
|
||||
flex: 1;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
resize: none;
|
||||
min-height: 2.2rem;
|
||||
max-height: 8rem;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
resize: vertical;
|
||||
min-height: 4rem;
|
||||
outline: none;
|
||||
line-height: 1.4;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
}
|
||||
.comment-input:focus { border-color: var(--primary); }
|
||||
.comment-meta.has-nick { color: var(--primary); font-weight: 600; }
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
initPasteActions();
|
||||
initLineHighlight(); // register Prism hook before initLineNumbers triggers Prism
|
||||
initLineNumbers();
|
||||
initWordWrap();
|
||||
initDiscussions();
|
||||
initDeletion();
|
||||
});
|
||||
|
|
@ -340,6 +341,22 @@ function _updateLineUrl(start, end) {
|
|||
|
||||
// ── Discussions ───────────────────────────────────────────────────────────────
|
||||
|
||||
function initWordWrap() {
|
||||
const toggle = document.getElementById('wrapToggle');
|
||||
const viewDiv = document.getElementById('viewFull');
|
||||
if (!toggle || !viewDiv) return;
|
||||
|
||||
const stored = localStorage.getItem('wrap_lines');
|
||||
const enabled = stored === null ? true : stored === 'true';
|
||||
toggle.checked = enabled;
|
||||
viewDiv.classList.toggle('wrap-lines', enabled);
|
||||
|
||||
toggle.addEventListener('change', () => {
|
||||
viewDiv.classList.toggle('wrap-lines', toggle.checked);
|
||||
localStorage.setItem('wrap_lines', toggle.checked);
|
||||
});
|
||||
}
|
||||
|
||||
function initDiscussions() {
|
||||
if (!_decryptedPaste?.discussions) return;
|
||||
const panel = document.getElementById('discussionsPanel');
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ cfg.site.name }}{% endblock %}
|
||||
{% block main_class %}full-page{% endblock %}
|
||||
{% block main_class %}full-page view-page{% endblock %}
|
||||
|
||||
{% block nav_actions %}
|
||||
<span id="navPasteTitle" class="nav-paste-title"></span>
|
||||
<label class="nav-label" title="Toggle line numbers">
|
||||
<input type="checkbox" id="lineNoToggle" checked> Lines
|
||||
</label>
|
||||
<label class="nav-label" title="Toggle word wrap">
|
||||
<input type="checkbox" id="wrapToggle" checked> Wrap
|
||||
</label>
|
||||
<button id="rawBtn" class="nav-btn">Raw</button>
|
||||
<button id="copyBtn" class="nav-btn">Copy</button>
|
||||
<button id="downloadBtn" class="nav-btn">Download</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue