Modal Systems Implementation

[voltaaage]

Issue

Objectives

Implement a modal system that allows you to view images in a larger view. This will be a pattern that can be implemented for other thumbnails, example boards, etc.

Ideally, you will be able to click a thumbnail and a modal pops up with larger image and caption with ability to next/previous between available images.

Setup

• This adds react-modal. Run npm install

Testing

• This is currently being implemented for the endcaps
  1. Open the builder
  2. Go to step 2 in the wizard
  3. Click on the thumbnail for the endcap modal to pop up

Testing next/previous Next: Clicking on the image and the right button should go to the next image Previous: Clicking on the left button should go to the previous image

Close Clicking on the top right button should close the modal

[brian-slate]

Could you add in caption support and ability to next/prev images? Otherwise it looks like a great first pass!

(noticed the npm package was missing - added that in too)

[voltaaage]

Will do!

[voltaaage]

Rough draft completed - basic functionality is there with very basic styles that I kind of threw together. I don't want to spend much more time on the look of it since it probably won't end up being the final look of it.

[voltaaage]

lol @trezy wut

[trezy]

:-D

[trezy]

I needed it for the order submission workflow. :-P

[voltaaage]

Gotcha - cool