Mobile layout & touchscreen UI about mdx-deck HOT 12 CLOSED

This is @jxnblk's project that he's graciously sharing with everyone. I think it's safe to assume that most OSS projects, including this one, are put out there for others to 1) learn from and use what the developer has created and 2) contribute back to the project if they like.

Anyone can be a developer, even if that's not their full-time profession. So you and your friend are certainly welcome to tinker just as I am. Brent hasn't put out any specifications or guidelines for contributions yet; he's just putting out placeholders.

from mdx-deck.

I started tinkering by adding some onClick/onMouseUp/onTouchEnd handlers to the Carousel, but there was no immediate way to test on device with hot reloading. I'm posting some tweaks here for those wishing to develop and test for mobile.

ok-cli (and hence mdx-deck's cli) don't offer a host (or host/client pair) option on the command line, so I modified ok-cli's hotClient options (node_modules/ok-cli/lib/index.js):

  const hotClient = {
    host: { client: '*', server: '0.0.0.0' },
    port: opts.hotPort,
    logLevel: 'error'
  }

as per webpack-hot-client's Remote Machine README.

I specified a port to make refreshing/reloading the URL on the phone easier. Webpack will only hot-reload on one browser/device at a time, which means you have to close the tab that npm start opens (--no-open doesn't seem to work), then refresh the phone's browser.

from mdx-deck.

@jxnblk I'm interested in trying mdx-deck for an interactive presentation that I'll be running from a tablet. Can you please point me in the right direction for adding prev/next buttons to a presentation?

from mdx-deck.

@appsforartists Seems like #69 added invisible Previous and Next buttons to the UI already.

Example here:

https://relay-modern-course.now.sh/packages/01-setup/#0

If you want the buttons to be visible, it seems like a good bet to build a custom provider: https://github.com/jxnblk/mdx-deck/blob/master/docs/advanced.md#custom-provider-component

from mdx-deck.

Thanks.

yarn run mdx-deck ./src/deck.mdx

doesn't add any buttons with [email protected]; my DOM doesn't look like yours. I'll look into providers.

from mdx-deck.

After some digging, it looks like those buttons may have been replaced by https://github.com/dogfessional/react-swipeable.

from mdx-deck.

@appsforartists @karlhorky check 👇
https://twitter.com/kuldeepkeshwar/status/1136370461028126721
I hope this is what you were looking for 😉

from mdx-deck.

👆 Repo: https://github.com/kuldeepkeshwar/mdx-deck

from mdx-deck.

@kuldeepkeshwar did you add this feature? Will you open a PR for it?

from mdx-deck.

@karlhorky yup, all you need to do it, open the URL in Mobile & do add to the home screen. Open screen for the audience on any other device(Laptop/Project/TV).

PWA opens in mobile mode which has navigation buttons.

I will raise the PR soon, some refactoring I need to do, meanwhile, you can use this fork

from mdx-deck.

raised PR #375 🙂

from mdx-deck.

Closing this for now. More specific, new issues can be opened to cover any mobile-related feature requests

from mdx-deck.