aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/ParksTable.astro
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/ParksTable.astro')
-rw-r--r--src/components/ParksTable.astro43
1 files changed, 25 insertions, 18 deletions
diff --git a/src/components/ParksTable.astro b/src/components/ParksTable.astro
index 8d7f648..8121201 100644
--- a/src/components/ParksTable.astro
+++ b/src/components/ParksTable.astro
@@ -40,6 +40,9 @@ function facilityBadges(p: Park): Badge[] {
const label = ball.includes("一部") ? "ボール遊び一部可" : "ボール遊び可";
badges.push({ kind: "ball", label, title: `ボール遊び: ${ball}` });
}
+ if (p["南西部指定管理"]) {
+ badges.push({ kind: "cm", label: "指定管理", title: "南西部地域の指定管理公園" });
+ }
return badges;
}
@@ -51,27 +54,28 @@ function facTokens(p: Park): string {
if (p["遊具"]) tokens.push("toy");
const ball = p["ボール遊び"];
if (ball && ball !== "禁止") tokens.push("ball");
+ if (p["南西部指定管理"]) tokens.push("cm");
return tokens.join(" ");
}
// 設備セルの補足テキスト(バッジで示した項目の詳細と、その他の項目)。
-const DETAIL_FIELDS: { key: string; label: string }[] = [
- { key: "ベンチ・椅子", label: "ベンチ・椅子" },
- { key: "テーブル", label: "テーブル" },
- { key: "防災用具", label: "防災用具" },
- { key: "遊具", label: "遊具" },
- { key: "備考", label: "備考" },
+// ラベル文字は使わず、アイコンで項目を示す。
+const DETAIL_FIELDS: { key: string; icon: string }[] = [
+ { key: "ベンチ・椅子", icon: "🪑" },
+ { key: "テーブル", icon: "🍽" },
+ { key: "防災用具", icon: "🧯" },
+ { key: "遊具", icon: "🎠" },
+ { key: "備考", icon: "" },
];
function detailText(p: Park): string {
const parts: string[] = [];
- if (p["南西部指定管理"]) parts.push("南西部指定管理");
- for (const { key, label } of DETAIL_FIELDS) {
+ for (const { key, icon } of DETAIL_FIELDS) {
const value = p[key];
if (!value) continue;
- parts.push(key === "備考" ? value : `${label}: ${value}`);
+ parts.push(icon ? `${icon} ${value}` : value);
}
const ball = p["ボール遊び"];
- if (ball && ball !== "禁止" && ball !== "可") parts.push(`ボール遊び: ${ball}`);
+ if (ball && ball !== "禁止" && ball !== "可") parts.push(`⚽ ${ball}`);
return parts.join(" / ");
}
@@ -141,11 +145,12 @@ const total = parks.length;
<input type="search" data-parks-search placeholder="公園名・住所・遊具など" />
</label>
<fieldset class="parks-facilities">
- <legend>設備で絞る</legend>
+ <legend>設備・管理で絞る</legend>
<label><input type="checkbox" data-fac-filter value="toilet" />トイレ</label>
<label><input type="checkbox" data-fac-filter value="water" />水飲み場</label>
<label><input type="checkbox" data-fac-filter value="toy" />遊具</label>
<label><input type="checkbox" data-fac-filter value="ball" />ボール遊び</label>
+ <label><input type="checkbox" data-fac-filter value="cm" />指定管理</label>
</fieldset>
<span class="parks-count" data-parks-count aria-live="polite">{total}件</span>
</div>
@@ -212,9 +217,7 @@ const total = parks.length;
</td>
<td class="is-facility" data-label="施設・備考">
{facilityBadges(park).map((b) => (
- <span class:list={["fac-badge", `fac-${b.kind}`]} title={b.title} aria-label={b.title}>
- {b.label}
- </span>
+ <span class:list={["fac-badge", `fac-${b.kind}`]} title={b.title} aria-label={b.title}></span>
))}
{detailText(park) ? <span class="fac-detail">{detailText(park)}</span> : null}
{facilityBadges(park).length === 0 && !detailText(park) ? EMPTY : null}
@@ -412,14 +415,15 @@ const total = parks.length;
.parks .fac-badge {
display: inline-flex;
align-items: center;
- gap: 0.25em;
+ justify-content: center;
margin: 0 0.3em 0.2em 0;
- padding: 0 0.5em;
+ padding: 0 0.4em;
border-radius: 1em;
- font-size: 0.8em;
- line-height: 1.8;
+ font-size: 0.85em;
+ line-height: 1.9;
white-space: nowrap;
background: color-mix(in srgb, currentColor 10%, transparent);
+ cursor: help;
}
.parks .fac-toilet::before {
content: "🚻";
@@ -433,6 +437,9 @@ const total = parks.length;
.parks .fac-ball::before {
content: "⚽";
}
+ .parks .fac-cm::before {
+ content: "🏛";
+ }
.parks .fac-detail {
display: block;
margin-top: 0.25em;