scaling issues on buttons on course proposals is fixed#1722
Conversation
MImran2002
left a comment
MImran2002
left a comment
There was a problem hiding this comment.
fix 1: Make sure the steps are coherent as in this is
the bigger version: 
the medium:
the small:
as you see the medium is this way because in the original when the page reaches that medium size the buttons goes around it that is why the step dots collapsed into triangle. When this new implementation is done you can see the step dots no longer needs to be triangle anymore because in the small screen you are able to achieve this without turning the step dots into triangle.
MImran2002
left a comment
MImran2002
left a comment
There was a problem hiding this comment.
fix 2: This is on the universal UI principle that we always want next to be on the right and previous to be on the left not both previous and next to be in the same category.
… page indicators - slcNewProposal: restored Next/Submit to RIGHT column, Previous/Cancel/Exit on LEFT; dots now use flex centering on a full-width row so they stay straight at all screen sizes; flex-wrap on button groups prevents overflow - emergencyContactInfo & insuranceInfo: responsive button rows now stack centered on mobile and sit on opposite ends on wider screens; buttons wrap cleanly instead of overflowing
| <div class="row align-items-end pt-5 pb-5"> | ||
| <div class="col col-xl col-12 d-flex gap-2 justify-content-xl-start justify-content-center"> | ||
| <div class="row align-items-center pt-5 pb-5"> | ||
| <div class="col col-xl col-12 d-flex flex-wrap gap-2 justify-content-xl-start justify-content-center mb-2 mb-xl-0"> |
There was a problem hiding this comment.
i talked to Scott and he told me the buttons need to be closer as you shrink the page and when it is shrink smaller the buttons should only be on top of the three dots but not on top and bottom of the three dots.
Only slcNewProposal.html changes should be on this branch.
Separated the layout into two rows: top row holds Previous/Cancel/Exit on the left and Next/Submit on the right (always on the same row at any screen size), bottom row holds the centered step dots. This prevents the dots from ever pushing right buttons below them when the page is scaled.
Cancel/Exit stays on the left, Save & Exit/Continue stays on the right. Buttons use flex-wrap and responsive columns so they scale cleanly on all screen sizes without overflow.
munsakad
force-pushed
the
bright_and_dee-course_proposal_button_scaling_issues
branch
from
5099352 to
60f10ef
Compare
MImran2002
left a comment
MImran2002
left a comment
There was a problem hiding this comment.
There are insuranceinfo.html, emergencyContactInfo.html and docker-compos.yml being changed which are not related to issue description. Please remove them and if they are really required.
munsakad
requested review from
NYABUTOA,
brightfietsop-ux,
fritzj2,
johnlolonga19 and
zhytkovd
|
The problem seems to be fixed by your changes; however, there are three extra files that don't address this issue. Remove them from the staged changes, and it should be good. app/templates/main/emergencyContactInfo.html, app/templates/main/insuranceInfo.html, and .devcontainer/docker-compose.yml seem not to be related to this issue. |
NYABUTOA
left a comment
NYABUTOA
left a comment
There was a problem hiding this comment.
This looks good. John and I have reviewed your work. The logic is solid, and placing the Next button on the right with the others on the left makes sense. It's more visible and keeps the page more organized.
johnlolonga19
left a comment
johnlolonga19
left a comment
There was a problem hiding this comment.
The course proposal page looks good as far as the buttons don't overlap and stay in the same line when scaling the page
MImran2002
left a comment
MImran2002
left a comment
There was a problem hiding this comment.
talked with Brian and Scott, implement the buttons as in if the button text is unnecessarily long reduce it without losing the semantic or tyry findings was to make the button more good looking study other forms like google form.
…Team/celts into bright_and_dee-course_proposal_button_scaling_issues
…https://github.com/BCStudentSoftwareDevTeam/celts into bright_and_dee-course_proposal_button_scaling_issues
MImran2002
left a comment
MImran2002
left a comment
There was a problem hiding this comment.
I think this is the last fix as you can see the buttons looks good awesome. but when the button stack with each other you can see the one with the left buttons are on top and the right ones are at the button in between them is extra space. With this i think everything looks good. I know this is going back and forth but this is software development and these PR processes would sometimes take days and weeks.
MImran2002
left a comment
MImran2002
left a comment
There was a problem hiding this comment.
and the space between cancel and "save and exit" are not consistent with other button spacing on the left in other pages. This should be fixed too.
MImran2002
left a comment
MImran2002
left a comment
There was a problem hiding this comment.
Fixes: We generally don't create function unless it is truly logic and cannot be handle by html.
the hidebutton and showbutton are functions we won't need because there are build in functions for those. So I would not have those functions.
Fixes: The reason the spacing among the buttons are there is because eventhough for example $("#nextButton").hide(); hides the button it doesn't hide the div that wraps around the button.
A possible solution is to assign ids to those div that wrap around the buttons. Then use those ids to hide the div (if you hide the div you also hide the button nested in it) by adding a bootstrap class that is similar to display:none to hide it or remove the bootstrap class to make it appear.
In this way you are not creating functions yet are using build in methods.
Link to the resources for the classes and methods are here:
https://www.w3schools.com/jquery/html_addclass.asp
https://www.w3schools.com/jquery/html_removeclass.asp
https://getbootstrap.com/docs/4.0/utilities/display/
7 participants
Issue Description
Fixes #1514
The navigation buttons on the course proposal page were split across two separate divs: some on the left and some on the right, causing them to scale and align inconsistently depending on screen size.
Changes Made
Moved all action buttons (Next, Save & Exit, Exit, Submit and Approve) into a single left-aligned div.
Removed ms-2 margin classes from buttons and replaced with a gap-2 utility on the container for consistent spacing.
Removed the now-empty right-side button div.
Testing
Navigate to the course proposal page (/serviceLearning/proposal/new).
Resize the browser window to different screen sizes and confirm all buttons stay grouped and scale correctly.
Verify the "Submit and Approve" button still only appears for CELTS admins.
Confirm Previous, Cancel, Save & Exit, Exit, Next, and Submit and Approve buttons all function as expected.