refactor(classroom): クラス管理の各画面を画面遷移＋共通レイアウトに統一する（#1108）#1112
Merged
smalruby3-editor-bot[bot] merged 9 commits intoJul 25, 2026
Merged
Conversation
現在の画面上にモーダルっぽい popover を出すトグル UI をやめ、課題詳細→ Google Classroom に共有 と同じ「画面遷移＋キャンセル/実行で戻る」基本レイアウト （パンくず＋タイトル＋フォーム＋フッター: プライマリー右下/キャンセル左下）に統一: - クラス一覧「クラスを作る」: popover → 画面遷移（クラス一覧 > クラスを作る） - クラス設定: インラインカード置換 → 画面遷移（クラス一覧 > 設定）。減員警告・ アーカイブ確認の挙動は維持 - 課題一覧「課題を作る」「課題を再利用」: popover → 画面遷移。サブビュー中は 上部アクションバーを隠し、パンくずに現在地を出す（「課題一覧」で戻る） - 不要になった boardPopover 経由の inline form / inline settings を除去 data-testid は維持。unit テスト（class-list 12 + board 19 = 31）green。lint/prettier 通過。 実機で 4 画面が画面遷移・フッター統一・ヘッダ非表示になることを確認。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Google Classroom からインポート画面のフッターを、右寄せ（インポートのみ）から 基本ポリシー（キャンセル左下 / インポート右下）に統一。キャンセルは戻る（クラス 一覧）と同じ挙動。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
🚀 Preview deployed: https://smalruby.jp/smalruby3-editor/feature/classroom-ui-unify/ |
人間レビューの指摘 3 点: - 評価画面: 左下にキャンセルボタン（クラス一覧へ戻る）を追加 - クラス設定フッター: キャンセルを左下、アーカイブは保存の左（右グループ）に。 アーカイブ押下中はキャンセル・保存を隠し「アーカイブしない/する」のみ表示、 「しない」で元に戻す（キャンセル左・アーカイブ/保存右） - アーカイブ済みのクラスカード: 設定ボタンを非表示（元に戻すのみ） unit テスト更新（アーカイブ済みは設定非表示・アーカイブ確認でボタン切替）。 lint/prettier 通過。実機で 3 点とも確認。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
キャンセルが別行の左下に出て他ボタンと位置がずれていた（レビュー指摘）。 アクションボタン行（.button-row）の先頭に移し、margin-right:auto で左端に寄せて 右寄せの他ボタンと同じ行に揃える。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
クラスを作る画面のフォームに枠が無く、中央の年度/セクション/人数の入力が ブラウザ既定の枠のままで浮いて見えた（レビュー指摘）。設定画面と同じ .class-settings-form（紫の枠 + .class-settings-form input の統一スタイル）に 包み、タイトルは枠の外・上に出す。name/課題名の .input 直指定を外して 枠内スタイルに一本化。 実機で枠色 #855cd6・全入力の枠が name と一致することを確認。テスト 18 件 green。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
クラスを作る画面に短い説明を追加し、共同管理者とは何か・あとから設定で 追加できることを先生に伝える: 「共同管理者（クラスを一緒に管理する先生）は、あとから「設定」で追加できます。」 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
クラス名とアクションボタンが同じ行にあり、クラス名が「自...」と省略されていた。 レビュー案どおり縦積みに: - クラス名を独立行（.board-title の flex/ellipsis を廃止、省略しない） - その下に画面の簡単な説明（.board-hint）を追加 - アクションボタンは折り返し行（.board-header を flex-wrap の左寄せ行に） - 以降はトピック入力・課題一覧/空状態 実機で長いクラス名も省略されず、説明・ボタン行・トピックの順で並ぶことを確認。 テスト 14 件 green。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
再利用の候補・クラスフィルタにアーカイブ済みが混じっていた。以下を対象外に: - アーカイブ済みの課題（classroom.status === 'archived'） - アーカイブ済みのクラス（組）に属する課題 - クラスフィルタのドロップダウンからアーカイブ済みのクラスを除外 unit テスト追加（3種の除外を検証）。lint/prettier 通過。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
人間レビュー指摘の対応: - 課題一覧のアクションボタンを 課題を作る → 課題を再利用 → みんなの課題からさがす → 合言葉で取り込み → 全課題の提出物をダウンロード の順に並び替え（ダウンロードを末尾へ移動）。 - みんなの課題カタログの「閉じる」ボタンのラベルを「キャンセル」に変更。 - すべて / 自分の投稿 タブの見た目を課題詳細の 説明 / メンバー タブに統一。 アクティブタブに detailTab を常に適用したうえで detailTabActive を 重ねるように classNames 化し、透明背景・下線・太字がベーススタイルから 外れて既定ボタン見た目になっていた不整合を解消。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
smalruby3-editor-bot
Bot
merged commit Jul 25, 2026
ce17bd6
into
feature/assignment-sharing
9 checks passed
7 tasks
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
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.
Summary
クラス管理（先生用）の画面上に出るモーダルっぽい popover トグル UI を、
課題詳細 → Google Classroom に共有と同じ 「画面遷移＋キャンセル/実行で戻る」基本レイアウトに統一します（#1108 の方針決定を実装）。PR #1080（みんなの課題）のトピックブランチ
feature/assignment-sharingに対する修正です。Changes Made
画面遷移化（popover トグル → 画面遷移）
boardPopover経由の inline form / inline settings を除去フッター配置ポリシーの統一（プライマリー右下 / キャンセル左下）
.form-footer/.main-footer-split（space-between）に統一基本レイアウト（各画面）: パンくず（現在地）＋ タイトル ＋ 本文（フォーム）＋ フッター。左右余白・タイトルの太さも課題詳細/GC共有に合わせる。
実装方針
課題詳細/GC共有と同じく、親ビュー（クラス一覧・課題一覧ボード）内でサブビュー（画面）に切替、本文をフォーム画面に置換（#1109 の共有ステップと同じパターン）。挙動（バリデーション・減員警告・アーカイブ確認・再利用フィルタ）は現行を維持。
data-testidは維持。Test Coverage
を確認
スコープ / 残り
Related Issues
Refs #1108（方針決定済み・本 PR で実装）
🤖 Generated with Claude Code