View user profiles

[IngvarV8]

WIP, providing /users/:id now should redirect to a new page about user.

Closes #504

[wbazant]

Thanks for doing this work! I had a bit of fun looking at bios of random users by guessing /users/12345 etc. , and we have a starting point for adding more data for these pages - ideally the changes we want the user to make.

My three requests are to change how the route is set up - currently it doesn't work on mobile -, make the links to user pages a bit more subtle or unset the styling completely for now, and iterate on the styling of the user page a bit, and then I think we'll be ready to merge this.

[wbazant]

Not sure how to style this - maybe text-decoration: none (undoing the underline styling) and theme.orange for color?

[wbazant]

Even undoing all the link styling is an option - then the feature won't be discoverable on mobile for now, and will only be known to be a link on desktop because of pointer cursor, but that's fine, since we don't have much content for the pages yet.

[wbazant]

Instead of this file, could you put the new route in auth routes, just under /users/sign_in etc. ? It doesn't completely belong there, but it'll help us understand the routing. It needs to be below the more specific routes (otherwise /users/sign_in will try to go to a user profile with id "sign_in", and fail).

[wbazant]

You only included it in the desktop layout - let's also have the user pages on mobile :). If you put the new route in authRoutes (see other comment), it'll work for both layouts.

[wbazant]

Let's remove this logging statement when the PR is ready to merge

[wbazant]

This is a good start since it shows the data!

Can we iterate on the styling a bit, and try to use fewer words, so there's less need to translate them?

My original quick attempt was a <h2>, user icon for the name, a <p> for a bio, and an italic:

but I'm not great at styling pages.

Maybe borrow the styling from the import page?
It looks like

<h3> #301: Dumpster Diving locations (Melbs)</h3>

with the rest in <p> elements.

[IngvarV8]

I have made some changes based on your feedback, particularly:

• adjusted styling of links and user profile
• /users/:id route is now a part of authRoutes

[wbazant]

Thanks! I checked out the branch again. I realised what you mean about not getting the user ID, it really is sometimes missing - http://localhost:3000/locations/591687 has "Ethan" but no user ID, while http://localhost:3000/locations/1989825 has both author and user ID.

1. Let's render the name as a link only when we have the user ID, and just the name otherwise.

2. Link styling on location page

The orange links I suggested are not an improvement. Sorry! For comparison, I looked at an imported location, e.g. http://localhost:3000/locations/1150852 , with a blue link that looks totally fine. Could we instead keep the links in their default style for the location author, and unset the colour on the review author?

Would you be up for making some related changes to both the user page and the import page?

3. joining / import date like in EntryOverview.js: in a <time> tag and

formatISOString(                 ...,        i18n.language     )                                                                       

will style it out nicely.

4. Headers: let's make them consistent on both pages - <h3>, add the word "Import" to the import page, and "User: " to the user page like your original version.

5. Content order on user page: let's follow the import page - after the header, have a bio, and use a calendar icon for when the user joined.

[IngvarV8]

Hello, I once again implemented and uploaded the changes you mentioned. Let me know as I am not sure if I understood correctly. I changed:

• link styling
• time formatting in import and user pages
• content display on user page

[wbazant]

Thanks again for working on this and for making the changes I requested! I like the italics for the bio text as well, they're making it clearer that it's the user who wrote this.

Do you want to do any more work on the site as part of this issue / PR? The only other change I see is to maybe remove the icon from the users page - I know I suggested it, but on second thought, it doesn't seem to add anything or look particularly well - unless you think it's worth keeping, then maybe style it to the same height as the text, or maybe start the bio with it instead?

After that, I think we can un-draft the PR and I'll be happy to merge it.

[IngvarV8]

Sure, I just uploaded the fix where I moved user icon to bio instead (In my opinion it looks more aligned with the rest of the user attributes). If this fits to be the final solution, I'll create a pull request.

[wbazant]

That does look good, and works for various lengths of content as well: http://localhost:3000/users/1 http://localhost:3000/users/12345 http://localhost:3000/users/12 . Thanks for implementing this feature and your work on it! I think we can merge it - if you'd also like to work on something else, feel free to pick an issue from the tracker.