Redesigning the Footer #23

lhinderberger commented 2020年09月10日 18:58:51 +02:00

Mockup Footer

This is a mockup for a new footer for Codeberg.

Its main purpose is to create space in the main menu until Codeberg/build-deploy-gitea#17 is ready, but its life can be extended beyond that to add a neat index of important links at first glance at the bottom of the page.

It would keep the items for daily usage (plus Donations 😉) in the top menu, while moving items that are used less-than-daily down to the footer.

It would solve the following issues the short term:

• Access to Documentation (Codeberg/Documentation#7) needs space in the main menu, of which there currently is too little.
• Codeberg/Community#140 which is also about too little space in the main menu

I’m not sure yet where to put the language selector in this design. I'd currently lean towards putting it centered in the very bottom, under the small print.

Please share your thoughts on this design and feel free to comment and critizise it.

 This is a mockup for a new footer for Codeberg. Its main purpose is to create space in the main menu until Codeberg/build-deploy-gitea#17 is ready, but its life can be extended beyond that to add a neat index of important links at first glance at the bottom of the page. It would keep the items for daily usage (plus Donations :wink:) in the top menu, while moving items that are used less-than-daily down to the footer. It would solve the following issues the short term: - Access to Documentation (Codeberg/Documentation#7) needs space in the main menu, of which there currently is too little. - Codeberg/Community#140 which is also about too little space in the main menu I’m not sure yet where to put the language selector in this design. I'd currently lean towards putting it centered in the very bottom, under the small print. Please share your thoughts on this design and feel free to comment and critizise it.

hw commented 2020年09月10日 20:17:30 +02:00

Generally nice, maybe the double logo is a bit irritating?

Generally nice, maybe the double logo is a bit irritating?

lhinderberger commented 2020年09月10日 21:23:08 +02:00

Yes, that was a concern of mine too. Maybe the logo should be in grey instead of in color, so more like a watermark?

Yes, that was a concern of mine too. Maybe the logo should be in grey instead of in color, so more like a watermark?

lhinderberger commented 2020年09月10日 21:24:27 +02:00

By the way: While redesigning the footer, we could also add links to our profiles on Mastodon etc. - maybe as its own column ("Social"?)

By the way: While redesigning the footer, we could also add links to our profiles on Mastodon etc. - maybe as its own column ("Social"?)

hw commented 2020年09月11日 08:16:28 +02:00

good point

good point

mray commented 2020年09月13日 12:42:30 +02:00

I like the idea of having that footer.

Just for reference this is how github/Gitlab/Bitbucket present their footer for anonymous users on the homepage:

image

image

image

---

• Is this footer to be displayed in for logged in users, too? It might make sense to not have that heavy footer in your way all day if you just want to keep working (like GitLab handles it).

• Donation links should remain in the top header either way ;)

• I like the clean structure that resembles the gitlab one 👍

• Just the logo-symbol would suffice here imo

• Adding more linespacing would probably make it "lighter"

• making use of some darker background makes the section cut clearer

• Uppercasing looks better but messes too much with Codeberg not supposed to be looking like CODEBERG. :P

• maybe we should feature a mastodon link, too?

Here I juxtapose what I would probably change on your proposal:

image

I like the idea of having that footer. Just for reference this is how github/Gitlab/Bitbucket present their footer for anonymous users on the homepage:    --- * Is this footer to be displayed in for logged in users, too? It might make sense to not have that heavy footer in your way all day if you just want to keep working (like GitLab handles it). * <ot> Donation links should remain in the top header either way ;) * I like the clean structure that resembles the gitlab one 👍 * Just the logo-symbol would suffice here imo * Adding more linespacing would probably make it "lighter" * making use of some darker background makes the section cut clearer * Uppercasing looks better but messes too much with Codeberg not supposed to be looking like CODEBERG. :P * <ot> maybe we should feature a mastodon link, too? Here I juxtapose what I would probably change on your proposal: 

lhinderberger commented 2020年09月13日 13:56:16 +02:00

I like the color scheme of your mockup and I think the roomier spacing makes it appropriate for use on the main page, when not logged in 👍

To answer your questions:

• How about we make a more compact variation of that footer for logged in users? (That variation would have smaller font sizes and less spacing, but contain essentially the same information)
• The Donation link was never supposed to be removed from the main menu 😉
• A Mastodon link would be nice (as suggested earlier). Do we have any additional profiles on other sites that we want to link to as well?

Where would you suggest to put the language chooser? It's a bit "lost" down in the footer. Maybe putting only the globe symbol in the main menu would be an option (but that would mean space lost there 🙈)

I like the color scheme of your mockup and I think the roomier spacing makes it appropriate for use on the main page, when not logged in :thumbsup: To answer your questions: - How about we make a more compact variation of that footer for logged in users? (That variation would have smaller font sizes and less spacing, but contain essentially the same information) - The Donation link was never supposed to be removed from the main menu :wink: - A Mastodon link would be nice (as suggested earlier). Do we have any additional profiles on other sites that we want to link to as well? Where would you suggest to put the language chooser? It's a bit "lost" down in the footer. Maybe putting only the globe symbol in the main menu would be an option (but that would mean space lost there 🙈)

mray commented 2020年09月13日 20:17:49 +02:00

• How about we make a more compact variation of that footer for logged in users? (That variation would have smaller font sizes and less spacing, but contain essentially the same information)

The real benefit would come from having less content (or no content at all) in the footer, not the actual size of things. I guess it is just like working on a tidy bench. For consistency I'd not go for different footers (except responsiveness)

• A Mastodon link would be nice (as suggested earlier). Do we have any additional profiles on other sites that we want to link to as well?

No idea. But it could look like that:

image

Where would you suggest to put the language chooser?

It is always a good thing to put that kind of link in a place where people are used to find them on other pages: the top right. I'm not a huge fan of the image icon, but it does the trick and would not take up that much space up there.

> * How about we make a more compact variation of that footer for logged in users? (That variation would have smaller font sizes and less spacing, but contain essentially the same information) The real benefit would come from having less content (or no content at all) in the footer, not the actual size of things. I guess it is just like working on a tidy bench. For consistency I'd not go for different footers (except responsiveness) > * A Mastodon link would be nice (as suggested earlier). Do we have any additional profiles on other sites that we want to link to as well? No idea. But it could look like that:  > Where would you suggest to put the language chooser? It is always a good thing to put that kind of link in a place where people are used to find them on other pages: the top right. I'm not a huge fan of the  icon, but it does the trick and would not take up that much space up there.

lhinderberger commented 2020年09月13日 20:21:14 +02:00

Okay, but there needs to be some place to put the links for logged-in users as well, IMHO. Where would we put them so that people can find them if there's no footer and not enough space in the main menu?

Okay, but there needs to be some place to put the links for logged-in users as well, IMHO. Where would we put them so that people can find them if there's no footer and not enough space in the main menu?

mray commented 2020年09月13日 20:23:58 +02:00

As a rule of thumb, I'd avoid having any link exclusively in the footer. I know that's not really helpful in that case but ties into the general way of how navigation is structured.

I don't know the current status of the redesign of the main menu...

As a rule of thumb, I'd avoid having any link *exclusively* in the footer. I know that's not really helpful in that case but ties into the general way of how navigation is structured. I don't know the current status of the redesign of the main menu...

lhinderberger commented 2020年09月13日 20:35:15 +02:00

See Codeberg/build-deploy-gitea#17 (comment)

The footer approach would really be a quick stop-gap solution until the new main menu is completely finished. As such, it would be acceptable to have it also visible for logged in users in the short term, in my opinion.

See https://codeberg.org/Codeberg/build-deploy-gitea/issues/17#issuecomment-79062 The footer approach would really be a quick stop-gap solution until the new main menu is completely finished. As such, it would be acceptable to have it also visible for logged in users in the short term, in my opinion.

mray commented 2020年09月13日 20:43:37 +02:00

I don't see the footer links as a replacement for anything. Especially for new visitors it is an easy and established way to find certain links. Even the best possible main menu would benefit from also having the essential links in a footer.

I don't see the footer links as a replacement for anything. Especially for new visitors it is an easy and established way to find certain links. Even the best possible main menu would benefit from also having the essential links in a footer.

lhinderberger commented 2020年09月13日 21:05:04 +02:00

I can't follow. What intended replacement are you referring to?

Did you mean "the main menu as a replacement" in your first sentence?

In any case: Wouldn't what you said also apply to logged-in users? I mean, as a logged-in user I would like to be able to find the links in the footer too, right? I can see though, that they would be a bit heavy on the looks. But by making the footer a bit more "quiet" in the logged-in case and giving the main content some breathing space by adding an appropriate margin that could be mitigated.

I can't follow. What intended replacement are you referring to? Did you mean "the main menu as a replacement" in your first sentence? In any case: Wouldn't what you said also apply to logged-in users? I mean, as a logged-in user I would like to be able to find the links in the footer too, right? I can see though, that they would be a bit heavy on the looks. But by making the footer a bit more "quiet" in the logged-in case and giving the main content some breathing space by adding an appropriate margin that could be mitigated.

mray commented 2020年09月13日 21:32:33 +02:00

Did you mean "the main menu as a replacement" in your first sentence?

No, I just wanted to say that the footer links should generally not replace any other link. (Including any link of the new main menu)

I can’t follow. What intended replacement are you referring to?

If I understood you correctly you proposed to put up the footer in question, only as long as the the new menu isn't available, then remove the footer as the new menu would probably contain all needed links.

> Did you mean "the main menu as a replacement" in your first sentence? No, I just wanted to say that the footer links should generally not replace any other link. (Including any link of the new main menu) > I can’t follow. What intended replacement are you referring to? If I understood you correctly you proposed to put up the footer in question, only as long as the the new menu isn't available, then remove the footer as the new menu would probably contain all needed links.

lhinderberger commented 2020年09月13日 21:37:31 +02:00

Yes that seems about right. 👍 So, how do we more forward now?

Yes that seems about right. :thumbsup: So, how do we more forward now?

mray commented 2020年09月13日 22:21:26 +02:00

I think having the proposed footer for all not-logged in users is a safe next step either way.

Logged-in users should not miss any important links and get them at least via one other place.

I think having the proposed footer for all not-logged in users is a safe next step either way. Logged-in users should not miss any important links and get them at least via one other place.

mray commented 2020年09月13日 22:22:50 +02:00

via one other place

That does not need to be a menu item, but could also be any page.

> via one other place That does not need to be a menu item, but could also be any page.

lhinderberger commented 2020年09月13日 22:39:55 +02:00

I think it's problematic to have these links hidden behind a level of indirection. We wouldn't want to sacrifice the findability of e.g. the Blog to keep the design slightly more minimal.

Currently, I don't have the time to start to implement a partial solution that misses the goal of quickly and effectively providing space in the main menu for all users. This is especially with the new Documentation site in mind, which currently is not findable for most users because of this problem.

Can you suggest a concrete alternative that's quick to implement and that would be acceptable for you design-wise? Then I can get to work and implement the PR.

I think it's problematic to have these links hidden behind a level of indirection. We wouldn't want to sacrifice the findability of e.g. the Blog to keep the design slightly more minimal. Currently, I don't have the time to start to implement a partial solution that misses the goal of quickly and effectively providing space in the main menu for all users. This is especially with the new Documentation site in mind, which currently is not findable for most users because of this problem. Can you suggest a concrete alternative that's quick to implement and that would be acceptable for you design-wise? Then I can get to work and implement the PR.

mray commented 2020年09月13日 23:54:25 +02:00

I don't want to interfere with current work that is happening in the menu. I think it is a lot of effort to wrap your head around the project and come up with a good structure, and I currently don't feel well prepared to even start that task.

But as of next steps, just having your proposed footer as an addition poses no real problem at all. Hiding the footer (for logged in people) and restructuring the entire menu are added bonus from my perspective ^_^

I don't want to interfere with current work that is happening in the menu. I think it is a lot of effort to wrap your head around the project and come up with a good structure, and I currently don't feel well prepared to even start that task. But as of next steps, just having your proposed footer as an addition poses no real problem at all. Hiding the footer (for logged in people) and restructuring the entire menu are added bonus from my perspective ^_^

hw commented 2020年09月15日 22:41:01 +02:00

Yes that seems about right. 👍 So, how do we more forward now?

File in question is footer.tmpl to be placed in https://codeberg.org/Codeberg/build-deploy-gitea/src/branch/master/etc/gitea/templates/custom -- please check the gitea docs for detailed discussion of the template system.

If we have a PR we can merge+deploy to codeberg-test, after due testing, to production.

> Yes that seems about right. :thumbsup: So, how do we more forward now? > File in question is `footer.tmpl` to be placed in https://codeberg.org/Codeberg/build-deploy-gitea/src/branch/master/etc/gitea/templates/custom -- please check the gitea docs for detailed discussion of the template system. If we have a PR we can merge+deploy to codeberg-test, after due testing, to production.

lhinderberger commented 2020年09月16日 17:26:18 +02:00

@hw - Thank you :) I will try to have a look at this when being back on my development machine on Sunday (right now I'm travelling and I have limited free data traffic 😉)

@hw - Thank you :) I will try to have a look at this when being back on my development machine on Sunday (right now I'm travelling and I have limited free data traffic :wink:)

lhinderberger commented 2020年09月20日 15:30:24 +02:00

After having a closer look at it now, I unfortunately couldn't find a way to remove the default footer for replacing it with an entirely custom footer as proposed above using only Gitea's custom template system.

As this now would require changes to Gitea itself, and as I'm not that knowledgeable about Gitea's internals and development process, I will leave this idea here for now and invite anyone who is knowledgeable about these things to pick it back up.

_{Please see Codeberg/Community#288 for an idea on how to simplify and speed up frontend development in the long run :)}

After having a closer look at it now, I unfortunately couldn't find a way to remove the default footer for replacing it with an entirely custom footer as proposed above using only Gitea's custom template system. As this now would require changes to Gitea itself, and as I'm not that knowledgeable about Gitea's internals and development process, I will leave this idea here for now and invite anyone who *is* knowledgeable about these things to pick it back up. _{Please see Codeberg/Community#288 for an idea on how to simplify and speed up frontend development in the long run :)}

hw commented 2020年09月21日 19:10:35 +02:00

@lhinderberger : as quick'n'dirty hack for a MVP: would it work to set "display: none" to disable elements that collide with the template?

@lhinderberger : as quick'n'dirty hack for a MVP: would it work to set "display: none" to disable elements that collide with the template?

lhinderberger commented 2020年09月22日 03:21:09 +02:00

@hw Yes I think that could work, the element to be hidden in this case would be the <footer> element from templates/base/footer_content.tmpl.

That file also contains the source for the language selector. It might be worth moving that out into an individual template in the Gitea sourcecode, which could then be included from the custom footer.

I won't be able to have a closer look at this until at least next week though.

@hw Yes I think that could work, the element to be hidden in this case would be the `<footer>` element from `templates/base/footer_content.tmpl`. That file also contains the source for the language selector. It might be worth moving that out into an individual template in the Gitea sourcecode, which could then be included from the custom footer. I won't be able to have a closer look at this until at least next week though.

binyamin commented 2021年03月05日 21:45:48 +01:00

@lhinderberger @hw Is https://codeberg.org/Codeberg/Design/issues/23#issuecomment-80656 the relevant mockup? I'm thinking of working on this.

@lhinderberger @hw Is <https://codeberg.org/Codeberg/Design/issues/23#issuecomment-80656> the relevant mockup? I'm thinking of working on this.

hw commented 2021年03月05日 22:03:35 +01:00

This would be great! The gitea templates are in https://codeberg.org/Codeberg/build-deploy-gitea/src/branch/master/etc/gitea/templates/custom, gitea supports a footer.tmpl template file.

This would be great! The gitea templates are in https://codeberg.org/Codeberg/build-deploy-gitea/src/branch/master/etc/gitea/templates/custom, gitea supports a `footer.tmpl` template file.

mray commented 2021年08月21日 18:29:54 +02:00

Looks like we are stuck with having no footer for some time now. Are we waiting on anything particular?

Looks like we are stuck with having no footer for some time now. Are we waiting on anything particular?

lhinderberger commented 2021年08月21日 19:01:47 +02:00

@mray - I'm not sure if @binyamin is working on this now, but I have stopped working on the issue a long time ago.

@mray - I'm not sure if @binyamin is working on this now, but I have stopped working on the issue a long time ago.

mray commented 2021年10月25日 00:07:53 +02:00

I'm considering this an abandoned issue. Won't close since I didn't open it.

I'm considering this an abandoned issue. Won't close since I didn't open it.

binyamin commented 2021年10月25日 20:18:40 +02:00

@mray I didn't intend to abandon it, and I'm sorry that I gave that impression. I've had trouble deploying codeberg locally, so I can't really work on codeberg at all now. If there's a working docker image, that might help. If I have specific questions, I'll mention something in a matrix room.

@mray I didn't intend to abandon it, and I'm sorry that I gave that impression. I've had trouble deploying codeberg locally, so I can't really work on codeberg at all now. If there's a working docker image, that might help. If I have specific questions, I'll mention something in a matrix room.

binyamin commented 2021年10月25日 21:06:25 +02:00

Just checked my setup. I'm waiting on Codeberg-Infrastructure/deployment#3 (cc @momar)

Just checked my setup. I'm waiting on Codeberg-Infrastructure/deployment#3 (cc @momar)

fnetX commented 2021年10月28日 23:43:03 +02:00

@binyamin I don't know if the deployment repo works by now, but I propose not to use the templating system in build-deploy-gitea, but develop this directly in the gitea source code. (Edit: or check if this works #23 (comment))

Gitea also has more documentation on how to work on the code, just checkout the codeberg/gitea repo (current branch), read the Gitea guide on what you need (probably mainly npm and Go), and then run for example make TAGS="sqlite" watch to continuously rebuild Gitea while you are working on it.

You could directly fiddle with the template files, maybe create a codeberg_footer.tmpl and replace the Gitea footer with an inclusion of that one.

You can also push non-working stuff and ask for help. I'm quite familiar with dirty fixes to the Gitea templates by now 🤷 🙈

@binyamin I don't know if the deployment repo works by now, but I propose not to use the templating system in build-deploy-gitea, but develop this directly in the gitea source code. (Edit: or check if this works https://codeberg.org/Codeberg/Design/issues/23#issuecomment-181220) Gitea also has more documentation on how to work on the code, just checkout the codeberg/gitea repo (current branch), read the Gitea guide on what you need (probably mainly npm and Go), and then run for example `make TAGS="sqlite" watch` to continuously rebuild Gitea while you are working on it. You could directly fiddle with the template files, maybe create a codeberg_footer.tmpl and replace the Gitea footer with an inclusion of that one. You can also push non-working stuff and ask for help. I'm quite familiar with dirty fixes to the Gitea templates by now 🤷 🙈

mray commented 2022年03月23日 20:43:51 +01:00

The footer has been redesigned implementation pending or not going to be fixed. Design work can be considered done. Closing.

The footer [has been redesigned](https://codeberg.org/Codeberg/Design/issues/23#issuecomment-80656) implementation pending or not going to be fixed. Design work can be considered done. Closing.