david-yz-liu / memory-viz

Javascript library for creating beginner-friendly memory model diagrams.
https://www.cs.toronto.edu/~david/memory-viz/demo/
2 stars 7 forks source link

Add file input dialog #90

Closed yoonieaj closed 3 weeks ago

yoonieaj commented 3 weeks ago

Proposed Changes

Adds a modal to the file input section to clean up the user interface.

...

current input section: ![image](https://github.com/user-attachments/assets/5edb8bf6-a788-402c-beac-5d921128b618) input section following changes: ![image](https://github.com/user-attachments/assets/c4d1738a-464b-4661-8601-3446d2f801d9) The Upload JSON File button opens a modal: ![image](https://github.com/user-attachments/assets/772853c2-c970-4829-999d-a7c3d8f8c050) Screenshots of your changes (if applicable)

Type of Change

(Write an X or a brief description next to the type or types that best describe your changes.)

Type Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)
πŸ› Bug fix (non-breaking change that fixes an issue)
🎨 User interface change (change to user interface; provide screenshots) X
♻️ Refactoring (internal change to codebase, without changing functionality)
🚦 Test update (change that only adds or modifies tests)
πŸ“š Documentation update (change that only updates documentation)
πŸ“¦ Dependency update (change that updates a dependency)
πŸ”§ Internal (change that only affects developers or continuous integration)

Checklist

(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the [ ] into a [x] in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)

Before opening your pull request:

After opening your pull request:

Questions and Comments

Hello Professor! I managed to get the button to a reasonable size without having to rewrite any classes, but I can't seem to vertically center the file browse button within the modal window -- I included screenshots of this. From using the inspect tool, it seems like the file browse/input button is placed inside a div once the website is rendered but not centered within it. I'm not sure how to modify this div, or get rid of it. Do you have any suggestions on next steps? Thanks!

coveralls commented 3 weeks ago

Pull Request Test Coverage Report for Build 11168684885

Details


Totals Coverage Status
Change from base Build 11041171333: 0.05%
Covered Lines: 409
Relevant Lines: 439

πŸ’› - Coveralls