this repo has no description
💅 Aesthetic changes
+107
-94
-1
src/app.css
-1
src/app.css
+18
-13
src/components/status.css
+18
-13
src/components/status.css
···
455
455
.status .extra-meta {
456
456
padding-top: 8px;
457
457
color: var(--text-insignificant-color);
458
+
font-size: 90%;
458
459
}
459
460
.status .extra-meta * {
460
461
vertical-align: middle;
···
472
473
}
473
474
.status.large .extra-meta {
474
475
padding-top: 0;
475
-
margin-left: calc(-50px - 8px);
476
+
margin-left: calc(-50px - 16px);
476
477
}
477
478
478
479
/* ACTIONS */
···
480
481
.status .actions {
481
482
display: flex;
482
483
gap: 8px;
483
-
justify-content: space-between;
484
484
}
485
485
.status.large .actions {
486
-
padding-top: 8px;
486
+
padding-top: 4px;
487
487
padding-bottom: 16px;
488
488
margin-left: calc(-50px - 16px);
489
489
color: var(--text-insignificant-color);
490
+
border-top: 1px solid var(--outline-color);
491
+
margin-top: 8px;
490
492
}
491
-
.status .actions > button {
493
+
.status .action.has-count {
494
+
flex: 1;
495
+
}
496
+
.status .action > button {
492
497
min-height: 40px;
493
498
min-width: 40px;
494
499
padding: 0 8px;
495
500
font-variant-numeric: tabular-nums;
496
501
}
497
-
.status .actions > button.plain {
502
+
.status .action > button.plain {
498
503
color: inherit;
499
504
border: 1.5px solid transparent;
500
505
}
501
-
.status .actions > button.plain:hover {
506
+
.status .action > button.plain:hover {
502
507
color: var(--link-color);
503
508
background-color: var(--button-plain-bg-hover-color);
504
509
}
505
-
.status .actions > button.plain.reblog-button:hover {
510
+
.status .action > button.plain.reblog-button:hover {
506
511
color: var(--reblog-color);
507
512
}
508
-
.status .actions > button.plain.reblog-button.checked {
513
+
.status .action > button.plain.reblog-button.checked {
509
514
color: var(--reblog-color);
510
515
border-color: var(--reblog-color);
511
516
}
···
524
529
opacity: 0;
525
530
}
526
531
}
527
-
.status .actions > button.plain.reblog-button.checked .icon {
532
+
.status .action > button.plain.reblog-button.checked .icon {
528
533
animation: reblogged 1s ease-in-out;
529
534
}
530
-
.status .actions > button.plain.favourite-button:hover {
535
+
.status .action > button.plain.favourite-button:hover {
531
536
color: var(--favourite-color);
532
537
}
533
-
.status .actions > button.plain.favourite-button.checked {
538
+
.status .action > button.plain.favourite-button.checked {
534
539
color: var(--favourite-color);
535
540
border-color: var(--favourite-color);
536
541
}
···
552
557
opacity: 0;
553
558
}
554
559
}
555
-
.status .actions > button.plain.favourite-button.checked .icon {
560
+
.status .action > button.plain.favourite-button.checked .icon {
556
561
transform-origin: bottom center;
557
562
animation: hearted 1s ease-in-out;
558
563
}
559
-
.status .actions > button.plain.bookmark-button.checked {
564
+
.status .action > button.plain.bookmark-button.checked {
560
565
color: var(--link-color);
561
566
border-color: var(--link-color);
562
567
}
+89
-80
src/components/status.jsx
+89
-80
src/components/status.jsx
···
429
429
)}
430
430
</div>
431
431
<div class="actions">
432
-
<StatusButton
433
-
title="Reply"
434
-
alt="Comments"
435
-
class="reply-button"
436
-
icon="comment"
437
-
count={repliesCount}
438
-
onClick={() => {
439
-
states.showCompose = {
440
-
replyToStatus: status,
441
-
};
442
-
}}
443
-
/>
432
+
<div class="action has-count">
433
+
<StatusButton
434
+
title="Reply"
435
+
alt="Comments"
436
+
class="reply-button"
437
+
icon="comment"
438
+
count={repliesCount}
439
+
onClick={() => {
440
+
states.showCompose = {
441
+
replyToStatus: status,
442
+
};
443
+
}}
444
+
/>
445
+
</div>
444
446
{/* TODO: if visibility = private, only can reblog own statuses */}
445
447
{visibility !== 'direct' && (
448
+
<div class="action has-count">
449
+
<StatusButton
450
+
checked={reblogged}
451
+
title={['Boost', 'Unboost']}
452
+
alt={['Boost', 'Boosted']}
453
+
class="reblog-button"
454
+
icon="rocket"
455
+
count={reblogsCount}
456
+
onClick={async () => {
457
+
try {
458
+
// Optimistic
459
+
states.statuses.set(id, {
460
+
...status,
461
+
reblogged: !reblogged,
462
+
reblogsCount: reblogsCount + (reblogged ? -1 : 1),
463
+
});
464
+
if (reblogged) {
465
+
const newStatus = await masto.statuses.unreblog(id);
466
+
states.statuses.set(newStatus.id, newStatus);
467
+
} else {
468
+
const newStatus = await masto.statuses.reblog(id);
469
+
states.statuses.set(newStatus.id, newStatus);
470
+
states.statuses.set(
471
+
newStatus.reblog.id,
472
+
newStatus.reblog,
473
+
);
474
+
}
475
+
} catch (e) {
476
+
console.error(e);
477
+
}
478
+
}}
479
+
/>
480
+
</div>
481
+
)}
482
+
<div class="action has-count">
446
483
<StatusButton
447
-
checked={reblogged}
448
-
title={['Boost', 'Unboost']}
449
-
alt={['Boost', 'Boosted']}
450
-
class="reblog-button"
451
-
icon="rocket"
452
-
count={reblogsCount}
484
+
checked={favourited}
485
+
title={['Favourite', 'Unfavourite']}
486
+
alt={['Favourite', 'Favourited']}
487
+
class="favourite-button"
488
+
icon="heart"
489
+
count={favouritesCount}
453
490
onClick={async () => {
454
491
try {
455
492
// Optimistic
456
-
states.statuses.set(id, {
493
+
states.statuses.set(statusID, {
457
494
...status,
458
-
reblogged: !reblogged,
459
-
reblogsCount: reblogsCount + (reblogged ? -1 : 1),
495
+
favourited: !favourited,
496
+
favouritesCount:
497
+
favouritesCount + (favourited ? -1 : 1),
460
498
});
461
-
if (reblogged) {
462
-
const newStatus = await masto.statuses.unreblog(id);
499
+
if (favourited) {
500
+
const newStatus = await masto.statuses.unfavourite(id);
463
501
states.statuses.set(newStatus.id, newStatus);
464
502
} else {
465
-
const newStatus = await masto.statuses.reblog(id);
503
+
const newStatus = await masto.statuses.favourite(id);
466
504
states.statuses.set(newStatus.id, newStatus);
467
-
states.statuses.set(
468
-
newStatus.reblog.id,
469
-
newStatus.reblog,
470
-
);
471
505
}
472
506
} catch (e) {
473
507
console.error(e);
474
508
}
475
509
}}
476
510
/>
477
-
)}
478
-
<StatusButton
479
-
checked={favourited}
480
-
title={['Favourite', 'Unfavourite']}
481
-
alt={['Favourite', 'Favourited']}
482
-
class="favourite-button"
483
-
icon="heart"
484
-
count={favouritesCount}
485
-
onClick={async () => {
486
-
try {
487
-
// Optimistic
488
-
states.statuses.set(statusID, {
489
-
...status,
490
-
favourited: !favourited,
491
-
favouritesCount: favouritesCount + (favourited ? -1 : 1),
492
-
});
493
-
if (favourited) {
494
-
const newStatus = await masto.statuses.unfavourite(id);
495
-
states.statuses.set(newStatus.id, newStatus);
496
-
} else {
497
-
const newStatus = await masto.statuses.favourite(id);
498
-
states.statuses.set(newStatus.id, newStatus);
499
-
}
500
-
} catch (e) {
501
-
console.error(e);
502
-
}
503
-
}}
504
-
/>
505
-
<StatusButton
506
-
checked={bookmarked}
507
-
title={['Bookmark', 'Unbookmark']}
508
-
alt={['Bookmark', 'Bookmarked']}
509
-
class="bookmark-button"
510
-
icon="bookmark"
511
-
onClick={async () => {
512
-
try {
513
-
// Optimistic
514
-
states.statuses.set(statusID, {
515
-
...status,
516
-
bookmarked: !bookmarked,
517
-
});
518
-
if (bookmarked) {
519
-
const newStatus = await masto.statuses.unbookmark(id);
520
-
states.statuses.set(newStatus.id, newStatus);
521
-
} else {
522
-
const newStatus = await masto.statuses.bookmark(id);
523
-
states.statuses.set(newStatus.id, newStatus);
511
+
</div>
512
+
<div class="action">
513
+
<StatusButton
514
+
checked={bookmarked}
515
+
title={['Bookmark', 'Unbookmark']}
516
+
alt={['Bookmark', 'Bookmarked']}
517
+
class="bookmark-button"
518
+
icon="bookmark"
519
+
onClick={async () => {
520
+
try {
521
+
// Optimistic
522
+
states.statuses.set(statusID, {
523
+
...status,
524
+
bookmarked: !bookmarked,
525
+
});
526
+
if (bookmarked) {
527
+
const newStatus = await masto.statuses.unbookmark(id);
528
+
states.statuses.set(newStatus.id, newStatus);
529
+
} else {
530
+
const newStatus = await masto.statuses.bookmark(id);
531
+
states.statuses.set(newStatus.id, newStatus);
532
+
}
533
+
} catch (e) {
534
+
console.error(e);
524
535
}
525
-
} catch (e) {
526
-
console.error(e);
527
-
}
528
-
}}
529
-
/>
536
+
}}
537
+
/>
538
+
</div>
530
539
{isSelf && (
531
540
<span class="menu-container">
532
541
<button type="button" title="More" class="plain more-button">