join page layout #26

Closed
opened 1 year ago by hw · 17 comments
hw commented 1 year ago
Owner

https://join.codeberg.org/ might benefit from a caring review/look

https://join.codeberg.org/ might benefit from a caring review/look
mray commented 1 year ago
Collaborator

A good start would be:

  • get closer to the design guide
  • make the page fixed width and stack all "boxes" above each other (roughly 800px)
  • generally add some more whitespace (linespacing especially)

That should do most of the trick :)

A good start would be: * get closer to the [design guide](https://codeberg.org/Codeberg/Design/wiki/Branding) * make the page fixed width and stack all "boxes" above each other (roughly 800px) * generally add some more whitespace (linespacing especially) That should do most of the trick :)
Collaborator

I think having the boxes besides each other on a big screen kind of makes sense, but they should be responsive and stack on smaller screens. I have tried to use the new Halfmoon CSS based Codeberg stylesheet for the join page, and it looks quite good:

grafik

There still are some accessibility and UX issues, some translation work is required, and the form IDs don't match the backend anymore - and the navbar is GIMPed in because the component doesn't exist yet. So there's still quite some work to do here.

I think having the boxes besides each other on a big screen kind of makes sense, but they should be responsive and stack on smaller screens. I have tried to use the new Halfmoon CSS based Codeberg stylesheet for the join page, and it looks quite good: ![grafik](/attachments/aad44534-392b-4ee6-a7a6-91095fea5282) There still are some accessibility and UX issues, some translation work is required, and the form IDs don't match the backend anymore - and the navbar is GIMPed in because the component doesn't exist yet. So there's still quite some work to do here.
430 KiB
hw commented 9 months ago
Poster
Owner

Nice! Is there a PR available for this yet?

Nice! Is there a PR available for this yet?
Collaborator

Not yet, there's still some work to do before it's testable, and especially build-deploy-gitea#51 is required for this to work.

Not yet, there's still some work to do before it's testable, and especially [build-deploy-gitea#51](https://codeberg.org/Codeberg/build-deploy-gitea/pulls/51) is required for this to work.
Collaborator

What do you mean by translation work? Isn't the translation coverage 100 % or do you mean that things have to be translated again (or copied over) once you modify the templates?

What do you mean by translation work? Isn't the translation coverage 100 % or do you mean that things have to be translated again (or copied over) once you modify the templates?
Collaborator

The translation is directly baked into the template (which I have basically changed completely), so that's a lot of copy-paste work here. I've also changed a few lines of text for which it would need to be updated.

The translation is directly baked into the template (which I have basically changed completely), so that's a lot of copy-paste work here. I've also changed a few lines of text for which it would need to be updated.
Collaborator

Can we switch to external translation files then? Otherwise I can assign myself as long as it's obvious what's what 🙈

Can we switch to external translation files then? Otherwise I can assign myself as long as it's obvious what's what 🙈
Collaborator

I switched to gettext-compatible translation files & created a WIP pull request, let me know what you think. Not all strings are in the translation file yet, I'll do this in a few days.

I switched to gettext-compatible translation files & created a WIP pull request, let me know what you think. Not all strings are in the translation file yet, I'll do this in a few days.
Collaborator

Do you need help with the translations // copy-paste-work?

Do you need help with the translations // copy-paste-work?
Collaborator

Thank you for taking care of the form. Here are a couple of – mainly typograpic – notes that maybe take your improvements even further.

  • For what it is worth: my reasoning to stack the boxes wasn't about the looks, but to help reflect the ORDER of having to fill out the form. It just helps to have a linear arrangement with an obvious "endpoint" being big sign up button in the bottom middle.
    At least making sure the last box is always at the bottom and centered would be helpful.

  • Very long lines are less fun to read, like the top part of the form page:
    image

  • for some reason the old (and the new) form have a smaller font size for the SEPA paragraph. I think there is some requirement from the banks to not go below a certain size, but we should be fine to keep using the same.
    image

  • Adding a bit more linespacing to the paragraphs would generally make reading more pleasing. This is too narrow in my eyes:
    image

  • One can quickly get lost in stacking "boxes" inside "boxes" when creating forms. So in order to avoid it I often try to only use them where necessary. Having a background color contrast makes many outlines unnecessary. Or at least having a differntly colored borders for "inner" and "outer" boxes helps to better keep things apart. Either way a little more color won't hurt the form :)
    You could avoid an extra box around the new cute deer face for example:
    image
    …does not hav eto be this tone – any other color from the palette will do, too.

Thanks for finally using Inter as a font here! :D – other parts of the page should follow your example ;)

Thank you for taking care of the form. Here are a couple of – mainly typograpic – notes that maybe take your improvements even further. * For what it is worth: my reasoning to stack the boxes wasn't about the looks, but to help reflect the ORDER of having to fill out the form. It just helps to have a linear arrangement with an obvious "endpoint" being big sign up button in the bottom middle. At least making sure the last box is always at the bottom and centered would be helpful. * Very long lines are less fun to read, like the top part of the form page: ![image](/attachments/fa4ab1db-9fcb-40cb-9fbc-7ff5d1550517) * for some reason the old (and the new) form have a smaller font size for the SEPA paragraph. I think there is some requirement from the banks to not go below a certain size, but we should be fine to keep using the same. ![image](/attachments/7e2847d1-17b5-4529-94ac-7740703fa331) * Adding a bit more linespacing to the paragraphs would generally make reading more pleasing. This is too narrow in my eyes: ![image](/attachments/fe91a72a-c322-4c38-afa7-ed58c38a3ad4) * One can quickly get lost in stacking "boxes" inside "boxes" when creating forms. So in order to avoid it I often try to only use them where necessary. Having a background color contrast makes many outlines unnecessary. Or at least having a differntly colored borders for "inner" and "outer" boxes helps to better keep things apart. Either way a little more color won't hurt the form :) You could avoid an extra box around the new cute deer face for example: ![image](/attachments/945bd8e2-eafb-46b9-be00-648bd42c67e3) …does not hav eto be this tone – any other color from the palette will do, too. Thanks for finally using Inter as a font here! :D – other parts of the page should follow your example ;)
Collaborator

Do you need help with the translations // copy-paste-work?

Yes, but only after I changed the template to actually use the translation strings everywhere. I guess tomorrow evening I'll have a full translation file ready.

  • reflect the ORDER of having to fill out the form
  • Very long lines are less fun to read

I'll think of a solution for those two - the most common way to solve this would be a multi-step process, I don't neccessarily think that stacking everything without changing anything else makes the process better or more clear, it just adds the neccessity of scrolling way more.

The long lines could be solved by centering the text (see https://www.gethalfmoon.com/docs/containers/), but then the three columns don't make a lot of sense anymore.

a smaller font size for the SEPA paragraph

It's just a very long paragraph with not much information in it, but legally required. I'd keep it that way if we're allowed to do that? @hw?

Adding a bit more linespacing

Yes, that's coming from Halfmoon, and it probably becomes worse with Inter as a font. I'll change that in the design-kit.

One can quickly get lost in stacking "boxes" inside "boxes" when creating forms.

You're right, that's a good point! 😃

Thanks for finally using Inter as a font here! :D – other parts of the page should follow your example ;)

It will be automatically used by all pages using the design-kit. 🙃

> Do you need help with the translations // copy-paste-work? Yes, but only after I changed the template to actually use the translation strings everywhere. I guess tomorrow evening I'll have a full translation file ready. > - reflect the ORDER of having to fill out the form > - Very long lines are less fun to read I'll think of a solution for those two - the most common way to solve this would be a multi-step process, I don't neccessarily think that stacking everything without changing anything else makes the process better or more clear, it just adds the neccessity of scrolling way more. The long lines could be solved by centering the text (see https://www.gethalfmoon.com/docs/containers/), but then the three columns don't make a lot of sense anymore. > a smaller font size for the SEPA paragraph It's just a very long paragraph with not much information in it, but legally required. I'd keep it that way if we're allowed to do that? @hw? > Adding a bit more linespacing Yes, that's coming from Halfmoon, and it probably becomes worse with Inter as a font. I'll change that in the design-kit. > One can quickly get lost in stacking "boxes" inside "boxes" when creating forms. You're right, that's a good point! 😃 > Thanks for finally using Inter as a font here! :D – other parts of the page should follow your example ;) It will be automatically used by all pages using the design-kit. 🙃
Collaborator

@fnetX I have added all required strings in 860cf1a3e7, gave you access to the translation branch on that fork and made the new version available for testing on https://join.codeberg-test.org. Most strings are quite similar, but I also have changed some things - I guess the English translation of the Markdown fields is the most important right now.

@fnetX I have added all required strings in https://codeberg.org/momar/build-deploy-reg-server/commit/860cf1a3e740e1be015e3b02fbe67bb626424606, gave you access to the `translation` branch on that fork and made the new version available for testing on https://join.codeberg-test.org. Most strings are quite similar, but I also have changed some things - I guess the English translation of the Markdown fields is the most important right now.
Collaborator

Deployment looks great, will take care of this ASAP.

Deployment looks great, will take care of this ASAP.
n added the
Kind: Web Design
Part: Design Kit
labels 4 months ago
Collaborator

What does it need to close this issue?

What does it need to close this issue?
Collaborator

My open ToDo is finishing all the translations. I think Moritz mentioned some missing bits on his side, too. I can priorize my part if @momar wants to continue working on this, but I think you're busy with other stuff?

My open ToDo is finishing all the translations. I think Moritz mentioned some missing bits on his side, too. I can priorize my part if @momar wants to continue working on this, but I think you're busy with other stuff?
Collaborator

we could also close this and only keep the PR, not sure if everything design-related is finished.

we could also close this and only keep the PR, not sure if everything design-related is finished.
Collaborator

timed out. probably won't fix.

timed out. probably won't fix.
mray closed this issue 1 month ago
Sign in to join this conversation.
No Milestone
No Assignees
4 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.