This PR adds CSS to collapse treatment hospital cards when viewed on mobile or any device whose viewport is < 740px.
A link "More Details" displays the hospital telephone and text when clicked/tapped. The hospital icon next to the title is also hidden. A link "Less Details" then hides the same details and restores the hospital icon.
Collapsed mobile:
Expanded mobile:
When viewport >= 740px the cards appear expanded and no More/Less Details link appear.
TODO after merge:
On mobile, when card expanded, the button "View On Map" appears floating over the hospital text. See above "Expanded" image for example.
The jQuery code to target HTML elements like the More/Less Details link and the hospital name heading are very fragile and coupled to the exact HTML structure. It would be better if these elements were targeted dynamically by CSS class.
Hiding the hospital icon that appears next to the hospital name on-tap feels slightly jarring to me because the heading text instantly moves when the icon is removed. This movement causes my eye to instantly focus on the hospital name, which is taking the eye away from the important information, which is the details text being displayed. I added a slight animation to the show/hide expansion of hospital text to decrease its jarring effect and guide the eye to it. I think allowing the icon to remain next to the heading would result in less surprise and less distraction when viewing the details.
Partial implementation for ticket #107.
This PR adds CSS to collapse treatment hospital cards when viewed on mobile or any device whose viewport is < 740px.
A link "More Details" displays the hospital telephone and text when clicked/tapped. The hospital icon next to the title is also hidden. A link "Less Details" then hides the same details and restores the hospital icon.
Collapsed mobile:
Expanded mobile:
When viewport >= 740px the cards appear expanded and no More/Less Details link appear.
TODO after merge:
Thanks! 🚀