Fix navigation styles

This commit is contained in:
Timothy Farrell 2026-05-08 04:05:16 +00:00
parent 57ac6bd92e
commit 188454667a
3 changed files with 90 additions and 7 deletions

View File

@ -65,11 +65,6 @@
font-family: monospace; font-family: monospace;
font-size: 14px; font-size: 14px;
z-index: 100; z-index: 100;
transform: translateX(-100%);
transition: transform 0.2s;
}
#sidebar.open {
transform: translateX(0);
} }
#sidebar a { #sidebar a {
color: #aaa; color: #aaa;
@ -105,13 +100,36 @@
background: #444; background: #444;
color: #fff; color: #fff;
} }
#sidebar-toggle {
position: fixed;
top: 12px;
left: 280px;
z-index: 200;
font-size: 24px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
text-decoration: none;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
transition: left 0.2s;
display: none;
}
#sidebar-toggle.collapsed {
left: 12px;
}
#sidebar-toggle:hover {
color: #fff;
background: rgba(0, 0, 0, 0.7);
}
</style> </style>
</head> </head>
<body> <body>
<div id="sidebar" class="hidden"> <div id="sidebar" class="$sidebar_class">
$folder_index $folder_index
</div> </div>
<div id="container"> <a id="sidebar-toggle" href="#" title="Toggle index (i)"></a>
<div id="container" class="$container_class">
<a href="$image_click_url"><div id="img" title="$filename" data-hash="$file_hash" data-path="$file_path"></div></a> <a href="$image_click_url"><div id="img" title="$filename" data-hash="$file_hash" data-path="$file_path"></div></a>
<a href="$prev_url" class="chevron left" id="prev-btn">&#8249;</a> <a href="$prev_url" class="chevron left" id="prev-btn">&#8249;</a>
<a href="$next_url" class="chevron right" id="next-btn">&#8250;</a> <a href="$next_url" class="chevron right" id="next-btn">&#8250;</a>
@ -169,6 +187,20 @@
document.getElementById('sidebar').classList.toggle('hidden'); document.getElementById('sidebar').classList.toggle('hidden');
} }
}); });
// Show sidebar toggle button when there is folder index content
(function() {
var sidebar = document.getElementById('sidebar');
var toggle = document.getElementById('sidebar-toggle');
if (sidebar && sidebar.textContent.trim()) {
toggle.style.display = 'block';
toggle.addEventListener('click', function(e) {
e.preventDefault();
sidebar.classList.toggle('hidden');
toggle.classList.toggle('collapsed');
});
}
})();
</script> </script>
</body> </body>
</html> </html>

View File

@ -393,6 +393,7 @@ def _render_page(
# Build folder index sidebar if in navigate mode # Build folder index sidebar if in navigate mode
folder_index = "" folder_index = ""
sidebar_class = "hidden"
if navigate_enabled and use_navigate_urls: if navigate_enabled and use_navigate_urls:
current_path = file_path current_path = file_path
folder_index = _render_folder_index_html( folder_index = _render_folder_index_html(
@ -400,6 +401,7 @@ def _render_page(
current_order=current_order, current_order=current_order,
current_delay=current_delay, current_delay=current_delay,
) )
sidebar_class = ""
content = template.substitute( content = template.substitute(
img_url="/api/{file_hash}/data".format(file_hash=navigation_data["file_hash"]), img_url="/api/{file_hash}/data".format(file_hash=navigation_data["file_hash"]),
@ -413,6 +415,8 @@ def _render_page(
extra_meta=extra_meta, extra_meta=extra_meta,
play_button=play_button, play_button=play_button,
folder_index=folder_index, folder_index=folder_index,
sidebar_class=sidebar_class,
container_class="",
) )
return HTMLResponse(content=content) return HTMLResponse(content=content)
@ -838,6 +842,8 @@ def _render_folder_index_page(
extra_meta="", extra_meta="",
play_button="", play_button="",
folder_index=folder_index_html, folder_index=folder_index_html,
sidebar_class="",
container_class="hidden",
) )
return HTMLResponse(content=content) return HTMLResponse(content=content)

View File

@ -92,6 +92,51 @@ class TestNavigatePage:
response = await client_zip_navigate.get("/navigate/folder/") response = await client_zip_navigate.get("/navigate/folder/")
assert "breadcrumb" in response.text assert "breadcrumb" in response.text
async def test_folder_index_shows_subfolder_links(
self, client_zip_navigate: AsyncClient
) -> None:
"""Root folder index shows subfolder links."""
response = await client_zip_navigate.get("/navigate/")
assert "/navigate/folder/" in response.text
async def test_folder_index_shows_file_links(
self, client_zip_navigate: AsyncClient
) -> None:
"""Folder index shows file links."""
response = await client_zip_navigate.get("/navigate/")
assert "/navigate/top.txt" in response.text
async def test_file_page_has_sidebar(
self, client_zip_navigate: AsyncClient
) -> None:
"""File page in navigate mode has folder index sidebar."""
response = await client_zip_navigate.get("/navigate/top.txt")
assert "sidebar" in response.text
assert "index-item" in response.text
async def test_hash_page_has_no_sidebar(
self, client_zip_navigate: AsyncClient
) -> None:
"""Hash page does not show folder index sidebar content."""
# Get a valid hash from the zip
response = await client_zip_navigate.get("/navigate/top.txt")
assert response.status_code == 200
# Extract hash from the response
import re
match = re.search(r'data-hash="([^"]+)"', response.text)
assert match is not None
file_hash = match.group(1)
# Now visit the hash page
hash_response = await client_zip_navigate.get(f"/{file_hash}")
assert hash_response.status_code == 200
# Sidebar should be hidden on hash pages
assert 'id="sidebar" class="hidden"' in hash_response.text
# No folder index content in sidebar
assert "📁" not in hash_response.text
assert "📄" not in hash_response.text
async def test_returns_404_on_directory_indexer( async def test_returns_404_on_directory_indexer(
self, client_dir: AsyncClient self, client_dir: AsyncClient
) -> None: ) -> None: