Check Iframe when the app is embedded in Amnesty site

[robertocarroll]

Do we need the iFrame resizer? Need to investigate further:

[pauldwaite]

From Slack:

the height of the app changes so https://wearethoughtfox.github.io/amnesty-facebook/app/iframe-resizer-tests.html changes height depending on the view.

Yup: we either:

1. Make the app have a fixed height regardless of which view is being displays, so that the iframe it’s embedded in can stay the same size after page load, and still fit the entire app within it without scrolling.
2. Leave the app with a variable height between views, and change the height of the iframe it’s embedded in when its views change, using iframe resizer calls.
3. Leave the app with a variable height between views, and don’t change the height of the iframe its embedded in after page load; let users scroll it instead.

[robertocarroll]

They are planning to embed it in this page so it wouldn't be full screen and it wouldn't want a separate scroll bar if possible: https://www.amnesty.org/en/get-involved/brave/

[paulwaitehomeoffice]

it wouldn't want a separate scroll bar if possible

So is the goal to make it appear like it’s a normal part of the Amnesty website page, and not make it obvious that it’s in a scrollbar?

Option 2 is the closest to that I think — Amnesty set the width of the iframe, and we then set the height of the iframe on load, and on iframe resize, and whenever the app changes views using iframe resizer. (They’ll have to have implemented iframe resizer on their Brave page.)

(And as you suggested on Slack, we may be able to to change the app so that all views are present and affect the app’s layout, without being visible, at all times, so that the app doesn’t actually change height as views get shown and hidden.)

That will mean there’s a reasonable chance the Amnesty Brave host page will load, and then some time after the iframe will increase or decrease in height, as our app can’t resize the iframe until it’s loaded.

[robertocarroll]

That sounds great. What's left to do on this? I added the resizer and it seems to be kind of working here: https://wearethoughtfox.github.io/amnesty-facebook/app/iframe-resizer-tests.html

Though I'm not sure how - doesn't it need

 onRender: function() {
   if ('parentIFrame' in window) {
      parentIFrame.size();
    }
  }

in every view rather than just the first one?

[pauldwaite]

Sure — well, I think we call parentIFrame.size(); when the friends list view is shown, right? As that’s the tallest view, once we’ve called it there, the iframe is tall enough to contain all subsequent views without scrolling.

[robertocarroll]

But don't we need the friends list view to be "present" in some way on the first view so that the height doesn't bounce around?

The aim is, I think, to try to keep the iFrame (and the app) height fairly consistent (though a little bit of movement is probably inevitable). What do you reckon?

[pauldwaite]

Yup — if you want the iframe height to stay the same at all times, instead of increasing in height when the friends view appears (like it does now), then either the friends view will have to take up layout space from the start, or we’ll have to work out how tall it will be, and make the iframe tall enough for it to fit in advance.

[robertocarroll]

Can we add an invisible friendsContainer to all views somehow?

.friendsContainer {
  height: 60vh;
  overflow-y: auto;
  width: 100%;
}

[pauldwaite]

Could do. How about applying min-height:60vh to every other view that appears where the friends list view does?

In the master branch, .friendsContainer has height:60vh. So we know how tall it will be.

[robertocarroll]

That does make more sense, but I've just tried adding min-height:60vh to #app and it didn't seem to do anything to the height of iframe-resizer-tests.html Any ideas?

[pauldwaite]

Oh yes sorry, that probably wouldn’t work at all. vh stands for “viewport height”, and 60vh means “60% as tall as the viewport.”

For pages showing in an iframe, the iframe is the viewport, so 60vh would just make an element 60% as tall as the iframe already is.

[robertocarroll]

I've added a friendsContainer with 25 dummy entries and then hidden it using visibility: hidden;

https://wearethoughtfox.github.io/amnesty-facebook/app/iframe-resizer-tests.html

What do you reckon? Too strange?

[pauldwaite]

No, that works. I mean presumably we know how tall the friendsContainer is with 25 entries, so we could set the min-height of the other views to match that.

That might be simpler than an invisible friends container? Unless the friends list vertical dimensions vary a lot based on viewport width or something?

[robertocarroll]

That variation across devices was what I was worried about, but I hadn't actually thought about it too much - the images are pixel height so perhaps it's the same across devices?

[pauldwaite]

Could well be — you did the CSS for that list, right? Did you do any different styles for different viewport dimensions?

[robertocarroll]

There's no media queries. The only variation comes from being 60% of the viewport height and that viewport being different on different devices.

[pauldwaite]

Cool, so — at least ignoring font size adjustments that would make the names taller than the images — you can rely on the list of 25 people being a given height, and so it’s possible to set the min-height of other views to the same value. (Assuming each of the other views has one containing element, like the friends list presumably does.)

[robertocarroll]

But it's still a bit chicken / egg isn't it? How do we set the height of the app when it is based on the height of the 25 friends list which is based on 60% of the height of the viewport?

[pauldwaite]

Ah yes — I’m saying don’t make the height of the friends list 60vh, make it as tall as 25 friends.

As you say, you can’t really do both. You might be able to set the height to 25 friends, and the max-height to 60vh, although the latter might be too much for the iframe sizing script to deal with, not sure.

[robertocarroll]

The friendsContainer scrolls though to try to keep the app itself from scrolling, so wouldn't we set it to the height of five friends (I think that's approximately where it starts scrolling)?

[pauldwaite]

wouldn't we set it to the height of five friends (I think that's approximately where it starts scrolling)?

Well, with height:60vh, where it starts scrolling currently depends on the height of the viewport, which could be five friends or a hundred friends depending on the size of the monitor it’s being viewed on.

But yeah — any height will work, so long as that height is defined independently from the viewport’s height. Five sounds good. It might be good to aim for five-and-a-half, to make it more obvious that the user can scroll.

[robertocarroll]

According to Chrome each item is 75px, so height would be 75 x 5.5 = 412.5. Do you think it's OK in pixels or better in em/rem?

[pauldwaite]

Ideally, it depends how each friends item has its vertical dimensions defined (if they’re em or rem, you’d go with that; if they’re pixels, you’d go with that).

But I’m sure pixels is fine here, and would probably be clearer.

[robertocarroll]

I've added a fixed height invisible div to the hello view and left the friends container at 60%. I figured if we only call parentIFrame.size(); in the hello view that should be OK because the aim is to give the first view some space below so the iFrame doesn't bounce around. What do you think?