New Issue

join page layout #26

Closed

opened by hw · 17 comments

hw commented

Owner

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

👍 2

mray commented

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 :)

👍 3

momar commented

Owner

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.

grafik.png

430 KiB

🚀 3

hw commented

Poster

Owner

Nice! Is there a PR available for this yet?

momar commented

Owner

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.

fnetX commented

Owner

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?

momar commented

Owner

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.

fnetX commented

Owner

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

momar referenced this issue from Codeberg-e.V./registration-server

WIP: codeberg design & gettext translation #12

momar commented

Owner

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.

fnetX commented

Owner

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

mray commented

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:
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.
Adding a bit more linespacing to the paragraphs would generally make reading more pleasing. This is too narrow in my eyes:
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:

…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 ;)

image.png

87 KiB

image.png

56 KiB

image.png

38 KiB

image.png

84 KiB

👍 2

momar commented

Owner

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. 🙃

momar commented

Owner

@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.

👍 2 ❤️ 1

fnetX commented

Owner

Deployment looks great, will take care of this ASAP.

n added a new dependency

Codeberg-e.V./registration-server#12 - WIP: codeberg design & gettext translation

n added the

Kind: Web Design

Part: Design Kit

labels

mray commented

Collaborator

What does it need to close this issue?

fnetX commented

Owner

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?