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

Create Events Page: Split the toggle buttons into 2 sections, and make one of 3 toggles required #1296

Merged
merged 16 commits into from
Jul 25, 2024

Conversation

JohnCox2211
Copy link
Contributor

The Bonners toggle will automatically toggle for Bonner events, but can be changed by the user if they wish and other event types can also use this toggle. The toggle state is saved between create event and edit event. The toggles are divided as requested into required and optional categories as well.

page. Added dividing line and styling in
new file createEvent.css. Need to ask if we want
toggle to check if event is Bonners
toggle. laid out click handler for toggle
switches to implement tomorrow
one category in create event page now. Fixed
formatting for when the webpage is in a smaller
window.
groups when the page is small
the user selectes to create a bonner event.
that is not checked as bonners, but the user
has freedom to check other boxes if wanted
@JohnCox2211
Copy link
Contributor Author

#1294 - github issue

https://trello.com/c/50TXOdHE - trello card

event tab now reflects whether the event is
bonners or not
Copy link
Contributor

@BrianRamsay BrianRamsay left a comment

Choose a reason for hiding this comment

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

The bonner toggle only should be there for Bonner events.

Let's clean up the html classes and styles and try and simplify what controls the width of the components. Use the bootstrap grid only, if possible, for rows and columns.

selected, but if a new toggle is selected, the
others are untoggled and the click one is on. Gave
the divider line its own div, but it sill needs
formatting work.
Copy link
Contributor

@BrianRamsay BrianRamsay left a comment

Choose a reason for hiding this comment

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

Let's clean up the css so we are relying more on bootstrap. the cutoff point should be xl, then you don't need min-width or the @media selector

// Determine which checkbox was clicked and its current checked status, uncheck others
$("#checkIsTraining, #checkServiceHours, #checkBonners").on('click', function (event) {
let $target = $(event.target);
$("#checkIsTraining, #checkServiceHours, #checkBonners").not($target).prop('checked', false);
Copy link
Contributor

Choose a reason for hiding this comment

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

we can just use $(event.target) in the not()

BrianRamsay and others added 2 commits July 25, 2024 14:41
media sizing in CSS, removed JS variable and
added its code directly to the line it was used
in.
Copy link

View Code Coverage

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