Error message when adding large files are not readable

robbieaverill commented 6 years ago

Originally from https://github.com/silverstripe/silverstripe-elemental-fileblock/issues/9

Reproduce

Install silverstripe/elemental-fileblock on 2.x-dev and dnadesign/silverstripe-elemental on 4.x-dev
Create a page that has the ElementalPageExtension enabled
Add a FileBlock via the Add Block button
Click on the newly created File Block to expand it
Use the Browse link to add a file that is 2MB+
Observe an truncated error message as shown below

Hover over the error message and see that the tooltip does not show the entire message either

Acceptance criteria

The user is able to read the error message presented in this scenario
New design direction is followed
Error messages extending the character limit on the line has been considered - does this need to be handled?

Design notes

Exclude reference to any change outside of the error messaging, filename, file details, component size
Make sure to have a look at the spacing, font sizes, and hight of the component/ item as referenced in the designs

ScopeyNZ commented 6 years ago

I think this component lives in asset-admin?

robbieaverill commented 6 years ago

Ha, true. I don't want to move it again though =D

newleeland commented 5 years ago

The confirmation messages don't work too well there in small screen widths. Update uploadfield design to accommodate longer messages

Updated desktop version of uploadfields that comfortably hold error messages on DSM
Updated desktop version of uploadfields to work on mobile on DSM ~- Removed mobile version from DSM.~

clarkepaul commented 5 years ago

I'm getting the same issue but also the error message isn't readable either. SS4.3 using large image.

ScopeyNZ commented 5 years ago

Yeah it seems to just dump the response of the validation request verbatim. In your case it's obviously receiving some HTML page that it's dumping the source of 😞 .

kinglozzer commented 5 years ago

I suspect that https://github.com/silverstripe/silverstripe-asset-admin/issues/925 is the reason that @clarkepaul is seeing HTML instead of a friendly error message

robbieaverill commented 4 years ago

Note that the escaped HTML part of this is tracked here: https://github.com/silverstripe/silverstripe-asset-admin/issues/915

This issue should just address the fact that a message like "Filesize is too large" isn't able to be rendered. I believe someone made a PR that would show the full message as a title/hover tooltip, which is an improvement and might be enough to close this issue.

brynwhyman commented 4 years ago

Noting that this issue has been updated to include some new ACs. @silverstripeux noted that they want to have another look at the designs to check everything is in order

sachajudd commented 4 years ago

Updated designs can be found here: Silverstripe CMS Design System

Few notes:

Updated the padding on the basics component which should apply to all uploadfields
Added an additional extended error uploadfield that grows in width depending on how long the error message is. This is to cater for longer messages or possible translations.
4 examples of error messaging.
Added a mobile error uploadfield example.

Let me know if you have any thoughts or feedback 🙂

emteknetnz commented 4 years ago

@sachajudd DSM link isn't working for me, I've tried logging in an out. Not sure what's going on

Could you take a screenshot of the design and post it here as a comment?

sachajudd commented 4 years ago

Sorted with @emteknetnz offline. Link is working correctly.

emteknetnz commented 3 years ago

Looks like this was indirectly fixed by https://github.com/silverstripe/silverstripe-asset-admin/pull/1138

This is how it now renders:

@brynwhyman you happy to close this?

brynwhyman commented 3 years ago

@emteknetnz the screenshot in the description looks to have a reduced-width. Have you tested that also?

I'm guessing that the messaging still won't be as responsive as we want it to be. When we looked at this issue, we felt that new designs would be the best way to solve the high-level bug that is: 'the error message is not readable'.

I wouldn't expect to close this issue until the following AC is met:

New design direction is followed

emteknetnz commented 3 years ago

Same width as original screenshot, still does not look particularly good

sachajudd commented 3 years ago

Agree with @brynwhyman to leave open until the new design direction has been followed.

silverstripe / silverstripe-asset-admin