Skip to content

Commit

Permalink
リレーTLが有効であるかを表示する (fix #1)
Browse files Browse the repository at this point in the history
  • Loading branch information
m-hayabusa committed Sep 8, 2024
1 parent 8953944 commit b0fd637
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 30 deletions.
5 changes: 3 additions & 2 deletions backend/src/GenerateServerList.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,9 @@ async function getNodeInfo(host: string): Promise<ApiResponse.Server> {
status: {
closed: info.disableRegistration,
relayTimeline:
info.vmimiRelayTimelineImplemented &&
info.disableVmimiRelayTimeline === false,
nodeinfo.metadata.vmimiRelayTimelineImplemented &&
nodeinfo.metadata.disableVmimiRelayTimeline ===
false,
},
});
}
Expand Down
78 changes: 71 additions & 7 deletions page/src/components/ServerListItem.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,61 @@
}
}
.info {
overflow: hidden;
line-height: 1.5em;
overflow-wrap: anywhere;
.title {
line-height: 2em;
border-bottom: whitesmoke dotted 0.25em;
display: flex;

.name {
flex-grow: 1;
}
.icons {
position: relative;

display: inline-flex;
flex-wrap: nowrap;
gap: 0.5em;
margin-inline: 0.5em;
.icon {
.fa-solid {
opacity: 0.8;
}
.label {
opacity: 0.8;
margin-left: 0.25em;
}
&:hover .tooltip {
visibility: visible;
}
.tooltip {
opacity: 0.9;
visibility: hidden;
position: absolute;
z-index: 1;
width: max-content;
max-width: 15em;

bottom: 80%;
left: 100%;
translate: -100% 0;

color: #93a1a1;
background-color: #002b36;
text-align: center;
border-radius: 1em;
margin: 0.5em;
margin-top: -0.25em;
padding-block: 0.25em;
padding-inline: 0.5em;
}
}
}
}
hr {
color: currentColor;
border: none;
border-top: dotted 0.25em;
margin-bottom: 0.5em;
}
.desc {
Expand All @@ -41,7 +90,14 @@
}
.info {
width: 100%;
padding: 0.5em 1em;
margin-block: 0.25em;
.title,
.desc {
margin-inline: 1em;
}
&.noimage .title {
margin-left: 1.5em;
}
}
}
}
Expand All @@ -52,15 +108,23 @@
border-radius: 1.1rem 2.1rem 0.5rem 2rem;
.thumbnail {
img {
border-radius: 1rem 2rem 0 0;
object-fit: contain;
border-radius: 1em 2em 0 0;
object-fit: cover;
max-height: 10em;
}
}
.info {
padding: 0 1em 1em 1em;
margin-bottom: 0.5em;
margin-inline: 0.5em;
.title {
margin-left: 0.5em;
}
.desc {
margin-inline: 0.5em;
}
}
.info.noimage {
padding-top: 0.5em;
margin-top: 0.5em;
}
}
}
Expand Down
67 changes: 46 additions & 21 deletions page/src/components/ServerListItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,28 @@ import { ApiResponse } from "common";
import "./ServerListItem.scss";

export default function ServerListItem(props: ApiResponse.Server) {
const icon = (() => {
if (props.Status.error) return "fa-shop-slash";
if (props.Status.closed) return "fa-lock";
})();
const icons: { name: string; label: string; description: string }[] = [];

if (props.Status.error)
icons.push({
name: "fa-shop-slash",
label: "エラー",
description: "情報の取得に失敗しました",
});
if (props.Status.closed)
icons.push({
name: "fa-lock",
label: "招待制",
description: "登録には、招待コードが必要です",
});
if (props.Status.relayTimeline)
icons.push({
name: "fa-circle-nodes",
label: "リレーTL",
description: "参加サーバーの投稿を見られるタイムラインがある",
});

const bgColor = props.Color ?? props.Status.error ? "#002b36" : "#eee8d5";
const bgColor = props.Color ?? (props.Status.error ? "#002b36" : "#eee8d5");
const fgColor = (() => {
if (props.Status.error) return "#586e75";
else return fontColorContrast(bgColor) + "DD";
Expand All @@ -36,23 +52,32 @@ export default function ServerListItem(props: ApiResponse.Server) {
</div>
)}
<div className={"info" + (props.Image ? "" : " noimage")}>
<div
className="title"
style={{ borderBottomColor: fgColor }}
>
{props.Title ?? props.Url}{" "}
{icon && (
<i
className={`fa-solid ${icon}`}
aria-hidden="true"
></i>
)}
<div className="title">
<span className="name">
{props.Title ?? props.Url}
</span>
<span className="icons">
{icons.map(icon => (
<span className="icon">
<i
className={`fa-solid ${icon.name}`}
/>
<span className="label">
{icon.label}
</span>
<span className="tooltip">
{icon.description}
</span>
</span>
))}
</span>
</div>
<span className="desc">
{props.Status.error &&
"(正しく取得できませんでした)"}
{props.Description}
</span>
{props.Description && (
<>
<hr />
<div className="desc">{props.Description}</div>
</>
)}
</div>
</div>
</a>
Expand Down
4 changes: 4 additions & 0 deletions page/src/store/ServerListStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ class ServerListStore {
if (!b.Title) return -1;
if (a.Status.closed && !b.Status.closed) return 1;
if (!a.Status.closed && b.Status.closed) return -1;
if (!a.Status.relayTimeline && b.Status.relayTimeline)
return 1;
if (a.Status.relayTimeline && !b.Status.relayTimeline)
return -1;
return Math.floor(Math.random() * 3) - 1;
})
.map(e => {
Expand Down

0 comments on commit b0fd637

Please sign in to comment.