DPGAlliance / publicgoods-scripts

Scripts to generate static site from WordPress
http://digitalpublicgoods.net
MIT License
4 stars 6 forks source link

Roadmap page_Mobile compatibility of the DPGA website #233

Closed PelinSmines closed 11 months ago

PelinSmines commented 1 year ago

Roadmap is a table. That table doesn't fit into mobile display. Current way of showcasing roadmap activities is not suitable for mobile version.

If possible we should just have the list of the members. No strategic objectives. There should be a possibility to filter by the member as there's now. There's search function, we can keep it. It returns the results if the search word is in the title of the activity.

When clicked on the member in the list, the list of activities should expand as a sub list under that member title. The list of members is like below: Bill and Melinda Gates Foundation DIAL UNICEF UNDP NORAD FAO . . . Rockefeller Foundation (click on this, and then it expands the list of activities under the title. Clicking again collapses the list.)

If there is a link to the external activity, it should be clickable.

law909 commented 1 year ago

The roadmap requires a complete rewrite; the current appearance is not actually a html table, but technically a vector graphic calculated pixel by pixel. The mobile view needs to be rewritten from scratch, and it would be simpler to rewrite the whole thing in one go.

gazdagergo commented 1 year ago

After further analysis, to avoid complete re-write, we figured out to work on a solution that displays another (statically generated) list of the entries in a mobile-friendly way and we render this formatted list on mobile and render the original roadmap on desktop. It is a temporary solution for fixing the mobile.

law909 commented 1 year ago

I temporarily removed the roadmap table from mobile view.

skylark1848 commented 1 year ago

If there is a link to the external activity, it should be clickable. See mockup below for delivery

Image

skylark1848 commented 1 year ago

Screenshots from deployed resolution on https://digitalpublicgoods.net/roadmap/

Image Image Image Image Image

gazdagergo commented 1 year ago

Acceptance Criteria / User Acceptance Test