FSFE
/
fsfe-website
26
30
Fork 88
Code Issues 62 Pull Requests 7 Wiki Activity

html-timeline #4337

Open
delliott wants to merge 5 commits from html-timeline into master
pull from: html-timeline
merge into: FSFE:master
Conversation 11 Commits 5 Files Changed 31 +1975 -45
delliott commented 2024-07-30 15:44:24 +00:00
Contributor
Copy Link

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
Contributor
Copy Link

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
Contributor
Copy Link

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
Contributor
Copy Link

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

  • beautified
  • sed to redirect links
  • update with new info
All translations from the SVG timeline have now been ported across. Must still be - [x] beautified - [x] sed to redirect links - [ ] update with new info
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
Contributor
Copy Link

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
Contributor
Copy Link

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
Contributor
Copy Link

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 added 1 commit 2024-08-13 14:08:34 +00:00
continuous-integration/drone/pr Build is passing Details
2de3d8e420
Adding some more timeline events
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 added 1 commit 2024-08-21 15:44:34 +00:00
continuous-integration/drone/push Build is passing Details
continuous-integration/drone/pr Build is passing Details
556e374c91
Tweak colors
delliott commented 2024-08-21 15:59:57 +00:00
Author
Contributor
Copy Link

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
Contributor
Copy Link

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
Contributor
Copy Link

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
Contributor
Copy Link

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 changed title from WIP: html-timeline to html-timeline 2024-09-01 14:31:23 +00:00
delliott commented 2024-09-01 14:32:35 +00:00
Author
Contributor
Copy Link

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
All checks were successful
continuous-integration/drone/pr Build is passing
Required
Details
This pull request can be merged automatically.
This branch is out-of-date with the base branch
You are not authorized to merge this pull request.
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

   
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
bug
build
cgi Scripting
design
disruptive
documentation
duplicate
easy
feature-request
help wanted
javascript
priority/low
question
system-hackers
tagging
text
translations
wait/bugfix
wait/inprogress
wait/misc
wait/proofread
wontfix
xsl
Milestone
Clear milestone
No items
No Milestone
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: FSFE/fsfe-website#4337
No description provided.
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?