Skip to content

Commit 5008a2e

Browse files
eddmannclaude
eddmann
and
claude
committed
Improve mobile styling for santa-site implementation pages
- Make header layout responsive with flex-col on mobile and centered content - Add collapsible file dropdown for mobile code browser instead of sidebar - Improve tab buttons with better touch targets and responsive sizing - Add mobile-friendly file navigation with chevron animations - Enhance code viewer with responsive text sizing and better spacing - Maintain desktop sidebar layout while optimizing for mobile UX 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 8fb3190 commit 5008a2e

1 file changed

Lines changed: 59 additions & 17 deletions

File tree

‎tools/src/site.rs‎

Lines changed: 59 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,7 @@ fn tailwind_head() -> String {
192192
@media (min-width: 1024px) { .sticky-toc { position: sticky; top: calc(var(--header-h) + 1rem); } }
193193
.snow2 { opacity: .18; animation-duration: 45s; background-size: 300px 300px; }
194194
@keyframes snow { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 1000px, 0 800px, 0 600px, 0 400px, 0 200px; } }
195+
.rotate-180 { transform: rotate(180deg); }
195196
</style>"#
196197
.to_string()
197198
}
@@ -732,7 +733,7 @@ fn render_impl(imp: &ImplInfo, tree: &BTreeMap<String, String>, base_path: &str)
732733
for (rel, _) in tree {
733734
if first_file.is_none() { first_file = Some((rel.as_str(), tree.get(rel).unwrap())); }
734735
files_sidebar.push_str(&format!(
735-
r#"<button class="w-full text-left px-3 py-1.5 rounded hover:bg-white/10 code text-xs" data-file="{}">{}</button>"#,
736+
r#"<button class="w-full text-left px-3 py-2 lg:py-1.5 rounded hover:bg-white/10 code text-xs sm:text-sm" data-file="{}">{}</button>"#,
736737
html_escape::encode_text(rel),
737738
html_escape::encode_text(rel)
738739
));
@@ -741,16 +742,34 @@ fn render_impl(imp: &ImplInfo, tree: &BTreeMap<String, String>, base_path: &str)
741742
let initial_file = first_file.map(|(r, c)| (r.to_string(), c.clone())).unwrap_or((String::new(), String::new()));
742743

743744
let code_browser = format!(
744-
r#"<div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
745-
<aside class="paper-dark rounded-lg p-3 border border-white/10 lg:col-span-1 max-h-[60vh] overflow-auto">
745+
r#"<div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-4 lg:gap-4">
746+
<!-- Mobile: Files dropdown, Desktop: Sidebar -->
747+
<div class="lg:hidden">
748+
<div class="paper-dark rounded-lg border border-white/10">
749+
<button id="mobile-file-toggle" class="w-full px-4 py-3 text-left flex items-center justify-between text-white/80 hover:text-white" aria-expanded="false" aria-controls="mobile-file-list">
750+
<span class="text-sm font-medium">Files</span>
751+
<svg class="w-4 h-4 transform transition-transform" id="mobile-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
752+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
753+
</svg>
754+
</button>
755+
<div id="mobile-file-list" class="hidden border-t border-white/10 max-h-60 overflow-auto">
756+
<div class="p-2 space-y-1">
757+
{sidebar}
758+
</div>
759+
</div>
760+
</div>
761+
</div>
762+
763+
<aside class="hidden lg:block paper-dark rounded-lg p-3 border border-white/10 lg:col-span-1 max-h-[60vh] overflow-auto">
746764
{sidebar}
747765
</aside>
766+
748767
<section class="paper-dark rounded-lg p-0 border border-white/10 lg:col-span-3 overflow-hidden">
749-
<div class="px-4 py-2 text-xs text-white/60 border-b border-white/10 bg-black/30 flex items-center justify-between">
750-
<span id="code-filename">{fname}</span>
751-
<button id="copy-code" class="px-2 py-1 rounded bg-white/10 hover:bg-white/20 text-white/80">Copy</button>
768+
<div class="px-3 sm:px-4 py-2 text-xs text-white/60 border-b border-white/10 bg-black/30 flex items-center justify-between">
769+
<span id="code-filename" class="truncate mr-2 text-xs sm:text-sm">{fname}</span>
770+
<button id="copy-code" class="px-2 py-1 rounded bg-white/10 hover:bg-white/20 text-white/80 text-xs sm:text-sm flex-shrink-0">Copy</button>
752771
</div>
753-
<pre class="code text-sm p-4 overflow-auto max-h-[60vh] bg-black/30"><code id="code-content" class="hljs">{content}</code></pre>
772+
<pre class="code text-xs sm:text-sm p-3 sm:p-4 overflow-auto max-h-[50vh] sm:max-h-[60vh] bg-black/30"><code id="code-content" class="hljs">{content}</code></pre>
754773
</section>
755774
</div>
756775
<script>
@@ -789,8 +808,31 @@ fn render_impl(imp: &ImplInfo, tree: &BTreeMap<String, String>, base_path: &str)
789808
if (window.hljs && window.hljs.highlightElement) {{ window.hljs.highlightElement(code); }}
790809
}}
791810
document.querySelectorAll('[data-file]').forEach(btn => {{
792-
btn.addEventListener('click', () => setFile(btn.getAttribute('data-file')));
811+
btn.addEventListener('click', () => {{
812+
setFile(btn.getAttribute('data-file'));
813+
// Close mobile file list after selection
814+
const mobileList = document.getElementById('mobile-file-list');
815+
const mobileToggle = document.getElementById('mobile-file-toggle');
816+
const chevron = document.getElementById('mobile-chevron');
817+
if (mobileList && mobileToggle && chevron) {{
818+
mobileList.classList.add('hidden');
819+
mobileToggle.setAttribute('aria-expanded', 'false');
820+
chevron.classList.remove('rotate-180');
821+
}}
822+
}});
823+
}});
824+
825+
// Mobile file toggle
826+
const mobileToggle = document.getElementById('mobile-file-toggle');
827+
const mobileList = document.getElementById('mobile-file-list');
828+
const chevron = document.getElementById('mobile-chevron');
829+
mobileToggle?.addEventListener('click', () => {{
830+
const isOpen = !mobileList.classList.contains('hidden');
831+
mobileList.classList.toggle('hidden');
832+
mobileToggle.setAttribute('aria-expanded', String(!isOpen));
833+
chevron.classList.toggle('rotate-180');
793834
}});
835+
794836
const copyBtn = document.getElementById('copy-code');
795837
copyBtn?.addEventListener('click', async () => {{
796838
try {{
@@ -814,9 +856,9 @@ fn render_impl(imp: &ImplInfo, tree: &BTreeMap<String, String>, base_path: &str)
814856
let tabs = format!(
815857
r###"<div class="mt-6 mb-4">
816858
<div class="w-full rounded-full bg-white/10 backdrop-blur border border-white/15 p-1">
817-
<div class="grid grid-cols-2 gap-3">
818-
<button type="button" class="tab tab-active w-full text-center" data-tab="journal">Journal</button>
819-
<button type="button" class="tab w-full text-center" data-tab="code">Code</button>
859+
<div class="grid grid-cols-2 gap-1 sm:gap-3">
860+
<button type="button" class="tab tab-active w-full text-center text-sm sm:text-base py-2 sm:py-3" data-tab="journal">Journal</button>
861+
<button type="button" class="tab w-full text-center text-sm sm:text-base py-2 sm:py-3" data-tab="code">Code</button>
820862
</div>
821863
</div>
822864
</div>
@@ -852,19 +894,19 @@ fn render_impl(imp: &ImplInfo, tree: &BTreeMap<String, String>, base_path: &str)
852894
let header_img_src = if imp.elf_png_path.is_some() { "elf.png".to_string() } else { base_url(base_path, "unknown-elf.png") };
853895

854896
let header = format!(
855-
r#"<div class="flex items-center gap-5">
856-
<div class="w-20 h-20 rounded-xl overflow-hidden bg-black/30 border border-white/10">
897+
r#"<div class="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-5">
898+
<div class="w-16 h-16 sm:w-20 sm:h-20 rounded-xl overflow-hidden bg-black/30 border border-white/10 mx-auto sm:mx-0">
857899
<img class="w-full h-full object-cover" src="{img}" alt="Elf">
858900
</div>
859-
<div>
860-
<h1 class="text-2xl font-semibold">{author}</h1>
861-
<div class="mt-2 flex gap-2 text-xs">
901+
<div class="text-center sm:text-left flex-1">
902+
<h1 class="text-xl sm:text-2xl font-semibold">{author}</h1>
903+
<div class="mt-2 flex flex-wrap justify-center sm:justify-start gap-2 text-xs">
862904
<span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-300 border border-emerald-300/20">{lang}</span>
863905
<span class="px-2 py-0.5 rounded-full bg-rose-500/10 text-rose-300 border border-rose-300/20">{harness}</span>
864906
<span class="px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-300 border border-amber-300/20">{model}</span>
865907
</div>
866908
</div>
867-
<a class="ml-auto text-sm px-3 py-1 rounded bg-white/10 hover:bg-white/20 text-white/80 border border-white/10" href="{gh}" target="_blank" rel="noopener noreferrer">View on GitHub</a>
909+
<a class="text-sm px-3 py-2 rounded bg-white/10 hover:bg-white/20 text-white/80 border border-white/10 text-center sm:ml-auto" href="{gh}" target="_blank" rel="noopener noreferrer">View on GitHub</a>
868910
</div>"#,
869911
author = html_escape::encode_text(author),
870912
lang = html_escape::encode_text(&imp.journal.details.language),

0 commit comments

Comments
 (0)