New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested Overlay #51

Closed
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
6 participants
@sandstrom
Contributor

sandstrom commented Jun 30, 2015

Basically does two things:

  1. Nests the modal within the overlay and
  2. adds a wrapping div outside the modal.

This allows for the scrolling behaviour outlined in #11. It also enables Holy Grail™ centering of the modal, using the CSS quoted below.

Everything is disabled by default (to avoid breaking existing usage). It's activated via a nestedOverlay. Unfortunately this makes the template pretty verbose, if this could be considered breaking it would be easier.

Closes #11

Please let me know what you think! @lukemelia @samselikoff


.ember-modal-wrapper {
  position: fixed;
  z-index: 99;
  height: 100vh;
  left: 0;
  right: 0;
  top: 0;
  overflow-y:scroll;
}

.ember-modal-overlay {
  display:flex;
  align-items:center;
  justify-content: center;
  min-height:100vh;
  padding:1em;
}

.ember-modal-overlay.translucent {
  background-color: hsla(0, 0%, 50%, 0.25);
}

/* basic modal style (an example, this is not necessary for the centering) */
.ember-modal-dialog {
  background-color:white;
  min-width:30em;
  max-width:80vw;
  min-height:20em;
  padding:1em;
  box-sizing: border-box;
  box-shadow:0px 4px 25px 4px rgba(0,0,0,0.30);
}

@sandstrom sandstrom changed the title from Support nested overlay to Nested overlay Jun 30, 2015

@sandstrom sandstrom changed the title from Nested overlay to Nested Overlay Jun 30, 2015

@sandstrom

This comment has been minimized.

Show comment
Hide comment
@sandstrom

sandstrom Jul 7, 2015

Contributor

@lukemelia @samselikoff friendly ping 😄 I'd love to hear your thoughts on this!

We use ember-modal-overlay in our app, and it's great! Though we'd need something along the lines of this PR for some upcoming UI enhancements, and if possible we'd prefer to keep using the mainline instead of a custom fork.

Contributor

sandstrom commented Jul 7, 2015

@lukemelia @samselikoff friendly ping 😄 I'd love to hear your thoughts on this!

We use ember-modal-overlay in our app, and it's great! Though we'd need something along the lines of this PR for some upcoming UI enhancements, and if possible we'd prefer to keep using the mainline instead of a custom fork.

@samselikoff

This comment has been minimized.

Show comment
Hide comment
@samselikoff

samselikoff Jul 7, 2015

Collaborator

I'll try to get to this in the next few days
On Tue, Jul 7, 2015 at 2:33 PM sandstrom notifications@github.com wrote:

@lukemelia https://github.com/lukemelia @samselikoff
https://github.com/samselikoff friendly ping [image: 😄] I'd love
to hear your thoughts on this!

We use ember-modal-overlay in our app, and it's great! Though we'd need
something along the lines of this PR for some upcoming UI enhancements, and
if possible we'd prefer to keep using the mainline instead of a custom fork.


Reply to this email directly or view it on GitHub
#51 (comment)
.

Collaborator

samselikoff commented Jul 7, 2015

I'll try to get to this in the next few days
On Tue, Jul 7, 2015 at 2:33 PM sandstrom notifications@github.com wrote:

@lukemelia https://github.com/lukemelia @samselikoff
https://github.com/samselikoff friendly ping [image: 😄] I'd love
to hear your thoughts on this!

We use ember-modal-overlay in our app, and it's great! Though we'd need
something along the lines of this PR for some upcoming UI enhancements, and
if possible we'd prefer to keep using the mainline instead of a custom fork.


Reply to this email directly or view it on GitHub
#51 (comment)
.

@sandstrom

This comment has been minimized.

Show comment
Hide comment
@sandstrom

sandstrom Jul 14, 2015

Contributor

@lukemelia @samselikoff Sorry to prod, just wondering if you've had time to look at this? 😄

Contributor

sandstrom commented Jul 14, 2015

@lukemelia @samselikoff Sorry to prod, just wondering if you've had time to look at this? 😄

@samselikoff

This comment has been minimized.

Show comment
Hide comment
@samselikoff

samselikoff Jul 14, 2015

Collaborator

Almost done, switched over an app to your branch yesterday and it seems to be working great! Today I'll know for sure.

Collaborator

samselikoff commented Jul 14, 2015

Almost done, switched over an app to your branch yesterday and it seems to be working great! Today I'll know for sure.

@samselikoff

This comment has been minimized.

Show comment
Hide comment
@samselikoff

samselikoff Jul 14, 2015

Collaborator

Works for me! Looks like there are some failing tests

Collaborator

samselikoff commented Jul 14, 2015

Works for me! Looks like there are some failing tests

@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Jul 14, 2015

Contributor

@sandstrom @samselikoff FYI, this needs a rebase.. must have been forked a version or so ago.

Contributor

chrislopresto commented Jul 14, 2015

@sandstrom @samselikoff FYI, this needs a rebase.. must have been forked a version or so ago.

@sandstrom

This comment has been minimized.

Show comment
Hide comment
@sandstrom

sandstrom Jul 14, 2015

Contributor

@chrislopresto Can you explain more, looking at the commits I don't see why a rebase would be needed (https://github.com/sandstrom/ember-modal-dialog/commits/master). But I'm happy to be corrected if I'm wrong! :)

Regarding the failing tests, I'm not very good at them. Is that something you'd like to assist with?
(I've fixed one issue, which was with == instead of ===)

Contributor

sandstrom commented Jul 14, 2015

@chrislopresto Can you explain more, looking at the commits I don't see why a rebase would be needed (https://github.com/sandstrom/ember-modal-dialog/commits/master). But I'm happy to be corrected if I'm wrong! :)

Regarding the failing tests, I'm not very good at them. Is that something you'd like to assist with?
(I've fixed one issue, which was with == instead of ===)

@samselikoff

This comment has been minimized.

Show comment
Hide comment
@samselikoff

samselikoff Jul 14, 2015

Collaborator

Looks to me like it's rebased off latest, so you're good there.

Your PR has one more failing test:

not ok 37 PhantomJS 1.9 - component:component-that-uses-modal-dialog: it shows component when open modal clicked
    ---
        actual: >
            null
        message: >
            Died on test #1     at http://localhost:7357/assets/test-support.js:2691
                at test (http://localhost:7357/assets/test-support.js:1647)
                at http://localhost:7357/assets/dummy.js:2621
                at http://localhost:7357/assets/vendor.js:150
                at tryFinally (http://localhost:7357/assets/vendor.js:30)
                at http://localhost:7357/assets/vendor.js:156
                at s (http://localhost:7357/assets/vendor.js:59170)
                at s (http://localhost:7357/assets/vendor.js:59170)
                at http://localhost:7357/assets/test-loader.js:29
                at http://localhost:7357/assets/test-loader.js:21
                at http://localhost:7357/assets/test-loader.js:40
                at http://localhost:7357/assets/test-support.js:5463: Assertion Failed: A helper named 'ember-modal-dialog-overlay' could not be found
        Log: >
    ...
Collaborator

samselikoff commented Jul 14, 2015

Looks to me like it's rebased off latest, so you're good there.

Your PR has one more failing test:

not ok 37 PhantomJS 1.9 - component:component-that-uses-modal-dialog: it shows component when open modal clicked
    ---
        actual: >
            null
        message: >
            Died on test #1     at http://localhost:7357/assets/test-support.js:2691
                at test (http://localhost:7357/assets/test-support.js:1647)
                at http://localhost:7357/assets/dummy.js:2621
                at http://localhost:7357/assets/vendor.js:150
                at tryFinally (http://localhost:7357/assets/vendor.js:30)
                at http://localhost:7357/assets/vendor.js:156
                at s (http://localhost:7357/assets/vendor.js:59170)
                at s (http://localhost:7357/assets/vendor.js:59170)
                at http://localhost:7357/assets/test-loader.js:29
                at http://localhost:7357/assets/test-loader.js:21
                at http://localhost:7357/assets/test-loader.js:40
                at http://localhost:7357/assets/test-support.js:5463: Assertion Failed: A helper named 'ember-modal-dialog-overlay' could not be found
        Log: >
    ...
@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Jul 14, 2015

Contributor

Whoops, don't mind me. :)

Contributor

chrislopresto commented Jul 14, 2015

Whoops, don't mind me. :)

@sandstrom

This comment has been minimized.

Show comment
Hide comment
@sandstrom

sandstrom Jul 14, 2015

Contributor

@chrislopresto I've pushed a couple of iterations, fixing issues in my PR.

However, for the most recent error I don't understand what's wrong (it only seem to affect one of the three modes/branches/scenarios). Any pointers?

not ok 37 PhantomJS 1.9 - component:component-that-uses-modal-dialog: it shows component when open modal clicked
    ---
        actual: >
            null
        message: >
            Assertion after the final `assert.async` was resolved
        Log: >
    ...
Contributor

sandstrom commented Jul 14, 2015

@chrislopresto I've pushed a couple of iterations, fixing issues in my PR.

However, for the most recent error I don't understand what's wrong (it only seem to affect one of the three modes/branches/scenarios). Any pointers?

not ok 37 PhantomJS 1.9 - component:component-that-uses-modal-dialog: it shows component when open modal clicked
    ---
        actual: >
            null
        message: >
            Assertion after the final `assert.async` was resolved
        Log: >
    ...
@Keeo

This comment has been minimized.

Show comment
Hide comment
@Keeo

Keeo Jul 15, 2015

Well thats awkward (commit e4222da)

ok 36 PhantomJS 2.0 - component:component-that-uses-modal-dialog: it doesn't show component on start
ok 37 PhantomJS 2.0 - component:component-that-uses-modal-dialog: it shows component when open modal clicked
ok 38 PhantomJS 2.0 - JSHint - unit/components: unit/components/component-that-uses-modal-dialog-test.js should pass jshint

1..38
# tests 38
# pass  38
# fail  0

Keeo commented Jul 15, 2015

Well thats awkward (commit e4222da)

ok 36 PhantomJS 2.0 - component:component-that-uses-modal-dialog: it doesn't show component on start
ok 37 PhantomJS 2.0 - component:component-that-uses-modal-dialog: it shows component when open modal clicked
ok 38 PhantomJS 2.0 - JSHint - unit/components: unit/components/component-that-uses-modal-dialog-test.js should pass jshint

1..38
# tests 38
# pass  38
# fail  0
@samselikoff

This comment has been minimized.

Show comment
Hide comment
@samselikoff

samselikoff Jul 15, 2015

Collaborator

@Keeo did you run that on 1.13.4? I think that's the version that's failing

Collaborator

samselikoff commented Jul 15, 2015

@Keeo did you run that on 1.13.4? I think that's the version that's failing

@Keeo

This comment has been minimized.

Show comment
Hide comment
@Keeo

Keeo Jul 16, 2015

Right, sorry didn't notice that travis is ran across multiple versions. Anyway after more time than I would like to admit I can't get it work either. Moreover it's not really fair to force @sandstorm to fix bug that is related to updated qunit in latest ember stack.

Keeo commented Jul 16, 2015

Right, sorry didn't notice that travis is ran across multiple versions. Anyway after more time than I would like to admit I can't get it work either. Moreover it's not really fair to force @sandstorm to fix bug that is related to updated qunit in latest ember stack.

@lukemelia

This comment has been minimized.

Show comment
Hide comment
@lukemelia

lukemelia Jul 16, 2015

Contributor

I asked @krisselden to take a look at this. He suspects a bug in App.reset.

Contributor

lukemelia commented Jul 16, 2015

I asked @krisselden to take a look at this. He suspects a bug in App.reset.

@lukemelia

This comment has been minimized.

Show comment
Hide comment
@lukemelia

lukemelia Jul 16, 2015

Contributor

I can confirm that this failure does not appear to be related to this PR.

Contributor

lukemelia commented Jul 16, 2015

I can confirm that this failure does not appear to be related to this PR.

@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Jul 27, 2015

Contributor

@sandstrom Would you mind rebasing against the latest master? Things should go green. Thanks.

Contributor

chrislopresto commented Jul 27, 2015

@sandstrom Would you mind rebasing against the latest master? Things should go green. Thanks.

@sandstrom

This comment has been minimized.

Show comment
Hide comment
@sandstrom
Contributor

sandstrom commented Jul 30, 2015

@sandstrom

This comment has been minimized.

Show comment
Hide comment
@sandstrom

sandstrom Aug 2, 2015

Contributor

@chrislopresto friendly ping 😄

Contributor

sandstrom commented Aug 2, 2015

@chrislopresto friendly ping 😄

@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Aug 5, 2015

Contributor

@sandstrom Sorry for the delay. I've been meaning to pull this down and wrap my head around the template verbosity. It may make sense to merge as is and plan a breaking change for a separate minor release in the near future.

Contributor

chrislopresto commented Aug 5, 2015

@sandstrom Sorry for the delay. I've been meaning to pull this down and wrap my head around the template verbosity. It may make sense to merge as is and plan a breaking change for a separate minor release in the near future.

@sandstrom

This comment has been minimized.

Show comment
Hide comment
@sandstrom

sandstrom Aug 5, 2015

Contributor

@chrislopresto I agree. This is intentionally non-breaking, but—as you are saying—I think we should do a breaking one in the near future.

Especially since this new html/css is a super-set of the previous functionality (in respect to being a visual overlay), i.e. one can easily get the same visual look as previously with minor css/html changes. Still, lets keep that in a separate release.

Contributor

sandstrom commented Aug 5, 2015

@chrislopresto I agree. This is intentionally non-breaking, but—as you are saying—I think we should do a breaking one in the near future.

Especially since this new html/css is a super-set of the previous functionality (in respect to being a visual overlay), i.e. one can easily get the same visual look as previously with minor css/html changes. Still, lets keep that in a separate release.

@sandstrom

This comment has been minimized.

Show comment
Hide comment
@sandstrom

sandstrom Aug 12, 2015

Contributor

@chrislopresto @lukemelia Hey guys, what's the status here? Do you feel ready to pull this?

Contributor

sandstrom commented Aug 12, 2015

@chrislopresto @lukemelia Hey guys, what's the status here? Do you feel ready to pull this?

@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Aug 12, 2015

Contributor

@sandstrom I started a branch over the weekend that passes the test suites and greatly simplifies the templates. We are going to make some minor breaking changes in this release in order to simplify the addon.

My next step is to incorporate your approach to enable this scrolling behavior. Since we're willing to make some small breaking changes, there will be no need to add the {{#if nestedOverlay}} guard, so that's helpful. My timeframe goal is to have everything merged and released by the weekend. Your input will be really helpful.

  • Are you using ember-tether in your projects that need this scrolling? The reason I ask is that ember-tehter/tether.js appends its element as a child of the body tag, so there is no benefit to nesting within the template. In fact, the desired centered scrolling behavior is possible on master. I threw together this example: https://github.com/yapplabs/ember-modal-dialog/compare/centered-scrolling
  • Along those lines, could you please provide an example of the nested scrolling in the dummy app? We would like to start an 'examples' section within the dummy app to ensure that the addon supports important use cases like this going forward.

Sorry for the delay, but I think the end result will be well worth it. Thanks for the help.

Contributor

chrislopresto commented Aug 12, 2015

@sandstrom I started a branch over the weekend that passes the test suites and greatly simplifies the templates. We are going to make some minor breaking changes in this release in order to simplify the addon.

My next step is to incorporate your approach to enable this scrolling behavior. Since we're willing to make some small breaking changes, there will be no need to add the {{#if nestedOverlay}} guard, so that's helpful. My timeframe goal is to have everything merged and released by the weekend. Your input will be really helpful.

  • Are you using ember-tether in your projects that need this scrolling? The reason I ask is that ember-tehter/tether.js appends its element as a child of the body tag, so there is no benefit to nesting within the template. In fact, the desired centered scrolling behavior is possible on master. I threw together this example: https://github.com/yapplabs/ember-modal-dialog/compare/centered-scrolling
  • Along those lines, could you please provide an example of the nested scrolling in the dummy app? We would like to start an 'examples' section within the dummy app to ensure that the addon supports important use cases like this going forward.

Sorry for the delay, but I think the end result will be well worth it. Thanks for the help.

@sandstrom

This comment has been minimized.

Show comment
Hide comment
@sandstrom

sandstrom Aug 12, 2015

Contributor

@chrislopresto Sounds good!

  • Not using ember-tether.
  • I've added CSS in the PR description (#51 (comment))
Contributor

sandstrom commented Aug 12, 2015

@chrislopresto Sounds good!

  • Not using ember-tether.
  • I've added CSS in the PR description (#51 (comment))
@samselikoff

This comment has been minimized.

Show comment
Hide comment
@samselikoff

samselikoff Aug 18, 2015

Collaborator

@chrislopresto Thanks for putting that centered scrolling example together. I checked it out, and it does not replicate the behavior I outlined in issue 11. Do you know if that behavior is possible? I spent some time with tether but I'm not familiar enough to know if it's possible.

Collaborator

samselikoff commented Aug 18, 2015

@chrislopresto Thanks for putting that centered scrolling example together. I checked it out, and it does not replicate the behavior I outlined in issue 11. Do you know if that behavior is possible? I spent some time with tether but I'm not familiar enough to know if it's possible.

@samselikoff

This comment has been minimized.

Show comment
Hide comment
@samselikoff

samselikoff Aug 18, 2015

Collaborator

In particular I want (1) the normal app content to not scroll, and (2) the modal content to scroll if the mouse is over the overlay but not the modal itself

Collaborator

samselikoff commented Aug 18, 2015

In particular I want (1) the normal app content to not scroll, and (2) the modal content to scroll if the mouse is over the overlay but not the modal itself

@samselikoff

This comment has been minimized.

Show comment
Hide comment
@samselikoff

samselikoff Aug 18, 2015

Collaborator

I haven't dug into toggleInPlace but that seems to add the modal to the document flow. Is it possible to use that and simultaneously tether the modal to a target, e.g. modal-overlays? This would be great bc then, some of my modals could have the behavior I want, but I could make others that tether to different elements if I want them to be fixed.

Collaborator

samselikoff commented Aug 18, 2015

I haven't dug into toggleInPlace but that seems to add the modal to the document flow. Is it possible to use that and simultaneously tether the modal to a target, e.g. modal-overlays? This would be great bc then, some of my modals could have the behavior I want, but I could make others that tether to different elements if I want them to be fixed.

@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Aug 18, 2015

Contributor

@samselikoff I believe the way forward here is on a separate branch I have going here: https://github.com/yapplabs/ember-modal-dialog/tree/sandstrom-master

On that branch a modal can specify a layout via the positioning property (soon to be renamed). You will probably want to specify positioning='nested'. That will give you a set of nested divs .wrapper > .overlay > .container, which should provide a workable structure for this scrolling behavior.

Contributor

chrislopresto commented Aug 18, 2015

@samselikoff I believe the way forward here is on a separate branch I have going here: https://github.com/yapplabs/ember-modal-dialog/tree/sandstrom-master

On that branch a modal can specify a layout via the positioning property (soon to be renamed). You will probably want to specify positioning='nested'. That will give you a set of nested divs .wrapper > .overlay > .container, which should provide a workable structure for this scrolling behavior.

@samselikoff

This comment has been minimized.

Show comment
Hide comment
@samselikoff

samselikoff Aug 18, 2015

Collaborator

@chrislopresto that would be perfect. Then I could also change positioning to fixed or something else, to get the ember-tether goodness?

Collaborator

samselikoff commented Aug 18, 2015

@chrislopresto that would be perfect. Then I could also change positioning to fixed or something else, to get the ember-tether goodness?

@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Aug 18, 2015

Contributor

Tether.js (wrapped by ember-tether) appends its content to the body tag. renderInPlace currently overrides usage of tether. So that combo is a no-go.

These sorts of confusing combinations/misleading templates are going away with the new computed layout approach.

Contributor

chrislopresto commented Aug 18, 2015

Tether.js (wrapped by ember-tether) appends its content to the body tag. renderInPlace currently overrides usage of tether. So that combo is a no-go.

These sorts of confusing combinations/misleading templates are going away with the new computed layout approach.

@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Aug 18, 2015

Contributor

From the sounds of it, you probably do not want tether. Instead, we want some divs directly under body, some with a height: 100vh, some with overflow-y: scroll. Since we won't need to reposition the modal, wormhole alone should do the trick.

Contributor

chrislopresto commented Aug 18, 2015

From the sounds of it, you probably do not want tether. Instead, we want some divs directly under body, some with a height: 100vh, some with overflow-y: scroll. Since we won't need to reposition the modal, wormhole alone should do the trick.

@sandstrom

This comment has been minimized.

Show comment
Hide comment
@sandstrom

sandstrom Aug 18, 2015

Contributor

@samselikoff I've got the layout your gif shows (in #11) working in our app. Ping me on slack/irc and I'll give you the details.

Contributor

sandstrom commented Aug 18, 2015

@samselikoff I've got the layout your gif shows (in #11) working in our app. Ping me on slack/irc and I'll give you the details.

@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Aug 18, 2015

Contributor

Nice.

Contributor

chrislopresto commented Aug 18, 2015

Nice.

@samselikoff

This comment has been minimized.

Show comment
Hide comment
@samselikoff

samselikoff Aug 18, 2015

Collaborator

@chrislopresto that sounds right. I'd love to have an option to toggle on a per-modal basis because I'd like to have tethered modals and fullscreen modals in the same app.

Collaborator

samselikoff commented Aug 18, 2015

@chrislopresto that sounds right. I'd love to have an option to toggle on a per-modal basis because I'd like to have tethered modals and fullscreen modals in the same app.

@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Aug 19, 2015

Contributor

In the current release you can set useEmberTether=false on individual modals. In the next release we'll have a more intentional and documented api.

Contributor

chrislopresto commented Aug 19, 2015

In the current release you can set useEmberTether=false on individual modals. In the next release we'll have a more intentional and documented api.

@ianpetzer

This comment has been minimized.

Show comment
Hide comment
@ianpetzer

ianpetzer Sep 3, 2015

@chrislopresto @samselikoff I've hoping for very much the same functionality that @samselikoff described with his animated gifs.

Are you hoping to merge the sandstrom-master branch back into master at some point?

I'm just tying to understand if this is something ember-modal-dialog wants to support?

Thanks

ianpetzer commented Sep 3, 2015

@chrislopresto @samselikoff I've hoping for very much the same functionality that @samselikoff described with his animated gifs.

Are you hoping to merge the sandstrom-master branch back into master at some point?

I'm just tying to understand if this is something ember-modal-dialog wants to support?

Thanks

@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Sep 4, 2015

Contributor

@ianpetzer Yes, we are aiming to merge #76 shortly. This will provide the structure you need for the scrolling technique @samselikoff described. I believe he has this in a (production?) app based on a fork in this vein.

I just got back from a vacation that delayed some changes by a week, but I'm digging back in tonight.

Contributor

chrislopresto commented Sep 4, 2015

@ianpetzer Yes, we are aiming to merge #76 shortly. This will provide the structure you need for the scrolling technique @samselikoff described. I believe he has this in a (production?) app based on a fork in this vein.

I just got back from a vacation that delayed some changes by a week, but I'm digging back in tonight.

@ianpetzer

This comment has been minimized.

Show comment
Hide comment
@ianpetzer

ianpetzer Sep 4, 2015

Great news!

Thanks for the update. I'll see how much success I have with the branch in
the interim

On Fri, Sep 4, 2015 at 3:12 AM, Chris LoPresto notifications@github.com
wrote:

@ianpetzer https://github.com/ianpetzer Yes, we are aiming to merge #76
#76 shortly. This
will provide the structure you need for the scrolling technique
@samselikoff https://github.com/samselikoff described. I believe he has
this in a (production?) app based on a fork in this vein.

I just got back from a vacation that delayed some changes by a week, but
I'm digging back in tonight.


Reply to this email directly or view it on GitHub
#51 (comment)
.

ianpetzer commented Sep 4, 2015

Great news!

Thanks for the update. I'll see how much success I have with the branch in
the interim

On Fri, Sep 4, 2015 at 3:12 AM, Chris LoPresto notifications@github.com
wrote:

@ianpetzer https://github.com/ianpetzer Yes, we are aiming to merge #76
#76 shortly. This
will provide the structure you need for the scrolling technique
@samselikoff https://github.com/samselikoff described. I believe he has
this in a (production?) app based on a fork in this vein.

I just got back from a vacation that delayed some changes by a week, but
I'm digging back in tonight.


Reply to this email directly or view it on GitHub
#51 (comment)
.

@ianpetzer

This comment has been minimized.

Show comment
Hide comment
@ianpetzer

ianpetzer Sep 4, 2015

@sandstrom @samselikoff Any advice on how to get the modals working as described in #11 ?

I've pulled in the sandstrom-master branch, copied in the css described at the top of this PR and defined my modal with:

{{#modal-dialog translucentOverlay=true close='backToCountryPage' 
  clickOutsideToClose=true positioning='nested'}}

However, the scroll is still happening on the page in the background instead of the modal.

Thanks for any suggestions

ianpetzer commented Sep 4, 2015

@sandstrom @samselikoff Any advice on how to get the modals working as described in #11 ?

I've pulled in the sandstrom-master branch, copied in the css described at the top of this PR and defined my modal with:

{{#modal-dialog translucentOverlay=true close='backToCountryPage' 
  clickOutsideToClose=true positioning='nested'}}

However, the scroll is still happening on the page in the background instead of the modal.

Thanks for any suggestions

@sandstrom

This comment has been minimized.

Show comment
Hide comment
@sandstrom

sandstrom Sep 4, 2015

Contributor

@ianpetzer With the 'sandstrom-master' plus the example in the dummy app it should work. Relevant files below.

// BEGIN-SNIPPET centered-scrolling

<div class='example' id='example-centered-scrolling'>
<h2>Centered Scrolling</h2>
<button {{action 'toggleCenteredScrolling'}}>Do It</button>
{{code-snippet name='centered-scrolling.hbs'}}
<div id='container-centered-scrolling'>
{{#if isShowingCenteredScrolling}}
{{!-- BEGIN-SNIPPET centered-scrolling --}}
{{#modal-dialog
close='toggleCenteredScrolling'
translucentOverlay=true
positioning='nested'
alignment='none'
container-class='centered-scrolling-container'
overlay-class='centered-scrolling-overlay'
wrapper-class='centered-scrolling-wrapper'
}}
{{partial 'placeholder-content'}}
<button {{action 'toggleCenteredScrolling'}}>Close</button>
{{/modal-dialog}}
{{!-- END-SNIPPET --}}
{{/if}}
</div>
</div>

Contributor

sandstrom commented Sep 4, 2015

@ianpetzer With the 'sandstrom-master' plus the example in the dummy app it should work. Relevant files below.

// BEGIN-SNIPPET centered-scrolling

<div class='example' id='example-centered-scrolling'>
<h2>Centered Scrolling</h2>
<button {{action 'toggleCenteredScrolling'}}>Do It</button>
{{code-snippet name='centered-scrolling.hbs'}}
<div id='container-centered-scrolling'>
{{#if isShowingCenteredScrolling}}
{{!-- BEGIN-SNIPPET centered-scrolling --}}
{{#modal-dialog
close='toggleCenteredScrolling'
translucentOverlay=true
positioning='nested'
alignment='none'
container-class='centered-scrolling-container'
overlay-class='centered-scrolling-overlay'
wrapper-class='centered-scrolling-wrapper'
}}
{{partial 'placeholder-content'}}
<button {{action 'toggleCenteredScrolling'}}>Close</button>
{{/modal-dialog}}
{{!-- END-SNIPPET --}}
{{/if}}
</div>
</div>

@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Sep 4, 2015

Contributor

@ianpetzer Just a heads up.. I have done a fair bit of work off of the sandstrom-master branch that will serve as the basis for our next release. I'd be happy to chat here or in the EmberJS slack to make sure your new work won't need to be refactored on (let's say) Monday.

Contributor

chrislopresto commented Sep 4, 2015

@ianpetzer Just a heads up.. I have done a fair bit of work off of the sandstrom-master branch that will serve as the basis for our next release. I'd be happy to chat here or in the EmberJS slack to make sure your new work won't need to be refactored on (let's say) Monday.

@ianpetzer

This comment has been minimized.

Show comment
Hide comment
@ianpetzer

ianpetzer Sep 4, 2015

@sandstrom Thanks for that.. I've managed to get it up and running although I haven't figured out yet why my modal is shifted to the right instead of centered... Will look into it.

@chrislopresto That would be great. Thanks. Monday would be perfect

ianpetzer commented Sep 4, 2015

@sandstrom Thanks for that.. I've managed to get it up and running although I haven't figured out yet why my modal is shifted to the right instead of centered... Will look into it.

@chrislopresto That would be great. Thanks. Monday would be perfect

@chrislopresto

This comment has been minimized.

Show comment
Hide comment
@chrislopresto

chrislopresto Sep 6, 2015

Contributor

@ianpetzer When you have a moment, take a look at #79 It incorporates @sandstrom's work and includes a working "centered scrolling" example from @samselikoff in the modal-dialog portion of the dummy app (at the bottom of the page).

Contributor

chrislopresto commented Sep 6, 2015

@ianpetzer When you have a moment, take a look at #79 It incorporates @sandstrom's work and includes a working "centered scrolling" example from @samselikoff in the modal-dialog portion of the dummy app (at the bottom of the page).

@ianpetzer

This comment has been minimized.

Show comment
Hide comment
@ianpetzer

ianpetzer Sep 7, 2015

@chrislopresto Thanks this is looking great. Having a play with it now.

ianpetzer commented Sep 7, 2015

@chrislopresto Thanks this is looking great. Having a play with it now.

@lukemelia

This comment has been minimized.

Show comment
Hide comment
@lukemelia

lukemelia Sep 10, 2015

Contributor

Closing in favor of #79, which I've just merged and will release momentarily.

Contributor

lukemelia commented Sep 10, 2015

Closing in favor of #79, which I've just merged and will release momentarily.

@lukemelia lukemelia closed this Sep 10, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment