zzstoatzz.io
interactive intro to open social
at-me.zzstoatzz.io
feat: improve mobile ux and record display
- fix @ symbol positioning: larger (1.2rem) and better aligned with handle
- add structured record display with headers and content sections
- add copy button to each record with visual feedback
- improve mobile responsiveness for identity circle and records
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
+114
-13
src/templates.rs
+114
-13
src/templates.rs
···
297
297
}}
298
298
299
299
.identity-label {{
300
-
font-size: 0.45rem;
301
-
color: var(--text-lighter);
302
-
letter-spacing: 0.1em;
300
+
font-size: 1.2rem;
301
+
color: var(--text);
302
+
font-weight: 600;
303
+
line-height: 1;
303
304
}}
304
305
305
306
.identity-value {{
306
-
font-size: 0.75rem;
307
-
color: var(--text);
307
+
font-size: 0.7rem;
308
+
color: var(--text-lighter);
308
309
text-align: center;
309
310
word-break: break-word;
310
311
max-width: 100px;
311
-
font-weight: 500;
312
+
font-weight: 400;
313
+
}}
314
+
315
+
@media (max-width: 768px) {{
316
+
.identity-label {{
317
+
font-size: 1.1rem;
318
+
}}
319
+
320
+
.identity-value {{
321
+
font-size: 0.65rem;
322
+
}}
312
323
}}
313
324
314
325
.identity-hint {{
···
485
496
}}
486
497
487
498
.record {{
488
-
padding: 0.6rem;
489
499
margin-bottom: 0.5rem;
490
500
background: var(--bg);
491
501
border: 1px solid var(--border);
···
493
503
font-size: 0.65rem;
494
504
color: var(--text-light);
495
505
transition: all 0.15s ease;
506
+
overflow: hidden;
496
507
}}
497
508
498
509
.record:hover {{
···
504
515
margin-bottom: 0;
505
516
}}
506
517
507
-
.record pre {{
518
+
.record-header {{
519
+
display: flex;
520
+
justify-content: space-between;
521
+
align-items: center;
522
+
padding: 0.5rem 0.6rem;
523
+
background: var(--surface);
524
+
border-bottom: 1px solid var(--border);
525
+
}}
526
+
527
+
.record-label {{
528
+
font-size: 0.6rem;
529
+
color: var(--text-lighter);
530
+
font-weight: 500;
531
+
}}
532
+
533
+
.copy-btn {{
534
+
background: var(--bg);
535
+
border: 1px solid var(--border);
536
+
color: var(--text-light);
537
+
font-family: inherit;
538
+
font-size: 0.55rem;
539
+
padding: 0.2rem 0.5rem;
540
+
cursor: pointer;
541
+
transition: all 0.15s ease;
542
+
border-radius: 2px;
543
+
-webkit-tap-highlight-color: transparent;
544
+
}}
545
+
546
+
.copy-btn:hover, .copy-btn:active {{
547
+
background: var(--surface-hover);
548
+
border-color: var(--text-light);
549
+
color: var(--text);
550
+
}}
551
+
552
+
.copy-btn.copied {{
553
+
color: var(--text);
554
+
border-color: var(--text);
555
+
}}
556
+
557
+
.record-content {{
558
+
padding: 0.6rem;
559
+
}}
560
+
561
+
.record-content pre {{
508
562
margin: 0;
509
563
white-space: pre-wrap;
510
564
word-break: break-word;
511
565
line-height: 1.5;
566
+
font-size: 0.625rem;
512
567
}}
513
568
514
569
.load-more {{
···
797
852
.then(data => {{
798
853
if (data.records && data.records.length > 0) {{
799
854
let recordsHtml = '';
800
-
data.records.forEach(record => {{
855
+
data.records.forEach((record, idx) => {{
801
856
const json = JSON.stringify(record.value, null, 2);
802
-
recordsHtml += `<div class="record"><pre>${{json}}</pre></div>`;
857
+
const recordId = `record-${{Date.now()}}-${{idx}}`;
858
+
recordsHtml += `
859
+
<div class="record">
860
+
<div class="record-header">
861
+
<span class="record-label">record</span>
862
+
<button class="copy-btn" data-content="${{encodeURIComponent(json)}}" data-record-id="${{recordId}}">copy</button>
863
+
</div>
864
+
<div class="record-content">
865
+
<pre>${{json}}</pre>
866
+
</div>
867
+
</div>
868
+
`;
803
869
}});
804
870
805
871
if (data.cursor) {{
···
808
874
809
875
recordListDiv.innerHTML = recordsHtml;
810
876
811
-
// Use event delegation for load more buttons
877
+
// Use event delegation for copy and load more buttons
812
878
recordListDiv.addEventListener('click', (e) => {{
879
+
// Handle copy button
880
+
if (e.target.classList.contains('copy-btn')) {{
881
+
e.stopPropagation();
882
+
const copyBtn = e.target;
883
+
const content = decodeURIComponent(copyBtn.dataset.content);
884
+
885
+
navigator.clipboard.writeText(content).then(() => {{
886
+
const originalText = copyBtn.textContent;
887
+
copyBtn.textContent = 'copied!';
888
+
copyBtn.classList.add('copied');
889
+
setTimeout(() => {{
890
+
copyBtn.textContent = originalText;
891
+
copyBtn.classList.remove('copied');
892
+
}}, 1500);
893
+
}}).catch(err => {{
894
+
console.error('Failed to copy:', err);
895
+
copyBtn.textContent = 'error';
896
+
setTimeout(() => {{
897
+
copyBtn.textContent = 'copy';
898
+
}}, 1500);
899
+
}});
900
+
}}
901
+
902
+
// Handle load more button
813
903
if (e.target.classList.contains('load-more')) {{
814
904
e.stopPropagation();
815
905
const loadMoreBtn = e.target;
···
822
912
.then(r => r.json())
823
913
.then(moreData => {{
824
914
let moreHtml = '';
825
-
moreData.records.forEach(record => {{
915
+
moreData.records.forEach((record, idx) => {{
826
916
const json = JSON.stringify(record.value, null, 2);
827
-
moreHtml += `<div class="record"><pre>${{json}}</pre></div>`;
917
+
const recordId = `record-more-${{Date.now()}}-${{idx}}`;
918
+
moreHtml += `
919
+
<div class="record">
920
+
<div class="record-header">
921
+
<span class="record-label">record</span>
922
+
<button class="copy-btn" data-content="${{encodeURIComponent(json)}}" data-record-id="${{recordId}}">copy</button>
923
+
</div>
924
+
<div class="record-content">
925
+
<pre>${{json}}</pre>
926
+
</div>
927
+
</div>
928
+
`;
828
929
}});
829
930
830
931
loadMoreBtn.remove();