mirror of
https://github.com/go-gitea/gitea.git
synced 2026-10-23 14:34:21 +02:00
feat: add TOC sidebar for README and Markdown files
- Add floating TOC panel that displays table of contents for README and markdown files - Implement toggle button to show/hide TOC panel - Add localStorage persistence for TOC panel visibility state - Support both README in repo root and individual markdown file views - Add responsive design for mobile screens
This commit is contained in:
6 files changed
+199
-43
No files matched your search
@@ -105,3 +105,92 @@
|
||||
padding: 0 0.5em; /* make the UI look better for narrow (mobile) view */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* File view with TOC sidebar */
|
||||
.file-view-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-view-container .file-view {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* TOC as a floating sidebar panel */
|
||||
.file-view-toc {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
right: 0;
|
||||
width: 280px;
|
||||
max-height: calc(100vh - 80px);
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
background: var(--color-body);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-right: none;
|
||||
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
||||
box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 100;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
/* Hidden state - using custom class to avoid Tailwind conflicts */
|
||||
.file-view-toc.toc-panel-hidden {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.file-view-toc details {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.file-view-toc summary {
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
color: var(--color-text);
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.file-view-toc ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 5px 0 5px 1em;
|
||||
}
|
||||
|
||||
.file-view-toc ul ul {
|
||||
border-left: 1px dashed var(--color-secondary);
|
||||
}
|
||||
|
||||
.file-view-toc a {
|
||||
display: block;
|
||||
padding: 6px 10px;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.file-view-toc a:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
/* TOC toggle button active state - when TOC is visible */
|
||||
#toggle-toc-btn.active {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
/* Hide TOC sidebar on small screens */
|
||||
@media (max-width: 768px) {
|
||||
.file-view-toc {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
#toggle-toc-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user