Feature #19592
closedGroups Page Re-Design
100%
Description
Below are the initial designs for the group page Redesign. I still need to do admin settings as well as the member invite modal but I thought I'd post these here to get us started.
Files
Related issues
Updated by Colin McDonald 7 months ago
Thanks so much for these Sara, they are a great starting point. I am looking forward to when you start tackling the settings screens/flows, which seem to me like the most in need of design improvement for Groups.
I'm adding some watchers here, and following up on the Tuesday call, we'll use this ticket for ongoing discussion leading up to the meeting next Friday to map out the release further with the full team. We'll look for Boone and Ray's thoughts when they have them on technical blockers and feasibility so that we aren't locking on to designs or features that will be difficult for them to implement.
It will also be great now and in the team meeting to hear about any other pain points or wish list items when it comes to Groups.
Updated by Boone Gorges 6 months ago
Hi Sara - Thanks for your work on this. I don't see any technical blockers in what you've posted so far. A couple of notes regarding usability:
- You've removed the mechanism in header for seeing/updating group email status ("Your email status is:"). This is probably a good improvement - it's clutter that's usually not needed - but then we should be sure to have an obvious place where this setting lives.
- To me it seems like a lot of space to have the cover image on every group page. For practical workspaces, this means a good deal of scrolling to see content after every click.
- On the Library page, the list of folders can cascade to a 2nd line. How do we work this when the folders live in the secondary nav?
- Library: Are we keeping "Show Details"?
- Forum: Do we need 'this forum has x topics...' etc notice? Or "Voices" column? These don't seem useful to me.
- Forum: In contrast, losing the name of the last poster on a thread seems like a usability hit to me.
- Individual forum threads:
- Where will Edit links go? Maybe near 'Posted by' section?
- It would be nice to see a mockup that contains a thread with more discussion, so that we understand how replies are differentiated from the original post. Specifically, the mockup shows the user avatar alongside a title, but replies don't have titles and so would need a different treatment.
- We currently support one level of nested replies. Are we keeping this, and if so, what does it look like?
Updated by Raymond Hoh 6 months ago
- You've removed the mechanism in header for seeing/updating group email status ("Your email status is:"). This is probably a good improvement - it's clutter that's usually not needed - but then we should be sure to have an obvious place where this setting lives.
Similar to the "Your email status" block, the "Email the Group" email address was requested by some power users to live in the header, so we will need to resurface this somewhere as well. See #9010 (and also previous discussion in #4331) where we last talked about this behavior.
- Individual forum threads:
- Where will Edit links go? Maybe near 'Posted by' section?
Worth mentioning that group admins and mods will see the following links: Edit | Trash | Spam | Unapprove.
If this is the first post of a topic, group admins and mods will also see the following links: Merge (or Split if not the first post) | Close | Sticky
All group members will see: Edit (if the user is the author of the post) | Reply | Quote
So that can be a lot of links. Perhaps we can move all admin-related links to a three-dots menu. Or perhaps we can check out how more popular forum software (such as vBulletin, XenForo, Discourse to name a few) handles these types of interfaces.
- We currently support one level of nested replies. Are we keeping this, and if so, what does it look like?
According to bbPress, our nesting replies level is set to two levels deep on production. If we do not support nested replies in the new layout, we will also have to remove the user setting from the "Account Settings > Forums" page.
Some other thoughts:
Individual forum threads:
I noticed there is a "Drop your file" attachments box for forums in the mockup. The plugin we use for forum attachments (GD bbPress Attachments) does not offer this functionality out-of-the-box so we would need to build this out. I would add this functionality as an enhancement if we cannot get this done in time for the next major release.
Forum:
Would like to see a mockup for the "Add New Item" form as well. This would be similar to the reply form in https://redmine.gc.cuny.edu/attachments/27339 , but with two additional fields: One to denote if the new topic is sticky or not. And the second for the "Post to multiple groups" checkbox fields.
Updated by Laurie Hurson 6 months ago
These look great, Sara!
One thing I noticed: for each forum thread it lists "started by, voices, posts, last post" but we have removed who last responded to the thread. Do we want to retain the info about who last responded in the thread? If this was a class or very active group, it might be helpful to see who made the last update. What do others think?
Updated by Sara Cannon 6 months ago
Hello! Thanks for everyone for your feedback and discussion today!
If you would like to view what I showed in today's meetings here is a figma presentation link:
Some Notes:
- the header image shrinks when not on the activity page. There was discussion about what it would look like if there was no header for current groups or if we default assign a placeholder
- Forum page: I removed the top forum data line to clean things up. There was discussion about whether or not the number of voices is helpful. Although I included the avatar of the last person posted, I am going to comp it with their name as well
- I need to revert back the drag and drop file field to a simple select file button
- Create a new Topic used to link to a field that popped up under the forum. I put it on it's own page
- Library: We can put the second menu with the tags into a filter drop down. We did not discuss if "details" are needed
- Email Settings and Forum Display settings are now combined under "Settings"
- It would be great if we could combine "External Blogs" under the details tab to reduce the number of secondary menu items
- Selecting a commons art banner for the cover image - we need to look into if that functionality can be ported over from CV
- Managing Members: "Kick and Ban" could be rephrased to "Remove and block"
- Forum: the user forum settings will not live here but in a top-level settings tab along with your personal email settings
Please add your comments and anything that I have missed as I will be working on revising the screens based on everyone's feedback
Updated by Boone Gorges 6 months ago
Thanks, Sara.
the header image shrinks when not on the activity page. There was discussion about what it would look like if there was no header for current groups or if we default assign a placeholder
As you noted, this means that we will need to make clear in the Upload interface that the admin should take caution when selecting an image. It should meet certain size requirements, and it should be the kind of image that can be "auto cropped". This was likely going to be the case anyway for mobile devices, where the image will likely be taller than the standard desktop layout. Your updated comps suggest that the image will be shorter in some cases, making the point more important still.
There was discussion about whether or not the number of voices is helpful.
I didn't hear any support for keeping this column. I'd recommend we remove it.
Updated by Raymond Hoh 6 months ago
Something that I forgot to bring up during the team meeting is the placement of the "Email the group" block. On production, this currently resides in the group header when a group member is logged in. See GIF below:
In the new design, this information is not available in the header and isn't on the group forum page so we will need to resurface this info somewhere. See #9010 (and #4331) for some previous discussion about this block. Originally, this info was placed in the Add New Topic section, but some power users wanted it in the header for greater visibility. Here's what it used to look like: https://redmine.gc.cuny.edu/attachments/6636 . Sara, could use your feedback on where to better place this info.
Updated by Colin McDonald 6 months ago
Thanks for these follow up notes, Sara. Here are a few more I wanted to add:
- I think we decided it would be best to not assign a placeholder header automatically to existing groups. Don't want to overreach or surprise anyone with that. The hope would be that the feature will get picked up manually as we promote it, and also as new groups use headers with greater frequency, since they'll be prompted when creating the group after we launch.
- The above point reminds me that we'll need to tweak the Group creation flow, at least for adding a header image as well as the profile/inset image. We might already want to look at updating the creation flow for design consistency, as Laurie points out in #19724.
- I don't mind having the Show Details option in the Group Library and can see its utility. For anyone who hasn't used it recently, toggling it on will show you anything in the Description field for an uploaded Library item, as well as the forum thread it was uploaded to if that applies.
- I also think the Voices column can go away, and I agree that nobody noted benefits of it during the meeting.
Updated by Sara Cannon 6 months ago
Ray, I can't seem to replicate where you might find the "email the group" function that you have posted above. Is there a setting that needs to be checked to surface this?
Updated by Raymond Hoh 6 months ago
- File 2024-02-22_133606.png 2024-02-22_133606.png added
Sorry for not being clear, Sara.
Try navigating to a group you are a member of on production. I think you should be a member of this group: https://commons.gc.cuny.edu/groups/cac-community-team-project-planning/ . When logged in, you should see the attached screenshot.
Let me know if you are able to access the "Email the group" block.
Updated by Sara Cannon 5 months ago
- File Group Comps 3.5.34.zip Group Comps 3.5.34.zip added
Updated by Sara Cannon 5 months ago
- File 3.18.24.zip 3.18.24.zip added
Updated by Boone Gorges 5 months ago
- Related to Feature #19724: Updating Group/Site Creation and Completion pages added
Updated by Boone Gorges 5 months ago
- Category name changed from Design to Groups (misc)
- Assignee changed from Sara Cannon to Raymond Hoh
Thanks, Sara. Ray, assigning to you to lead the implementation. I will break off the Library reskin into its own ticket.
Updated by Boone Gorges 5 months ago
- Related to Feature #20014: Reskin of Group Library added
Updated by Raymond Hoh 5 months ago
I've got a first pass at the groups redesign on cdev. Boone / Jeremy - Work is being done in the feature/19592-groups-redesign branch.
I would refrain from posting any bug reports as I am aware of many things that still need to be completed :) The Activity page is closest to completion and the main "Forum" index page is about done, except for the layout of the "Post by Email", "Post New Topic", and "Download CSV" buttons. The forum topic page and most of the admin "Manage" pages still need an overhaul.
Some dev notes:
- For testing cover images, I've defaulted each group to use one of the CV Editor's cover images. Once our custom cover image selector is ready, I'll remove the randomized default cover image. I still need to make the cover image larger when on the group homepage
- The "Events" page defaults to the upcoming view in the mockups, so some work needed to be done to the BP Event Organiser plugin to make this happen: https://github.com/cuny-academic-commons/bp-event-organiser/commit/a664d0de1d17682d4bb71a0c3136237946a772ab
- For the "Members" page, would it make sense to use the same card layout as the Members Directory page and Commons Profile "Friends" page? I've currently implemented this idea on cdev, but I can do another pass at matching the mockup later on.
- For the group social media icons, are we only sticking with the following sites: Twitter, Facebook, LinkedIn, Academica and Instagram?
More to come. Boone, you can start work on the "Library" page overhaul. Let me know if you need any help on implementation.
Updated by Sara Cannon 4 months ago
Ray, Great work here! I'm going to note some things but I'm sure you're aware of a lot of them
- "Leave Group" as a large button right below the profile image seems a bit foreboding - a prominent place like below the profile image should probably be reserved for positive actions or information. Can we move the action of leaving to be under settings only?
- The activity page looks great!
- Can we move the "Download CSV" to settings instead of above the forum?
- Forum Search Results need formatting. I realize I never made a mock-up for this. Do you need me to?
- Forum: "Post New Topic" should be an outline button
- Forum: When posting a new topic, the form should be on a separate page instead of underneath the forum
- Under Manage -> Details: a link in the info tool tip shows up black and extends past the tooltip
- Manage -> Members, Events, Group Site: formatting needed
- Sunset Digital research tools
Updated by Raymond Hoh 4 months ago
Thanks for your feedback, Sara. I'm well aware of all the issues you mentioned :) I will make sure to get to these items once I've worked on a few other things.
I would appreciate a mockup of the forum search page when you have a chance to get around to it. There are also a bunch of forum screens like "Merge" when you click on the ellipsis menu from the main topic and the "Split" option when you click on the ellipsis menu from a reply that I could use a visual reference for as well.
Before I implement the following, I could use some feedback from the rest of the team about:
- Moving the Leave Group button from the group header. Perhaps we can move this button to the new group "Settings" page.
- Moving the Download CSV button. We can move this button to the "Manage > Forum" tab unless there is a better location for it.
I also have a first pass at the 'Post New Topic' form and single forum topic page working on cdev. I decided to implement the 'Post New Topic' form as a modal dialog instead of an entire new page. I couldn't get the Attachments portion of the 'Post New Topic' form to match the mockup. It's apparently very hard to style the <input type="file">
element. You cannot change the label of the button, nor remove the "No file selected" text. Attempts to do so removes the built-in accessibility that the browser uses. The GD bbPress Attachments plugin also handles parts of the logic here as well with the "Add another file" link.
For the single forum topic page, the ellipsis menu went through many iterations, but I landed on using a technique using the <details>
and <summary>
elements. There are some accessibility concerns when using a voice reader that I read about later after implementing the ellipsis menu this way, so I might redo the menu with another approach such as this one: https://github.com/scottaohara/aria_disclosure_widget . For the "Reply" and "Quote" links, I also added "Edit" to this list as it is one of the more, common forum action links a member will use.
After working through the 'Post New Topic' form, I want to recommend getting rid of topic tags. If a user tags a topic, there is a link to the tag that takes users out of the group interface. For example, https://commons.gc.cuny.edu/forums/topic-tag/digital-humanities/
. It might be useful if when someone clicks on a topic tag, it will filter the topic tag to forum topics from the group only, but that would require some development time.
Updated by Raymond Hoh 4 months ago
- File Group Settings.jpeg Group Settings.jpeg added
- File Group Forum CSV.png Group Forum CSV.png added
Some updates:
- Group forum display options now resides under the group's "Settings" page
- "Leave Group" button now resides under the group's "Settings" page. See attached screenshot. Can use some feedback on the copy.
- "Download CSV" now resides under the group's "Manage > Forum" page. See attached screenshot. Can use some feedback on the copy.
- "Post Via Email" email address can now be easily copied, similar to the email address in the Help dialog modal.
All are available for testing on cdev.
Updated by Sara Cannon 4 months ago
- File Groups - Logged In - Registered (Forums - Search Results).png Groups - Logged In - Registered (Forums - Search Results).png added
Ray - Here's a forum search results comp. Let me know if you need anything else
Updated by Raymond Hoh 4 months ago
- File spammed reply.png spammed reply.png added
Thanks for the forum search results mockup, Sara.
I've completed a first pass for all group pages, including the forum search results page. This is available for testing on cdev. You might need to purge your browser cache or do a hard refresh when browsing cdev. I've also done a bit of mobile responsive work on the group forums, but I need to do a more, thorough pass for all the other group pages.
On the group call, I mentioned some UI work on the forums that will need Sara's UX eye on. When a group admin or moderator does an admin action on a forum post such as trashing, spamming or unapproving a post, we need to display the post status in the forum post. Rather than increase the height of the forum post by adding a status message, I decided to rotate the post status and align it to the left of the post container. See attached image. Sara, feel free to recommend something completely different here!
Updated by Sara Cannon 4 months ago
- File Screenshot 2024-04-29 at 5.22.35 PM.png Screenshot 2024-04-29 at 5.22.35 PM.png added
- File Screenshot 2024-04-29 at 5.04.56 PM.png Screenshot 2024-04-29 at 5.04.56 PM.png added
Thanks for all your work on this, Ray.
- When it comes to a Merge function of forum posts - the way this is done is so chaotic with a massive drop down. I wonder what the purpose of this function even is and if it would be best to drop the functionality altogether.
- What happens when a topic is marked as spam? Does it remove the post? (I definitely want to change the design up here but thought I'd ask about the functionality first)
- The same with "unapprove" - is there a bucket of these spammed and unpublished forum posts somewhere and how do users see if their posts are marked as such?
- On top of a group page it says "Please complete your group setup by configuring your group settings ." What triggers this and is it needed?
- There are a bunch of small styling bugs (the title does not have padding on the topic view, and there are some margin issues below the topic reply) I can do a thorough audit of this when you're ready
- The "quote" functionality in the forum topic reply does not seem to be working
Updated by Raymond Hoh 4 months ago
- Merging topics. I forgot to style this page. Will do a pass at it. With regards to what merging does, imagine a scenario where there are two separate forum topics posted about the same thing, each with similar replies but the discussion is forked. Merging allows for both topics to be merged into one topic. It's not a scenario that happens often, but should exist as it is useful when needed. Perhaps we can move "Merge" further down the forum actions dropdown menu.
- When a topic or a reply is spammed, regular users cannot see it. Only group admins or mods can see these posts.
- Unapprove is similar to a forum post being marked as spam. Functionally, they are the same. We should remove either Spam or Unapprove as this isn't a situation that should occur automatically unless a group admin or mod is using it manually. (Side note: We removed automatic spam checks for forum posts because there were too many false positives. We also removed a link limit that forced forum posts to be marked as unapproved.) I believe regular users cannot see if their forum posts have been approved or marked as spam, but group admins / mods can through the main Forum index page and on the topic page with the special
?view=all
URL parameter. - "Please complete your group setup by configuring your group settings" is meant for older groups that haven't filled in certain group metadata like Campus. See #11254. I believe this is still needed. The styling here could use your eye, Sara.
- Spacing issues. For the first screenshot with the forum topic title, please try purging your browser cache as this should already be addressed, but feel free to keep reporting these issues as I'm sure I might have missed a fair bit.
- Quoting the initial forum post. Thanks for finding this bug. Should be fixed on cdev.
Updated by Colin McDonald 4 months ago
- Related to Design/UX #19733: Invite Modal added
Updated by Colin McDonald 4 months ago
- File overlap-Attachments-text.png overlap-Attachments-text.png added
- File overlap-Sticky-text.png overlap-Sticky-text.png added
- File font-size-tooltip.png font-size-tooltip.png added
Recapping the call earlier, we're going to use this list and order for the single forum post ellipsis that admins see:
- Close
- Stick / Unstick
- Trash
- Hide / Unhide
- Merge
I'm proposing "Hide / Unhide" to replace the Unapprove and Spam options. We discussed that those essentially do the same thing, moving the post to a "pending" area where they can be restored. That's as opposed to the Trash option, which also move the post to a restorable area, but only for a set amount of time like a month.
I like Hide / Unhide because it's a short and easy textual toggle, like Stick / Unstick, and it seems to me to track with wanting to remove a post from the public forum, whether it's for spam or some other reason, while leaving the option to make it viewable again. What do others think?
Also from the call, Ray is going to take a look at making it more clear when an admin clicks in from the "Please complete your group setup" message what needs to still be filled out. Maybe with callouts or red error text?
Ray is also going to work on a searchable or less crowded version of the Merge posts dropdown in the forum.
Ray, I am screenshot attaching a couple of overlap issues I saw with text while playing around with single forum posts. I also found a tooltip on the Details page that seemed to have larger text than the others. Are these related to caching?
I was also wondering, if you click to edit a forum post, should there be a way to cancel out of that, next to the Submit button? There is a similar issue with removing a file attachment once you choose it, if you change your mind.
On Manage > External Blogs, the last sentence it should be Separate not Seperate.
On Settings, under Leave Group, maybe this copy is better:
"To leave the group, please click on the button below. You will no longer see the group in your notifications, homepage dashboard, etc. If you leave a private group and want to join it again, you will need to submit a new request to its managers."
Updated by Raymond Hoh 4 months ago
- File attachment settings.png attachment settings.png added
Thanks for outlining these issues, Colin.
Also from the call, Ray is going to take a look at making it more clear when an admin clicks in from the "Please complete your group setup" message what needs to still be filled out. Maybe with callouts or red error text?
I decided to do a red border color around the Campus and Primary Purpose fields when you click on the notice.
Ray, I am screenshot attaching a couple of overlap issues I saw with text while playing around with single forum posts. I also found a tooltip on the Details page that seemed to have larger text than the others. Are these related to caching?
On Manage > External Blogs, the last sentence it should be Separate not Seperate.
Thanks for finding these bugs. Should be addressed now. This is available for testing on cdev. Remember to purge your browser cache or do a hard refresh.
On Settings, under Leave Group, maybe this copy is better:
For the Leave Group text, we also need to account for hidden groups as well.
What about the following for a private group:
"If you leave this group, you will no longer see the group in your notifications, homepage dashboard, etc. Since this is a private group, if you leave and want to re-join, you will need to submit a new membership request. If you still want to leave the group, please click on the button below:"
And the following for a hidden group:
"If you leave this group, you will no longer see the group in your notifications, homepage dashboard, etc. Since this is a hidden group, if you leave and want to re-join, you will need to re-invited by a group (administrator/administrator or moderator/member) [depending on group invite status]. If you still want to leave the group, please click on the button below:"
I'll get to the Hide/Unhide forum action menu once a decision has been made and the Merge forum screen in a bit.
About:
I was also wondering, if you click to edit a forum post, should there be a way to cancel out of that, next to the Submit button? There is a similar issue with removing a file attachment once you choose it, if you change your mind.
I don't believe you can cancel out of editing a forum post in bbPress. We'd have to add our own button to do so. What should the button do when clicked? Return to the forum thread?
About removing a file attachment, the forum attachments plugin has an option to allow members to delete attachments. On production, we currently only allow admins to delete attachments. See attached screenshot. I'm not sure when we decided to limit deletion to group admins only. If we do not want to change this setting, perhaps we should make this clear before a member decides to add an attachment to a forum post.
Updated by Colin McDonald 4 months ago
Hi Ray, thanks for going through all of these.
Sara, can you take a look at the red border color solution that Ray is using on the Settings page after that notice banner?
Let us know too what you think of my single forum post ellipsis list and the "Hide/Unhide" terminology.
Ray, I like those messages for leaving a hidden and private group.
No worries about canceling out of writing a forum post, I see now that it's the same in the current forum and not worth changing/adding functionality that's already there. It's odd that there currently isn't a way to "x" out of an attachment if you choose the wrong one when attaching, but probably not a big deal. I see that if you open the file dialog box again and close it without choosing a file, then nothing is added.
Updated by Raymond Hoh 3 months ago
It's odd that there currently isn't a way to "x" out of an attachment if you choose the wrong one when attaching, but probably not a big deal.
Ahh, I see what you mean now, Colin. I thought you meant after a user adds an attachment and submits the forum post, the user cannot delete the attachment from the forum post after it is posted, but you meant during the selection of the attachment before submission.
I've added a 'Reset attachments' button to the forum post form. If you add an attachment, and you later want to clear it before submitting the form, you can click on this button to clear all attachments now. This is available for testing on cdev.
Updated by Sara Cannon 3 months ago
- File Screenshot 2024-05-06 at 11.39.30 PM.png Screenshot 2024-05-06 at 11.39.30 PM.png added
- File Screenshot 2024-05-06 at 11.58.41 PM.png Screenshot 2024-05-06 at 11.58.41 PM.png added
- File Merge Topic.png Merge Topic.png added
- When creating a new topic, the modal needs a width constraint. It spans pretty wide when on desktop.
- I've attached a comp for the admin notice when a group needs more details filled out
- the red outline when following the link to settings looks great
- I've attached a comp for merging topics with a searchbar
Updated by Raymond Hoh 3 months ago
Thanks for the screenshots, Sara.
The New Topic modal should now be constrained when the width is greater than 1650px. The group metadata notice has also been styled as well, however the icons are using the ones available with WordPress. If you want, you can provide me with the icons from the comp and I'll switch them out. Both items are available for testing on cdev.
I'll start work on the Merge forum screen and will see how difficult it will be to add in the search bar. This might be something that needs to be punted to a minor release.
Updated by Sara Cannon 3 months ago
- File Screenshot 2024-05-09 at 7.54.39 PM.png Screenshot 2024-05-09 at 7.54.39 PM.png added
- File Screenshot 2024-05-09 at 7.58.49 PM.png Screenshot 2024-05-09 at 7.58.49 PM.png added
- File Screenshot 2024-05-09 at 8.03.37 PM.png Screenshot 2024-05-09 at 8.03.37 PM.png added
- File Screenshot 2024-05-09 at 8.11.53 PM.png Screenshot 2024-05-09 at 8.11.53 PM.png added
I took another pass, and here are some fixes:
- There should be some space between the forum and the search bar/new topic button
- Can the attachments on posts utilize the new library icons and be left aligned (not indented)?
- The outline around the text field should be lighter - #8B8B8B
- When updating a group page if you don't have a required field, can we change the error to the new red error box below the field instead of a tool tip?
I went to look at mobile, and it seems to need a lot of formatting. When it's ready to be tested, let me know, and I can start a whole new thread specifically for mobile.
Updated by Raymond Hoh 3 months ago
Thanks for taking another look, Sara.
There should be some space between the forum and the search bar/new topic button
Done.
Can the attachments on posts utilize the new library icons and be left aligned (not indented)?
I've done an initial pass at this on cdev. About image forum attachments, the forum attachments plugin uses a thumbnail of the attachment, which is better than an icon. However, the plugin lists image forum attachments separately from document attachments. Can you do some testing on cdev to see what you think of the current behavior and how you would like this portion to be formatted (if at all)?
The outline around the text field should be lighter - #8B8B8B
On the registration page, the border color for the form input fields use #222
and that is currently set as the default form border color across the site. The border color does differ and use a lighter gray on the "Account Settings > Edit Profile" page and on the Group Library and directory pages. Are we sure we want to use gray here as well? If so, should we make the registration form border color gray as well to be consistent?
When updating a group page if you don't have a required field, can we change the error to the new red error box below the field instead of a tool tip?
I've added the red border color, but I think the field validation tooltip should be kept as it is good for accessibility. The validation tooltip, by default, is styled by the browser and not by us and is only shown when you attempt to submit the form with an empty required field. If we want to do more advanced styling here, this will require some custom javascript.
I went to look at mobile, and it seems to need a lot of formatting. When it's ready to be tested, let me know, and I can start a whole new thread specifically for mobile.
That would be great. I've only done a few minimal passes at mobile so far and would appreciate any additional eyes on this.
Updated by Colin McDonald 3 months ago
- Related to Design/UX #20321: Forum Topics Hide/Unhide added
Updated by Colin McDonald 3 months ago
- Related to Design/UX #20334: Pronouns displayed on Forum Index added
Updated by Colin McDonald 3 months ago
Here are a couple of bugs we went over during the Friday meeting. I've also added specific items to the modal #19733 and group creation #19724 tickets.
- There is a bug on the manage members page where an admin sees multiple "Demote to Member" options in the ellipsis drop-down.
- On the admin manage events screen, the copy iCal link is not working.
Updated by Raymond Hoh 3 months ago
- There is a bug on the manage members page where an admin sees multiple "Demote to Member" options in the ellipsis drop-down.
Fixed in https://github.com/cuny-academic-commons/cac/commit/4912528fe77ced2b7816220f130f07e136553164
- On the admin manage events screen, the copy iCal link is not working.
Fixed in https://github.com/cuny-academic-commons/cac/commit/987fc812dd34a8fc767a6b4d78e44b89663e9b2a
Both should be available for testing on cdev.
Updated by Sara Cannon 3 months ago
- File Mobile-forum.png Mobile-forum.png added
Ray - here is a mobile mockup for the forum.
I think that it would be okay to remove the last posted by name and avatar on mobile but I would love to get group consensus.
Updated by Sara Cannon 3 months ago
When it comes to "Hiding" a reply (rather than a whole topic) - could we style it with an alert banner?
Updated by Colin McDonald 3 months ago
Seems ok to me to hide "last posted by" on the main forum page on mobile. You'll see that easily enough if you click into an individual forum topic, right?
Updated by Raymond Hoh 3 months ago
Some updates:
- Topic search bar on the group topic's Merge, Move and Split admin pages is now implemented. Boone and Jeremy, I'm using the WP REST API's Search Results endpoint to do this. I added a new 'forum' parameter to listen to the Search Results endpoint and the search bar is using the Select2 JS library to ping the endpoint and display the forum topic search results.
- Cover image proportions should be better now. I've also implemented the larger cover image on the group homepage, but this might confuse group admins when they see a thinner cover image on secondary group pages or even in the group header of the "Manage > Cover Image" screen.
- Hidden group forum replies now use a notice instead of a background color.
- On the forum index page at < 360px width, the Last Post date is now aligned on the left instead of on the right and the Last Post author is no longer displayed.
- The "Join Group" button is reinstated for public groups in the group header. I previously removed this by accident when I moved the "Leave Group" button to the group's "Settings" page.
I haven't implemented Sara's group header mobile view yet. I also noticed a "Go to Page" input box on the forum index mockup. I think we'll need to bump that to a minor release as there's a bit more thought that needs to take place in terms of accessibility.
Updated by Raymond Hoh 3 months ago
On the dev chat yesterday, we talked about the group header on mobile. I've implemented some of the changes on cdev, including moving the group short link into a social icon link.
Let me know if I've missed anything or if anything needs to be tweaked.
Updated by Colin McDonald 3 months ago
Hi Ray, thanks for these changes. They look great to me. I like the link icon for the shortlink in the social/email icon area so much that I wonder whether it might be nice on desktop as well as mobile, to clean up the desktop header where the link takes up a fair amount of space.
I'll defer to Sara on that and any other feedback. I think the left-alignment of the profile/avatar image and the other text looks good, too.
Updated by Raymond Hoh 3 months ago
In today's dev call, we talked a bit about the group header and the group shortlink. Based on the call, I've removed the longer group shortlink from the group header in favor of the new shortlink icon.
Boone, I've also merged the feature/19592-groups-redesign
branch into the mainline 2.4.x
branch.