this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Realign some code and UI for account info/sheet

I know, the code is still messy

+99 -25
+92 -22
src/components/account-info.css
··· 1 1 .account-container { 2 - display: flex; 3 - flex-direction: column; 4 - overflow: hidden; 2 + /* display: flex; */ 3 + /* flex-direction: column; */ 4 + /* overflow: hidden; */ 5 + overflow-y: auto; 5 6 max-width: 100%; 7 + --banner-overlap: 44px; 6 8 } 7 9 8 10 .account-container.skeleton { ··· 51 53 52 54 .account-container .header-banner { 53 55 /* pointer-events: none; */ 56 + vertical-align: top; 54 57 aspect-ratio: 6 / 1; 55 58 width: 100%; 56 59 height: auto; ··· 75 78 hsla(0, 0%, 0%, 0.013) 95.3%, 76 79 hsla(0, 0%, 0%, 0) 100% 77 80 ); 78 - margin-bottom: -44px; 81 + margin-bottom: calc(-1 * var(--banner-overlap)); 79 82 user-select: none; 80 83 -webkit-user-drag: none; 81 84 opacity: 0; ··· 116 119 } 117 120 .account-container .header-banner:active { 118 121 mask-image: none; 119 - } 120 - .account-container .header-banner:active + header .avatar + * { 121 - transition: opacity 0.3s ease-in-out; 122 - opacity: 0 !important; 123 - } 124 - .account-container .header-banner:active + header .avatar { 125 - transition: filter 0.3s ease-in-out; 126 - filter: none !important; 127 - } 128 - .account-container .header-banner:active + header .avatar img { 129 - transition: border-radius 0.3s ease-in-out; 130 - border-radius: 8px; 122 + 123 + & + header { 124 + background-image: none; 125 + } 126 + 127 + & + header .avatar + * { 128 + transition: opacity 0.3s ease-in-out; 129 + opacity: 0 !important; 130 + } 131 + 132 + &, 133 + & + header .avatar { 134 + transition: filter 0.3s ease-in-out; 135 + filter: none !important; 136 + } 137 + 138 + & + header .avatar img { 139 + transition: border-radius 0.3s ease-in-out; 140 + border-radius: 8px; 141 + } 131 142 } 132 143 133 144 @media (min-height: 480px) { ··· 165 176 animation: fade-in 0.3s both ease-in-out 0.2s; 166 177 } 167 178 179 + .account-container .account-block .account-block-acct { 180 + opacity: 0.7; 181 + } 182 + 168 183 .private-note-tag { 169 184 z-index: 1; 170 185 appearance: none; ··· 290 305 color: inherit; 291 306 } 292 307 308 + .account-container footer { 309 + padding: 0 16px 16px; 310 + } 293 311 .account-container .actions { 294 - margin-block: 8px; 312 + /* margin-block: 8px; */ 295 313 display: flex; 296 314 gap: 8px; 297 315 justify-content: space-between; ··· 396 414 animation: none; 397 415 } 398 416 .timeline-start .account-container main { 399 - padding: 1px 16px 1px; 417 + padding: 1px 16px 16px; 400 418 } 401 419 .timeline-start .account-container main > * { 402 420 animation: none; 403 421 } 404 - .timeline-start .account-container .account-block .account-block-acct { 405 - opacity: 0.5; 422 + 423 + .faux-header-bg { 424 + display: none; 425 + } 426 + 427 + .sheet .account-container { 428 + border-radius: 16px 16px 0 0; 429 + overflow-x: hidden; 430 + max-height: 75vh; 431 + overscroll-behavior: contain; 432 + 433 + header { 434 + padding-bottom: 16px; 435 + position: sticky; 436 + top: 0; 437 + z-index: 2; 438 + /* --bg-color: red; */ 439 + background-image: linear-gradient( 440 + to bottom, 441 + transparent 30%, 442 + var(--bg-color) var(--banner-overlap), 443 + var(--bg-color) calc(100% - 8px), 444 + transparent 445 + ); 446 + } 447 + 448 + .faux-header-bg { 449 + display: block; 450 + height: var(--banner-overlap); 451 + position: sticky; 452 + top: 0; 453 + z-index: 1; 454 + background-color: var(--bg-color); 455 + margin-top: calc(-1 * var(--banner-overlap)); 456 + } 457 + 458 + main { 459 + margin-top: -8px; 460 + padding-top: 1px; 461 + } 462 + 463 + footer { 464 + min-height: calc(40px + 16px); 465 + animation: slide-up 0.3s ease-out 0.3s both; 466 + position: sticky; 467 + bottom: 0; 468 + background-color: var(--bg-faded-blur-color); 469 + backdrop-filter: blur(16px) saturate(3); 470 + padding: 8px 16px; 471 + border-top: var(--hairline-width) solid var(--outline-color); 472 + padding-bottom: max(8px, env(safe-area-inset-bottom)); 473 + box-shadow: 0 -8px 16px -8px var(--drop-shadow-color); 474 + } 406 475 } 407 476 408 477 @keyframes swoosh-bg-image { ··· 609 678 610 679 @media (min-width: 40em) { 611 680 .timeline-start .account-container { 681 + --banner-overlap: 77px; 612 682 --item-radius: 16px; 613 683 border: 1px solid var(--divider-color); 614 684 margin: 16px 0; ··· 625 695 var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) 626 696 var(--shadow-spread) var(--header-color-2, var(--drop-shadow-color)); 627 697 } 628 - .timeline-start .account-container .header-banner { 698 + /* .timeline-start .account-container .header-banner { 629 699 margin-bottom: -77px; 630 - } 700 + } */ 631 701 .timeline-start .account-container header .account-block { 632 702 font-size: 175%; 633 703 /* margin-bottom: -8px; */
+7 -3
src/components/account-info.jsx
··· 314 314 315 315 return ( 316 316 <div 317 + tabIndex="-1" 317 318 class={`account-container ${uiState === 'loading' ? 'skeleton' : ''}`} 318 319 style={{ 319 320 '--header-color-1': headerCornerColors[0], ··· 398 399 /> 399 400 </div> 400 401 )} 401 - {header && !/missing\.png$/.test(header) && ( 402 + {!!header && !/missing\.png$/.test(header) && ( 402 403 <img 403 404 src={header} 404 405 alt="" ··· 505 506 internal={!standalone} 506 507 /> 507 508 </header> 508 - <main tabIndex="-1"> 509 + <div class="faux-header-bg" aria-hidden="true" /> 510 + <main> 509 511 {!!memorial && <span class="tag">In Memoriam</span>} 510 512 {!!bot && ( 511 513 <span class="tag"> ··· 748 750 </div> 749 751 </div> 750 752 </div> 753 + </main> 754 + <footer> 751 755 <RelatedActions 752 756 info={info} 753 757 instance={instance} 754 758 authenticated={authenticated} 755 759 onRelationshipChange={onRelationshipChange} 756 760 /> 757 - </main> 761 + </footer> 758 762 </> 759 763 ) 760 764 )}