Ability to resize modal

[bradfrost]

Currently the modal occupies 50% of the screen height:

It would be nice to be able to drag the top border of the modal in order to to show more or less information. This would be accomplished with a little handler at the top of the modal, like so:

[sghoweri]

@bradfrost @bmuenzenmeyer In addition to having the ability to resize the panel vertically (or horizontally... if a layout toggle like in Dev tools was added) I'd strongly suggest we also update the panel to live side by side next to the iFrame viewer itself vs being more like an overlay as it is currently.

Without this, the content being overlapped is inaccessible and not viewable which can further interfere with things like the annotation viewer.

Before

After

With something around these lines in terms of CSS changes -- pre-refactoring and ITCSS classes, and ignoring all these painful ID selectors :(

#patternlab-html {
    height: 100%;
}

#patternlab-body {
    display: flex;
    flex-direction: column; // Or flex-direction row to switch to a horizontal layout...
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

#sg-viewport {
    position: relative;
    height: auto;
    flex-grow: 1;
}

#sg-gen-container {
    height: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#sg-vp-wrap {
    position: relative;
    top: auto;
    flex-grow: 1;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.sg-header {
    position: relative;
}

.sg-modal {
    position: relative;
    height: auto;
    flex-shrink: 1;
    flex-basis: 0;
    flex-grow: 1;
    bottom: auto;
    transition: all 0.2s ease; // @TODO: work through doing this with a 3D transform for better rendering performance
}

.sg-modal.active {
    flex-basis: 300px; //Or whatever resized height
}

[bradfrost]

@sghoweri that's great stuff, thanks so much for sharing! This has definitely been on the burner for a while, so it's great to see working code to make it happen. The CSS refactor is nearly complete, and once done I'm going to start implementing these features.

[frostyweather]

Added this within feature-pattern-info-panel branch. Here's a gif to show that it is working

[frostyweather]

Also as a note, I made the styling of it similar to that of the width resizer. Wasn't sure if we were going to add an svg or anything to these to show that these are resizable or leave them gray and bland on purpose

[frostyweather]

This is working in the feature-pattern-info-panel branch. Going to close now

[bmuenzenmeyer]

Great work @frostyweather - I will merge this asap.