E107: User Profile Template needs an upgrade.

[CaMer0n]

I have made a start on this (see commented out section), but it needs the talent of a more experienced theme artists. @mcpeace-maw would you consider taking a look at this?

[mcpeace-maw]

OK, please check the pull request.

[CaMer0n]

Thank you @mcpeace-maw . I fixed the LANs and here's how it looks with Bootstrap3 for me.

I believe we need tables for the data, or at least the appearance of tables (in terms of alignment).
Perhaps the data should be organized into separate tabs?. I'm interested to get everyone's feedback on this. @Moc, @tgtje, @MikeyGMT, @Jimmi08, @LaocheXe, @lonalore. Of course, it has to look good with extended user fields also.

[LaocheXe]

Well Looking at the screenshot - maybe move the 'Click here to update your info' button down and align it with 'previous member' and 'next member'.

I have Private Message enabled on my website and it looks out of place

I would adjust the private message - maybe even remove the little image button for private message and just make 'Send Private Message' a link or pop-up window to send a message, etc...

Also the "Member $id" should be moved down at the bottom below the 'previous member' button - it looks okay on the screenshot you took but on my you can't see it. You could also maybe hide it.

Also the image background - you got blue/green and mine is white/grey - maybe allow the users to change that either by selecting a set of pre-images or even allowing them to upload their own (but that might be off topic in this).

On another note, user extended fields - using tabs as the categories would be best but another thing to take into account and also maybe off topic but to allow the admin to arrange the user fields - such as allow admins to add to the general user profile section (Under Forum Post - or even add a table under Forum Post, etc).

[CaMer0n]

Also the image background - you got blue/green and mine is white/grey - maybe allow the users to change that either by selecting a set of pre-images or even allowing them to upload their own (but that might be off topic in this).

Yes, this is the "User Photo" that is displaying in my screenshot.

[mcpeace-maw]

Please don't forget must be responsive. "Update your info" button must be visible, not a good idea to put it with other things in same row. The icon for send private message must be changed. Also used same font stars for user rating like in forum. I think is needed a background color for header in the case is not used user photo (in css).

[LaocheXe]

Just a heads up - I don't know if it is related or not but when going to user.php - to see the Member's list - the avatars are out of place.

I don't know if it was the resent changes that where done or if it is a social login issue.

[mcpeace-maw]

Yes it is for these changes, @CaMer0n please add inside user_template in inline css:
.panel-profile #user-profile-avatar { max-width: 150px; margin-top: -90px; ... }
This will fix the issue.

[mcpeace-maw]

I added visible borders, padding, aligned labels and data. Solved also the issue reported by @LaocheXe. BTW the id #user-profile-avatar must be removed from user-image shortcode (the image have user-avatar class) - in members page the id is not unique, every avatar image have it and page validation fail. Also lan_user file have many duplicates.

[CaMer0n]

@mcpeace-maw Thanks for the changes! I cleaned up the code a bit so it's clear what is v2.x and what is v1.x . Css moved to e107.css

[lonalore]

Well done, it looks great. :+1:
I think we should allow the users to reposition the background (cover) photo. Or provide a widget for selection based cropping an image after upload.

[Moc]

Looks a lot more up to date. Great work! :+1: :smiley:

I don't have any specific feedback now on the user profile. However, after seeing how the PM icon looks outdated on the user profile, I checked the plugin code and it is in need of a substantial rewrite to make use of all the new possibilities (e.g. userpicker).

Some inspirational styling: https://almsaeedstudio.com/themes/AdminLTE/pages/mailbox/mailbox.html

[CaMer0n]

Closing this. We can start a new issue for PM if needed.