diff options
Diffstat (limited to 'static/index.html')
| -rw-r--r-- | static/index.html | 16 |
1 files changed, 8 insertions, 8 deletions
diff --git a/static/index.html b/static/index.html index ed7a2da..0c2cffe 100644 --- a/static/index.html +++ b/static/index.html @@ -33,9 +33,10 @@ td.closed { background: #fff; } td.hour { border-right-color: #bbb; } .err { color: #c23a3a; font-size: 12px; font-weight: normal; } - .offline { margin-top: 16px; } - .offline h2 { font-size: 15px; margin: 0 0 6px; } - .offline li { margin: 4px 0; font-size: 14px; } + .offline { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } + .offline a.btn { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: #222; font-size: 13px; } + .offline a.btn:hover { background: #f6f6f6; } + .offline .meta { display: inline; margin-left: 6px; } .note { font-size: 12px; color: #777; margin-top: 10px; } .legend span { display: inline-block; width: 14px; height: 14px; vertical-align: middle; border: 1px solid var(--line); margin: 0 4px 0 10px; } #status { font-size: 13px; color: #777; } @@ -62,9 +63,9 @@ <span class="legend"><span style="background:var(--free-bg)"></span>空き<span style="background:#e6e6e6"></span>予約済み</span> </div> +<div class="offline" id="offline"></div> <div class="wrap"><table id="grid"></table></div> <p class="note" id="note"></p> -<div class="offline" id="offline"></div> <script> const $ = (id) => document.getElementById(id); @@ -175,10 +176,9 @@ function render() { : ""; const offline = data.studios.filter((s) => !s.online); - $("offline").innerHTML = offline.length - ? `<h2>オンラインで空きを確認できないスタジオ</h2><ul>${offline.map((s) => - `<li><a href="${esc(s.url)}" target="_blank" rel="noopener">${esc(s.name)}</a>（${esc(s.area)}）${s.phone ? ` <a href="tel:${esc(s.phone)}">${esc(s.phone)}</a>` : " 問い合わせフォーム"}</li>`).join("")}</ul>` - : ""; + // 空き枠を取れないスタジオは、公式サイト（空室検索）へのボタンにする + $("offline").innerHTML = offline.map((s) => + `<a class="btn" href="${esc(s.url)}" target="_blank" rel="noopener">${esc(s.name)} ↗<span class="meta">${s.phone ? esc(s.phone) : "問い合わせフォーム"}</span></a>`).join(""); } async function init() { |