Skip to content

[UI/UX:Forum] Reformat forum bar#11607

Merged
bmcutler merged 21 commits intomainfrom
reformat-forum-bar
May 23, 2025
Merged

[UI/UX:Forum] Reformat forum bar#11607
bmcutler merged 21 commits intomainfrom
reformat-forum-bar

Conversation

@hinyan17
Copy link
Copy Markdown
Contributor

Please check if the PR fulfills these requirements:

  • Tests for the changes have been added/updated (if possible)
  • Documentation has been updated/added if relevant
  • Screenshots are attached to Github PR if visual/UI changes were made

What is the current behavior?

image
The old forum bar layout overlaps buttons when the window size shrinks.

What is the new behavior?

image
Rewrote the forum bar to use native flexbox instead of Bootstrap's grid system. Buttons don't overlap now.
Fixes #11592

Other information?

Tested by increasing and decreasing window size and adding filters on the main forums page
Tested on Chrome

@codecov
Copy link
Copy Markdown

codecov bot commented Apr 22, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 22.13%. Comparing base (99bc4f9) to head (c3ed09a).
Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff            @@
##               main   #11607   +/-   ##
=========================================
  Coverage     22.13%   22.13%           
  Complexity     8928     8928           
=========================================
  Files           247      247           
  Lines         32170    32170           
  Branches         79       79           
=========================================
  Hits           7120     7120           
  Misses        24974    24974           
  Partials         76       76           
Flag Coverage Δ
autograder 21.60% <ø> (ø)
js 26.85% <ø> (ø)
migrator 100.00% <ø> (ø)
php 19.13% <ø> (ø)
python_submitty_utils 80.08% <ø> (ø)
submitty_daemon_jobs 88.88% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@hinyan17 hinyan17 moved this from Seeking Reviewer to Work in Progress in Submitty Development Apr 22, 2025
@hinyan17
Copy link
Copy Markdown
Contributor Author

Noticed that the layout is a little bit off for phones / smaller screen devices, will push a fix soon

@github-actions github-actions bot added the Abandoned PR - Needs New Owner No activity on PR for more than 2 weeks -- seeking new owner to complete label May 7, 2025
@JManion32 JManion32 removed the Abandoned PR - Needs New Owner No activity on PR for more than 2 weeks -- seeking new owner to complete label May 19, 2025
@JManion32 JManion32 self-assigned this May 19, 2025
@JManion32
Copy link
Copy Markdown
Contributor

Hey Hinyan, I've been looking into this PR and it seems fine to me even on smaller screen sizes. Could you elaborate on what is causing the layout to appear "a bit off" on smaller screens?

@hinyan17
Copy link
Copy Markdown
Contributor Author

Forgot about this PR, sorry. The layout was off when I used the "toggle device toolbar" button in chrome dev tools (near the top left). If I remember correctly the right part of the bar would wrap to a new line on smaller screens when it's not supposed to. I don't have a screenshot unfortunately, and I can't get the VM working right now, so if you would like to verify or fix it that would be great.

Made the buttons wrap a little better by only applying toolbar-right to "more". Likely not the best fit but it is a little better now as the buttos don't wrap as one unit.
Copy link
Copy Markdown
Contributor

@williamschen23 williamschen23 left a comment

Choose a reason for hiding this comment

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

diff is very ugly but refactor works as intended.

@github-project-automation github-project-automation bot moved this from Work in Progress to Awaiting Maintainer Review in Submitty Development May 23, 2025
JManion32 added 3 commits May 23, 2025 12:08
Clear filters now toggles between visible and hidden, rather than display: none and inline-block. This allows it to not shift elements when it is toggled. Now Cypress should pass and the changes should work as intended.
@bmcutler bmcutler merged commit 85efe39 into main May 23, 2025
23 checks passed
@bmcutler bmcutler deleted the reformat-forum-bar branch May 23, 2025 16:59
@github-project-automation github-project-automation bot moved this from Awaiting Maintainer Review to Done in Submitty Development May 23, 2025
bmcutler pushed a commit that referenced this pull request Sep 4, 2025
### Why is this Change Important & Necessary?
<!-- Include any GitHub issue that is fixed/closed using "Fixes
#<number>" or "Closes #<number>" syntax.
Alternately write "Partially addresses #<number>" or "Related to
#<number>" as appropriate. -->
Fixes #12017 
bug introduced in #11607

### What is the New Behavior?
<!-- Include before & after screenshots/videos if the user interface has
changed. -->

Forum search is fixed and a basic test is added to detect & prevent
future breakages.

### What steps should a reviewer take to reproduce or test the bug or
new feature?

Attempt to search on Main -> see no results, undefined array key error.
Attempt to search on this branch -> see results.

### Automated Testing & Documentation
<!-- Is this feature sufficiently tested by unit tests and end-to-end
tests?
If this PR does not add/update the necessary automated tests, write a
new GitHub issue and link it below.
Is this feature sufficiently documented on submitty.org?
Link related PRs or new GitHub issue to update documentation. -->

Adds a basic cypress test for forum searching.

### Other information
<!-- Is this a breaking change?  
Does this PR include migrations to update existing installations?  
Are there security concerns with this PR? -->

---------

Co-authored-by: Alex Lavallee <alex@lavallee.one>
Co-authored-by: williamschen23 <chenwill2005@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

Discussion Forum button overlap on small browser

4 participants