feat: mobile support #91
Conversation
|
|
|
| @@ -208,89 +233,3 @@ if (!hasSidePanel) { | |||
|
|
|||
| customElements.define('resizable-panel', ResizablePanel); | |||
| </script> | |||
|
|
|||
| <style> | |||
There was a problem hiding this comment.
I replaced the inline style from this component with unocss classes as it makes it easier to add breakpoints for mobile.
| } | ||
|
|
||
| if (blocked) { | ||
| await blockingStatus.promise; |
There was a problem hiding this comment.
We now prevent WebContainer from booting on iOS to avoid crashing the page as it sometimes does. Instead the idea is to later let them proceeed with the boot by pressing a button.
There was a problem hiding this comment.
Do we use the same logic as the editor?
| useEffect(() => { | ||
| const intervalId = setInterval(onResize, 20); | ||
|
|
||
| return () => clearInterval(intervalId); | ||
| }, []); |
There was a problem hiding this comment.
With this code we make sure that the previews are correctly positioned. This is important on mobile when switching between the content and the editor.
I kept the existing ResizeObserver instances because they are smoother.
This also fix the edge case where the preview stop moving when increasing the size of the terminal section.
| // delete extraneous route announcer | ||
| document.querySelector('.astro-route-announcer')?.remove(); |
There was a problem hiding this comment.
Unrelated fix to this PR but I noticed that as you navigate between pages we were accumulating divs under the body.
packages/astro/src/default/components/MobileContentToggle.astro
Outdated
Show resolved
Hide resolved
packages/astro/src/default/components/MobileContentToggle.astro
Outdated
Show resolved
Hide resolved
packages/astro/src/default/components/MobileContentToggle.astro
Outdated
Show resolved
Hide resolved
Co-authored-by: Ari Perkkiö <[email protected]>
Deploying tutorialkit-demo-page with
|
| Latest commit: |
a810b84
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1e48fbe7.tutorialkit-demo-page.pages.dev |
| Branch Preview URL: | https://joan-mobile-support.tutorialkit-demo-page.pages.dev |
|
@Nemikolh Could you merge latest master into this PR? I'd love to run this locally and fiddle with it when I review it and I'd love to have the latest state in it as well to make sure everything works and what not 🙏 |
Deploying tutorialkit-docs-page with
|
| Latest commit: |
c7542cb
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://257e4fdb.tutorialkit-docs-page.pages.dev |
| Branch Preview URL: | https://joan-mobile-support.tutorialkit-docs-page.pages.dev |
|
@d3lm It's updated now! |
|
Is it possible that this is broken now on desktop? If I open the preview, I only see the editor view and I can't toggle to the content either. https://4c6936c9.tutorialkit-demo-page.pages.dev/forms-tutorial/introduction/welcome/ |
|
@SamVerschueren Oh wow, maybe a merge commit introduced a bug. I'll address all the feedback and test it again. |
There was a problem hiding this comment.
Generally looks good. I only left minor comments. Great work!
A few additional things I noticed while testing this on my end.
I noticed is that there's a visual bug with the iframes when moving between the two sides which doesn't look great. Maybe not a lot of people will notice but it caught my eye immediately. Would be cool if we could investigate a way to fix this or at least make it less noticeable.
CleanShot.2024-07-02.at.18.26.39.mp4
Another thing is that there's the border visible on the left when switched to the right side. Visually that looks a bit off IMO.
Also, we may need to think about the menu if we ship mobile support because right now it's not really usable as you can't read the titles. So we may need to go back to the design drawing board. Elements usually need to be adjusted to work well on mobile. The breadcrumb was mostly tailored for Desktop use. So I'd prefer if we could fix before shipping mobile support. I mean we can always fix it later but to me, if a user can't properly read the tiles then they can't properly navigate between different lessons.
I think that switching to
Oh good catch! 🙏
Good point. What if we just show the lesson titles in the dropdown on mobile? |
|
@d3lm I addressed all the comments in this PR and made simple changes. Namely:
|
This PR adds mobile support for TutorialKit following a similar approach as the excellent https://learn.svelte.dev/.
See the screencast below to see how it looks:
Screencast.from.2024-06-24.14-58-32.webm