From 9168e362ad10246b7297af52e337403237204c84 Mon Sep 17 00:00:00 2001
From: Xeltica <xeltica@gmail.com>
Date: Thu, 9 Jun 2022 12:41:56 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=A9=E3=83=B3=E3=82=AD=E3=83=B3=E3=82=B0?=
 =?UTF-8?q?=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/components/Ranking.tsx | 51 ++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/frontend/components/Ranking.tsx b/src/frontend/components/Ranking.tsx
index 17616fc..79bc5ab 100644
--- a/src/frontend/components/Ranking.tsx
+++ b/src/frontend/components/Ranking.tsx
@@ -50,26 +50,37 @@ export const Ranking: React.VFC<RankingProps> = ({limit}) => {
 				{response.isCalculating ? (
 					<p>{t('isCalculating')}</p>
 				) : (
-					<table className="table mt-1 fluid">
-						<thead>
-							<tr>
-								<th>{t('_missHai.order')}</th>
-								<th>{t('name')}</th>
-								<th>{t('_missHai.rating')}</th>
-							</tr>
-						</thead>
-						<tbody>
-							{response.ranking.map((r, i) => (
-								<tr key={i}>
-									<td>{i + 1}</td>
-									<td>
-										{r.username}@{r.host}
-									</td>
-									<td>{r.rating}</td>
-								</tr>
-							))}
-						</tbody>
-					</table>
+					<div className="menu large">
+						{response.ranking.map((r, i) => (
+							<a href={`https://${r.host}/@${r.username}`} target="_blank" rel="noopener noreferrer nofollow" className="item flex" key={i}>
+								<div className="text-bold pr-2">{i + 1}</div>
+								<div>
+									{r.username}@{r.host}<br/>
+									<span className="text-dimmed text-75">{t('_missHai.rating')}: {r.rating}</span>
+								</div>
+							</a>
+						))}
+					</div>
+					// <table className="table mt-1 fluid">
+					// 	<thead>
+					// 		<tr>
+					// 			<th>{t('_missHai.order')}</th>
+					// 			<th>{t('name')}</th>
+					// 			<th>{t('_missHai.rating')}</th>
+					// 		</tr>
+					// 	</thead>
+					// 	<tbody>
+					// 		{response.ranking.map((r, i) => (
+					// 			<tr key={i}>
+					// 				<td>{i + 1}</td>
+					// 				<td>
+					// 					{r.username}@{r.host}
+					// 				</td>
+					// 				<td>{r.rating}</td>
+					// 			</tr>
+					// 		))}
+					// 	</tbody>
+					// </table>
 				)}
 			</>
 		) : null