Responsiveness in General

[MariusGrunenberg]

Type of issue: (check with "[x]")

• New feature request
• Bug
• Support request
• Documentation

Current behaviour:

Using the Content-App and the ADF Components I noticed there are many things not responsive. I have collected some things, using an iPhone 5 screen, since it's one of the smallest screen(even though the issues I have found also occur with bigger phones).

Keep in mind, these are just my findings, there may be more issues with other components. Maybe a full test round needs to happen, and also maybe integrate some kind of automatic test / Pull request requirement to ensure new developments won't break responsiveness.

The problem is, as a developer you currently need custom CSS fixes, which can break with the next releases, so it would be better to have them inside the ADF/Content-App code.

Here is the related Content App issue: Alfresco/alfresco-content-app#926

ViewerComponent

https://drive.google.com/open?id=1L24xvw4YwtvaTMdrPl2Dr3ZpjAzn2xy6

As you can see many main functionalities are not visible and there's no way for the user to reach them. (Also at the bottom the zoom out function and so on)

ContentNodeSelectorComponent

https://drive.google.com/open?id=1N7Px50O_kBd_JgWpt-0qdvgMOicfajk8

As you can see in the image the folder navigation is impossible on mobile. The folder names are hidden and there's no way to scroll to the side to reveal more information.

[eromano]

@MariusGrunenberg thanks are you willing to contribute on fixing it?

I guess for the ContentNodeSelectorComponent we should only show the name only for small devices. So we could apply on the rest of the column the class class="adf-desktop-only".

For the ViewerComponent we could see how it goes with the Buttons Menu Component because this component is fully responsive and it will display the buttons in a menu if they are on a mobile

[MariusGrunenberg]

@eromano If my schedule allows me to, yeah sure :D.

ContentNodeSelectorComponent I guess it would be alright to add the name column as a first and make the table scrollable.

ViewerComponent I can't seem to click the link I just get "Not Found". But yeah that would be my idea to create a menu for the actions. However there is still the zoom menu on the bottom. Maybe it is ok to hide the page number and the percentage value to make some space on mobile.

And as a general thing, since these are just some things, I noticed (I also found some for the ACA). Maybe is there a way to add some QA to ensure for future Commits? Maybe as a Pull Request Review requirement to check the component with the Dev Tools and Device Mode before approving.

[DenysVuika]

I suggest providing a contribution for the CSS and responsiveness, if you already know how this should work and tested.