back round 0 view raw

ux improvements #3

closed

opened by

zzstoatzz.io 2 months ago targeting main from ui-improvements

improve record viewing and other smol things

options

unified split

Changed files

+134 -13

.tangled

workflows

check.yaml

clippy.yaml

src

templates.rs

+114 -13

src/templates.rs

···

       297
       297
        
               }}

     

       298
       298
        
       

     

       299
       299
        
               .identity-label {{

     

       300
       300
       -
                   font-size: 0.45rem;

     

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

     

       302
       302
       -
                   letter-spacing: 0.1em;

     

       300
       300
       +
                   font-size: 1.2rem;

     

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

     

       302
       302
       +
                   font-weight: 600;

     

       303
       303
       +
                   line-height: 1;

     

       303
       304
        
               }}

     

       304
       305
        
       

     

       305
       306
        
               .identity-value {{

     

       306
       306
       -
                   font-size: 0.75rem;

     

       307
       307
       -
                   color: var(--text);

     

       307
       307
       +
                   font-size: 0.7rem;

     

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

     

       308
       309
        
                   text-align: center;

     

       309
       310
        
                   word-break: break-word;

     

       310
       311
        
                   max-width: 100px;

     

       311
       311
       -
                   font-weight: 500;

     

       312
       312
       +
                   font-weight: 400;

     

       313
       313
       +
               }}

     

       314
       314
       +
       

     

       315
       315
       +
               @media (max-width: 768px) {{

     

       316
       316
       +
                   .identity-label {{

     

       317
       317
       +
                       font-size: 1.1rem;

     

       318
       318
       +
                   }}

     

       319
       319
       +
       

     

       320
       320
       +
                   .identity-value {{

     

       321
       321
       +
                       font-size: 0.65rem;

     

       322
       322
       +
                   }}

     

       312
       323
        
               }}

     

       313
       324
        
       

     

       314
       325
        
               .identity-hint {{

     
···

       485
       496
        
               }}

     

       486
       497
        
       

     

       487
       498
        
               .record {{

     

       488
       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
       506
       +
                   overflow: hidden;

     

       496
       507
        
               }}

     

       497
       508
        
       

     

       498
       509
        
               .record:hover {{

     
···

       504
       515
        
                   margin-bottom: 0;

     

       505
       516
        
               }}

     

       506
       517
        
       

     

       507
       507
       -
               .record pre {{

     

       518
       518
       +
               .record-header {{

     

       519
       519
       +
                   display: flex;

     

       520
       520
       +
                   justify-content: space-between;

     

       521
       521
       +
                   align-items: center;

     

       522
       522
       +
                   padding: 0.5rem 0.6rem;

     

       523
       523
       +
                   background: var(--surface);

     

       524
       524
       +
                   border-bottom: 1px solid var(--border);

     

       525
       525
       +
               }}

     

       526
       526
       +
       

     

       527
       527
       +
               .record-label {{

     

       528
       528
       +
                   font-size: 0.6rem;

     

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

     

       530
       530
       +
                   font-weight: 500;

     

       531
       531
       +
               }}

     

       532
       532
       +
       

     

       533
       533
       +
               .copy-btn {{

     

       534
       534
       +
                   background: var(--bg);

     

       535
       535
       +
                   border: 1px solid var(--border);

     

       536
       536
       +
                   color: var(--text-light);

     

       537
       537
       +
                   font-family: inherit;

     

       538
       538
       +
                   font-size: 0.55rem;

     

       539
       539
       +
                   padding: 0.2rem 0.5rem;

     

       540
       540
       +
                   cursor: pointer;

     

       541
       541
       +
                   transition: all 0.15s ease;

     

       542
       542
       +
                   border-radius: 2px;

     

       543
       543
       +
                   -webkit-tap-highlight-color: transparent;

     

       544
       544
       +
               }}

     

       545
       545
       +
       

     

       546
       546
       +
               .copy-btn:hover, .copy-btn:active {{

     

       547
       547
       +
                   background: var(--surface-hover);

     

       548
       548
       +
                   border-color: var(--text-light);

     

       549
       549
       +
                   color: var(--text);

     

       550
       550
       +
               }}

     

       551
       551
       +
       

     

       552
       552
       +
               .copy-btn.copied {{

     

       553
       553
       +
                   color: var(--text);

     

       554
       554
       +
                   border-color: var(--text);

     

       555
       555
       +
               }}

     

       556
       556
       +
       

     

       557
       557
       +
               .record-content {{

     

       558
       558
       +
                   padding: 0.6rem;

     

       559
       559
       +
               }}

     

       560
       560
       +
       

     

       561
       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
       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
       800
       -
                                                   data.records.forEach(record => {{

     

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

     

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

     

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

     

       857
       857
       +
                                                       const recordId = `record-${{Date.now()}}-${{idx}}`;

     

       858
       858
       +
                                                       recordsHtml += `

     

       859
       859
       +
                                                           <div class="record">

     

       860
       860
       +
                                                               <div class="record-header">

     

       861
       861
       +
                                                                   <span class="record-label">record</span>

     

       862
       862
       +
                                                                   <button class="copy-btn" data-content="${{encodeURIComponent(json)}}" data-record-id="${{recordId}}">copy</button>

     

       863
       863
       +
                                                               </div>

     

       864
       864
       +
                                                               <div class="record-content">

     

       865
       865
       +
                                                                   <pre>${{json}}</pre>

     

       866
       866
       +
                                                               </div>

     

       867
       867
       +
                                                           </div>

     

       868
       868
       +
                                                       `;

     

       803
       869
        
                                                   }});

     

       804
       870
        
       

     

       805
       871
        
                                                   if (data.cursor) {{

     
···

       808
       874
        
       

     

       809
       875
        
                                                   recordListDiv.innerHTML = recordsHtml;

     

       810
       876
        
       

     

       811
       811
       -
                                                   // Use event delegation for load more buttons

     

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

     

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

     

       879
       879
       +
                                                       // Handle copy button

     

       880
       880
       +
                                                       if (e.target.classList.contains('copy-btn')) {{

     

       881
       881
       +
                                                           e.stopPropagation();

     

       882
       882
       +
                                                           const copyBtn = e.target;

     

       883
       883
       +
                                                           const content = decodeURIComponent(copyBtn.dataset.content);

     

       884
       884
       +
       

     

       885
       885
       +
                                                           navigator.clipboard.writeText(content).then(() => {{

     

       886
       886
       +
                                                               const originalText = copyBtn.textContent;

     

       887
       887
       +
                                                               copyBtn.textContent = 'copied!';

     

       888
       888
       +
                                                               copyBtn.classList.add('copied');

     

       889
       889
       +
                                                               setTimeout(() => {{

     

       890
       890
       +
                                                                   copyBtn.textContent = originalText;

     

       891
       891
       +
                                                                   copyBtn.classList.remove('copied');

     

       892
       892
       +
                                                               }}, 1500);

     

       893
       893
       +
                                                           }}).catch(err => {{

     

       894
       894
       +
                                                               console.error('Failed to copy:', err);

     

       895
       895
       +
                                                               copyBtn.textContent = 'error';

     

       896
       896
       +
                                                               setTimeout(() => {{

     

       897
       897
       +
                                                                   copyBtn.textContent = 'copy';

     

       898
       898
       +
                                                               }}, 1500);

     

       899
       899
       +
                                                           }});

     

       900
       900
       +
                                                       }}

     

       901
       901
       +
       

     

       902
       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
       825
       -
                                                                   moreData.records.forEach(record => {{

     

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

     

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

     

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

     

       917
       917
       +
                                                                       const recordId = `record-more-${{Date.now()}}-${{idx}}`;

     

       918
       918
       +
                                                                       moreHtml += `

     

       919
       919
       +
                                                                           <div class="record">

     

       920
       920
       +
                                                                               <div class="record-header">

     

       921
       921
       +
                                                                                   <span class="record-label">record</span>

     

       922
       922
       +
                                                                                   <button class="copy-btn" data-content="${{encodeURIComponent(json)}}" data-record-id="${{recordId}}">copy</button>

     

       923
       923
       +
                                                                               </div>

     

       924
       924
       +
                                                                               <div class="record-content">

     

       925
       925
       +
                                                                                   <pre>${{json}}</pre>

     

       926
       926
       +
                                                                               </div>

     

       927
       927
       +
                                                                           </div>

     

       928
       928
       +
                                                                       `;

     

       828
       929
        
                                                                   }});

     

       829
       930
        
       

     

       830
       931
        
                                                                   loadMoreBtn.remove();

+15

.tangled/workflows/clippy.yaml

···

       1
       1
       +
       engine: nixery

     

       2
       2
       +
       

     

       3
       3
       +
       when:

     

       4
       4
       +
         - event: ["push", "pull_request"]

     

       5
       5
       +
       

     

       6
       6
       +
       dependencies:

     

       7
       7
       +
         nixpkgs:

     

       8
       8
       +
           - rustc

     

       9
       9
       +
           - cargo

     

       10
       10
       +
           - clippy

     

       11
       11
       +
       

     

       12
       12
       +
       steps:

     

       13
       13
       +
         - name: run clippy

     

       14
       14
       +
           command: |

     

       15
       15
       +
             cargo clippy -- -D warnings

.tangled/workflows/clippy.yaml .tangled/workflows/check.yaml

···

       7
       7
        
         nixpkgs:

     

       8
       8
        
           - rustc

     

       9
       9
        
           - cargo

     

       10
       10
       +
           - rustfmt

     

       10
       11
        
           - clippy

     

       11
       12
        
       

     

       12
       13
        
       steps:

     

       14
       14
       +
         - name: check formatting

     

       15
       15
       +
           command: |

     

       16
       16
       +
             cargo fmt --check

     

       17
       17
       +
       

     

       13
       18
        
         - name: run clippy

     

       14
       19
        
           command: |

     

       15
       20
        
             cargo clippy -- -D warnings