#1719 Timeline overhaul: brainstorm

Open
opened 3 months ago by nico.rikken · 2 comments
Collaborator

Note: This issue was initially posted on the wrong repository: pmpc/website#358


As part of the upcoming birthday celebrations, I’d like to expand the timeline: https://fsfe.org/timeline/

Currently this view is mainly an SVG. Although I like it from a technological standpoint, it isn’t practical to use on a mobile device (tiny fonts and no hovers) and is a pain to update or translate (required updating the SVG and aligning things properly).

So before I start creating more content, I’d like to redo the page itself. My main goal is to get it into plain HTML again.

Considering that there is only limited width on a mobile device, I don’t think it is feasible to maintain the current 4 columns (internal, policy, legal, public). I like the categories, so perhaps icons can help distinguish these categories (🤝, 🏛️, ⚖️, 📣). These icons could of course be custom-made, similar to the ones on https://fsfe.org/contribute/contribute.html

To avoid having to scroll endlessly, I can think of three UI improvements:

  • Table of contents by year or something to jump easily.
  • Use javascript to collapse the paragraphs by default, leaving only the events in the main view. Similar to a typical online FAQ page. Perhaps there should be an option to unfold all, in case you actually want to read it all.
  • Filter events, based on category. This could even be expanded to having country-specific history appear on the timeline based on a switch.

I’d like to pick your brain. What do you think about this?

----- > **Note:** This issue was initially posted on the wrong repository: https://git.fsfe.org/pmpc/website/issues/358 ----- As part of the upcoming birthday celebrations, I’d like to expand the timeline: https://fsfe.org/timeline/ Currently this view is mainly an SVG. Although I like it from a technological standpoint, it isn’t practical to use on a mobile device (tiny fonts and no hovers) and is a pain to update or translate (required updating the SVG and aligning things properly). So before I start creating more content, I’d like to redo the page itself. My main goal is to get it into plain HTML again. Considering that there is only limited width on a mobile device, I don’t think it is feasible to maintain the current 4 columns (internal, policy, legal, public). I like the categories, so perhaps icons can help distinguish these categories (🤝, 🏛️, ⚖️, 📣). These icons could of course be custom-made, similar to the ones on https://fsfe.org/contribute/contribute.html To avoid having to scroll endlessly, I can think of three UI improvements: - Table of contents by year or something to jump easily. - Use javascript to collapse the paragraphs by default, leaving only the events in the main view. Similar to a typical online FAQ page. Perhaps there should be an option to unfold all, in case you actually want to read it all. - Filter events, based on category. This could even be expanded to having country-specific history appear on the timeline based on a switch. I’d like to pick your brain. What do you think about this?
Poster
Collaborator

Finally I've found some time to work on this. This is small-screen view of a simple HTML hierarchy. It needs some ease of navigation. I hope one of you here can help me with the Javascript to improve on the navigation. At least I can work out the main structure in HTML.

Finally I've found some time to work on this. This is small-screen view of a simple HTML hierarchy. It needs some ease of navigation. I hope one of you here can help me with the Javascript to improve on the navigation. At least I can work out the main structure in HTML.
max.mehl commented 4 days ago
Poster
Owner

Thanks for collecting the ideas and your pull request! The emoji idea is very interesting. Sorry for the review delay.

I somewhat agree that even a hierarchical HTML is better than the SVG and its hacks. However, it's now much harder to get a nice overview. Please accept my humble opinion below ;)

Table of contents by year or something to jump easily.

Uh, would make it even less attractive IMHO

Use javascript to collapse the paragraphs by default, leaving only the events in the main view. Similar to a typical online FAQ page. Perhaps there should be an option to unfold all, in case you actually want to read it all.

I'd not recommend Javascript as we want to make all core functionality on fsfe.org available without Javascript. But I'm afraid such a selection is hard to realise without. You could take https://fsfe.org/about/team.html as an inspiration for simple custom JS (the team selection), or https://fsfe.org/tags/tags.html for CSS-only triggers (tag keys on/off).

Filter events, based on category. This could even be expanded to having country-specific history appear on the timeline based on a switch.

Big +1! The nice thing about the SVG is that you can see what happened in which category. Rather -1 for the country selection though.

Thanks for collecting the ideas and your pull request! The emoji idea is very interesting. Sorry for the review delay. I somewhat agree that even a hierarchical HTML is better than the SVG and its hacks. However, it's now much harder to get a nice overview. Please accept my humble opinion below ;) > Table of contents by year or something to jump easily. Uh, would make it even less attractive IMHO > Use javascript to collapse the paragraphs by default, leaving only the events in the main view. Similar to a typical online FAQ page. Perhaps there should be an option to unfold all, in case you actually want to read it all. I'd not recommend Javascript as we want to make all core functionality on fsfe.org available without Javascript. But I'm afraid such a selection is hard to realise without. You could take https://fsfe.org/about/team.html as an inspiration for simple custom JS (the team selection), or https://fsfe.org/tags/tags.html for CSS-only triggers (tag keys on/off). > Filter events, based on category. This could even be expanded to having country-specific history appear on the timeline based on a switch. Big +1! The nice thing about the SVG is that you can see what happened in which category. Rather -1 for the country selection though.
Sign in to join this conversation.
No Milestone
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.