Skip to content

Conditional logic for rendering django messages via message-box vs new modal#1

Merged
spark-c merged 6 commits intomainfrom
conditional-modal
Oct 2, 2021
Merged

Conditional logic for rendering django messages via message-box vs new modal#1
spark-c merged 6 commits intomainfrom
conditional-modal

Conversation

@spark-c
Copy link
Owner

@spark-c spark-c commented Sep 20, 2021

This branch represents an improved version of the current PR "Contact Form Feedback as Modal Issue#357" found here

This branch does not break slim.html and will properly render the Contact form stuff as a modal, and everything else as a message-box.


Per-File Changes (diffs vs main)

contact/templates/contact/contact.html

Added HTML structure for modal. This is copied (and adapted classnames) from the existing modal implementation for the navbar's "Login" button. This HTML conditionally renders depending on whether or not there is a message to display.

The modal will {% include "_messages.html" %} in order to get the success/failure message.

The button to close the modal has an "onclick" function which takes the user to the Home page.

contact/views.py

The ContactView itself now redirects to itself (/contact) for the purpose of displaying the modal. The modal button then redirects the user Home.

Added two things:

  • a flag message_as_modal = True so that we can tell the template to render the message as a modal
  • the django method get_context_data, which is what we use to communicate variables from the View over to the template. Here I've just added the message_as_modal value to the context dictionary.

chipy_org/templates/_messages.html

Added an if-statement. If message_as_modal is True, then return the message that the modal wants. Otherwise, do what it was already doing (render the message-box exactly how it was).

chipy_org/templates/shiny/slim.html

I've reverted my change that initially broke the message-boxes!

Two (small) new changes:

  • There were a few divs that were containers for the alert/message-box. Since they are used exclusively for this message-box, I put them alongside the message-box HTML in _messages.html.
    • (in my opinion,) this will make the code a bit more readable if the modal functionality is made reusable.
      • (I have another branch where I've made the modal functionality reusable)
  • The message-box will only render if message_as_modal is NOT set to True.

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.

1 participant