patch of improve mobile ux and record display · round #0 · pull #2 · zzstoatzz.io/at-me

+114 -13

src/templates.rs

···

       297
        
               }}

     

       298
        
       

     

       299
        
               .identity-label {{

     

       300
       -
                   font-size: 0.45rem;

     

       301
       -
                   color: var(--text-lighter);

     

       302
       -
                   letter-spacing: 0.1em;

     

       0
        
       
     

       303
        
               }}

     

       304
        
       

     

       305
        
               .identity-value {{

     

       306
       -
                   font-size: 0.75rem;

     

       307
       -
                   color: var(--text);

     

       308
        
                   text-align: center;

     

       309
        
                   word-break: break-word;

     

       310
        
                   max-width: 100px;

     

       311
       -
                   font-weight: 500;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       312
        
               }}

     

       313
        
       

     

       314
        
               .identity-hint {{

     
···

       485
        
               }}

     

       486
        
       

     

       487
        
               .record {{

     

       488
       -
                   padding: 0.6rem;

     

       489
        
                   margin-bottom: 0.5rem;

     

       490
        
                   background: var(--bg);

     

       491
        
                   border: 1px solid var(--border);

     
···

       493
        
                   font-size: 0.65rem;

     

       494
        
                   color: var(--text-light);

     

       495
        
                   transition: all 0.15s ease;

     

       0
        
       
     

       496
        
               }}

     

       497
        
       

     

       498
        
               .record:hover {{

     
···

       504
        
                   margin-bottom: 0;

     

       505
        
               }}

     

       506
        
       

     

       507
       -
               .record pre {{

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       508
        
                   margin: 0;

     

       509
        
                   white-space: pre-wrap;

     

       510
        
                   word-break: break-word;

     

       511
        
                   line-height: 1.5;

     

       0
        
       
     

       512
        
               }}

     

       513
        
       

     

       514
        
               .load-more {{

     
···

       797
        
                                           .then(data => {{

     

       798
        
                                               if (data.records && data.records.length > 0) {{

     

       799
        
                                                   let recordsHtml = '';

     

       800
       -
                                                   data.records.forEach(record => {{

     

       801
        
                                                       const json = JSON.stringify(record.value, null, 2);

     

       802
       -
                                                       recordsHtml += `<div class="record"><pre>${{json}}</pre></div>`;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       803
        
                                                   }});

     

       804
        
       

     

       805
        
                                                   if (data.cursor) {{

     
···

       808
        
       

     

       809
        
                                                   recordListDiv.innerHTML = recordsHtml;

     

       810
        
       

     

       811
       -
                                                   // Use event delegation for load more buttons

     

       812
        
                                                   recordListDiv.addEventListener('click', (e) => {{

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       813
        
                                                       if (e.target.classList.contains('load-more')) {{

     

       814
        
                                                           e.stopPropagation();

     

       815
        
                                                           const loadMoreBtn = e.target;

     
···

       822
        
                                                               .then(r => r.json())

     

       823
        
                                                               .then(moreData => {{

     

       824
        
                                                                   let moreHtml = '';

     

       825
       -
                                                                   moreData.records.forEach(record => {{

     

       826
        
                                                                       const json = JSON.stringify(record.value, null, 2);

     

       827
       -
                                                                       moreHtml += `<div class="record"><pre>${{json}}</pre></div>`;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       828
        
                                                                   }});

     

       829
        
       

     

       830
        
                                                                   loadMoreBtn.remove();

···

       297
        
               }}

     

       298
        
       

     

       299
        
               .identity-label {{

     

       300
       +
                   font-size: 1.2rem;

     

       301
       +
                   color: var(--text);

     

       302
       +
                   font-weight: 600;

     

       303
       +
                   line-height: 1;

     

       304
        
               }}

     

       305
        
       

     

       306
        
               .identity-value {{

     

       307
       +
                   font-size: 0.7rem;

     

       308
       +
                   color: var(--text-lighter);

     

       309
        
                   text-align: center;

     

       310
        
                   word-break: break-word;

     

       311
        
                   max-width: 100px;

     

       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
       +
                   }}

     

       323
        
               }}

     

       324
        
       

     

       325
        
               .identity-hint {{

     
···

       496
        
               }}

     

       497
        
       

     

       498
        
               .record {{

     

       0
        
       
     

       499
        
                   margin-bottom: 0.5rem;

     

       500
        
                   background: var(--bg);

     

       501
        
                   border: 1px solid var(--border);

     
···

       503
        
                   font-size: 0.65rem;

     

       504
        
                   color: var(--text-light);

     

       505
        
                   transition: all 0.15s ease;

     

       506
       +
                   overflow: hidden;

     

       507
        
               }}

     

       508
        
       

     

       509
        
               .record:hover {{

     
···

       515
        
                   margin-bottom: 0;

     

       516
        
               }}

     

       517
        
       

     

       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 {{

     

       562
        
                   margin: 0;

     

       563
        
                   white-space: pre-wrap;

     

       564
        
                   word-break: break-word;

     

       565
        
                   line-height: 1.5;

     

       566
       +
                   font-size: 0.625rem;

     

       567
        
               }}

     

       568
        
       

     

       569
        
               .load-more {{

     
···

       852
        
                                           .then(data => {{

     

       853
        
                                               if (data.records && data.records.length > 0) {{

     

       854
        
                                                   let recordsHtml = '';

     

       855
       +
                                                   data.records.forEach((record, idx) => {{

     

       856
        
                                                       const json = JSON.stringify(record.value, null, 2);

     

       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
       +
                                                       `;

     

       869
        
                                                   }});

     

       870
        
       

     

       871
        
                                                   if (data.cursor) {{

     
···

       874
        
       

     

       875
        
                                                   recordListDiv.innerHTML = recordsHtml;

     

       876
        
       

     

       877
       +
                                                   // Use event delegation for copy and load more buttons

     

       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

     

       903
        
                                                       if (e.target.classList.contains('load-more')) {{

     

       904
        
                                                           e.stopPropagation();

     

       905
        
                                                           const loadMoreBtn = e.target;

     
···

       912
        
                                                               .then(r => r.json())

     

       913
        
                                                               .then(moreData => {{

     

       914
        
                                                                   let moreHtml = '';

     

       915
       +
                                                                   moreData.records.forEach((record, idx) => {{

     

       916
        
                                                                       const json = JSON.stringify(record.value, null, 2);

     

       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
       +
                                                                       `;

     

       929
        
                                                                   }});

     

       930
        
       

     

       931
        
                                                                   loadMoreBtn.remove();