FSFE/fsfe-website
31
33
Fork 96
Code Issues 66 Pull Requests 19 Wiki Activity

html-timeline #4337

Merged
tobiasd merged 11 commits from html-timeline into master 2026-02-19 09:36:48 +00:00
Conversation 21 Commits 11 Files Changed 30
+1734 -31438
delliott commented 2024-07-30 15:44:24 +00:00
Member
Copy Link
Copy Source

This pull request continues on the work completed by @nico.rikken in #1768

This pull request continues on the work completed by @nico.rikken in https://git.fsfe.org/FSFE/fsfe-website/pulls/1768
👍 2
delliott force-pushed html-timeline from 055506bd41 to 0e1d5f92cf 2024-07-31 11:02:18 +00:00 Compare
delliott force-pushed html-timeline from 0e1d5f92cf to 7eaebb0800 2024-07-31 12:22:09 +00:00 Compare
delliott force-pushed html-timeline from 7eaebb0800 to fad560b2d9 2024-07-31 12:24:19 +00:00 Compare
delliott force-pushed html-timeline from fad560b2d9 to 476c1a0379 2024-07-31 12:25:47 +00:00 Compare
delliott commented 2024-07-31 12:31:04 +00:00
Author
Member
Copy Link
Copy Source

Status: Currently functional.

In order to be suitable to merge I need to extract the translations of the old svg version for dutch, and use those for the new html dutch timeline.

Ideally some work would be done to beautify the timeline before merging. This should be quite easy as it has been refactored into xml+xsl.

There appears to be some doubts among the team the about the usefulness of having a timeline, so this is on hold until those discussions are resolved.

Status: Currently functional. In order to be suitable to merge I need to extract the translations of the old svg version for dutch, and use those for the new html dutch timeline. Ideally some work would be done to beautify the timeline before merging. This should be quite easy as it has been refactored into xml+xsl. There appears to be some doubts among the team the about the usefulness of having a timeline, so this is on hold until those discussions are resolved.
delliott commented 2024-07-31 13:35:50 +00:00
Author
Member
Copy Link
Copy Source

Oh, should also do some sedding to redirect links to the new position

Oh, should also do some sedding to redirect links to the new position
delliott force-pushed html-timeline from 476c1a0379 to ea8a158088 2024-08-05 14:52:52 +00:00 Compare
delliott force-pushed html-timeline from ea8a158088 to 1a47c53a03 2024-08-05 15:01:24 +00:00 Compare
delliott commented 2024-08-05 15:22:47 +00:00
Author
Member
Copy Link
Copy Source

All translations from the SVG timeline have now been ported across.
Must still be

  • beautified
  • sed to redirect links
All translations from the SVG timeline have now been ported across. Must still be - [x] beautified - [x] sed to redirect links
delliott force-pushed html-timeline from 1a47c53a03 to 78a40fe4c0 2024-08-06 11:59:05 +00:00 Compare
delliott force-pushed html-timeline from 78a40fe4c0 to 5cf8a87cd7 2024-08-06 12:40:04 +00:00 Compare
delliott force-pushed html-timeline from 5cf8a87cd7 to 20c874adb3 2024-08-06 13:15:42 +00:00 Compare
delliott force-pushed html-timeline from 20c874adb3 to 51c02ae29f 2024-08-07 09:48:21 +00:00 Compare
delliott commented 2024-08-07 09:49:16 +00:00
Author
Member
Copy Link
Copy Source

Still working on it actually looking nice.

Not sure how to source new info for the timeline?

Still working on it actually looking nice. Not sure how to source new info for the timeline?
delliott force-pushed html-timeline from 51c02ae29f to d3ba003d24 2024-08-07 12:55:02 +00:00 Compare
delliott commented 2024-08-07 12:56:15 +00:00
Author
Member
Copy Link
Copy Source

Now looks not awful, but still not great.

The boxes with title and description are quite large, it might be nice to hide the descriptions unless clicked?

This can be done with <details>, but not sure how it will interact with flexbox alignment.

Now looks not awful, but still not great. The boxes with title and description are quite large, it might be nice to hide the descriptions unless clicked? This can be done with \<details\>, but not sure how it will interact with flexbox alignment.
delliott force-pushed html-timeline from d3ba003d24 to c191f31f2f 2024-08-07 14:25:34 +00:00 Compare
delliott force-pushed html-timeline from c191f31f2f to 3b273ed085 2024-08-07 14:48:23 +00:00 Compare
delliott force-pushed html-timeline from 3b273ed085 to ffd20c895b 2024-08-07 14:56:26 +00:00 Compare
delliott force-pushed html-timeline from ffd20c895b to a2340eeaa5 2024-08-08 12:19:04 +00:00 Compare
delliott force-pushed html-timeline from a2340eeaa5 to ef2eb53487 2024-08-08 15:22:20 +00:00 Compare
delliott force-pushed html-timeline from ef2eb53487 to d64b4b2781 2024-08-09 09:23:47 +00:00 Compare
delliott force-pushed html-timeline from d64b4b2781 to 37c1b4d67c 2024-08-09 11:57:55 +00:00 Compare
delliott commented 2024-08-09 12:21:44 +00:00
Author
Member
Copy Link
Copy Source

Using details looked real weird, as suspected, so no good.

I am syncing the test branch to this at the moment, so https://test.fsfe.org/about/timeline/ shows what it looks like at least quite recently.

The css is improving, still have not sourced any further content.

Using details looked real weird, as suspected, so no good. I am syncing the test branch to this at the moment, so https://test.fsfe.org/about/timeline/ shows what it looks like at least quite recently. The css is improving, still have not sourced any further content.
delliott force-pushed html-timeline from 37c1b4d67c to a7ff79193a 2024-08-12 09:14:24 +00:00 Compare
delliott force-pushed html-timeline from a7ff79193a to 1fa4d684d2 2024-08-12 12:44:12 +00:00 Compare
delliott force-pushed html-timeline from 1fa4d684d2 to 7b13f7db37 2024-08-12 15:24:05 +00:00 Compare
delliott force-pushed html-timeline from 7b13f7db37 to 8e85537c35 2024-08-13 09:35:23 +00:00 Compare
delliott force-pushed html-timeline from 2de3d8e420 to 6ac6bd3d20 2024-08-13 14:26:49 +00:00 Compare
delliott force-pushed html-timeline from 6ac6bd3d20 to 1b59e86d22 2024-08-13 14:30:34 +00:00 Compare
delliott force-pushed html-timeline from 1b59e86d22 to 1b61955e42 2024-08-14 10:03:06 +00:00 Compare
delliott force-pushed html-timeline from 1b61955e42 to 6c2ca9e357 2024-08-14 15:06:12 +00:00 Compare
delliott force-pushed html-timeline from 6c2ca9e357 to b7735ba8a6 2024-08-15 11:13:59 +00:00 Compare
delliott force-pushed html-timeline from b7735ba8a6 to ce0ed5681a 2024-08-15 15:41:23 +00:00 Compare
delliott force-pushed html-timeline from ce0ed5681a to b6b393e21f 2024-08-15 16:32:07 +00:00 Compare
delliott force-pushed html-timeline from b6b393e21f to d662c357ef 2024-08-16 09:02:19 +00:00 Compare
delliott force-pushed html-timeline from d662c357ef to 403b56a22d 2024-08-16 15:26:12 +00:00 Compare
delliott force-pushed html-timeline from 403b56a22d to 27f62e0dfe 2024-08-19 15:16:55 +00:00 Compare
delliott force-pushed html-timeline from 27f62e0dfe to 219901977a 2024-08-21 13:57:21 +00:00 Compare
delliott commented 2024-08-21 15:59:57 +00:00
Author
Member
Copy Link
Copy Source

For clarity here is some feedback from @max.mehl on the mailing list

- The years on the side are not easy to read when they are stacked vertically. Perhaps you could experiment with rotating them by 90 degrees counter-clockwise?
- In the titles, the "0x:" feel confusing. Only on second thought I understood that this probably means the month. Do we actually need the month or would just the year suffice? Otherwise I'd suggest to write the month somnewhere else on the card.
- The card colours could be a bit more differentiating and bright. Especially the policy and public card colours are rather dark.
- Inside the same year, the title boxes should have the same height. The year 2015 looks a bit unclean because of that.
- Some icons are colourful emojis, some are one-colour icons (at least on my system).
- The blue borders feel a bit too bold or at least too many. Perhaps the different years could have other separators, e.g. by subtle background colours?

I have changed the title text, removed the month, removed the borders in favour of low tint backgrounds, fixed the title box height across all boxes.

I have made some changes to colors. I would like to stick to using variables for brand colors instead of defining arbitrary colors, and there aren't that many branch color variables, so I am a little bit limited. I have changed the public color to @brand-warning which is semantically not right but looks better.

The emoji issue is a little odd, and needs further investigation.

All emojis are correct on firefox on debian, but I can confirm that they aren't right on android. I believe we should be using the fonts in this repo /fonts for all webpage fonts, so the fonts on device shouldn't matter. I suspect then the the emojis we are using actually don't have a monochrome variant defined our webpage fonts, and it just happens that the next default font on debian has them defined? But android should fallback to noto and it has enormous emoji support. Anyway, I will investigate further.

For clarity here is some feedback from @max.mehl on the mailing list ``` - The years on the side are not easy to read when they are stacked vertically. Perhaps you could experiment with rotating them by 90 degrees counter-clockwise? - In the titles, the "0x:" feel confusing. Only on second thought I understood that this probably means the month. Do we actually need the month or would just the year suffice? Otherwise I'd suggest to write the month somnewhere else on the card. - The card colours could be a bit more differentiating and bright. Especially the policy and public card colours are rather dark. - Inside the same year, the title boxes should have the same height. The year 2015 looks a bit unclean because of that. - Some icons are colourful emojis, some are one-colour icons (at least on my system). - The blue borders feel a bit too bold or at least too many. Perhaps the different years could have other separators, e.g. by subtle background colours? ``` I have changed the title text, removed the month, removed the borders in favour of low tint backgrounds, fixed the title box height across all boxes. I have made some changes to colors. I would like to stick to using variables for brand colors instead of defining arbitrary colors, and there aren't that many branch color variables, so I am a little bit limited. I have changed the public color to \@brand-warning which is semantically not right but looks better. The emoji issue is a little odd, and needs further investigation. All emojis are correct on firefox on debian, but I can confirm that they aren't right on android. I believe we should be using the fonts in this repo ```/fonts``` for all webpage fonts, so the fonts on device shouldn't matter. I suspect then the the emojis we are using actually don't have a monochrome variant defined our webpage fonts, and it just happens that the next default font on debian has them defined? But android should fallback to noto and it has enormous emoji support. Anyway, I will investigate further.
delliott commented 2024-08-21 16:09:53 +00:00
Author
Member
Copy Link
Copy Source

Yep, just investigated and we are falling back to browser fonts for emoji most of the time. We dont seem to have defined a list of fallback fonts in the css, just one per type. So the solution to the emoji is probably to do some work on the font css for the whole site. I think its probably best to do that in a separate PR.

Yep, just investigated and we are falling back to browser fonts for emoji most of the time. We dont seem to have defined a list of fallback fonts in the css, just one per type. So the solution to the emoji is probably to do some work on the font css for the whole site. I think its probably best to do that in a separate PR.
delliott force-pushed html-timeline from 556e374c91 to bcf5a61641 2024-08-22 07:28:58 +00:00 Compare
delliott commented 2024-08-22 14:48:30 +00:00
Author
Member
Copy Link
Copy Source

Fixed fonts in #4396

Fixed fonts in https://git.fsfe.org/FSFE/fsfe-website/pulls/4396
delliott force-pushed html-timeline from bcf5a61641 to 23f14ddb17 2024-08-22 14:51:23 +00:00 Compare
delliott force-pushed html-timeline from 23f14ddb17 to a42b73419a 2024-08-23 13:51:02 +00:00 Compare
delliott force-pushed html-timeline from a42b73419a to b5216417d7 2024-08-26 15:47:11 +00:00 Compare
delliott force-pushed html-timeline from b5216417d7 to f9235f4a0c 2024-08-29 07:44:32 +00:00 Compare
delliott commented 2024-08-29 07:54:58 +00:00
Author
Member
Copy Link
Copy Source

So, status report on this PR:

The technical details of moving from svg to html+css are complete. This pr can be seen rendered at https://test.fsfe.org/about/timeline/.

I am sure that some further work could be done on the Styling, but I am satisfied with its appearance, and all major concerns raised at time of writing have been addressed.

The only thing left to do therefore is update it with new content.

The FSFE Italy group has compiled a list of notable events that can be included here: https://share.fsfe.org/s/agXLXiweecHK9wc

So, status report on this PR: The technical details of moving from svg to html+css are complete. This pr can be seen rendered at https://test.fsfe.org/about/timeline/. I am sure that some further work could be done on the Styling, but I am satisfied with its appearance, and all major concerns raised at time of writing have been addressed. The only thing left to do therefore is update it with new content. The FSFE Italy group has compiled a list of notable events that can be included here: https://share.fsfe.org/s/agXLXiweecHK9wc
delliott force-pushed html-timeline from f9235f4a0c to f1b31d928e 2024-08-29 12:28:59 +00:00 Compare
delliott force-pushed html-timeline from f1b31d928e to 80bb24e9e7 2024-09-01 14:31:17 +00:00 Compare
delliott marked the pull request as ready for review 2024-09-01 14:31:23 +00:00
delliott commented 2024-09-01 14:32:35 +00:00
Author
Member
Copy Link
Copy Source

So after some discussion with @mk it was decided that this pr will just be for the technical overhaul, and the new content will come in a later PR.

At least that was my understanding of the resolution.

So after some discussion with @mk it was decided that this pr will just be for the technical overhaul, and the new content will come in a later PR. At least that was my understanding of the resolution.
delliott requested review from tobiasd 2024-09-01 14:32:48 +00:00
delliott force-pushed html-timeline from 80bb24e9e7 to b69c8f4f5b 2024-09-01 14:37:25 +00:00 Compare
delliott self-assigned this 2025-04-27 14:50:01 +00:00
delliott force-pushed html-timeline from b69c8f4f5b to 8916908954 2025-04-27 14:52:14 +00:00 Compare
delliott commented 2025-04-27 14:58:46 +00:00
Author
Member
Copy Link
Copy Source

I have put this on test again, see it here: https://test.fsfe.org/about/timeline/index.en.html

I have a recollection of there being something blocking this being merged, but frankly have forgotten what.

Are we able to move forward?

I have put this on test again, see it here: https://test.fsfe.org/about/timeline/index.en.html I have a recollection of there being something blocking this being merged, but frankly have forgotten what. Are we able to move forward?
delliott added the designxsl labels 2025-04-27 14:59:01 +00:00
delliott force-pushed html-timeline from 8916908954 to 2e3100eafc 2025-04-27 15:16:11 +00:00 Compare
delliott force-pushed html-timeline from 2e3100eafc to 46955db2ac 2025-04-27 15:46:05 +00:00 Compare
delliott force-pushed html-timeline from 46955db2ac to db5bd1d51b 2025-04-30 13:42:40 +00:00 Compare
nico.rikken commented 2025-06-05 04:58:41 +00:00
Member
Copy Link
Copy Source

@tobiasd I thought about this work today. Is it good to merge, so we can close this chapter and overhaul the content from here, in time for our upcoming 25 year celebration?

@tobiasd I thought about this work today. Is it good to merge, so we can close this chapter and overhaul the content from here, in time for our upcoming 25 year celebration?
delliott force-pushed html-timeline from db5bd1d51b to 5d3153f539 2025-06-28 08:41:56 +00:00 Compare
delliott force-pushed html-timeline from 5d3153f539 to 939cd5159d 2025-09-03 10:48:46 +00:00 Compare
delliott force-pushed html-timeline from 939cd5159d to 580e0f081d 2025-09-04 09:03:07 +00:00 Compare
delliott commented 2025-10-27 16:54:07 +00:00
Author
Member
Copy Link
Copy Source

So, we think this is good to merge? And update the content later? @tobiasd

So, we think this is good to merge? And update the content later? @tobiasd
tobiasd commented 2025-11-03 14:17:56 +00:00
Owner
Copy Link
Copy Source

CI is failing

CI is failing
delliott added 1 commit 2025-11-03 14:23:21 +00:00
feat: fix some differences in touched xhtml files
continuous-integration/drone/pr Build is failing
Details
c4d8dad352
delliott commented 2025-11-07 17:17:24 +00:00
Author
Member
Copy Link
Copy Source

So, I had a look at the contrast of the text and the background colors after tweaking them there, changes not deployed on test as its in use for other stuff.

Using https://webaim.org/resources/contrastchecker/ I seem to get that all text has at least 8.5 contrast. which exceeds pretty much all accessibility requirements?

I will not pretend to be a frontend dev, but it seems fine to me, probably?

So, I had a look at the contrast of the text and the background colors after tweaking them there, changes not deployed on test as its in use for other stuff. Using https://webaim.org/resources/contrastchecker/ I seem to get that all text has at least 8.5 contrast. which exceeds pretty much all accessibility requirements? I will not pretend to be a frontend dev, but it seems fine to me, probably?
👍 1
delliott force-pushed html-timeline from d96fa9373d to 788bb2d0c9 2025-11-14 13:49:53 +00:00 Compare
delliott force-pushed html-timeline from 2628eb1a89 to e1244323ff 2025-11-14 14:41:57 +00:00 Compare
delliott force-pushed html-timeline from e1244323ff to 38b6517b14 2025-11-14 15:13:55 +00:00 Compare
georgebs commented 2025-11-14 16:00:31 +00:00
Contributor
Copy Link
Copy Source

Is there a draft for content on the new timeline? It looks the same (content-wise) as ever! (I helped design it in commit #740 during my internship). I would happily make it my homework to research timeline events since 2017 @mk. Am going through everything a bit, anyway!

Agreed @delliott it now looks very passable and imo nice / easier to read / less scrunched!

Is there a draft for content on the new timeline? It looks the same (content-wise) as ever! (I helped design it in commit #740 during my internship). I would happily make it my homework to research timeline events since 2017 @mk. Am going through everything a bit, anyway! Agreed @delliott it now looks very passable and imo nice / easier to read / less scrunched!
delliott commented 2025-11-14 16:18:30 +00:00
Author
Member
Copy Link
Copy Source

Hey!

I am afraid there is no new content in this PR.

The goal of this PR was just to get the timeline refactored and functional, and then update content in a later one.

Unfortunately it got a little bogged down in some stuff, but now its moving on.

There is currently some discussion on what the categories should be, but once that is resolved it should be possible to move ahead with getting this in place in time to start adding content.

It is of course possible to start finding events to put in the timeline now, but it would be very conflict inducing to try and update the XML's of data before we iron out categories.

Hey! I am afraid there is no new content in this PR. The goal of this PR was just to get the timeline refactored and functional, and then update content in a later one. Unfortunately it got a little bogged down in some stuff, but now its moving on. There is currently some discussion on what the categories should be, but once that is resolved it should be possible to move ahead with getting this in place in time to start adding content. It is of course possible to start finding events to put in the timeline now, but it would be very conflict inducing to try and update the XML's of data before we iron out categories.
👍 1
tobiasd commented 2025-11-17 05:43:19 +00:00
Owner
Copy Link
Copy Source

@georgebs at the moment this PR is only the rework of the old non-responsive timeline. @anaghz will work on the content for the timeline - if you want to contribute, best contact her.

@georgebs at the moment this PR is only the rework of the old non-responsive timeline. @anaghz will work on the content for the timeline - if you want to contribute, best contact her.
👍 1
hl closed this pull request 2025-11-19 11:30:27 +00:00
hl deleted branch html-timeline 2025-11-19 11:30:28 +00:00
tobiasd reopened this pull request 2025-11-19 13:18:06 +00:00
delliott force-pushed html-timeline from 9d3447cc88 to eb2e21370d 2025-11-19 14:29:34 +00:00 Compare
delliott force-pushed html-timeline from eb2e21370d to d84d9f2ad4 2025-11-24 14:16:58 +00:00 Compare
tobiasd force-pushed html-timeline from d84481b858 to ff70494bc8 2025-11-26 12:56:47 +00:00 Compare
delliott force-pushed html-timeline from ff70494bc8 to 222e9c7338 2025-11-27 12:40:02 +00:00 Compare
delliott force-pushed html-timeline from e4a44db8e1 to e679e04f22 2025-11-28 20:11:45 +00:00 Compare
delliott force-pushed html-timeline from e679e04f22 to 5b40073725 2025-12-02 12:42:36 +00:00 Compare
delliott force-pushed html-timeline from 5b40073725 to ca77b2ddf9 2025-12-21 17:03:43 +00:00 Compare
delliott force-pushed html-timeline from ca77b2ddf9 to 4b9691aca7 2026-01-05 17:00:54 +00:00 Compare
delliott force-pushed html-timeline from 4b9691aca7 to 333840ce23 2026-01-05 17:25:24 +00:00 Compare
delliott force-pushed html-timeline from 333840ce23 to b9566a6a41 2026-01-06 17:26:31 +00:00 Compare
delliott force-pushed html-timeline from b9566a6a41 to 4b020fd735 2026-01-13 13:05:17 +00:00 Compare
delliott force-pushed html-timeline from 4b020fd735 to c1ee364e9f 2026-02-07 22:27:59 +00:00 Compare
delliott force-pushed html-timeline from c1ee364e9f to ed56c415da 2026-02-18 12:28:24 +00:00 Compare
tobiasd approved these changes 2026-02-19 09:36:36 +00:00
fsfe.org/about/timeline/default.xsl
@@ -0,0 +33,4 @@
<xsl:when test="@type = 'policy-advocacy'">🏛︎</xsl:when>
<xsl:when test="@type = 'legal-support'">⚖︎</xsl:when>
<xsl:when test="@type = 'public-awareness'">📣︎</xsl:when>
<xsl:otherwise>???</xsl:otherwise>
tobiasd commented 2026-02-19 09:34:50 +00:00
Owner
Copy Link
Copy Source

Means we need to find a nice confused emoticon for the otherwise case?

Means we need to find a nice confused emoticon for the _otherwise_ case?
tobiasd merged commit 56e616f980 into master 2026-02-19 09:36:48 +00:00
tobiasd deleted branch html-timeline 2026-02-19 09:36:49 +00:00
tobiasd referenced this issue from a commit 2026-02-19 09:36:49 +00:00
html-timeline (#4337)
nico.rikken commented 2026-02-21 12:30:09 +00:00
Member
Copy Link
Copy Source

@delliott thank you so much!!! I checked how it looks now and I'm very impressed how well it looks, how it is mobile-friendly and how it can be kept up to date and be translated. Thank you so much!!

@delliott thank you so much!!! I checked how it looks now and I'm very impressed how well it looks, how it is mobile-friendly and how it can be kept up to date and be translated. Thank you so much!!
Sign in to join this conversation.
Reviewers
No Reviewers
tobiasd
Labels
Clear labels
bug
build
cgi Scripting
design
disruptive
Requires careful coordination and documentation changes
 documentation
duplicate
easy
enhancement
Improving what is already there
 feature-request
help wanted
javascript
priority/low
question
system-hackers
tagging
text
translations
wait/bugfix
wait/inprogress
wait/misc
wait/proofread
wontfix
xsl
No Label design xsl
Milestone
No items
No Milestone
Assignees
Clear assignees
albert (Albert Dengg) alex.busch (alex.busch) alex.sander (alex.sander) anaghz (anaghz) annarita.russo (annarita.russo) ao (André Ockers) bcludts (bcludts) bonnie (bonnie) ciampix (Marco Ciampa) cryptie (cryptie) dario (dario) delliott (delliott) dfajfer (Damian Fajfer) dmaphy (Dominic Hopf) doczkal (Thomas Doczkal) eal (eal) egnun (Erik Grun) eventregbot (eventregbot) fi (fi) floriansnow (Florian Snow) gabriel.ku (gabriel.ku) guido (guido) hugo (hugo) ineiev (ineiev) jithendra (jithendra) jn (jn) jzarl (jzarl) linus (Linus Sehn) lucabon (Luca Bonissi) lucas.lasota (lucas.lasota) max.mehl (Max Mehl) mk (Matthias Kirschner) monochromec (monochromec) mweimann (Michael Weimann) nico.rikken (nico.rikken) patrick (Patrick Ohnewein) reinhard (Reinhard Müller) renovate-bot (Renovate Bot) repentinus (Heiki Lõhmus) schiessle (Björn Schießle) silviarbgl (Silvia Rbgl) sofiaritz (Sofía Aritz) tobiasd (tobiasd) vincent (vincent)
No Assignees delliott
5 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: FSFE/fsfe-website#4337
Delete Branch "html-timeline"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?