On «Longue vie aux objets» project, I had to create a new way to navigate in the application. However, I didn’t want to introduce to much magic things in the JS, so I decided to only manipulate html classes on my JS script.
What we needed:
- Display first the search form
- On search display the result and a way to comeback to the search form
- On click on a result in a list or in a map, display a detailed card
- Coming from the right of the screen in desktop
- Coming from the bottom in the screen in mobile
- Be able to close or full expand the detailed card
Here is the result:
I made a proof of concept in codepen, here it is :
Here is the codepen link : https://codepen.io/nicolas-oudard/pen/XWGPxjX
And finally, once it is full integrated in «Longue vie aux objets» application, here is the result :