Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-24 08:48:47 +01:00
Code Issues Projects Releases Packages Wiki Activity

💅 Aesthetic changes

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-19 13:38:16 +08:00
parent 1826b01103
commit 8c97dcc5bc
3 changed files with 107 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app.css
View file

@ -197,7 +197,6 @@ a.mention span {
} }
.timeline.contextual > li .replies { .timeline.contextual > li .replies {
margin-top: -16px; margin-top: -16px;
font-size: 90%;
} }
.timeline.contextual > li .replies :is(ul, li) { .timeline.contextual > li .replies :is(ul, li) {
margin: 0; margin: 0;

31
src/components/status.css
View file

@ -455,6 +455,7 @@ a.card:hover {
.status .extra-meta { .status .extra-meta {
padding-top: 8px; padding-top: 8px;
color: var(--text-insignificant-color); color: var(--text-insignificant-color);
font-size: 90%;
} }
.status .extra-meta * { .status .extra-meta * {
vertical-align: middle; vertical-align: middle;
@ -472,7 +473,7 @@ a.card:hover {
} }
.status.large .extra-meta { .status.large .extra-meta {
padding-top: 0; padding-top: 0;
margin-left: calc(-50px - 8px); margin-left: calc(-50px - 16px);
} }
/* ACTIONS */ /* ACTIONS */
@ -480,32 +481,36 @@ a.card:hover {
.status .actions { .status .actions {
display: flex; display: flex;
gap: 8px; gap: 8px;
justify-content: space-between;
} }
.status.large .actions { .status.large .actions {
padding-top: 8px; padding-top: 4px;
padding-bottom: 16px; padding-bottom: 16px;
margin-left: calc(-50px - 16px); margin-left: calc(-50px - 16px);
color: var(--text-insignificant-color); color: var(--text-insignificant-color);
border-top: 1px solid var(--outline-color);
margin-top: 8px;
} }
.status .actions > button { .status .action.has-count {
flex: 1;
}
.status .action > button {
min-height: 40px; min-height: 40px;
min-width: 40px; min-width: 40px;
padding: 0 8px; padding: 0 8px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.status .actions > button.plain { .status .action > button.plain {
color: inherit; color: inherit;
border: 1.5px solid transparent; border: 1.5px solid transparent;
} }
.status .actions > button.plain:hover { .status .action > button.plain:hover {
color: var(--link-color); color: var(--link-color);
background-color: var(--button-plain-bg-hover-color); background-color: var(--button-plain-bg-hover-color);
} }
.status .actions > button.plain.reblog-button:hover { .status .action > button.plain.reblog-button:hover {
color: var(--reblog-color); color: var(--reblog-color);
} }
.status .actions > button.plain.reblog-button.checked { .status .action > button.plain.reblog-button.checked {
color: var(--reblog-color); color: var(--reblog-color);
border-color: var(--reblog-color); border-color: var(--reblog-color);
} }
@ -524,13 +529,13 @@ a.card:hover {
opacity: 0; opacity: 0;
} }
} }
.status .actions > button.plain.reblog-button.checked .icon { .status .action > button.plain.reblog-button.checked .icon {
animation: reblogged 1s ease-in-out; animation: reblogged 1s ease-in-out;
} }
.status .actions > button.plain.favourite-button:hover { .status .action > button.plain.favourite-button:hover {
color: var(--favourite-color); color: var(--favourite-color);
} }
.status .actions > button.plain.favourite-button.checked { .status .action > button.plain.favourite-button.checked {
color: var(--favourite-color); color: var(--favourite-color);
border-color: var(--favourite-color); border-color: var(--favourite-color);
} }
@ -552,11 +557,11 @@ a.card:hover {
opacity: 0; opacity: 0;
} }
} }
.status .actions > button.plain.favourite-button.checked .icon { .status .action > button.plain.favourite-button.checked .icon {
transform-origin: bottom center; transform-origin: bottom center;
animation: hearted 1s ease-in-out; animation: hearted 1s ease-in-out;
} }
.status .actions > button.plain.bookmark-button.checked { .status .action > button.plain.bookmark-button.checked {
color: var(--link-color); color: var(--link-color);
border-color: var(--link-color); border-color: var(--link-color);
} }

11
src/components/status.jsx
View file

@ -429,6 +429,7 @@ function Status({
)} )}
</div> </div>
<div class="actions"> <div class="actions">
<div class="action has-count">
<StatusButton <StatusButton
title="Reply" title="Reply"
alt="Comments" alt="Comments"
@ -441,8 +442,10 @@ function Status({
}; };
}} }}
/> />
</div>
{/* TODO: if visibility = private, only can reblog own statuses */} {/* TODO: if visibility = private, only can reblog own statuses */}
{visibility !== 'direct' && ( {visibility !== 'direct' && (
<div class="action has-count">
<StatusButton <StatusButton
checked={reblogged} checked={reblogged}
title={['Boost', 'Unboost']} title={['Boost', 'Unboost']}
@ -474,7 +477,9 @@ function Status({
} }
}} }}
/> />
</div>
)} )}
<div class="action has-count">
<StatusButton <StatusButton
checked={favourited} checked={favourited}
title={['Favourite', 'Unfavourite']} title={['Favourite', 'Unfavourite']}
@ -488,7 +493,8 @@ function Status({
states.statuses.set(statusID, { states.statuses.set(statusID, {
...status, ...status,
favourited: !favourited, favourited: !favourited,
favouritesCount: favouritesCount + (favourited ? -1 : 1), favouritesCount:
favouritesCount + (favourited ? -1 : 1),
}); });
if (favourited) { if (favourited) {
const newStatus = await masto.statuses.unfavourite(id); const newStatus = await masto.statuses.unfavourite(id);
@ -502,6 +508,8 @@ function Status({
} }
}} }}
/> />
</div>
<div class="action">
<StatusButton <StatusButton
checked={bookmarked} checked={bookmarked}
title={['Bookmark', 'Unbookmark']} title={['Bookmark', 'Unbookmark']}
@ -527,6 +535,7 @@ function Status({
} }
}} }}
/> />
</div>
{isSelf && ( {isSelf && (
<span class="menu-container"> <span class="menu-container">
<button type="button" title="More" class="plain more-button"> <button type="button" title="More" class="plain more-button">