[UI/UX:System] Add fullscreen button vue component#12936
Merged
Conversation
automateprojectmangement
Bot
moved this from Seeking Reviewer
to Work in Progress
in Submitty Development
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #12936 +/- ##
=========================================
Coverage 21.41% 21.41%
Complexity 9942 9942
=========================================
Files 268 268
Lines 37118 37118
Branches 495 495
=========================================
Hits 7948 7948
Misses 28679 28679
Partials 491 491
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
jndlansh
reviewed
Jun 23, 2026
jndlansh
reviewed
Jun 23, 2026
jndlansh
requested changes
Jun 23, 2026
Contributor
There was a problem hiding this comment.
I know it is a draft, but here are some suggestions:
- Deduplicate the .full-screen-mode CSS on one location
- Remove the unused scoped styles in the Vue component if not going to be used in future
- We could add an Escape key support to exit fullscreen.
Overall the component is really clean and the component works as described, good work!
Member
Author
Thank you! I have made the requested changes. Let me know if there are any other changes to be made. |
Contributor
I get this Server error when I enter the Course Settings, I don't see how your changes made this error, but I cannot duplicate this error on main
|
Member
Author
I'm not sure what caused this, I was not able to replicate it on the branch or on main. |
dagemcn
marked this pull request as ready for review
June 23, 2026 16:57
automateprojectmangement
Bot
moved this from Work in Progress
to Seeking Reviewer
in Submitty Development
jndlansh
approved these changes
Jun 23, 2026
github-project-automation
Bot
moved this from Seeking Reviewer
to Awaiting Maintainer Review
in Submitty Development
jndlansh
pushed a commit
to jndlansh/Submitty
that referenced
this pull request
Jul 1, 2026
### Why is this Change Important & Necessary? Closes Submitty#12269 Credit to @Akarshkushwaha for initial implementation and making the initial PR. ### What is the New Behavior? <!-- Include before & after screenshots/videos if the user interface has changed. --> A new vue component `FullScreenButton.vue` has been added. The issue requested for fullscreen buttons to be added to a few specific pages, and possibly more in the future, so making an importable component to use moving forward will streamline the development process. Furthermore, a toggleable fullscreen button has been added to the discussion forum, live chat, and simple grading (checkpoint) type gradeables. Shown below: Discussion Forum: <img width="2378" height="848" alt="image" src="https://github.com/user-attachments/assets/1f02befa-c291-4a22-b3a3-2898eb9f54c3" /> Chatroom: <img width="2264" height="1102" alt="image" src="https://github.com/user-attachments/assets/03db80b2-ec61-451f-93cc-007a438d7848" /> Simple Grading: <img width="2324" height="708" alt="image" src="https://github.com/user-attachments/assets/e70f55d2-6415-4cdd-8e15-199e6280a25e" /> ### What steps should a reviewer take to reproduce or test the bug or new feature? Visit each page and make sure the fullscreen button works as intended as well as the functionality of each page remaining the same while in fullscreen mode and non-fullscreen mode. ### Automated Testing & Documentation Not tested, Cypress test to come in this PR. ### Other information Not a breaking change. No migrations. No known security concerns.
prestoncarman
added a commit
that referenced
this pull request
Jul 1, 2026
* main: (78 commits) [Bugfix:TAGrading] Auto-open single file (#12625) [Feature:InstructorUI] Add sortable columns to manage students (#12957) [Dependency] Bump php-ds/php-ds from 1.7.0 to 2.0.1 in /site (#12827) [Refactor:TAGrading] Events Infrastructure & StatusBanner (#12941) [Dependency] Bump sqlalchemy from 2.0.48 to 2.0.51 in /.setup/pip (#12884) [Bugfix:Developer] trust hashicorp for vagrant install (#12968) [Feature:TAGrading] Backend for submission clustering (#12886) [Bugfix:InstructorUI] Missing Subsection in the Edit User form (#12955) [Bugfix:Submission] Warning Banners Accessibility Fix (#12956) [Bugfix:System] Preserve signup fields (#12939) [Bugfix:InstructorUI] Fix Csv Download of Subsections (#12954) [Bugfix:InstructorUI] Fix Manage Students Toggle Columns (#12953) [Feature:TAGrading] Persistent Auto-Open (#12931) [Bugfix:Submission] Dot File Upload (#12924) [Refactor:System] Declutter workers (#12815) [Bugfix:Developer] save/restore autograding_containers.json (#12952) [Bugfix:InstructorUI] Create Course Validation (#12949) [Testing:Notifications] Fix grade_inquiries.spec.js (#12950) [UI/UX:System] Add fullscreen button vue component (#12936) [Bugfix:TAGrading] Student Name Resize (#12946) ... # Conflicts: # .pylintrc
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
3 participants
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.
Why is this Change Important & Necessary?
Closes #12269
Credit to @Akarshkushwaha for initial implementation and making the initial PR.
What is the New Behavior?
A new vue component
FullScreenButton.vuehas been added. The issue requested for fullscreen buttons to be added to a few specific pages, and possibly more in the future, so making an importable component to use moving forward will streamline the development process.Furthermore, a toggleable fullscreen button has been added to the discussion forum, live chat, and simple grading (checkpoint) type gradeables. Shown below:
Discussion Forum:
Chatroom:
Simple Grading:
What steps should a reviewer take to reproduce or test the bug or new feature?
Visit each page and make sure the fullscreen button works as intended as well as the functionality of each page remaining the same while in fullscreen mode and non-fullscreen mode.
Automated Testing & Documentation
Not tested, Cypress test to come in this PR.
Other information
Not a breaking change.
No migrations.
No known security concerns.