Card Swiping + Mapbox Demo
In this project, I will look at the compatability of using the Swing.js library in conjunction with Mapbox-Gl-JS
Environment
ruby 2.3.0
rack 1.5.0
vienna
To-Do's
- Increase cross-browser support, specifically for animations on Safari
- Change active listing-icon to
#03a9f4on Swipe / click - Fly to Map Marker on Click
Build "full-page" view, only available after card has been expandedOn clicking a marker, have its corresponding card returned-- See Mapbox-GL-JS Listings Demo for similar behavior- Have returned card go to top of deck
Keep cards other than top card from expanding on clickKeep cards from expanding the viewport once .expanded;overflow:scrollin conjunction with shiftingheightvalues is potential solution, but requires fine tooning. See Ln. 107-114 on_cards.scss- Write functions to kill all Swing events on
.expandedto allowoverflow:scrolland the image gallery idea to work - Add carousel gallery for each listing assuming listing is
.expandedand.full-listingis active - Improve animation FPS on mobile will require ancillary research into FPS boosting techniques
- Write JS for
swiping up as "Yes"andswiping down as "No" - Add placeholder subnav for display purposes
- Better design needed for ad placements and general information display
Have "It's not a bug, it's a feature!" moment
There are only mobile views. Either shrink your window or turn on the Mobile Emulator in Chrome Dev Tools
Get started
bundle install
bundle exec rackup
sass --watch scss:css
Visit localhost:9292
Resources
Card Related
- Draggable Physics Animation (jQuery Only)
- Tinderesque
- Creating Tinder-like Animations with CSS
- Ionic Ion Tinder Cards 2 + Tutorial + Another Tutorial
- jTinder + Demo
- Elastic Circle Slideshow
- Rails, ElasticSearch & SearchKick in Depth BY JOHN STEMLER
Potential Alternatives
License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.