Problem/Motivation

We need to fix table with files list to be responsive, at the moment content overflows out of the table on all devices. Also we need to fix complete design for mobile, situation on mobile devices is so bad that module is not useful at all.

Beside of that I made some suggestions with two goals in mind, first to make entity browser to look more modern and second to make entity browser to be more user friendly for end users. Those issues are more like suggestions so I listed these under "User interface changes".

Proposed resolution

First we need to fix table with files list, easiest way do it is to fix wrapping of the file name, description field and buttons. Second, better but more complicated idea is to align content vertical in one row so we can get more space for file name, description field and buttons. But it needs more development.

To resolve mobile issues we need to make all screens and popup windows responsive. In the first step I will make designs suggestions how it needs to look like to make it easier for front end developers and second step is to find someone who will fix it.

Remaining tasks

Desktop

#2696933: Content overflow issue

Mobile

#2704709: Files list does not scale down, breaks on smaller screens
#2704865: Mobile design, edit file window
#2704877: Mobile design, add files window
#2704883: Mobile design, media library window

User interface changes

#2696833: Problem with "Select" button
#2696853: Media upload box problems
#2696869: Problem with adding images more than once
#2696743: Problem with listing media types
#2696915: Checkmark indicator for upload screen
#2696845: Inconsistency with checkmark icons

Related

#2692805: Dialog min/maxHeight options are ignored in some cases
#2692845: Better height CSS rules for small screens
#2707469: Create a design for the media browser. - related issue to create better ui/ux for users, needs figuring what will go into entity_browser core and what into new module https://www.drupal.org/project/media_entity_browser

API changes

Data model changes

Comments

Nenad created an issue. See original summary.

Nenad’s picture

Issue summary: View changes
pivica’s picture

Title: Desktop layout and mobile responsive design issues » [META] Desktop layout and mobile responsive design issues
sam152’s picture

Appreciate your efforts working on this. Given the browser simply comes from a view, it seems the expectations are each user of the module comes up with a design or layout. An out of the box design would be very useful and increase consistency across all Drupal sites using media.

I've opened #2707469: Create a design for the media browser. for aGov, but perhaps efforts should be focused on the module itself?

pivica’s picture

Issue summary: View changes
pivica’s picture

for aGov, but perhaps efforts should be focused on the module itself?

I think that it is a good idea to join forces and first fix things in core and entity_browser module and then continue with custom implementations.

pivica’s picture

Issue summary: View changes
sam152’s picture

The "file_browser" project creates and styles a default view for file entities. Perhaps the equivalent is needed for media entity and design improvements should go in there?

pivica’s picture

I didn't check a lot file_browser module, but judging to it screenshot on https://www.drupal.org/files/project-images/file_browser_screenshot.png but that better&simillar look and a lot more we would want to have also in entity_browser.

Are there somewhere design/plan issues for file_browser what other improvements module would do?

sam152’s picture

You'll have to ask the module author. I was made aware of the project today. I do wonder if "ENTITY_NAME_browser" modules are going to be able to provide the best user experience vs something generic in entity_browser. It might be difficult to be entity agnostic? How will entity browser know what fields are available to display in a view for any entity type?

I'm considering creating media_entity_browser which provides a "media_entity" specific view, styled similar to file_browser to solve this problem.

pivica’s picture

How will entity browser know what fields are available to display in a view for any entity type?

This is little bit outside of my current knowledge of entity_browser, i'm not too deep into project, just over-viewing current entity_browser ui/ux initiative that @Nenad is doing.

Regarding 'what fields are available to display in view' - i don't think that we should/will use fields directly when rendering various entity types in entity_browser views, but we should use some teaser display for that and each entity type should provide a good default teaser display which we can use.

@slashrsm can probably add more info on this subject.

sam152’s picture

That's possible, but it still leaves the user to configure the view mode which is a significant part of the display. It also might be difficult path because views fields are required for the selection checkbox, which is required to be present.

pivica’s picture

That's possible, but it still leaves the user to configure the view mode which is a significant part of the display.

Little bit confused about this (although not fully sure how stuff works currentlly), but user should not configure nothing out of the box, all modules should provide sensible defaults for everything and also including display and views modes that works OK out of the box.

If user wants some custom behaviour then fine, he need to know advance configuration stuff and then do what ever he wants.

It also might be difficult path because views fields are required for the selection checkbox, which is required to be present.

Hmmm, yeah this can be a problem then if it is like that, we should see can we re-factor this if possible because using fields for view rendering is a problem and is adding complexity.

sam152’s picture

Discussed the technical approach on IRC, logs as follows: http://codepad.org/OS5RNkzn.

pivica’s picture

pivica’s picture

Issue summary: View changes