mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-10-30 08:32:26 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixie uppie

Browse source
This commit is contained in:
tobi 2025-04-18 13:42:20 +02:00
commit 3a175c5eb3
3 changed files with 102 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/assets/themes/midnight-trip.css
View file

@ -129,16 +129,6 @@ html, body {
background: black; background: black;
} }
/* Status info dropdown button */
.status .status-info .status-stats details.stats-more-info > summary {
color: var(--button-fg);
background: var(--button-bg);
}
.status .status-info .status-stats details.stats-more-info > summary:hover {
outline: 0;
background: var(--button-hover-bg);
}
/* Status info dropdown content */ /* Status info dropdown content */
.status.expanded .status-info .status-stats .stats-more-info-content, .status.expanded .status-info .status-stats .stats-more-info-content,
.status .status-info .status-stats .stats-more-info-content { .status .status-info .status-stats .stats-more-info-content {

13
web/source/css/thread.css
View file

@ -79,9 +79,18 @@
&.indent-3, &.indent-3,
&.indent-4, &.indent-4,
&.indent-5 { &.indent-5 {
.status-link { /*
margin-left: -0.5rem; Show a stripey line to the left of
indented statuses for better legibility.
*/
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
border-left: 0.15rem dashed $border-accent; border-left: 0.15rem dashed $border-accent;
margin-left: -0.5rem;
} }
} }

103
web/source/settings/components/status.tsx
View file

@ -17,7 +17,7 @@
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
import React, { useState } from "react"; import React, { useMemo, useState } from "react";
import { useVerifyCredentialsQuery } from "../lib/query/login"; import { useVerifyCredentialsQuery } from "../lib/query/login";
import { MediaAttachment, Status as StatusType } from "../lib/types/status"; import { MediaAttachment, Status as StatusType } from "../lib/types/status";
import sanitize from "sanitize-html"; import sanitize from "sanitize-html";
@ -68,15 +68,6 @@ export function Status({ status }: { status: StatusType }) {
<StatusHeader status={status} /> <StatusHeader status={status} />
<StatusBody status={status} /> <StatusBody status={status} />
<StatusFooter status={status} /> <StatusFooter status={status} />
<a
href={status.url}
target="_blank"
className="status-link"
data-nosnippet
title="Open this status (opens in new tab)"
>
Open this status (opens in new tab)
</a>
</article> </article>
); );
} }
@ -266,25 +257,103 @@ function StatusMediaEntry({ media }: { media: MediaAttachment }) {
); );
} }
function useVisibilityIcon(visibility: string): string {
return useMemo(() => {
switch (true) {
case visibility === "direct":
return "fa-envelope";
case visibility === "followers_only":
return "fa-lock";
case visibility === "unlisted":
return "fa-unlock";
case visibility === "public":
return "fa-globe";
default:
return "fa-question";
}
}, [visibility]);
}
function StatusFooter({ status }: { status: StatusType }) { function StatusFooter({ status }: { status: StatusType }) {
const visibilityIcon = useVisibilityIcon(status.visibility);
return ( return (
<aside className="status-info"> <aside className="status-info">
<dl className="status-stats"> <div className="status-stats">
<div className="stats-grouping"> <dl className="stats-grouping text-cutoff">
<div className="stats-item published-at text-cutoff"> <div className="stats-item published-at text-cutoff">
<dt className="sr-only">Published</dt> <dt className="sr-only">Published</dt>
<dd> <dd className="text-cutoff">
<time dateTime={status.created_at}> <a
{ new Date(status.created_at).toLocaleString() } href={status.url}
className="u-url text-cutoff"
>
<time
className="dt-published text-cutoff"
dateTime={status.created_at}
>
{new Date(status.created_at).toLocaleString(undefined, {
year: 'numeric',
month: 'short',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: false
})}
</time> </time>
</a>
</dd>
</div>
<div className="stats-grouping">
<div className="stats-item visibility-level" title={status.visibility}>
<dt className="sr-only">Visibility</dt>
<dd>
<i className={`fa ${visibilityIcon}`} aria-hidden="true"></i>
<span className="sr-only">{status.visibility}</span>
</dd> </dd>
</div> </div>
</div> </div>
<div className="stats-item language"> </dl>
<dt className="sr-only">Language</dt> <details className="stats-more-info">
<summary title="More info">
<i className="fa fa-fw fa-info" aria-hidden="true"></i>
<span className="sr-only">More info</span>
<i className="fa fa-fw fa-chevron-right show" aria-hidden="true"></i>
<i className="fa fa-fw fa-chevron-down hide" aria-hidden="true"></i>
</summary>
<dl className="stats-more-info-content">
<div className="stats-grouping">
<div className="stats-item" title="Language">
<dt>
<span className="sr-only">Language</span>
<i className="fa fa-language" aria-hidden="true"></i>
</dt>
<dd>{status.language}</dd> <dd>{status.language}</dd>
</div> </div>
<div className="stats-item" title="Replies">
<dt>
<span className="sr-only">Replies</span>
<i className="fa fa-reply-all" aria-hidden="true"></i>
</dt>
<dd>{status.replies_count}</dd>
</div>
<div className="stats-item" title="Faves">
<dt>
<span className="sr-only">Favourites</span>
<i className="fa fa-star" aria-hidden="true"></i>
</dt>
<dd>{status.favourites_count}</dd>
</div>
<div className="stats-item" title="Boosts">
<dt>
<span className="sr-only">Reblogs</span>
<i className="fa fa-retweet" aria-hidden="true"></i>
</dt>
<dd>{status.reblogs_count}</dd>
</div>
</div>
</dl> </dl>
</details>
</div>
</aside> </aside>
); );
} }