Update: Move notify title above body text (fix #586)

[swashbuck]

Fix #586

Update

• Moves the notify title directly above the body text
• Applies to Notify popups that use notifyPopup.hbs
• Adds a .notify__text wrapper to the body and text area

Questions

1. Should this be a configuration option or just the default behavior?
2. Are there any use cases that this will break?
3. What are the disadvantages for using this layout? Is it a bad idea?

Testing

1. Add feedback with images. For example:

"_feedback": {
  "title": "Feedback",
  "_correct": {
    "title": "Correct feedback text.",
    "body": "That’s correct. Aliquip id nisi sunt do sint. Laboris nisi nisi Lorem tempor non proident. Nulla laboris ad incididunt irure officia cillum incididunt esse sunt laborum.",
    "_imageAlignment": "left",
    "_graphic": {
      "_src": "course/en/images/correct.jpg",
      "alt": "Correct"
    }
  },
  "_incorrectFinal": {
    "title": "Incorrect feedback text.",
    "body": "That’s not right. Elit dolore Lorem proident mollit ipsum pariatur dolore. Labore amet enim minim excepteur duis. Nulla eu mollit culpa veniam culpa sint adipisicing. Anim cupidatat do do mollit pariatur et.",
    "_imageAlignment": "right",
    "_graphic": {
      "_src": "course/en/images/incorrect.jpg",
      "alt": "Incorrect"
    }
  }
},

2. Test without images as well.

[oliverfoster]

Update

a. Moves the notify title directly above the body text when a graphic is present
b. Apples to Notify popups that use notifyPopup.hbs
c. Adds a .notify__text wrapper to the body and text area

Questions

1. Should this be a configuration option or just the default behavior?
2. Are there any use cases that this will break?
3. What are the disadvantages for using this layout? Is it a bad idea?

a. Do it all of the time not just when a graphic is present?

1. No config for this, it's a really abstract thing to describe.

I like it.

[swashbuck]

a. Do it all of the time not just when a graphic is present?

This change is made.

[cahirodoherty-learningpool]

👀

[kirsty-hames]

This works great thanks @swashbuck.

I think it makes sense to have the text and image container as sibling elements. This improves the default layout and further styling can be applied via flex properties to change the alignment e.g. center the text to the image like the screenshot in #586

[oliverfoster]

🎉 This PR is included in version 6.58.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀