summaryrefslogtreecommitdiff
path: root/src/ollama_web/static/style.css
diff options
context:
space:
mode:
authortanaka takashi <isazaka@gmail.com>2026-09-13 14:36:46 +0900
committertanaka takashi <isazaka@gmail.com>2026-09-13 14:36:46 +0900
commitb24aa19ad22f59556fc7bbb63c58836799239588 (patch)
tree0a5cee4357f864fc73cba37d7cd2eb23d5266385 /src/ollama_web/static/style.css
parentf2d24cb7d437ad099291262d7c1b021809cd66ae (diff)
fix(ui): スマホでセッションを削除できるようにする
セッション削除ボタンが通常時はdisplay:noneで、li:hover時だけ表示されていたため、持続的なhoverを持たないスマートフォンでは安定して操作できなかった。モバイル幅、hover非対応、coarse pointer環境ではボタンを常時表示し、44x44pxのタップ領域とtouch-actionを設定する。 表示修正後もタップ後の処理がネイティブwindow.confirmと複数のclickリスナーに依存していたため、削除とセッション選択をsession-list上の単一イベント委譲へ統合する。削除ボタンを先に判定して行選択とサイドバー閉鎖へ伝播しないようにした。 ネイティブ確認ダイアログを既存modalスタイルに沿ったアプリ内確認ダイアログへ置き換える。キャンセル、背景タップ、Escape、フォーカス復帰に対応し、DELETE実行中の二重送信を防止する。通信失敗はネイティブalertではなくダイアログ内のaria-live領域へ表示する。 削除ボタンへbutton typeとaria-labelを明示し、確認ダイアログへdialog semanticsと日英のキャンセル文言を追加する。CHANGELOGと、タッチ向けCSSのカスケード順・サイズ・ネイティブconfirm非依存を確認する回帰テストも更新する。 Validation: 150 tests passed; ruff check passed; node --check src/ollama_web/static/app.js passed; git diff --check passed.
Diffstat (limited to 'src/ollama_web/static/style.css')
-rw-r--r--src/ollama_web/static/style.css30
1 files changed, 30 insertions, 0 deletions
diff --git a/src/ollama_web/static/style.css b/src/ollama_web/static/style.css
index 2b6d4bc..beb65d1 100644
--- a/src/ollama_web/static/style.css
+++ b/src/ollama_web/static/style.css
@@ -282,6 +282,20 @@ body {
display: inline;
}
+/* Touch devices cannot reliably reveal hover-only controls. Keep the action
+ visible and large enough to tap without changing the desktop interaction. */
+@media (max-width: 768px), (hover: none), (pointer: coarse) {
+ #session-list li .delete {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ flex-shrink: 0;
+ touch-action: manipulation;
+ }
+}
+
#session-list li.empty {
color: var(--muted);
font-size: 13px;
@@ -692,6 +706,16 @@ button#send-btn { padding: 0 20px; }
flex-direction: column;
}
+.confirm-modal-content {
+ width: min(420px, 100%);
+}
+
+.delete-session-status {
+ min-height: 20px;
+ color: var(--danger);
+ font-size: 13px;
+}
+
.modal-header {
display: flex;
align-items: center;
@@ -755,6 +779,12 @@ button#send-btn { padding: 0 20px; }
background: transparent;
}
+.modal-footer button.danger {
+ background: var(--danger);
+ border-color: var(--danger);
+ color: #fff;
+}
+
.mcp-server-card {
background: var(--bg);
border: 1px solid var(--border);