`Modeling exercises`: Fix layout overlapping in modeling assessment #10145

Anishyou · 2025-01-14T01:24:59Z

Checklist

General

I tested all changes and their related features with all corresponding user types on a test server.
This is a small issue that I tested locally and was confirmed by another developer on a test server.
Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
I chose a title conforming to the naming conventions for pull requests.

Client

Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
I strictly followed the client coding and design guidelines.
Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.

Motivation and Context

#10139

Description

Added a parent container to manage the layout flow of modeling-assessment and additional-feedback sections.
Ensured proper stacking of sections using flexbox and dynamic height adjustments.
Restricted modeling-assessment height to prevent overlap in landscape mode.
Enabled smooth scrolling within modeling-assessment to improve usability.
Added responsive handling for landscape orientation to ensure consistent layout behavior.

Steps for Testing

Log in to Artemis
create a modeling exercise
solve it
assess it and write feedback
when you see as a student, modelling should not be overlapping as shown in the bug

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked
Click on the badges to get to the test servers.

Review Progress

Performance Review

I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance even for very large courses with more than 2000 students.
I (as a reviewer) confirm that the server changes (in particular related to database calls) are implemented with a very good performance even for very large courses with more than 2000 students.

Code Review

Code Review 1
Code Review 2

Manual Tests

Test 1
Test 2

Exam Mode Test

Test 1
Test 2

Performance Tests

Test 1
Test 2

Test Coverage

Screenshots

Summary by CodeRabbit

UI/UX Improvements
- Enhanced layout and responsiveness for the modeling assessment component
- Introduced a new parent container with improved spacing and scrolling behavior
- Added flexibility to component height and layout
Layout Updates
- Implemented dynamic height adjustments for assessment sections
- Added support for vertical scrolling
- Introduced media query for landscape orientation display
Styling Enhancements
- Updated CSS classes to improve overall component presentation
- Added gap properties for better content spacing
- Ensured content containment with overflow handling

- Added a parent container to manage the layout flow of modeling-assessment and additional-feedback sections. - Ensured proper stacking of sections using flexbox and dynamic height adjustments. - Restricted modeling-assessment height to prevent overlap in landscape mode. - Enabled smooth scrolling within modeling-assessment to improve usability. - Added responsive handling for landscape orientation to ensure consistent layout behavior.

coderabbitai · 2025-01-16T00:29:23Z

Walkthrough

The pull request introduces layout and styling modifications to the modeling assessment component. A new parent container with the class parent-container is added to the HTML structure, providing improved layout organization. The accompanying SCSS changes enhance the component's flexibility by implementing dynamic height adjustments, better spacing, and improved scrolling behavior. The changes aim to create a more responsive and user-friendly interface for the modeling assessment view.

Changes

File	Change Summary
`src/main/webapp/app/exercises/modeling/assess/modeling-assessment.component.html`	- Added new parent `<div>` with `parent-container` class - Introduced `apollon-row` with modified inner structure - Added conditional block for explanation editor - Included empty `additional-feedback` section
`src/main/webapp/app/exercises/modeling/assess/modeling-assessment.component.scss`	- Created `.parent-container` with flex layout and spacing - Updated `.modeling-assessment` for dynamic height and scrolling - Modified `.apollon-container` and `.apollon-row` to have auto height - Added media query for landscape orientation

Possibly related PRs

General: Make exercise view scrollable #8688: Making exercise view scrollable
Plagiarism checks: Fix scrolling issue on side-by-side viewer for modeling #9748: Fixing scrolling issue in side-by-side modeling exercise viewer
Programming exercises: Fix table overflow in rendered markdown #9957: Addressing table overflow in rendered markdown

Suggested labels

bugfix, ready to merge, small

Suggested reviewers

EneaGore
LeonWehrhahn
HawKhiem
krusche
SimonKaran13

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (4)

src/main/webapp/app/exercises/modeling/assess/modeling-assessment.component.scss (2)
11-17: Consider removing redundant spacing.

Since the parent container already implements gap spacing, the margin-bottom: 2rem might be redundant and could lead to inconsistent spacing between elements.
 .modeling-assessment {
     position: relative;
     height: auto;
     max-height: 80vh;
     overflow-y: auto;
-    margin-bottom: 2rem;
     scroll-behavior: smooth;
 }
42-46: Optimize overflow behavior in landscape mode.

Consider using overflow-y: auto instead of scroll to prevent showing unnecessary scrollbars when content fits within the container.
 @media screen and (orientation: landscape) {
     .modeling-assessment {
         max-height: 70vh;
-        overflow-y: scroll;
+        overflow-y: auto;
     }
 }
src/main/webapp/app/exercises/modeling/assess/modeling-assessment.component.html (2)
14-20: Enhance resize handle accessibility.

Consider adding ARIA attributes to improve the resize handle's accessibility:
-            <div class="draggable-right">
+            <div class="draggable-right" role="separator" aria-label="Resize horizontally">
                 <fa-icon [icon]="faGripLinesVertical" />
             </div>
22-29: Add accessibility attributes to vertical resize handle.

Similar to the horizontal resize handle, enhance accessibility:
-            <div class="draggable-bottom">
+            <div class="draggable-bottom" role="separator" aria-label="Resize vertically">
                 <fa-icon [icon]="faGripLines" />
             </div>

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 247e7fb and 6708f62.

📒 Files selected for processing (2)

src/main/webapp/app/exercises/modeling/assess/modeling-assessment.component.html (1 hunks)
src/main/webapp/app/exercises/modeling/assess/modeling-assessment.component.scss (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

src/main/webapp/app/exercises/modeling/assess/modeling-assessment.component.html (1)

Pattern src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.

⏰ Context from checks skipped due to timeout of 90000ms (8)

GitHub Check: Codacy Static Code Analysis
GitHub Check: server-tests
GitHub Check: server-style
GitHub Check: client-tests
GitHub Check: client-style
GitHub Check: Build and Push Docker Image
GitHub Check: Build .war artifact
GitHub Check: Analyse

🔇 Additional comments (4)

src/main/webapp/app/exercises/modeling/assess/modeling-assessment.component.scss (2)

3-9: Well-structured parent container implementation!

The new parent container effectively uses flexbox layout with proper spacing and overflow handling, which should help resolve the layout issues.

33-33: Good use of dynamic height adjustment!

The change from fixed to dynamic height in both containers will help prevent content overflow issues while maintaining proper layout structure.

Also applies to: 39-39

src/main/webapp/app/exercises/modeling/assess/modeling-assessment.component.html (2)

1-13: Excellent implementation of new Angular syntax!

The code correctly uses the new @if syntax as per guidelines, and the header structure is well-organized with proper flex layout.

32-34: Clarify the purpose of the empty feedback section.

The additional feedback section is currently empty. Please either:

Add a TODO comment explaining the intended implementation

Remove it if it's not needed for this PR

zagemello

Works as expected, tested on TS1

HawKhiem

Tested on TS3. Works as described

ItsaaaMeMario

Tested on TS1, works as described.

sachmii

Tested on TS1, works just fine.

vinceclifford

Tested on TS1, works as expected.

kevinfischer4

Tested on TS1, works as expected. The boxes are not overlapping anymore.

sawys777

Tested on TS1, everything works as expected

SimonEntholzer

Code

SindiBuklaji

Tested on TS5. Works as described. :)

Anishyou linked an issue Jan 14, 2025 that may be closed by this pull request

Feedback for Modeling Exercises not visible #10139

Open

github-actions bot assigned Anishyou Jan 14, 2025

github-actions bot added the client Pull requests that update TypeScript code. (Added Automatically!) label Jan 14, 2025

Anishyou changed the title ~~´Modeling exercises´: Fix layout overlapping in modeling assessment~~ Modeling exercises: Fix layout overlapping in modeling assessment Jan 14, 2025

Merge branch 'develop' into bugfix/modelling/modelling-overlapping

6708f62

Anishyou marked this pull request as ready for review January 16, 2025 00:27

Anishyou requested a review from a team as a code owner January 16, 2025 00:27

github-actions bot added the ready for review label Jan 16, 2025

coderabbitai bot reviewed Jan 16, 2025

View reviewed changes

coderabbitai bot approved these changes Jan 16, 2025

View reviewed changes

zagemello added the deploy:artemis-test1 label Jan 16, 2025

zagemello temporarily deployed to artemis-test1.artemis.cit.tum.de January 16, 2025 11:32 — with GitHub Actions Inactive

github-actions bot added lock:artemis-test1 and removed deploy:artemis-test1 labels Jan 16, 2025

zagemello removed the lock:artemis-test1 label Jan 16, 2025

zagemello reviewed Jan 16, 2025

View reviewed changes

HawKhiem added the deploy:artemis-test3 label Jan 16, 2025

HawKhiem temporarily deployed to artemis-test3.artemis.cit.tum.de January 16, 2025 13:18 — with GitHub Actions Inactive

github-actions bot added lock:artemis-test3 and removed deploy:artemis-test3 labels Jan 16, 2025

HawKhiem approved these changes Jan 16, 2025

View reviewed changes

HawKhiem removed the lock:artemis-test3 label Jan 16, 2025

ItsaaaMeMario added the deploy:artemis-test1 label Jan 16, 2025

ItsaaaMeMario temporarily deployed to artemis-test1.artemis.cit.tum.de January 16, 2025 14:55 — with GitHub Actions Inactive

github-actions bot added lock:artemis-test1 and removed deploy:artemis-test1 labels Jan 16, 2025

ItsaaaMeMario approved these changes Jan 16, 2025

View reviewed changes

sachmii approved these changes Jan 16, 2025

View reviewed changes

vinceclifford approved these changes Jan 16, 2025

View reviewed changes

kevinfischer4 approved these changes Jan 16, 2025

View reviewed changes

EneaGore removed the lock:artemis-test1 label Jan 17, 2025

sawys777 added the deploy:artemis-test1 label Jan 17, 2025

sawys777 temporarily deployed to artemis-test1.artemis.cit.tum.de January 17, 2025 13:02 — with GitHub Actions Inactive

github-actions bot added lock:artemis-test1 and removed deploy:artemis-test1 labels Jan 17, 2025

sawys777 approved these changes Jan 17, 2025

View reviewed changes

sawys777 removed the lock:artemis-test1 label Jan 17, 2025

SimonEntholzer approved these changes Jan 17, 2025

View reviewed changes

SindiBuklaji added the deploy:artemis-test5 label Jan 18, 2025

SindiBuklaji temporarily deployed to artemis-test5.artemis.cit.tum.de January 18, 2025 15:26 — with GitHub Actions Inactive

github-actions bot added lock:artemis-test5 and removed deploy:artemis-test5 labels Jan 18, 2025

SindiBuklaji approved these changes Jan 18, 2025

View reviewed changes

SindiBuklaji added client Pull requests that update TypeScript code. (Added Automatically!) and removed client Pull requests that update TypeScript code. (Added Automatically!) lock:artemis-test5 labels Jan 18, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`Modeling exercises`: Fix layout overlapping in modeling assessment #10145

`Modeling exercises`: Fix layout overlapping in modeling assessment #10145

Anishyou commented Jan 14, 2025 •

edited by SimonEntholzer

Loading

coderabbitai bot commented Jan 16, 2025

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

coderabbitai bot left a comment

zagemello left a comment

HawKhiem left a comment

ItsaaaMeMario left a comment

sachmii left a comment

vinceclifford left a comment

kevinfischer4 left a comment

sawys777 left a comment

SimonEntholzer left a comment

SindiBuklaji left a comment

Modeling exercises: Fix layout overlapping in modeling assessment #10145

Are you sure you want to change the base?

Modeling exercises: Fix layout overlapping in modeling assessment #10145

Conversation

Anishyou commented Jan 14, 2025 • edited by SimonEntholzer Loading

Checklist

General

Client

Motivation and Context

Description

Steps for Testing

Testserver States

Review Progress

Performance Review

Code Review

Manual Tests

Exam Mode Test

Performance Tests

Test Coverage

Screenshots

Summary by CodeRabbit

coderabbitai bot commented Jan 16, 2025

Walkthrough

Changes

Possibly related PRs

Suggested labels

Suggested reviewers

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

zagemello left a comment

Choose a reason for hiding this comment

HawKhiem left a comment

Choose a reason for hiding this comment

ItsaaaMeMario left a comment

Choose a reason for hiding this comment

sachmii left a comment

Choose a reason for hiding this comment

vinceclifford left a comment

Choose a reason for hiding this comment

kevinfischer4 left a comment

Choose a reason for hiding this comment

sawys777 left a comment

Choose a reason for hiding this comment

SimonEntholzer left a comment

Choose a reason for hiding this comment

SindiBuklaji left a comment

Choose a reason for hiding this comment

`Modeling exercises`: Fix layout overlapping in modeling assessment #10145

`Modeling exercises`: Fix layout overlapping in modeling assessment #10145

Anishyou commented Jan 14, 2025 •

edited by SimonEntholzer

Loading