Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix animated curve3D model display width #223

Merged
merged 1 commit into from
Sep 4, 2023

Conversation

sayomaki
Copy link
Contributor

@sayomaki sayomaki commented Sep 4, 2023

Description

Follow-up PR to #218 and #219 with further enhancements to the 3D animated curve render screen, so that it will occupy more up to the maximally available space and scale accordingly to browser width.

Demonstration and idea has been discussed and conveyed in #218, refer to the images below to see how it will look. Note the extra space surrounding the animation interface/render before and after the changes in this PR.

Previous design (as of #219) New design
before after

The PR is not linked to close the relevant issue (#218) after merging, in order to leave it open for further comments. However, if the issue is deemed resolved, you may go ahead and close it after merging this PR.

Technical Details: There is a surrounding <div> element added to the canvas output to center and align the animated render, with a top margin added to retain some space between the controls. Also, the whole component is wrapped in a single <div> now which means the original fragment tags are no longer needed and hence removed.

Type of change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Code has been tested locally, the width of the rendered animation should scale accordingly to the browser width and take up maximum available space. All linting and tests have passed with no additional warnings or errors introduced (by this PR).

Checklist:

(Note: not all checklist items might be applicable to this PR)

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules

Copy link
Member

@martin-henz martin-henz left a comment

Choose a reason for hiding this comment

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

Great. Much better! I think this settles it. I'll close the issue.

@martin-henz martin-henz merged commit 5677abc into source-academy:master Sep 4, 2023
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants