Fix the styling of the donation buttons #169

meenbeese · 2023-09-16T18:47:33Z

Closes #150

Preview link: https://934d6be4.organicmaps-github-io.pages.dev/
(I do not know why some changes are not showing up correctly.)

Add a green colored border on mouse hover
to display our accent color on the icon border
Make the donation icons bigger and adjust
how many are shown based on the screen size
Remove duplicated donation icons at the end

Desktop: Before	Desktop: After

Mobile: Before	Mobile: After

biodranik

Thanks! Did you try to set up Cloudflare Preview deployments in your forked repo? They, unfortunately, don't allow to preview PRs from contributor's forks.
Or do you know other ways to see a live preview for contributor's PRs?

content/news/2022-12-23/122/index.ru.md

meenbeese · 2023-09-17T03:28:51Z

Thanks! Did you try to set up Cloudflare Preview deployments in your forked repo? They, unfortunately, don't allow to preview PRs from contributor's forks. Or do you know other ways to see a live preview for contributor's PRs?

This is really weird. I tried to set up a preview website using two different providers and both of them are not showing the changes I made to the icons, only to the text. I don't know why this is the case since zola serve works perfectly on my machine.

Due to this, I would recommend you to clone the redo-donate-buttons branch from my fork repo and just build it locally. This looks like the best way as other methods are not reliable for some reason. I'm sorry for the inconvenience caused.

biodranik · 2023-09-17T05:34:48Z

This is really weird. I tried to set up a preview website using two different providers and both of them are not showing the changes I made to the icons, only to the text. I don't know why this is the case since zola serve works perfectly on my machine.

Can you please share links to previews? Did you do zola build locally and compare the HTML output with the expected one?

rtsisyk · 2023-09-17T07:39:42Z

I like the screenshots. Please fix translations separately to reduce the size of PR.

meenbeese · 2023-09-17T19:58:43Z

Can you please share links to previews?

Here is the Cloudflare preview but do note that it does not reflect all my changes correctly: https://a5f2e489.organicmaps-github-io.pages.dev/donate/

Did you do zola build locally and compare the HTML output with the expected one?

I don't know what you mean exactly by that. I ran both zola build and zola serve again now and it matches what I expect it to be.

meenbeese · 2023-09-17T20:24:26Z

I like the screenshots. Please fix translations separately to reduce the size of PR.

Done! Here is the new PR for that: #173

biodranik

Can you please rebase this commit on the latest master branch and force-push it here again?
The preview link didn't show any changes to buttons for some reason. What is the branch-preview link?

meenbeese · 2023-09-19T22:25:50Z

Can you please rebase this commit on the latest master branch and force-push it here again?

Done! As you recommended, git rebase is much cleaner. Thanks.

The preview link didn't show any changes to buttons for some reason. What is the branch-preview link?

I couldn't manage to get a preview link for this branch. I you could give me some level of access as discussed earlier, that would be possible perhaps. Did you try to build it in your local machine to test it? That's a good way as well.

biodranik

How does it look on mobile screen? The current version fits it well. Most of our website audience comes from mobiles.
Now buttons take too much space. Is it really necessary? Maybe leaving them more compact has its advantages?
It is not clear for some users that these icons are actually clickable. Does it make sense to show some light border (aka button) on them, and highlight it on mouse hover/finger touch?
As it was mentioned in Migrate all translations to Weblate #164, some translations are not migrated to weblate and are not supported yet by tools/i18n script. Can you please help to finish this migration? Then it would be easy to add/modify text blocks everywhere, and keep everything in sync. There should be an issue or a closed PR from @rtsisyk about that (and he can also suggest how to finish it).

biodranik · 2023-09-20T07:43:17Z

content/donate/index.af.md

-
-Klik op u voorkeurbetaalmetode-ikoon hier onder:
-
-{{ donate_buttons() }}


Please check the English version (and a few other langs that are not yet synchronized with Weblate). We display donate buttons twice:

If someone already wants to donate without reading the details, the upper donate block is immediately visible on a mobile phone screen.

If someone is not sure, then there is another donate block below, after reading the motivating text (it will be improved later).

Removal of the second block may not be convenient, think of mobile users first.

I checked and updated all the missing translations manually. I will try to make them sync with Weblate as discussed.

The text at the top is not huge and it won't prevent anyone from seeing the donation buttons immediately.

Repetitive donations buttons are not good UX imo, because it looks too forceful and insisting instead of convincing.

meenbeese · 2023-09-20T20:21:18Z

How does it look on mobile screen? The current version fits it well. Most of our website audience comes from mobiles.

The mobile screenshots are also available in the top comment. If I left something important out, let me know please.

Now buttons take too much space. Is it really necessary? Maybe leaving them more compact has its advantages?

Yeah, this may be true for the mobile version. I can adjust that even though screen space is not a huge issue and making them too compact makes them harder to click imo.

It is not clear for some users that these icons are actually clickable. Does it make sense to show some light border (aka button) on them, and highlight it on mouse hover/finger touch?

I already implemented a dark green border on mouse hover/touch, and I can expand this if you think that is not enough. I will try to work on this more as I haven't done a great job about this distinction.

As it was mentioned in Migrate all translations to Weblate #164, some translations are not migrated to weblate and are not supported yet by tools/i18n script. Can you please help to finish this migration? Then it would be easy to add/modify text blocks everywhere, and keep everything in sync. There should be an issue or a closed PR from @rtsisyk about that (and he can also suggest how to finish it).

I will try to investigate this then, as I am not very familiar with the site's inner workings. Can you help me guide towards a solid initial implementation @rtsisyk ?

biodranik · 2023-10-08T12:07:03Z

It would be awesome to start with porting missing translations to weblate. They are described in more details here: https://github.com/organicmaps/organicmaps.github.io/blob/master/TRANSLATIONS.md

meenbeese · 2023-11-01T20:54:59Z

It would be awesome to start with porting missing translations to weblate.

Can't that be done in another PR where we only focus on translations? I can create a separate issue for that after this is done.

biodranik

Arent these files regenerated from weblate? Shouldn't you also edit/change .po files?

I've mentioned finishing weblate translation because now some files are translated using .po, and some are not.

Signed-off-by: Roman Tsisyk <roman@tsisyk.com> Signed-off-by: meenbeese <meenbeese@tutanota.com> Fix donation buttons styling Signed-off-by: meenbeese <meenbeese@tutanota.com> Revert changes related to the wording Signed-off-by: meenbeese <meenbeese@tutanota.com> tools/i18n.sh Signed-off-by: Alexander Borsuk <me@alex.bio> Regenerated + Fixed links in Arabic Signed-off-by: Roman Tsisyk <roman@tsisyk.com> Signed-off-by: meenbeese <meenbeese@tutanota.com> Reorganize and unify the donate page Fix donation buttons styling Signed-off-by: meenbeese <meenbeese@tutanota.com> Revert changes related to the wording Signed-off-by: meenbeese <meenbeese@tutanota.com> tools/i18n.sh Signed-off-by: Alexander Borsuk <me@alex.bio> Regenerated + Fixed links in Arabic Signed-off-by: Roman Tsisyk <roman@tsisyk.com> Signed-off-by: meenbeese <meenbeese@tutanota.com> Reorganize and unify the donate page

meenbeese force-pushed the redo-donate-buttons branch 8 times, most recently from 58343bb to 78ece3e Compare September 16, 2023 20:48

meenbeese temporarily deployed to production September 16, 2023 23:59 — with GitHub Actions Inactive

biodranik reviewed Sep 17, 2023

View reviewed changes

content/news/2022-12-23/122/index.ru.md Outdated Show resolved Hide resolved

meenbeese force-pushed the redo-donate-buttons branch from 02340f2 to 9b7a33d Compare September 17, 2023 03:35

meenbeese temporarily deployed to production September 17, 2023 05:35 — with GitHub Actions Inactive

meenbeese changed the title ~~Fix donation buttons' styling and some rewording~~ Fix the styling of the donation buttons Sep 17, 2023

meenbeese force-pushed the redo-donate-buttons branch 3 times, most recently from 27bdc1f to 9d5a5f8 Compare September 17, 2023 20:23

meenbeese force-pushed the redo-donate-buttons branch from 9d5a5f8 to 51732a5 Compare September 17, 2023 20:26

This was referenced Sep 17, 2023

Minor rewording and grammar fixes #173

Merged

Update the Donate page #178

Open

biodranik reviewed Sep 19, 2023

View reviewed changes

meenbeese force-pushed the redo-donate-buttons branch from 51732a5 to 9e4a5ca Compare September 19, 2023 22:22

meenbeese temporarily deployed to production September 19, 2023 22:22 — with GitHub Actions Inactive

biodranik reviewed Sep 20, 2023

View reviewed changes

biodranik reviewed Nov 1, 2023

View reviewed changes

meenbeese force-pushed the redo-donate-buttons branch from 9e4a5ca to 620a15c Compare November 2, 2023 01:07

meenbeese temporarily deployed to production November 2, 2023 01:07 — with GitHub Actions Inactive

meenbeese temporarily deployed to production November 2, 2023 01:53 — with GitHub Actions Inactive

meenbeese temporarily deployed to production November 2, 2023 01:55 — with GitHub Actions Inactive

meenbeese force-pushed the redo-donate-buttons branch from ece4ddf to 05c19c6 Compare November 2, 2023 01:57

meenbeese force-pushed the redo-donate-buttons branch from 05c19c6 to d5b0f29 Compare November 2, 2023 03:25

meenbeese temporarily deployed to production November 2, 2023 03:26 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix the styling of the donation buttons #169

Fix the styling of the donation buttons #169

meenbeese commented Sep 16, 2023 •

edited

biodranik left a comment

meenbeese commented Sep 17, 2023

biodranik commented Sep 17, 2023

rtsisyk commented Sep 17, 2023

meenbeese commented Sep 17, 2023

meenbeese commented Sep 17, 2023 •

edited

biodranik left a comment

meenbeese commented Sep 19, 2023 •

edited

biodranik left a comment

biodranik Sep 20, 2023

meenbeese Nov 2, 2023

meenbeese commented Sep 20, 2023

biodranik commented Oct 8, 2023

meenbeese commented Nov 1, 2023

biodranik left a comment


		Klik op u voorkeurbetaalmetode-ikoon hier onder:

		{{ donate_buttons() }}

Fix the styling of the donation buttons #169

Are you sure you want to change the base?

Fix the styling of the donation buttons #169

Conversation

meenbeese commented Sep 16, 2023 • edited

biodranik left a comment

Choose a reason for hiding this comment

meenbeese commented Sep 17, 2023

biodranik commented Sep 17, 2023

rtsisyk commented Sep 17, 2023

meenbeese commented Sep 17, 2023

meenbeese commented Sep 17, 2023 • edited

biodranik left a comment

Choose a reason for hiding this comment

meenbeese commented Sep 19, 2023 • edited

biodranik left a comment

Choose a reason for hiding this comment

biodranik Sep 20, 2023

Choose a reason for hiding this comment

meenbeese Nov 2, 2023

Choose a reason for hiding this comment

meenbeese commented Sep 20, 2023

biodranik commented Oct 8, 2023

meenbeese commented Nov 1, 2023

biodranik left a comment

Choose a reason for hiding this comment

meenbeese commented Sep 16, 2023 •

edited

meenbeese commented Sep 17, 2023 •

edited

meenbeese commented Sep 19, 2023 •

edited