Repository: liberapay/liberapay.com

Issue:
Design improvement
I would like to contribute to Liberapay. I don't know Python very well, I would like to help on the front-end. I started a little redesign of the team page.

![screen shot 2017-06-07 at 23 09 46-fullpage](https://user-images.githubusercontent.com/16254623/26931373-42d14b04-4c58-11e7-8c54-1346b78068a5.png)

I would like to have your opinion on this, and see how I could contribute (even if it's not by making style changes, I saw there is many "UI" issues I could work on).

Thanks for your feedback!
Wrong redirection from "Explore communities" on profile edition page
When editing your profile, you can see an "Explore communities" button, but when you click on it, you are redirected to the general "Explore" page (`/explore`). I think it should be `/explore/communities`.


Discussion:
@Bat41 Welcome, and thank you.

The process of setting up a local development environment to be able to contribute to Liberapay's code is described in the README, if something doesn't work don't hesitate to ask for advice.

Maybe you could start with a small Pull Request to improve the footer (#293), which I see that you did in your screenshot.

I have some remarks about your proposed revamp of the profile pages:

- maybe the number of supporters/backers/donors should be in the same sentence as the income, e.g. "Mastodon receives €XX.XX per week from YY donors."
- perhaps the "joined X ago" should be in the "Income History" section
- is the Donate button visible enough or we should we keep the "glow" it currently has?
Thanks for your feedback! I completely agree with your two first remarks. For the third one, I personally don't like the « glowing » effect the button currently have . But maybe a subtle grey shadow could make it more visible…

I'll start by improving the footer.
I'm not totally fan of rounded avatar (I have a squared one), but perhaps rounded corner like on github can be far nicer than the actuals.

Other wise I find it cleaner and more pleasant


Hi, everyone.

I created a [design concept](https://goblinrefuge.com/mediagoblin/u/foggymorning/m/liberapay-design-exploration) for Liberapay's landing page. 

It's a far cry from current original version. Frankly, I wanted to work with given colours (like yellow in the logo), but it somehow didn't work out. So even if it remains just a design exploration, please, let me share some decisions I made, perhaps, they might come in handy.

1. I went for vibrant violet and greenish colours. The analogy of something fresh and liberating, like a gulp of mountain wind or the limitless deep ocean. Fonts are PT Sans Bold and Regular.

2. Header includes 4 links: 'Explore', 'About', 'FAQ' and 'Contact'. The search bar moved to the right. Languages include flags (I can share a set of svg icons, may be there is a font). 'Explore' remains a dropdown. 'About' is a link, eliminating the tab on 'about' page. 'Money', 'legal', 'security', 'stats' moved to the Footer, they typically tend to be there. However, since these topics are important, it's fair to add these links in the text of 'About' page. May be something like "Please, also read our... Terms of service.. etc etc... information".

3. Footer includes: 'About', 'Contact', 'Statistics' (== Stats), 'Security', 'Terms of Service' (==Legal), 'Payments' (==Money). Links are in columns, makes it easier to expand footer and add more links later; added 'Branding' and 'Privacy' just for illustration.

4. I dropped 'Feeds' since this info is in the footer in 'Connect'. There are several extra links on that tab, may be, add them to 'Contact' page instead?

5. I also dropped 'Teams' tab, although it may seem controversial. It didn't feel right to have two different links (in 'Explore' and 'About') both named 'Teams'. Perhaps this page can expand the FAQ page - "What are teams"? It is after all an instruction, fits well into FAQ, it seems to me.

6. There is no 'Activity' on the landing itself, instead it's a link in the footer. I'm not sure the numbers are a decision factor for a new user to create an account, may be it's fine to leave this information as a separate page for those who like to explore the site.

7. The decision I doubted about most was writing 'LiberaPay' in pascal case. This probably is not a good idea, if it has some implications in regard to the registered organization title. Still I left it as is, since it's only a design concept.

If needed, I can share a .psd (sorry about that, GIMP is my weak skill) with layers, if anyone wishes "to play with colours and fonts".

Most importantly, **thank you** for Liberapay and all the work you're doing!
@lostinlight, it looks really cool.

> Languages include flags

However, flags represent countries, not languages
@jorgesumle Fair point.

The discussion started [long ago](https://ux.stackexchange.com/questions/2472/how-to-graphically-represent-a-language) and, I think, most users share your opinion.

I  supposed that the language name and abbreviation on the dropdown may remain as is, while icons next to them add some [visual sugar](http://wplang-1109.kxcdn.com/wp-content/uploads/2014/09/language-switcher-content.png) (which is the main reason websites use flags anyway).

Yet I agree that here we deal with the translation of the same content to different languages, not content that varies depending on the country, so flags are redundant.
@lostinlight Honestly: it looks very modern and… psychedelic. Like landing page of company selling LSD.
@lostinlight Thank you for your contribution. :-) It's a nice design, and the choices you made are food for thought even though I don't agree with some of them.
> There is no 'Activity' on the landing itself, instead it's a link in the footer. I'm not sure the numbers are a decision factor for a new user to create an account, may be it's fine to leave this information as a separate page for those who like to explore the site.

For the record: the Activity section of the homepage is meant to show the visitor that the platform is alive and growing, as opposed to an abandoned or stagnant service which may not be worth joining.
@Changaco Thank you, I'd be glad to be useful. 

[Link to psd file](https://gitlab.com/lostinlight/lp-concept)

Your point about the activity section is reasonable. As a user, I tend to ignore counters on websites (especially the ones that grow in real time), but sometimes they may help.


Resolving patch:
diff --git a/liberapay/utils/i18n.py b/liberapay/utils/i18n.py
--- a/liberapay/utils/i18n.py
+++ b/liberapay/utils/i18n.py
@@ -19,6 +19,7 @@
     NumberFormatError, parse_decimal
 )
 import jinja2.ext
+from markupsafe import Markup
 from pando.utils import utcnow
 
 from liberapay.exceptions import InvalidNumber
@@ -26,6 +27,14 @@
 
 
 Money = namedtuple('Money', 'amount currency')
+Wrap = namedtuple('Wrap', 'value wrapper')
+
+
+BOLD = Markup('<b>%s</b>')
+
+
+def Bold(value):
+    return Wrap(value, BOLD)
 
 
 class Age(timedelta):
@@ -179,6 +188,7 @@ def i_format(loc, s, *a, **kw):
         a = list(a)
     for c, f in [(a, enumerate), (kw, dict.items)]:
         for k, o in f(c):
+            o, wrapper = (o.value, o.wrapper) if isinstance(o, Wrap) else (o, None)
             if isinstance(o, Decimal):
                 c[k] = format_decimal(o, locale=loc)
             elif isinstance(o, int):
@@ -191,6 +201,8 @@ def i_format(loc, s, *a, **kw):
                 c[k] = format_timedelta(o, locale=loc)
             elif isinstance(o, datetime):
                 c[k] = format_datetime(o, locale=loc)
+            if wrapper:
+                c[k] = wrapper % c[k]
     return s.format(*a, **kw)
 
 
@@ -215,6 +227,7 @@ def get_text(context, loc, s, *a, **kw):
 
 def n_get_text(state, loc, s, p, n, *a, **kw):
     escape = state['escape']
+    n, wrapper = (n.value, n.wrapper) if isinstance(n, Wrap) else (n, None)
     n = n or 0
     msg = loc.catalog.get((s, p) if s else p)
     s2 = None
@@ -227,6 +240,8 @@ def n_get_text(state, loc, s, p, n, *a, **kw):
         loc = LOCALE_EN
         s2 = s if n == 1 else p
     kw['n'] = format_number(n, locale=loc) or n
+    if wrapper:
+        kw['n'] = wrapper % kw['n']
     if isinstance(s2, bytes):
         s2 = s2.decode('ascii')
     return i_format(loc, escape(s2), *a, **kw)
@@ -322,6 +337,7 @@ def add_helpers_to_context(context, loc):
     context.update(
         escape=_return_,  # to be overriden by renderers
         locale=loc,
+        Bold=Bold,
         Money=Money,
         to_age=to_age,
         _=lambda s, *a, **kw: get_text(context, kw.pop('loc', loc), s, *a, **kw),


Test patch: