feat/Issue-#1098:Allow Modal close on outside click

[andy-jdl]

Thank you for contributing to Quire! Please complete the form below to submit your pull request for review.

For the Title of this pull request, please use the format "Type/Issue-#: Brief description." For Type, the options are Fix, Feature, Docs, or Chore. Issue-# is only needed if this pull request addresses an existing issue.

Before submitting your PR, make sure that you can run the following commands: quire preview, quire build, quire pdf, and quire epub. If any of those core quire commands throw errors/yield unexpected behavior, we will NOT review the PR!

Checklist

Please put an X within the brackets that apply [X].

• I have read the CONTRIBUTING.md file

• I have made my changes in a new branch and not directly in the main branch

• This pull request is ready for final review by the Quire team

Is this pull request related to an open issue? If so, what is the issue number?

#1098

Please briefly describe the goal of this pull request and how it may impact Quire's functionality.

Allow modal to close when clicking outside of figure.

Please describe the changes you made, and call out any details you think are particularly relevant for the Quire team to note in their review.

• Extend modal constructor to listen to outside click event

Does this pull request necessitate changes to Quire's documentation?

No

Include screenshots of before/after if applicable.

Additional Comments

Additional styles need to be added to .q-lightbox-slides__slide to differentiate the modal from the slide. Currently the slide spans the entirety of the modal.

    &[data-lightbox-current] {
      transform: translateY(0);
      opacity: 1;
      display: block;
      transition: transform 0s, opacity 0.4s linear;

      img.q-figure__image {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
      }
    }

[andy-jdl]

PR to add the styling to quire starter template.

thegetty/quire-starter-default#53