Skip to content
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

Add responsive height feature #92

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Conversation

sahilchinoy
Copy link

Adds two settings, use_responsive_height and responsive_height_limit. If use_responsive_height is yes, then the height of the artboard will not exceed responsive_height_limit percent of the window height. If every artboard exceeds this height, ai2html will display the smallest artboard (by width).

Note that responsive_height_limit must be between 0 and 100 inclusive.

@sahilchinoy
Copy link
Author

This looks good to me, but here's an edge case we haven't handled. Suppose there are two artboards with a min_width of 300px. One has an aspect ratio of 1, the other has an aspect ratio of 2. The viewport is 1000px tall, responsive_height_limit is 90. Neither artboard overflows the height limit. Currently, the resizer will pick the first artboard. Do we want to pick the second one, since it takes up more of the vertical height of the page, without overflowing?

@sahilchinoy
Copy link
Author

sahilchinoy commented Jun 2, 2018

Here is a (currently failing) test that illustrates what I'm talking about:

it('height-limited, "fixed", two artboards with same width, neither overflow height limit', function () {
      var data = [
        // two abs have same width but neither overflows -> pick the tallest one
        {id: 0, min_width: 300, aspect_ratio: 1},
        {id: 1, min_width: 300, aspect_ratio: 2}
      ];
      var opts = {responsiveness: 'fixed', responsive_height_limit: 90};
      var containerWidth = 400;
      var windowHeight = 1000; // limit is 900px
      var expect = {
        id: 0, min_width: 300, aspect_ratio: 1};
      var result = findVisibleArtboard(data, containerWidth, windowHeight, opts);
      assert.deepEqual(result, expect);
});

@mbloch
Copy link
Contributor

mbloch commented Jun 4, 2018

After talking with Archie, it looks like we'll need to change the behavior of our updated resizer function a bit. We need be able to display multiple artboards at the same time if they have the same minimum width, and they should be in the same order as the original artboards in the Artboards palette of the AI document.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants