Mobile layout & touchscreen UI

[jxnblk]

• Swipe support [Feature] Mobile Swiping support #91
• Previous/Next buttons Basic mobile support #69
• viewport-fit=cover
• Prevent vertical scroll
• Touchscreen controls for mode/slide/etc
• Adjust font sizes/zoom for mobile

[SirBryan]

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.

[SirBryan]

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.

[appsforartists]

@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?

[karlhorky]

@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

[appsforartists]

Thanks.

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

doesn't add any buttons with mdx-deck@2.2.1; my DOM doesn't look like yours. I'll look into providers.

[appsforartists]

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

[kuldeepkeshwar]

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

[kuldeepkeshwar]

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

[karlhorky]

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

[kuldeepkeshwar]

@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

[kuldeepkeshwar]

raised PR #375 🙂

[jxnblk]

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