organicmaps/website
13
Fork 1
Code Issues 31 Pull requests 8 Projects Releases Wiki Activity Actions

Fix the styling of the donation buttons #169

Open
meenbeese wants to merge 1 commit from meenbeese/redo-donate-buttons into master
pull from: meenbeese/redo-donate-buttons
merge into: organicmaps:master
Conversation 9 Commits 1 Files changed 22 +182 -224
meenbeese commented 2023-09-16 18:47:33 +00:00 (Migrated from github.com)
Copy link

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
desk1 desk2
Mobile: Before Mobile: After
mob1 mob2
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 | |:---:|:---:| | ![desk1](https://github.com/organicmaps/organicmaps.github.io/assets/114044633/a5b3668c-964f-45a6-8e65-371f59697dba) | ![desk2](https://github.com/organicmaps/organicmaps.github.io/assets/114044633/0cc9fd23-ae19-435f-8611-27ce70a48fc7) | | Mobile: Before | Mobile: After | |:---:|:---:| | ![mob1](https://github.com/organicmaps/organicmaps.github.io/assets/114044633/81f00dc4-3754-4f8c-9ea1-b241526367c9) | ![mob2](https://github.com/organicmaps/organicmaps.github.io/assets/114044633/8f07fdac-6253-4ac7-8c6f-2f7bc3d44cc7) |
biodranik (Migrated from github.com) reviewed 2023-09-17 00:33:03 +00:00
biodranik (Migrated from github.com) left a comment
Copy link

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?

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
biodranik (Migrated from github.com) commented 2023-09-17 00:28:59 +00:00
Copy link

There is no need to change the number in the old news, let's keep it for the grow history. Now we can say that we have +600 issues in 7 months )

There is no need to change the number in the old news, let's keep it for the grow history. Now we can say that we have +600 issues in 7 months )
meenbeese commented 2023-09-17 03:28:51 +00:00 (Migrated from github.com)
Copy link

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.

> 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.
meenbeese (Migrated from github.com) reviewed 2023-09-17 03:31:48 +00:00
content/news/2022-12-23/122/index.ru.md
meenbeese (Migrated from github.com) commented 2023-09-17 03:31:48 +00:00
Copy link

I had just replaced all 1200 results by 1800, so making this distinction makes sense.

I had just replaced all `1200` results by `1800`, so making this distinction makes sense.
biodranik commented 2023-09-17 05:34:48 +00:00 (Migrated from github.com)
Copy link

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?

> 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 commented 2023-09-17 07:39:42 +00:00
Owner
Copy link

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

I like the screenshots. Please fix translations separately to reduce the size of PR.
meenbeese commented 2023-09-17 19:58:43 +00:00 (Migrated from github.com)
Copy link

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.

> 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 commented 2023-09-17 20:24:26 +00:00 (Migrated from github.com)
Copy link

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

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

> I like the screenshots. Please fix translations separately to reduce the size of PR. Done! Here is the new PR for that: #173
biodranik (Migrated from github.com) reviewed 2023-09-19 20:52:17 +00:00
biodranik (Migrated from github.com) left a comment
Copy link
  1. Can you please rebase this commit on the latest master branch and force-push it here again?
  2. The preview link didn't show any changes to buttons for some reason. What is the branch-preview link?
1. Can you please rebase this commit on the latest master branch and force-push it here again? 2. The preview link didn't show any changes to buttons for some reason. What is the branch-preview link?
meenbeese commented 2023-09-19 22:25:50 +00:00 (Migrated from github.com)
Copy link
  1. 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.

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

> 1. 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. > 2. 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 (Migrated from github.com) reviewed 2023-09-20 07:47:31 +00:00
biodranik (Migrated from github.com) left a comment
Copy link
  1. How does it look on mobile screen? The current version fits it well. Most of our website audience comes from mobiles.
  2. Now buttons take too much space. Is it really necessary? Maybe leaving them more compact has its advantages?
  3. 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?
  4. As it was mentioned in #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).
1. How does it look on mobile screen? The current version fits it well. Most of our website audience comes from mobiles. 2. Now buttons take too much space. Is it really necessary? Maybe leaving them more compact has its advantages? 3. 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? 4. As it was mentioned in #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).
content/donate/index.af.md
biodranik (Migrated from github.com) commented 2023-09-20 07:43:17 +00:00
Copy link

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

  1. If someone already wants to donate without reading the details, the upper donate block is immediately visible on a mobile phone screen.
  2. 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.

Please check the English version (and a few other langs that are not yet synchronized with Weblate). We display donate buttons twice: 1. If someone already wants to donate without reading the details, the upper donate block is immediately visible on a mobile phone screen. 2. 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.
meenbeese commented 2023-09-20 20:21:18 +00:00 (Migrated from github.com)
Copy link
  1. 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.

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

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

  1. As it was mentioned in #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 ?

> 1. 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. > 2. 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. > 3. 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. > 4. As it was mentioned in #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 commented 2023-10-08 12:07:03 +00:00 (Migrated from github.com)
Copy link

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

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 commented 2023-11-01 20:54:59 +00:00 (Migrated from github.com)
Copy link

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.

> 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 (Migrated from github.com) reviewed 2023-11-01 22:24:33 +00:00
biodranik (Migrated from github.com) left a comment
Copy link

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.

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.
meenbeese (Migrated from github.com) reviewed 2023-11-02 03:32:38 +00:00
content/donate/index.af.md
meenbeese (Migrated from github.com) commented 2023-11-02 03:32:38 +00:00
Copy link
  1. I checked and updated all the missing translations manually. I will try to make them sync with Weblate as discussed.
  2. The text at the top is not huge and it won't prevent anyone from seeing the donation buttons immediately.
  3. Repetitive donations buttons are not good UX imo, because it looks too forceful and insisting instead of convincing.
1. I checked and updated all the missing translations manually. I will try to make them sync with Weblate as discussed. 2. The text at the top is not huge and it won't prevent anyone from seeing the donation buttons immediately. 3. Repetitive donations buttons are not good UX imo, because it looks too forceful and insisting instead of convincing.
This pull request has changes conflicting with the target branch.
  • content/donate/index.af.md
  • content/donate/index.ar.md
  • content/donate/index.eu.md
  • content/donate/index.hi.md
  • content/donate/index.hu.md
  • content/donate/index.md
  • content/donate/index.nl.md
  • content/donate/index.pl.md
  • content/donate/index.sv.md
  • content/donate/index.zh-Hans.md
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin meenbeese/redo-donate-buttons:meenbeese/redo-donate-buttons
git checkout meenbeese/redo-donate-buttons

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git checkout master
git merge --no-ff meenbeese/redo-donate-buttons
git checkout meenbeese/redo-donate-buttons
git rebase master
git checkout master
git merge --ff-only meenbeese/redo-donate-buttons
git checkout meenbeese/redo-donate-buttons
git rebase master
git checkout master
git merge --no-ff meenbeese/redo-donate-buttons
git checkout master
git merge --squash meenbeese/redo-donate-buttons
git checkout master
git merge --ff-only meenbeese/redo-donate-buttons
git checkout master
git merge meenbeese/redo-donate-buttons
git push origin master
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
about page

About Page of the website

  
bug

Something isn't working

  
community page

Community Page of the website

  
documentation

Improvements or additions to documentation

  
donate page

Donate Page of the website

  
duplicate

This issue or pull request already exists

  
enhancement

New feature or request

  
feature page

Feature Page of the website

  
good first issue

Good for newcomers

  
Google Season of Docs

Google Season of Docs

  
help wanted

Extra attention is needed

  
invalid

This doesn't seem right

  
landing page

Landing Page of website

  
news page

News Page of the website

  
question

Further information is requested

  
support page

Support Page of the website

  
wontfix

This will not be worked on

No labels
about page
bug
community page
documentation
donate page
duplicate
enhancement
feature page
good first issue
Google Season of Docs
help wanted
invalid
landing page
news page
question
support page
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: organicmaps/website#169
No description provided.
Delete branch "meenbeese/redo-donate-buttons"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?