Repository navigation
テーブル画面の並びを変える（グリッドを窓の底まで／区域を見えるところへ） - #28
Merged
Merged
Conversation
毎回使うものではないのに常に開いていて、その高さぶんグリッドが下へ 押し出されていた。 - 既定は畳む。押すと開く - 開いたかどうかはテーブルをまたいで覚える（一度使う人は続けて使う） - 畳んだ状態で条件が入っていれば、件数をバッジで出す ── 畳んだせいで 絞り込み中だと気づかない、が起きないように イマイチなら戻す前提の変更。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XkRWmyQf9Rt3sYjjkPSq4Y
1000 行を出しても、画面に見えるのは 16 行ほどだった。残り 98% はスクロール しないと見えず、しかもページ本体とグリッドの両方が動くので、下を見るのに 「まずページを送ってからグリッドを送る」二段階になっていた。 **1000 行をスクロールして目で探す人はいない。** 探すなら絞り込みか SQL を使う。 だから既定を「画面に合わせる」にした。 - body の高さを画面に固定し、main を単一のスクローラにした - グリッドは自分の上端を実測して、main の内側の下端まで伸びる。固定値 （max-h-[60vh]）だと、絞り込みを開いたりタブを変えたりで余ったり溢れたりする - 取ってくる行数も画面から決める。900px で 13 行、1200px で 21 行。**どちらも スクロールバー 0 本** - 何行入るかはブラウザでしか分からないので、1 つ目のテーブルだけ描画後に 1 回測り直す。測った数は覚えておき、2 つ目以降は最初から正しい行数で来る。 ずれが 2 行以内なら取り直さない（開くたびに 2 回叩くことになるので） - ブラウザから来た数はそのまま LIMIT に渡さず、10〜200 に丸める - 100 / 500 / 1000 / 5000 は選択肢として残した（コピーして持っていくとき用） サイドバーのテーブル一覧も同じ扱いにした（そちらが画面より高いと、こんどは main 側にスクロールバーが出る）。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XkRWmyQf9Rt3sYjjkPSq4Y
高さは測り直していたのに行数がそのままで、絞り込みを開くとグリッドが 79px はみ出してページ側にスクロールが出ていた。 上端が動く ＝ 入る行数が変わる。開閉のたびに測り直して取り直す。 実測: 閉 21 行 / 開 18 行 / 閉 21 行、どの状態でもスクロールバー 0 本。 ヘルスなど縦に長いパネルは従来どおりページがスクロールする。 「収まる」のはデータのタブだけ。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XkRWmyQf9Rt3sYjjkPSq4Y
前の実装は、描画後にグリッドを測って → 行数を取り直し → 絞り込みの開閉で また測り直し、を全クリックに仕掛けていた。結果、1 回クリックしないと効かない、 何をしても動かない、という状態になっていた。**仕組みを増やしすぎた。** 入る行数は結局ウィンドウの高さで決まるので、そこから引くだけにする。 描画結果に依存しない ＝ 取り直しの連鎖が起きない。 行数 (画面高 - 455 - 33 - 8) / 37 高さ calc(100vh - 435px) ← 同じ定数から作る 定数は実測。**1 行の高さを 33px だと思っていたが 37px だった**（px-4 py-2 と 罫線）。器にも padding/border が 15px ほどあり、そのぶん広げてある。 1200px → 19 行 スクロールバー 0 本 900px → 10 行 スクロールバー 0 本 絞り込みを開いたときだけ、グリッド内に小さくスクロールが出る（開いたパネルの ぶん場所を譲る）。ページ側は動かない。 IntersectionObserver・全クリックへの再計算・カスタムイベント・描画後の 取り直しは全部消した。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XkRWmyQf9Rt3sYjjkPSq4Y
グリッドより上下にあるものが 900px 中 400px 以上を占めていた。フッタ（版だけ）を 畳んでヘッダへ移し、本文の上下余白を半分にし、ヘッダを 1 段細くした。 寸法は :root のカスタムプロパティ 1 か所に集めた。前は JS に 455、テンプレートに 435 と書き分けていて、片方だけ直すとずれた。今は JS も CSS も同じものを読む。 900px 10 → 15 行 1200px 19 → 23 行 どちらもページ側にスクロールバーは出ない。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XkRWmyQf9Rt3sYjjkPSq4Y
上に 3 段（テーブル名＋操作ボタン／タブ／行数とページ送り）積んでいたのをやめて、 上は 1 段だけにし、行数とページ送りはグリッドの下の帯へ回した。テーブル単位の 操作も同じ帯の右端に置き、よく押す「SQL で開く」以外は ⋯ にしまった。帯は 1 行に収める ── 折り返すとその高さぶん行数が減るので、説明は title へ逃がした。 ヘッダも 1 段にした（区域ナビをロゴと同じ行へ）。40px はそのまま行数になる。 列見出しに型を出した。型を見るのに Columns タブへ行って戻る往復がなくなる。 900px 15 → 18 行 1200px 23 → 26 行 上下ともスクロールバーは出ない。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XkRWmyQf9Rt3sYjjkPSq4Y
「⌂ 概要 ▾」1 つの奥に、ホバーで開くメガメニューで 13 の区域を隠していた。 そこに何かがあること自体に気づけない。3 つのグループ名 ── クエリ & プランナー / ライブ運用 / カタログ & データ ── をバーに出しておけば、押す前に「この 3 面が ある」ことが読める。 開くのはクリックにした。ホバーだと通りすがりに開いて邪魔になるし、開いたことに 気づかないまま外れる。Esc とバーの外のクリックで閉じる。 テストの open_section() は、どの区域がどのグループかを表で持つようにした。 3 つ順に開いて探す書き方は、Alpine が反映する前に count() が走って落ちた。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XkRWmyQf9Rt3sYjjkPSq4Y
文字と小さな ▾ だけだと見出しに見えて、押すと開くことに気づかれない。枠を付けて 押せるものにし、▾ を山形にして開くと 180 度回すようにした。開いているあいだは 枠と背景を明るくする。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XkRWmyQf9Rt3sYjjkPSq4Y
▸ Filter という文字だけだと、押すと開くことに気づかれない。区域ボタンと同じ枠と 回る山形にした。見た目は .disclosure 1 か所にまとめ、開閉は aria-expanded から 作る（同じものを 2 通りに書かない）。 枠と余白でボタンが 10px 背が伸びたぶん、上下の合計も 191 → 201 にずらした。 900px で 17 行（絞り込みを開くと 14 行）、どちらもページ側にスクロールバーは出ない。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XkRWmyQf9Rt3sYjjkPSq4Y
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
テーブルを開いた画面を、上に段を積む形から、グリッドが窓の底まで届く形に変えた。
Sequel Ace の並びが下敷き。
数字
絞り込みを開くと 900px で 14 行。開いてもページ側は動かない。
やったこと
上に積んでいたものを減らした。 テーブル名＋操作ボタン／タブ／行数とページ送り、で
3 段あったのを 1 段にした。行数とページ送りはグリッドの下の帯へ回し、テーブル単位の
操作も同じ帯の右端に置いた。よく押す「SQL で開く」以外は ⋯ にしまってある。帯は
1 行に収めるのが条件で、折り返すとその高さぶん行数が減るので、説明は title へ逃がした。
ヘッダを 1 段にした。 区域ナビをロゴと同じ行へ。40px はそのまま行数になる。
区域の名前をバーに出した。 「⌂ 概要 ▾」1 つの奥に、ホバーで開くメガメニューで
13 の区域を隠していた。そこに何かがあること自体に気づけない。3 つのグループ名を
出しておけば、押す前に読める。開くのはクリック（ホバーだと通りすがりに開く）。
「開くもの」は同じ形にした。 区域ボタンと絞り込みに枠を付け、山形は開くと 180 度
回る。見た目は
.disclosure1 か所、開閉はaria-expandedから作る。列見出しに型を出した。
TICKET_NO characterのように。型を見るのに Columns タブへ行って戻る往復がなくなる。
行数の決め方
前は「描画してから測って取り直す」方式で、測る・取り直す・開閉で測り直すが絡んで
挙動が読めなくなっていた（1 回クリックしないと効かない、など）。全部消して、
ウィンドウの高さから引くだけにした。描画結果に依存しないので取り直しの連鎖が起きない。
寸法は
:rootのカスタムプロパティ 1 か所に置き、JS も CSS も同じものを読む。前はJS に 455、テンプレートに 435 と書き分けていて、片方だけ直すとずれた。
テスト
318 件通過。
open_section()は、どの区域がどのグループかを表で持つようにした（3 つ順に開いて探す書き方は、Alpine が反映する前に
count()が走って落ちる）。rename は底の帯の ⋯ の中へ移ったので、テストも先に ⋯ を押す。
🤖 Generated with Claude Code
https://claude.ai/code/session_01XkRWmyQf9Rt3sYjjkPSq4Y