diff options
Diffstat (limited to 'src/components/ParksFilters.astro')
| -rw-r--r-- | src/components/ParksFilters.astro | 173 |
1 files changed, 121 insertions, 52 deletions
diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro index 576c0ff..e93b4ed 100644 --- a/src/components/ParksFilters.astro +++ b/src/components/ParksFilters.astro @@ -55,57 +55,81 @@ const facilityTypes = [ </label> <fieldset class="parks-facilities"> <legend>設備・遊具で絞る</legend> - <label><input type="checkbox" data-fac-filter value="toilet" /><span class="filter-wc" aria-hidden="true">WC</span>トイレ</label> - <label><input type="checkbox" data-fac-filter value="water" /><span class="filter-icon filter-icon-water" set:html={PARK_ICONS.water.svg} />水飲み</label> - <label> - <input type="checkbox" data-fac-filter value="picnic" /> - <span class="filter-icon filter-icon-grass" set:html={PARK_ICONS.grass.svg} />草地広場 - </label> - <label> - <input type="checkbox" data-fac-filter value="table" /> - <span class="filter-icon" set:html={PARK_ICONS.picnic.svg} />野外卓／縁台 - </label> - <label><input type="checkbox" data-fac-filter value="clock" /><span class="filter-icon filter-icon-clock" set:html={PARK_ICONS.clock.svg} />時計</label> - <label> - <input type="checkbox" data-fac-filter value="sand" /> - <span class="filter-icon" set:html={PARK_ICONS.sand.svg} />砂場 - </label> - <label> - <input type="checkbox" data-fac-filter value="swing" /> - <span class="filter-icon" set:html={PARK_ICONS.swing.svg} />ブランコ - </label> - <label> - <input type="checkbox" data-fac-filter value="seesaw" /> - <span class="filter-icon" set:html={PARK_ICONS.teeter.svg} />シーソー - </label> - <label> - <input type="checkbox" data-fac-filter value="spring" /> - <span class="filter-icon" set:html={PARK_ICONS.spring.svg} />スイング遊具 - </label> - <label> - <input type="checkbox" data-fac-filter value="toddler" /> - <span class="filter-icon" set:html={PARK_ICONS.duck.svg} />幼児用遊具 - </label> - <label> - <input type="checkbox" data-fac-filter value="jungle" /> - <span class="filter-icon" set:html={PARK_ICONS.climbing.svg} />ジャングルジム - </label> - <label> - <input type="checkbox" data-fac-filter value="plane" /> - <span class="filter-icon" set:html={PARK_ICONS.airplane.svg} />ヒコーキ - </label> - <label> - <input type="checkbox" data-fac-filter value="slide" /> - <span class="filter-icon" set:html={PARK_ICONS.slide.svg} />滑り台 - </label> - <label> - <input type="checkbox" data-fac-filter value="complex" /> - <span class="filter-icon" set:html={PARK_ICONS.playground.svg} />複合遊具 - </label> - <label><input type="checkbox" data-fac-filter value="basket" />🏀バスケゴール</label> - <label><input type="checkbox" data-fac-filter value="shelter" /><span class="filter-icon" set:html={PARK_ICONS.shelter.svg} />東屋／シェルター</label> - <label><input type="checkbox" data-fac-filter value="health" /><span class="filter-icon" set:html={PARK_ICONS.health.svg} />健康遊具</label> - <label><input type="checkbox" data-fac-filter value="special" /><span class="filter-icon" set:html={PARK_ICONS.special.svg} />特殊遊具</label> + <div class="fac-group"> + <span class="fac-group-title">遊具</span> + <div class="fac-group-items"> + <label> + <input type="checkbox" data-fac-filter value="sand" /> + <span class="filter-icon" set:html={PARK_ICONS.sand.svg} />砂場 + </label> + <label> + <input type="checkbox" data-fac-filter value="swing" /> + <span class="filter-icon" set:html={PARK_ICONS.swing.svg} />ブランコ + </label> + <label> + <input type="checkbox" data-fac-filter value="seesaw" /> + <span class="filter-icon" set:html={PARK_ICONS.teeter.svg} />シーソー + </label> + <label> + <input type="checkbox" data-fac-filter value="spring" /> + <span class="filter-icon" set:html={PARK_ICONS.spring.svg} />スイング遊具 + </label> + <label> + <input type="checkbox" data-fac-filter value="toddler" /> + <span class="filter-icon" set:html={PARK_ICONS.duck.svg} />幼児用遊具 + </label> + <label> + <input type="checkbox" data-fac-filter value="jungle" /> + <span class="filter-icon" set:html={PARK_ICONS.climbing.svg} />ジャングルジム + </label> + <label> + <input type="checkbox" data-fac-filter value="plane" /> + <span class="filter-icon" set:html={PARK_ICONS.airplane.svg} />ヒコーキ + </label> + <label> + <input type="checkbox" data-fac-filter value="slide" /> + <span class="filter-icon" set:html={PARK_ICONS.slide.svg} />滑り台 + </label> + <label> + <input type="checkbox" data-fac-filter value="complex" /> + <span class="filter-icon" set:html={PARK_ICONS.playground.svg} />複合遊具 + </label> + <label><input type="checkbox" data-fac-filter value="basket" />🏀バスケゴール</label> + <label><input type="checkbox" data-fac-filter value="health" /><span class="filter-icon" set:html={PARK_ICONS.health.svg} />健康遊具</label> + <label><input type="checkbox" data-fac-filter value="special" /><span class="filter-icon" set:html={PARK_ICONS.special.svg} />特殊遊具</label> + </div> + </div> + <div class="fac-group"> + <span class="fac-group-title">広場・休憩</span> + <div class="fac-group-items"> + <label> + <input type="checkbox" data-fac-filter value="picnic" /> + <span class="filter-icon filter-icon-grass" set:html={PARK_ICONS.grass.svg} />草地広場 + </label> + <label> + <input type="checkbox" data-fac-filter value="table" /> + <span class="filter-icon" set:html={PARK_ICONS.picnic.svg} />野外卓／縁台 + </label> + <label><input type="checkbox" data-fac-filter value="shelter" /><span class="filter-icon" set:html={PARK_ICONS.shelter.svg} />東屋／シェルター</label> + <label><input type="checkbox" data-fac-filter value="pergola" /><span class="filter-icon" set:html={PARK_ICONS.pergola.svg} />パーゴラ</label> + </div> + </div> + <div class="fac-group"> + <span class="fac-group-title">設備</span> + <div class="fac-group-items"> + <label><input type="checkbox" data-fac-filter value="toilet" /><span class="filter-wc" aria-hidden="true">WC</span>トイレ</label> + <label><input type="checkbox" data-fac-filter value="water" /><span class="filter-icon filter-icon-water" set:html={PARK_ICONS.water.svg} />水飲み</label> + <label><input type="checkbox" data-fac-filter value="clock" /><span class="filter-icon filter-icon-clock" set:html={PARK_ICONS.clock.svg} />時計</label> + </div> + </div> + <div class="fac-group"> + <span class="fac-group-title">利用ルール</span> + <div class="fac-group-items"> + <label><input type="checkbox" data-fac-filter value="ballok" /><span class="filter-icon" set:html={PARK_ICONS.ball.svg} />ボール遊び禁止の表示なし</label> + <label><input type="checkbox" data-fac-filter value="dogok" /><span class="filter-icon" set:html={PARK_ICONS.dog.svg} />犬禁止の表示なし</label> + <span class="fac-note">利用ルールは実際と異なる場合があります。現地の看板などでご確認ください。</span> + </div> + </div> </fieldset> <label class="parks-fire-toggle" title="消火栓・防火水槽を地図に表示する"> <input type="checkbox" data-show-fire /> @@ -115,7 +139,7 @@ const facilityTypes = [ </div> <p class="parks-disclaimer"> - 情報には誤りが含まれる場合があります。最新の情報は各施設の公式ページでご確認ください。 + 現在β版のテスト中です。情報に誤りが含まれている可能性があります（特に利用ルール）。最新の情報は各施設の公式ページや現地の表示でご確認ください。遊具・設備などの一部のアイコンは、地図を拡大すると表示されます。 </p> <style> @@ -163,6 +187,49 @@ const facilityTypes = [ border: 1px solid var(--sl-color-hairline, #ccc); border-radius: 0.3rem; } + /* フィルタを「遊具 / 広場・休憩 / 設備 / 利用ルール」にまとまりで見せる */ + .fac-group { + display: flex; + flex: 1 0 100%; + align-items: flex-start; + gap: 0.45rem; + } + .fac-group-title { + flex: none; + width: 4rem; + font-size: 0.72rem; + font-weight: 700; + line-height: 1.5rem; + color: var(--sl-color-gray-2, #64748b); + text-align: right; + } + .fac-group-items { + display: flex; + flex: 1 1 auto; + flex-wrap: wrap; + align-items: center; + gap: 0 0.6rem; + } + /* グループの注記（利用ルールの但し書きなど） */ + .fac-note { + flex: 1 0 100%; + padding-top: 0.1rem; + font-size: 0.72rem; + line-height: 1.35; + color: var(--sl-color-gray-2, #64748b); + } + @media (max-width: 700px) { + .fac-group { + flex-direction: column; + align-items: stretch; + gap: 0.1rem; + } + .fac-group-title { + width: auto; + line-height: 1.2; + text-align: left; + } + } .parks-facilities legend { padding: 0 0.2rem; font-size: 0.78em; @@ -174,6 +241,8 @@ const facilityTypes = [ align-items: center; gap: 0.2rem; min-height: 1.5rem; + /* Starlight の「label + label」の上マージンで位置がずれ、縦も伸びるため打ち消す */ + margin: 0; font-size: 0.8rem; line-height: 1.2; } |