profile
Last updated
Last updated
The profile page allows Users to display their name, profile picture, a short biography, personal website, their following and followers. When the Current User is viewing a profile page of a fellow User, the Current User can choose to follow/unfollow or send a message to that User.
The Current User can also click on the Text "Following: X" and Text "Followers: X" elements texts in order to view those lists of Users. The rest of the page can be customized to display any type of content relevant to your application:
Only logged-in Users can view this profile page. This makes sure that only Users with an account can send messages to and follow other Users. If the Current User is not logged in, they will be re-directed to the homepage.
Logged-In Users are automatically taken to the profile page when they click the profile picture of a fellow User.
user picture/dropdown Reusable ElementUsers can click the Group Current User Profile element within the user picture/dropdown reusable element to view their profile page:
mobile menu (list) Reusable ElementUsers can click the Group Current User Container element within the mobile menu (list) reusable element to view their profile page:
desktop navigation , mobile submenu, and header_navigation Reusable Elementsdesktop navigation
mobile submenu
header_navigation
Users are never automatically navigated to the profile page. They are taken to the profile page only after clicking one of the links or icons which navigate them there.
This page updates the Current User's "last date online" field (type: date, list: no) to the current date and time every 10 seconds using this workflow:
The profile page allows Users to view their own profile information, and the profile information of other Users in the application.
When the Current User is viewing someone else's profile, the Button Follow/Edit Profile element is shown to the Current User:
When the Button Follow/Edit Profile element is shown, and the Current User isn't yet following the person whose profile they are viewing, the Button Follow/Edit Profile element's text will be "Follow":
When the Button Follow element is clicked, the Current User is now following the person whose profile they are viewing. As a result, the button's text conditionally changes from "Follow" to "[checkmark] Following".
When the "[checkmark] Following" text is hovered, its text will conditionally change to "Unfollow":
If the "Unfollow" text is clicked, the Current User will no longer be following the person whose profile they are viewing.
When the Current User is viewing their own profile page, the Button Follow/Edit Profile element will be visible if the current page width is greater than 725 pixels; the button's text will be "Edit Profile". If the page width is less than or equal to 725 pixels, the Button Edit Profile (Mobile) element will be visible instead.
Editor
Desktop:
Mobile:
Preview
Desktop
Mobile
These buttons' texts are "[pencil icon] Edit". When clicked, these buttons' workflows navigate the Current User to their account page, in order to edit their profile information.
The page navigation changes conditionally based on the width of the page as shown here:
The profile page shows the desktop navigation, mobile header, and mobile submenu reusable elements conditionally, depending on the current page width.
Here you can see that the desktop navigation is shown when the current page width is greater than 887 pixels in width.
Once the page width is less than 887 pixels, the desktop navigation element becomes hidden (using a responsive, hiding rule) and the mobile header and mobile submenu reusable elements are shown, so the Current User can more easily navigate the application.
When the Current User clicks the Icon Menu element within the mobile submenu reusable element, the admin page's FG - Mobile Menu and FG - Fade Overlay elements are shown:
