Project

General

Profile

Actions

Feature #20014

open

Reskin of Group Library

Added by Boone Gorges about 1 month ago. Updated 15 days ago.

Status:
New
Priority name:
Normal
Assignee:
Category name:
Group Library
Target version:
Start date:
2024-03-19
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description


Files


Related issues

Related to CUNY Academic Commons - Feature #19592: Groups Page Re-DesignNewRaymond Hoh2024-04-18

Actions
Actions #1

Updated by Boone Gorges about 1 month ago

Actions #2

Updated by Boone Gorges 22 days ago

A first pass at the reskin is available for testing on cdev.

Sara, your comps had a single page for the Library. But it's a pretty dynamic app with a bunch of different types of views. So I made some guesses about how things ought to behave. I'll list some specific notes below, but when testing, be sure to walk through the various views and look at all the various combinations of item type.

  • Your comp shows a couple of icons related to videos, images, etc. The various icons are a bit more complex than this. If you upload a file, the app tries to show a different icon based on file extension. If you create an editable doc, it shows a "pencil" icon. If you add an external link, the app tries to show a service-specific icon (like Google Drive or Dropbox). I've left this system in place and haven't swapped out any icons, since any change would require rethinking all the available icons. Here's a list of what's currently in the plugin: https://gist.github.com/boonebgorges/7a0d75b21279fd3a8e1733ccc68051c2
  • I added file size, but this is valid only for uploaded files, not for External Links or Editable Docs.
  • The existing library shows the "folder" (ie, tag) of the item when viewing the main list. I think users requested this because they wanted a way to see, at a glance, whether an item was in a given folder. (This goes away when you navigate into a folder, since it'd be redundant information.) I've left this information, but I've moved it into the "Details" column. Instead of showing a folder icon, I've changed it to the text "Tagged in".
  • The search box in the existing app has some dynamic behavior. For the reskin, I've removed the grow/shrink behavior, but I've kept the click-x-to-reset-search behavior.
  • I couldn't remember whether we have an existing example of the "advanced" three-dot submenu, so I wrote my own implementation. If we're doing this elsewhere, we'll want to standardize the markup (for accessibility) and styling.
  • For pagination, I've kept the forward/back links from the current app. I also kept the underline under the links, since we use non-underline to indicate the non-clickable current page.
  • I've made an initial attempt at mobile. The main two changes are (a) breaking the filters/search/add interface into multiple lines, and (b) dropping the non-sortable "details" section onto its own line. More work will probably be needed here.
  • I made some small cleanup on the other views (Add New, Edit) but I didn't spend a lot of effort on it. This may also need some more attention.
Actions #3

Updated by Sara Cannon 16 days ago

Thank you for all this work! It is looking great.

  • I would like to re-work all the icons. I'll get those to you at a later date. It's not a blocker.
  • "Tagged In" is great!
  • I don't think we've implemented the three-dot menu yet... but maybe Ray can confirm.
  • I noticed a few bugs... the way a long-file name is handled and the file drop-down gets cut off when adding new.

Actions #4

Updated by Boone Gorges 16 days ago

Thanks, Sara! I've pushed up some changes that ought to address the appearance of dropdowns, etc.

Actions #5

Updated by Raymond Hoh 15 days ago

I couldn't remember whether we have an existing example of the "advanced" three-dot submenu, so I wrote my own implementation. If we're doing this elsewhere, we'll want to standardize the markup (for accessibility) and styling.

I'll need to take a look at what you did, Boone! I also worked on a variation of the ellipsis menu for the single group forum topic page and might re-do it since it doesn't pass all accessibility requirements.

Actions

Also available in: Atom PDF