Added viewport resizer #17

kokjinsam · 2016-04-01T18:50:41Z

Features added:

Manual resizer
user defined viewport size
predefined viewport size

arunoda · 2016-04-01T23:22:04Z

src/client/ui/layout.js

    return (
      <div style={rootStyles}>
        <div style={controlsStyle}>
          {controls}
        </div>
        <div style={previewStyle}>
-          {preview}
+          <div style={toggleStyle}>


Shall we move these button set into a seperate component?

arunoda · 2016-04-01T23:28:20Z

I would like to have a different arrangement for the menu bar. I will play with this.
Shall we add another button to reset the viewport and take the full space. Just like the default way?

I am not sure I can access to my devbox in the weekend. I will definitely work on this on monday if not.
Everything looks great.

kokjinsam · 2016-04-02T00:08:01Z

Yea sure. we can add the reset button. I'm also planning on adding a 'random' and 'hay' setting, just like the ones in bradfrost's ish.

So you want me to refactor toggles into another component? Where would you like to put it?

arunoda · 2016-04-02T00:43:06Z

Very cool.

For the UI, I like to keep them in this palce. That's fine.
For a new component, just create a new file close to the layout.
May be name it as top_menu.js or something.

LFDM · 2016-04-03T18:44:42Z

Very good stuff!

jeef3 · 2016-04-07T02:26:13Z

Very cool! I actually just forked this repo because I wanted to try and add this! 😄 Maybe draw some inspiration from Safari's responsive view?

Or even Chrome's.

arunoda · 2016-04-07T03:03:10Z

Hey @jeef3. That look is super cool.
I am super happy if we can bring this to here.

jeef3 · 2016-04-07T03:09:01Z

Just for comparison, here's how Chrome does it:

However, since Storybook is used to develop components, it might make less sense to have device presets. We probably care more about how our components look at a certain width in pixels, than on a certain device — that would be more for full websites of the whole application layout.

kokjinsam · 2016-04-07T03:59:12Z

@arunoda, I think we should transfer storybook to mantra structure ASAP so that other devs can work on adding features.

arunoda · 2016-04-07T04:07:00Z

@sammkj you mean for the source of this repo. Hmm. That's something I didn't thought.

Mantra is build for apps, but that's a good idea. I will have a look at, how it can be done.

jeef3 · 2016-04-07T21:11:13Z

Was just thinking, I wonder if there could be a tidy way to pre-define the size, per component. Maybe if there was a pathway for passing options in per story?

storiesOf('My Component')
  .add('feature', { /* options */ }, () => { /* component */ });

Then you could use:

storiesOf('My Component')
  .add('feature', { initialWidth: 200 }, () => { /* component */ });

I just find that some of my components are designed to fill their container, but are meant for use within a certain size.

Of course, something like this has much bigger implications, possibly beyond the scope of this PR.

rogchap · 2016-04-13T00:40:41Z

You can always wrap your stories with a Container Query rather than changing the viewport. Something like: http://d6u.github.io/react-container-query/

namuol · 2016-04-17T20:48:16Z

Personally, I'd prefer to just use my browser's built-in responsive tools, and have Storybook's "chrome" adjust for a mobile layout. The nice benefit here is that it allows me to test on real hardware.

Storybook could fit the viewport to the window, hide menus and overlay simplified next story / prev story buttons.

Of course, this could be implemented as a custom layout, but why not just include a responsive layout by default?

jeef3 · 2016-04-17T22:02:06Z

Of course, this could be implemented as a custom layout, but why not just include a responsive layout by default?

Actually, with the implementation of #115, this resizer could just be a decorator...

arunoda · 2016-04-18T05:17:02Z

@jeef3 That's a pretty clever idea.
I think we can simply use Facebook Design's devices.

@namuol using browser tools is also a pretty nice idea. We need to find a way to just render the iframe when doing tests. May be we can do it via with a set of keyboard shortcuts.

necolas · 2016-04-20T16:11:03Z

I agree with @namuol on this

jeef3 · 2016-04-20T21:10:28Z

For me, this feature is more about testing components that fill their container, but are designed to be used at, for example, '~100px x 80px'.

I could just wrap the story in a div styled to the right size, but it would be nice to be able to adjust it to make sure it responds appropriately to container size changes — not necessarily media queries.

timkindberg · 2016-05-04T20:42:35Z

I totally agree with @namuol as well. Had the same thoughts actually.

We need a quick button or key shortcut to hide all storybook UI and put the selected story into a "Full Screen" mode. The some additional minimal buttons or key shortcuts to jump to next or previous stories.

Even now if you hide the left nav and action logger there is still a small chrome around the whole viewport... so even that should go away in "Full Screen" mode.

This will be a good thing to have on it's own, plus it will help defer a mobile solution to external tools like Chrome Dev Tools.

arunoda · 2016-05-05T03:51:56Z

@timkindberg Full screen mode is implemented in the mantra branch. We'll do a release within this week.

arunoda · 2016-05-05T09:36:10Z

I've released version 1.20.0. As I mentioned, in that release we've the support for full screen support. You can switch to the full screen mode with CMD + SHIFT + F or CTRL + SHIFT + F.

Then we can use native browser tools for responsive testing. I think that's a better approach.
@sammkj What do you think?

kokjinsam · 2016-05-08T16:38:47Z

@arunoda , sounds good! And the mantra branch is awesome!

smeijer · 2016-07-16T16:08:16Z

@arunoda if we don't use the "native browser tools" but implement it in storybook itself, we can easier switch between different stories. I'm in favor of a "responsive toolbar" that we can show and hide in storybook. We can already resize the sidebar and the action-logger. If we can also change the location of the right edge, then we are already there.

thani-sh · 2016-07-16T16:20:29Z

@smeijer I think it's best if we make a storybook decorator for this.

leebenson · 2016-10-26T10:55:08Z

@mnmtanish - was a decorator for toggling between full-screen navigation ever implemented?

I'd love to test my stories on a native mobile device, but it's completely unfriendly to that environment - the toolbar takes up half of the screen and accidentally clicking on the 'keyboard shortcut' helper takes over the entire screen without any means to disable it.

Would love to see the decorator, thanks!

jeef3 · 2016-10-26T19:36:06Z

@mnmtanish - was a decorator for toggling between full-screen navigation ever implemented?

I think this is built in now.

⌘ ⇧ F / ⌃ ⇧ FToggle Fullscreen Mode

But that only helps you on desktops, not sure how to enable this on mobile devices...

leebenson · 2016-10-26T19:45:02Z

Thanks @jeef3. It looks like full-screen mode can be entered by adding ?full=1 to the URL. Would be great to have an icon on the toolbar to enable that with a click/tap. A meantime workaround would be creating a story that handles it separately and hosted it in the story list - but this seems overkill to wire up something that, IMO, should be native.

thani-sh · 2016-10-27T00:56:00Z

We really do need to work on the UI to make it more mobile friendly but it might take some time. For now, I think we can fix it by making the "shortcuts helper" mobile friendly and then make shortcut info clickable as mentioned here.

Related issues:
storybook-eol/storybook-ui#10

cpunion · 2017-01-08T09:15:36Z

Awesome for Full Screen Mode + Device Preview, but most time I develop mobile site, I want keep the sidebar and preview in a device container, to switch pages quickly. Currently I must open two window.

@sammkj this PR is great for me, can we just extract the code to an independent library? we can use it with a decorator.

Update @kadira/storybook to version 2.5.2

Tests for Panel component

…-12.0.0 Update eslint-config-airbnb to version 12.0.0 🚀

add the storybook-addon-jsx to the list of third party addon

* add overflow scroll to allow scrolling again Should fix the issue when scrolling breaks when using overflow: fixed. * Update index.tsx

Versioning script

nx-cloud · 2024-06-10T04:22:56Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 63d2783. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

nx run-many -t build -c production --parallel=3

Sent with 💌 from NxCloud.

kokjinsam added 5 commits April 1, 2016 01:06

added basic viewport resizer, control & actions toggle

35f5e40

Added manual resizer

1efa01b

Added manual resizer

a8bbb60

added 3 default sizes

20fe93b

cleanup

63d2783

arunoda reviewed Apr 1, 2016
View reviewed changes

jeef3 mentioned this pull request Apr 11, 2016

Get some features from ClojureScript devcards #19

Closed

arunoda mentioned this pull request Apr 20, 2016

Mobile storybook view #124

Closed

arunoda closed this May 5, 2016

arunoda reopened this May 5, 2016

arunoda mentioned this pull request May 5, 2016

Add something like Google Resizer #12

Closed

kokjinsam closed this May 8, 2016

ndelangen pushed a commit that referenced this pull request Apr 5, 2017

closes #17

cc55806

ndelangen pushed a commit that referenced this pull request Apr 5, 2017

Merge pull request #17 from kadirahq/update-storybook

b92b6c2

Update @kadira/storybook to version 2.5.2

ndelangen pushed a commit that referenced this pull request Apr 5, 2017

Merge pull request #17 from kadirahq/tests

f58adc3

Tests for Panel component

ndelangen pushed a commit that referenced this pull request Apr 15, 2017

Merge pull request #17 from kadirahq/greenkeeper-eslint-config-airbnb…

b3f8439

…-12.0.0 Update eslint-config-airbnb to version 12.0.0 🚀

thani-sh pushed a commit that referenced this pull request May 24, 2017

Merge pull request #17 from wcastand/source

347ce50

add the storybook-addon-jsx to the list of third party addon

shilman added the misc label May 27, 2017

ndelangen pushed a commit that referenced this pull request Nov 2, 2017

add overflow scroll to allow scrolling again (#17)

d65656e

* add overflow scroll to allow scrolling again Should fix the issue when scrolling breaks when using overflow: fixed. * Update index.tsx

JReinhold added a commit that referenced this pull request May 31, 2023

Merge pull request #17 from storybookjs/version-script

961bd01

Versioning script

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added viewport resizer #17

Added viewport resizer #17

kokjinsam commented Apr 1, 2016

arunoda Apr 1, 2016

arunoda commented Apr 1, 2016

kokjinsam commented Apr 2, 2016

arunoda commented Apr 2, 2016

LFDM commented Apr 3, 2016

jeef3 commented Apr 7, 2016

arunoda commented Apr 7, 2016

jeef3 commented Apr 7, 2016

kokjinsam commented Apr 7, 2016

arunoda commented Apr 7, 2016

jeef3 commented Apr 7, 2016

rogchap commented Apr 13, 2016

namuol commented Apr 17, 2016 •

edited

Loading

jeef3 commented Apr 17, 2016

arunoda commented Apr 18, 2016

necolas commented Apr 20, 2016

jeef3 commented Apr 20, 2016

timkindberg commented May 4, 2016

arunoda commented May 5, 2016

arunoda commented May 5, 2016

kokjinsam commented May 8, 2016

smeijer commented Jul 16, 2016

thani-sh commented Jul 16, 2016

leebenson commented Oct 26, 2016

jeef3 commented Oct 26, 2016

leebenson commented Oct 26, 2016

thani-sh commented Oct 27, 2016

cpunion commented Jan 8, 2017

nx-cloud bot commented Jun 10, 2024

Added viewport resizer #17

Added viewport resizer #17

Conversation

kokjinsam commented Apr 1, 2016

arunoda Apr 1, 2016

Choose a reason for hiding this comment

arunoda commented Apr 1, 2016

kokjinsam commented Apr 2, 2016

arunoda commented Apr 2, 2016

LFDM commented Apr 3, 2016

jeef3 commented Apr 7, 2016

arunoda commented Apr 7, 2016

jeef3 commented Apr 7, 2016

kokjinsam commented Apr 7, 2016

arunoda commented Apr 7, 2016

jeef3 commented Apr 7, 2016

rogchap commented Apr 13, 2016

namuol commented Apr 17, 2016 • edited Loading

jeef3 commented Apr 17, 2016

arunoda commented Apr 18, 2016

necolas commented Apr 20, 2016

jeef3 commented Apr 20, 2016

timkindberg commented May 4, 2016

arunoda commented May 5, 2016

arunoda commented May 5, 2016

kokjinsam commented May 8, 2016

smeijer commented Jul 16, 2016

thani-sh commented Jul 16, 2016

leebenson commented Oct 26, 2016

jeef3 commented Oct 26, 2016

leebenson commented Oct 26, 2016

thani-sh commented Oct 27, 2016

cpunion commented Jan 8, 2017

nx-cloud bot commented Jun 10, 2024

☁️ Nx Cloud Report

namuol commented Apr 17, 2016 •

edited

Loading