Skip to content

style(Teacher Tools): Improve component summary layout#2303

Merged
breity merged 5 commits intodevelopfrom
fix-component-summary-layout
Apr 14, 2026
Merged

style(Teacher Tools): Improve component summary layout#2303
breity merged 5 commits intodevelopfrom
fix-component-summary-layout

Conversation

@breity
Copy link
Copy Markdown
Member

@breity breity commented Apr 13, 2026

Changes

  • Improve layout when multiple activity summaries are visible at once and across different screen widths (see examples below).
  • Move "Generate Summary" tooltip to an info icon for AI summary component.
  • Refactor template.

Before:
Screenshot 2026-04-12 at 3 29 51 PM

After:
Screenshot 2026-04-12 at 8 09 38 PM

Before:
Screenshot 2026-04-12 at 3 31 01 PM

After:
Screenshot 2026-04-12 at 3 26 22 PM

Before:
Screenshot 2026-04-12 at 8 19 28 PM

After:
Screenshot 2026-04-12 at 8 20 33 PM

Test

  • Make sure component summaries work as before and layout adjusts based on different summaries shown.
  • Make sure summary layout adjusts for small, medium, large screen widths.

@breity breity requested a review from hirokiterashima April 13, 2026 03:26
@breity breity self-assigned this Apr 13, 2026
@breity breity added the enhancement New feature of any size or improvement (UI, performance, security) label Apr 13, 2026
@qltysh
Copy link
Copy Markdown

qltysh bot commented Apr 13, 2026

Qlty

Coverage Impact

Unable to calculate total coverage change because base branch coverage was not found.

Modified Files with Diff Coverage (1)

RatingFile% DiffUncovered Line #s
New file Coverage rating: A
...ves/teacher-summary-display/ai-summary/ai-summary.component.ts0.0%44-45
Total0.0%
🤖 Increase coverage with AI coding...

In the `fix-component-summary-layout` branch, add test coverage for this new code:

- `src/assets/wise5/directives/teacher-summary-display/ai-summary/ai-summary.component.ts` -- Line 44-45

🚦 See full report on Qlty Cloud »

🛟 Help
  • Diff Coverage: Coverage for added or modified lines of code (excludes deleted files). Learn more.

  • Total Coverage: Coverage for the whole repository, calculated as the sum of all File Coverage. Learn more.

  • File Coverage: Covered Lines divided by Covered Lines plus Missed Lines. (Excludes non-executable lines including blank lines and comments.)

    • Indirect Changes: Changes to File Coverage for files that were not modified in this PR. Learn more.

Copy link
Copy Markdown
Member

@hirokiterashima hirokiterashima left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. 👍

I had two thoughts for a future refactoring task:

  • component-summary.component.html is getting logic-heavy and harder to read. I'm not sure what the solution is, but just wanted to bring this up.
  • ai-summary.component is only rendered when there is student work (if I recall correctly), so we shouldn't have to check for hasStudentResponses in the code and in the template?

@breity breity merged commit 6afc3d7 into develop Apr 14, 2026
1 check passed
@breity breity deleted the fix-component-summary-layout branch April 14, 2026 17:25
@hirokiterashima
Copy link
Copy Markdown
Member

🎉 This PR is included in version 5.225.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature of any size or improvement (UI, performance, security) released

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants