style: groups as cards and group images

[borgoat]

• Fixes Allow group admin to add a picture for the group #15
• Fixes Add feedback button #117

In the end, I didn't use cards for groups for now, the layout was a bit too complex with Grids and aspect ratios and groups without images... for now, I did a more simple whatsapp-like list.

I also added a card that comes up once 3 days after sign up. It prompts the user to either send us a message or rate us on the stores. It can be swiped to dismiss.

I was thinking we could also show the same card e.g. in the settings, but I didn't do it yet (as I would have to change those to be a custom scroll view too and didn't want to do it yet...)

It looks like this (ignore the error in the end, it was because I forced the card to be shown for demo purposes)

home.mp4

[inpt333]

Some issues I found with my tests:

• If a group only has a name and no description, the list item looks misaligned.

• The feedback buttons "Send us a message" and "Rate us on Google Play" on web don't work.
• Why "Rate us on Google Play" if running on web?
• When saving group details, the save button remains enabled which is confusing because I don't know if the saving worked or not. This usability issue exists already in production anyway.
• On web, in my profile the camera icon is too outside.
• If I don't have a picture, the profile picture is empty.

• When configuring a picture for my profile or group, a dialog is shown and I cannot dismiss it. I am obligated to click on one of the two options.
• I get an exception when uploading a group picture on web, but then when I save the group and navigate back, the picture is shown in the list.
• I cannot see group name, back button and other stuff when I have a picture. And the cropping doesn't work well in this case.

[borgoat]

Some issues I found with my tests:

• If a group only has a name and no description, the list item looks misaligned.
• The feedback buttons "Send us a message" and "Rate us on Google Play" on web don't work.
• Why "Rate us on Google Play" if running on web?
• When saving group details, the save button remains enabled which is confusing because I don't know if the saving worked or not. This usability issue exists already in production anyway.
• If I don't have a picture, the profile picture is empty.
• When configuring a picture for my profile or group, a dialog is shown and I cannot dismiss it. I am obligated to click on one of the two options.
• I get an exception when uploading a group picture on web, but then when I save the group and navigate back, the picture is shown in the list.
• I cannot see group name, back button and other stuff when I have a picture. And the cropping doesn't work well in this case.

What I managed to fix so far - and another issue I found

• If a group already has a picture, I change something else in it and save, then the picture is gone
• If there are multiple groups with the same name and no image we have a duplicate hero tag exception

Can you also send a screenshot of this? I see it properly even on wide screen?

• On web, in my profile the camera icon is too outside.

[inpt333]

Some issues I found with my tests:

• If a group only has a name and no description, the list item looks misaligned.
• The feedback buttons "Send us a message" and "Rate us on Google Play" on web don't work.
• Why "Rate us on Google Play" if running on web?
• When saving group details, the save button remains enabled which is confusing because I don't know if the saving worked or not. This usability issue exists already in production anyway.
• If I don't have a picture, the profile picture is empty.
• When configuring a picture for my profile or group, a dialog is shown and I cannot dismiss it. I am obligated to click on one of the two options.
• I get an exception when uploading a group picture on web, but then when I save the group and navigate back, the picture is shown in the list.
• I cannot see group name, back button and other stuff when I have a picture. And the cropping doesn't work well in this case.

What I managed to fix so far - and another issue I found

• If a group already has a picture, I change something else in it and save, then the picture is gone
• If there are multiple groups with the same name and no image we have a duplicate hero tag exception

Can you also send a screenshot of this? I see it properly even on wide screen?

• On web, in my profile the camera icon is too outside.

It's in the screenshot of my empty profile of my previous comment. The camera icon normally is more to the inside of the circle (look at whatsapp and instagram).

[borgoat]

Can you also send a screenshot of this? I see it properly even on wide screen?

• On web, in my profile the camera icon is too outside.

It's in the screenshot of my empty profile of my previous comment. The camera icon normally is more to the inside of the circle (look at whatsapp and instagram).

I think that should look the same on all platforms, not just web? Do you see it different on Android? Anyway I changed it to this to make it more compact, what do you think?

[borgoat]

I believe these are the only 2 remaining points except for the one in the comment above - I would do them in another issue #125 as I think forms need to be reviewed, in general, but this one is becoming kind of massive...

• When saving group details, the save button remains enabled which is confusing because I don't know if the saving worked or not. This usability issue exists already in production anyway.

• If a group already has a picture, I change something else in it and save, then the picture is gone

[inpt333]

I've found these now:

• The crop image overflows on web:

• The group picture looks a bit weird in the group screen due to the dimensions of the picture. I think the issue is that we're expecting a square for it because it's going to be used as avatar in the list, but at the same time we're using as "background picture" in the group page while the expected dimensions should be different (more a rectangle). Look at LinkedIn, they draw a square for the profile pic, and a rectangle for the background picture:

What if we just use it as in the profile page in a circle?

[inpt333]

@borgoat everything seems to work fine. I just discover some usability issues that I've opened in the backlog:

• Crop image modal overflows on web #130
• Swiping in the group details screen is buggy on web #129
• Feedback buttons too close in small screens #128
• Wrong scrolling in group details page when an event is created #127
• In iOS, on the feedback banner I see the option to copy our contact email but not to open the email app. Is this because it's very smart and it detects that there isn't any mail app configured, or is it a bug?

• The group image fills almost half of the screen:

Is this expected?

Anyway, I am merging the PR to move forward.

[borgoat]

• In iOS, on the feedback banner I see the option to copy our contact email but not to open the email app. Is this because it's very smart and it detects that there isn't any mail app configured, or is it a bug?

This one should indeed work that way, it checks whether the mailto: link can be launched,¹ and if not, it only lets you copy the email address²

Footnotes

1. https://pub.dev/documentation/url_launcher/latest/url_launcher_string/canLaunchUrlString.html ↩

2. https://github.com/gruprsvp/grup/pull/120/files#diff-0898f9889e052f51adef5e8f4a66bf69fbc03daaa0343b8ba46b38e8020e21aaR95-R102 ↩