Carousels and lists
Jaunt has two kinds of carousel. Which one a screen uses depends on whether the cards are meant to be seen one at a time or compared side by side.
One card at a time
Section titled “One card at a time”Home’s Voting, Happening and Completed sections.
- Only the active card is drawn. Drag it and it follows your finger. Let go more than 50px from where you started and it moves to the next or previous card; otherwise it springs back.
- The carousel’s height eases to fit whichever card is showing, so a shorter card leaves no gap and a taller one isn’t cut off.
- The dots are real buttons, 14px apart: tap one to jump to that card.
Side by side
Section titled “Side by side”Where’s places and Stay’s listings, shown on Poll cards.
- Every card is drawn in one row that scrolls and snaps to each card. It works like any scrolling: touch, trackpad or mouse.
- The dots only show where you are, 8px apart. The lit dot follows whichever card is in the middle.
The dot rule
Section titled “The dot rule”Both kinds share it:
| Dot | Size | Colour |
|---|---|---|
| Active | 10px | Action coral |
| Others | 6px | Pale pink, the same in light and dark mode |
The dots are never teal or green, so they can’t be mistaken for a status. The row’s height is fixed to the bigger dot, so nothing underneath jumps as the dots change size.
List view
Section titled “List view”Where and Stay can also show a list, switched with the segmented toggle. Rows are sorted most-voted first. See Poll cards for both.
Swipe to delete
Section titled “Swipe to delete”How’s saved flight, train and taxi legs. Swipe a row left to show a red Delete button underneath.
- The row follows your finger exactly while you drag, then snaps fully open or closed when you let go: open if you dragged past halfway.
- Opening one row closes any other. Tapping anywhere outside an open row closes it.
- Deleting folds the row away (height and fade together) and only removes it once that’s finished.
Anatomy
Section titled “Anatomy”| Part | One card at a time | Side by side |
|---|---|---|
| What’s drawn | Only the active card | Every card, in a scrolling row |
| Move on | Drag more than 50px, or tap a dot | Scroll or drag; it snaps to a card |
| Dots | Buttons, 14px apart | Show where you are, 8px apart |
| Height | Eases to fit the card showing | The tallest card |
Do and don’t
Section titled “Do and don’t”Dots are coral and pale pink
The active dot is 10px Action coral, the rest 6px pale pink. Never teal or green: they'd read as a status.
Accessibility
Section titled “Accessibility”- Side-by-side carousels are a normal scrolling row, so they work with a trackpad, a mouse, a keyboard and touch alike.
- In the one-card carousel the dots are real buttons, each labelled (“Show jaunt 2”), so people who can’t drag can still move between cards.
- Swipe to delete only works by dragging today.
Known gap: a row that needs swiping has no other way to reach Delete for someone who can’t drag.
Source
Section titled “Source”src/web/components/LiveJauntsCarousel.tsx,CompletedJauntsCarousel.tsxsrc/web/components/WherePlaceCarousel.tsx,AccommodationCarousel.tsxsrc/web/components/SwipeToDeleteRow.tsx