litruv/Docs-Viewer
1
0
Fork 0
mirror of https://github.com/litruv/Docs-Viewer.git synced 2026-07-24 02:36:07 +10:00
Code Issues Packages Projects Releases Wiki Activity

Refactor folder header rendering and clean up CSS styles

Browse Source
This commit is contained in:
Litruv
2025-02-10 14:06:07 +11:00
parent ad2f739e11
commit 1cb7b7b9a4
2 changed files with 55 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.js
View File

@@ -197,20 +197,22 @@ class DOMService {
} }
createFolderHeaderWithFile(iconClass, doc) { createFolderHeaderWithFile(iconClass, doc) {
return `<div class="folder-icons"> return `
<div class="folder-icons">
<i class="${iconClass} folder-icon"></i>
</div>
<span>${doc.title}</span>
<a href="?${doc.slug}" class="folder-link" title="View folder page"> <a href="?${doc.slug}" class="folder-link" title="View folder page">
<i class="fas fa-file-alt"></i> <i class="fas fa-file-alt"></i>
</a> </a>`;
<i class="${iconClass} folder-icon"></i>
</div>
<span>${doc.title}</span>`;
} }
createFolderHeaderBasic(iconClass, doc) { createFolderHeaderBasic(iconClass, doc) {
return `<div class="folder-icons"> return `
<i class="${iconClass} folder-icon"></i> <div class="folder-icons">
</div> <i class="${iconClass} folder-icon"></i>
<span>${doc.title}</span>`; </div>
<span>${doc.title}</span>`;
} }
setupFolderListeners(folderDiv, folderHeader, doc) { setupFolderListeners(folderDiv, folderHeader, doc) {
@@ -429,7 +431,7 @@ class DocumentService {
processWikiLinks(content) { processWikiLinks(content) {
return content.replace(/\[\[(.*?)\]\]/g, (match, linkText) => { return content.replace(/\[\[(.*?)\]\]/g, (match, linkText) => {
const [targetTitle, displayText] = linkText.split('|').map(s => s.trim()); const [targetTitle, displayText] = linkText.split('|').map(s => s.trim());
if (targetTitle.match(/\.(png|jpg|jpeg|webp|gif|mp4|webm)$/i)) { if (targetTitle.match(/\.(png|jpg|jpeg|gif|mp4|webm)$/i)) {
return match; return match;
} }

81
styles.css
View File

@@ -56,8 +56,8 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-right: 1px solid var(--ifm-border-color); border-right: 1px solid var(--ifm-border-color);
transform: none; /* Remove initial transform */ transform: none;
transition: none; /* Remove initial transition */ transition: none;
z-index: 999; z-index: 999;
} }
@@ -67,9 +67,9 @@ body {
right: 0; right: 0;
bottom: 0; bottom: 0;
width: var(--doc-outline-width); width: var(--doc-outline-width);
background: var(--ifm-background-color); /* Change to match main content */ background: var(--ifm-background-color);
overflow-y: auto; overflow-y: auto;
border-left: none; /* Explicitly remove border */ border-left: none;
} }
.content { .content {
@@ -87,18 +87,18 @@ body {
@media (max-width: 1000px) { @media (max-width: 1000px) {
.menu-button { .menu-button {
display: flex !important; /* Force display on mobile */ display: flex !important;
} }
.left-sidebar { .left-sidebar {
left: -100%; left: -100%;
width: min(var(--doc-sidebar-width), 80vw); /* Limit width on mobile */ width: min(var(--doc-sidebar-width), 80vw);
transition: left 0.3s ease; /* Change to left transition */ transition: left 0.3s ease;
box-shadow: none; box-shadow: none;
} }
.left-sidebar.show { .left-sidebar.show {
left: 0; /* Change to left positioning */ left: 0;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2); box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
} }
@@ -117,7 +117,7 @@ body {
} }
#file-index { #file-index {
padding-top: 0.75rem; /* Add top padding to menu */ padding-top: 0.75rem;
} }
} }
@@ -132,7 +132,7 @@ body {
} }
.menu-button { .menu-button {
display: none; /* Initially hidden */ display: none;
background: none; background: none;
border: none; border: none;
color: var(--ifm-color-content); color: var(--ifm-color-content);
@@ -163,7 +163,7 @@ body {
color: var(--ifm-color-content); color: var(--ifm-color-content);
text-decoration: none; text-decoration: none;
display: block; display: block;
padding: 0.6rem 1.2rem; /* Increased vertical padding */ padding: 0.4rem 1.2rem;
font-size: 0.875rem; font-size: 0.875rem;
border-left: 2px solid transparent; border-left: 2px solid transparent;
} }
@@ -182,16 +182,33 @@ body {
.folder { .folder {
color: var(--ifm-color-content); color: var(--ifm-color-content);
padding-right: 0;
} }
.folder-header { .folder-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; padding: 0.4rem 1.2rem;
padding: 0.4rem 0rem;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
font-size: 0.875rem; font-size: 0.875rem;
width: calc(100% - 2.4rem);
position: relative;
}
.folder-icons {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--ifm-color-content-secondary);
min-width: 1.5em;
margin-right: 0.5rem;
order: 1;
}
.folder-header span {
order: 2;
margin-right: auto;
} }
.folder-link { .folder-link {
@@ -200,9 +217,12 @@ body {
color: var(--ifm-color-content-secondary); color: var(--ifm-color-content-secondary);
opacity: 0.6; opacity: 0.6;
font-size: 0.8em; font-size: 0.8em;
padding: 2px; padding: 2px 8px;
border-radius: 3px; border-radius: 3px;
margin-left: 0.25rem; /* Add spacing between file and folder icons */ position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
} }
.folder-header:hover .folder-link { .folder-header:hover .folder-link {
@@ -215,16 +235,9 @@ body {
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
} }
.folder-icons {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--ifm-color-content-secondary);
min-width: 2.5em; /* Ensure consistent spacing */
}
.folder-content { .folder-content {
display: none; display: none;
padding-left: 0.8rem;
} }
.folder.open > .folder-content { .folder.open > .folder-content {
@@ -255,7 +268,7 @@ social-links a:hover {
} }
.subtitle { .subtitle {
margin-top: auto; /* Push to bottom of flex container */ margin-top: auto;
text-align: center; text-align: center;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 0.8rem; font-size: 0.8rem;
@@ -277,7 +290,7 @@ social-links a:hover {
.content { .content {
flex: 1; flex: 1;
background-color: var(--ifm-background-color); background-color: var(--ifm-background-color);
min-width: 0; /* Fix flexbox content overflow */ min-width: 0;
color: var(--ifm-color-content); color: var(--ifm-color-content);
height: 100%; height: 100%;
padding-bottom: calc(2rem + env(safe-area-inset-bottom)); padding-bottom: calc(2rem + env(safe-area-inset-bottom));
@@ -304,7 +317,7 @@ social-links a:hover {
color: var(--ifm-color-content-secondary); color: var(--ifm-color-content-secondary);
border-left: 2px solid transparent; border-left: 2px solid transparent;
margin: 2px 0; margin: 2px 0;
padding: 0.25em 1rem; /* Adjust padding to match */ padding: 0.25em 1rem;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@@ -325,7 +338,7 @@ social-links a:hover {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 700; font-weight: 700;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
text-align: left; /* Explicitly set left alignment */ text-align: left;
} }
.markdown-content h2 { .markdown-content h2 {
@@ -371,11 +384,11 @@ social-links a:hover {
} }
.markdown-content th { .markdown-content th {
background-color: rgba(255, 255, 255, 0.15); /* Change header background to 15% white */ background-color: rgba(255, 255, 255, 0.15);
font-weight: 600; font-weight: 600;
border: none; border: none;
border-bottom: 1px solid var(--ifm-border-color); border-bottom: 1px solid var(--ifm-border-color);
text-align: left; /* Add this line to left-align table headers */ text-align: left;
padding: 0.75rem; padding: 0.75rem;
} }
@@ -391,7 +404,7 @@ social-links a:hover {
border: none; border: none;
border-bottom: 1px solid var(--ifm-border-color); border-bottom: 1px solid var(--ifm-border-color);
padding: 0.75rem; padding: 0.75rem;
background-color: rgba(255, 255, 255, 0.03); /* Lighter background for cells */ background-color: rgba(255, 255, 255, 0.03);
} }
.markdown-content tr:last-child td { .markdown-content tr:last-child td {
@@ -459,10 +472,6 @@ social-links a:hover {
color: inherit; color: inherit;
} }
/* Keep existing scrollbar styles, animations, and other used styles */
/* ...existing code... */
/* Custom Scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 7px; width: 7px;
height: 7px; height: 7px;
@@ -481,7 +490,6 @@ social-links a:hover {
background-color: #606060; background-color: #606060;
} }
/* Completely remove scrollbar buttons */
::-webkit-scrollbar-button { ::-webkit-scrollbar-button {
display: none !important; display: none !important;
width: 0 !important; width: 0 !important;
@@ -493,13 +501,11 @@ social-links a:hover {
background-color: transparent; background-color: transparent;
} }
/* Firefox scrollbar - hide buttons */
* { * {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #505050 var(--ifm-background-color); scrollbar-color: #505050 var(--ifm-background-color);
} }
/* Highlight animation */
@keyframes highlight { @keyframes highlight {
0% { background-color: rgba(33, 150, 243, 0.2); } 0% { background-color: rgba(33, 150, 243, 0.2); }
100% { background-color: transparent; } 100% { background-color: transparent; }
@@ -536,7 +542,6 @@ social-links a:hover {
} }
#document-outline a.active { #document-outline a.active {
/* Remove any forced padding-left: 0; here */
color: var(--ifm-color-primary); color: var(--ifm-color-primary);
border-left-color: var(--ifm-color-primary); border-left-color: var(--ifm-color-primary);
background: rgba(33, 150, 243, 0.1); background: rgba(33, 150, 243, 0.1);