this repo has no description
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
+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
+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
)}