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.

Sign up for GitHub

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

Jump to bottom

Add swipe navigation to bottom #45

Open
kas-catholic opened this issue Mar 12, 2023 · 3 comments · May be fixed by #76
Open

Add swipe navigation to bottom #45

kas-catholic opened this issue Mar 12, 2023 · 3 comments · May be fixed by #76

Comments

@kas-catholic
Copy link
Owner

It isn't obvious that you need to swipe. Can we add some kind of indicator?

The library we're using for this is Swiper. I'd be surprised if there's not an option we can turn on that will make this easy to do.
@JohnRDOrazio
Copy link
Collaborator

maybe a kind of toaster message at the bottom of the screen, inviting the user to swipe from right to left to proceed to the next step? Or a tutorial for first time users?

@kas-catholic
Copy link
Owner Author

We do already have a welcome modal (shows on first usage) that should sort of indicate this. Perhaps we could review the text to see if we should modify it to indicate swiping...

Beyond that, our library does support pagination indicators, but I couldn't get them working. Some Google searching suggests something might be broken between our version of react-id-swiper (React implementation) and swiper (native JS package). The most recent version of Swiper supports react via WebComponents, and their docs suggest we should use that. I think that in doing so we'll be able to set pagination="true" to get pagination bullets. So:

  • Remove our dependency on react-id-swiper.
  • Update Swiper (^9.3.2)
  • Use the Swiper docs to change our usage of react-id-swiper and instead use the native Swiper WebComponent/react implementation, with pagination dots.

kas-catholic added a commit that referenced this issue Nov 20, 2023
@kas-catholic
Upgrade to Swiper 11
916d6de 
We're using a very old version of [Swiper.js](https://swiperjs.com/).
Moreover, our usage is partially broken - we'd like to have the
"pagination" dots at the bottom (at least on small screens when all
slides aren't visible), but they don't seem to be working. (Perhaps
something is broken between our old version of Swiper and the
react-id-swiper package we were using.

 - Stop using react-id-swiper. Swiper 11 comes with native react
   support.
 - Upgrade to Swiper React 11. Although the docs suggest Swiper React is
   deprecated and we should migrate to Swiper Element, I'm sticking with
   react for now because using Swiper Element with React and breakpoints
   involves more complication than I want to deal with. Let's keep it
   simple.

Fixes #45
@kas-catholic kas-catholic linked a pull request Nov 20, 2023 that will close this issue
Draft
@kas-catholic
Copy link
Owner Author

This will be fixed by the Astro rewrite. As part of that rewrite, I pulled in a major version bump for Swiper and got the pagination styles to work correctly. Currently in development on the astro branch. (Preview)

I'll close this after that branch merges to main.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Upgrade to Swiper 11 kas-catholic/confessit-web
2 participants
@JohnRDOrazio @kas-catholic