Resource Manager Enhancement - Improve Card/Tile View

[jeremy-farrance]

Note that this is 2 of 3, split from the original Issue #4390 after the suggestion by @valadas.

Description of problem

The current view of the folders and files in the Resource Manager that became available as an optional install as of DNN 9.08.00 is difficult to visually navigate and use manage files and folders, especially once more than a dozen folders or files or both is in view.

The actions (Edit, Move, etc) are hidden (and not even hover-labeled, see #4384) and even relatively short file names are unnecessarily even more shortened, unless you hover on each one. Plus, every card is very bulky, so even a folder with a dozen files or little more becomes unnecessarily "long," requiring a lot of scrolling. Files and folders have cards with the same background (and poor contrast with the text), and the image previews are mostly hidden (see screenshot 1).

Description of solution

Enhance the existing Tiled View to provide more info using a more modern UX/UI; Already visible actions+labels, where the file/folder names are shortened only above 60-100 characters (or so) and the file type always visible.

Other options and ideas to consider (see Screenshot 2, below as a visual rough draft of some of these ideas):

• improving contrast and information hierarchy (when several folders or non-image files of the same type, their name is more important than the icon)
• increasing file name limit before shortening (the font could be also smaller, once contrast is improved)
• making extensions always visible for files
• adding "order by" file type
• making the action icons always visible; they could be moved on top instead of on the right side to make space for the filename and just slightly reduced in size; obviously add labels/tooltips to the actions, as suggested in Admin Logs - Add Log Setting returns 401 for admins #4398
• widening the clipping of the file preview/thumbnail, where applicable
• adding a selection checkbox to each card for bulk actions (move, etc)
• taking more advantage of responsive styling and flexbox capabilities instead of absolute positioning and fixed widths/heights for the cards and their contents

Screenshots

Screenshot 1 of Resource Manager (current view as of Dnn 9.08.x thru 9.09.01 so far)

Screenshot 2 of an Enhanced View as re-imagined by @Valeria-B (see #4390)

Affected browsers

• All

[sleupold]

I'd prefer for files just a fullsize preview (if available) or icon and file name below, like in windows explorer. Actions might appear as dropdown like in list view, same for multi-select option.

[Tychodewaard]

IMO the design of @Valeria-B is perfect. Simple but informative.

@jeremy-farrance It is already hidden in your 'adding a selection checkbox to each card for bulk actions (move, etc)' but the thing I miss most is select -delete. Numerous times when you get new versions of photos or icons and then you need to delete all 40 hand by hand. (I don't give my customers FTP).
Maybe a 'Select all' like Gmail has would make it perfect.

[stale]

We have detected this issue has not had any activity during the last 90 days. That could mean this issue is no longer relevant and/or nobody has found the necessary time to address the issue. We are trying to keep the list of open issues limited to those issues that are relevant to the majority and to close the ones that have become 'stale' (inactive). If no further activity is detected within the next 14 days, the issue will be closed automatically.
If new comments are are posted and/or a solution (pull request) is submitted for review that references this issue, the issue will not be closed. Closed issues can be reopened at any time in the future. Please remember those participating in this open source project are volunteers trying to help others and creating a better DNN Platform for all. Thank you for your continued involvement and contributions!

[jeremy-farrance]

Looking for comments and feedback on this experiment.

Side-stepping the List View for now, what about taking those giant Cards and reworking them - optionally - as small Tiles keeping all the other functionality in place?

VIDEO DEMO: Dnn's Resource Manager with a Tiles Concept

Screenshot, but better to watch the video linked above.

[valadas]

It is a significant improvement for space saving and viewing full titles :)

For the view mode I would like a set of icons instead of the toggle though as I would love one day to also have a list view.

Nice work on learning all this that quick, I am really impressed!

[david-poindexter]

@jeremy-farrance I think this is a fantastic approach! I have a few notes:

• I agree with @valadas 💯 that having quick icons for the two views/modes would be more in line with the current UI/UX. I'd recommend placing them right under the Add Asset button, right-aligned, on the same row as the breadcrumbs.
• I'd recommend using a folder svg icon instead of the arrows. This would bring additional clarity to users.
• Can you show what the action icons overlay looks like on a really long filename slim card?

[Timo-Breumelhof]

I had a look at the module and it need a lot of TLC IMO.
(I'm going partly off -topic here :-)

I made some change using

.rm-container #Assets-panel .item-container .rm-card{
    
    background: #f3f3f3;
    color: #000;
    border: solid 1px #ddd;
    box-shadow: none;
}

.rm-container #Assets-panel div.item-container:not(.disabled) .rm-card:hover, 
.rm-container #Assets-panel div.item-container:not(.disabled) .rm-card.selected{
    background: #fff;   
}

.rm-container #Assets-panel .rm-circular{
    
    border:none;
}

.rm-container #Assets-panel .rm-card .image-center{
    
    width: 85%;
    height:140px;
    border-radius: 0;
}

.rm-container #Assets-panel .rm-circular{
    
    border-radius:0;
}
.rm-container #Assets-panel .item.rm-card .text-card{
    position: relative;
    bottom:auto;
}

Resulting is:

IMO the cards are pretty useless unless the folder contains a lot of images and even then the preview is way to small.
My first addition would be a list view.

But the longer I looked at this, the more issues I found.
The way you go to the details (edit) is confusing (UX) for instance and kind of impossible (location) to get to work responsively..
A lot of screen real estate is being wasted, there are Accessibility issues (hovers, contrast issues) and the CSS used is pretty much impossible to make responsive (position absolute, px values etc)
BTW, I even found that "proxima nova" is used as the font (commercial font) , very weird..
TBH I think we should start the styling / Grid HTML from scratch and not build on the current styling.
I really like the "switching" @jeremy-farrance showed in the video. I don't know how you did that, but IMO we could use the same HTML the 3 types, list, button and Card and only make the switch by switching a root class.

BTW we are willing to spend time on this, but I don't know how much progress @jeremy-farrance already made?

[mitchelsellers]

@Timo-Breumelhof we are open to ALL improvements here. @jeremy-farrance do you have any progress? Want to work with @Timo-Breumelhof ?

[jeremy-farrance]

No progress at all. Not sure how to get back to it until things at work get back in balance. Hoping to dig in again after the holidaze.

[MaiklT]

I asked this before in another place, but here it seems to be the better one: What is wrong with a treeview and a list?

[valadas]

No problem at all with a treeview and list, just needs to be contributed. I recently worked on a treeview web-component https://eraware.github.io/dnn-elements/#dnn-treeview-item This could make it into that, but there is still this ever-lasting lack of free time from those who can contribute to this enhancement...

[valadas]

This has been developed in v9.11.0