[IMPROVE] UI of Permissions page

[fliptrail]

Closes #13700

This improves the UI of Permissions page. Now, all the roles are properly visible with horizontal scroll support for small screen devices. The text alignment and size of check boxes have been changed as well as size of edit icon. Also, now, the names of permissions are visible and the ID of permissions is hidden, (which earlier was redundant).

Initial State

Final State

[ggazzo]

hey man before commit try run ./node_modules/stylelint/bin/stylelint.js --fix "app/**/*.css"

[engelgabriel]

The ID only looks redundant in English, but they are very helpful in other languages.

[fliptrail]

@engelgabriel For a user in another language, he would be able to see Permission in his native language as well as the Permission in ID (english). I personally, think that it would be redundant. However if you suggest, I can push a commit to display the ID in a smaller font and a greyed out color. That would be more appealing to the user. The rest of my commits focus on displaying of all roles and horizontal scrolling on small devices.

[engelgabriel]

Ok, let's try the following:

• Alight the first column to the left and remove IDs, but remove keep it a single line, so it is easy to read.
• Rotate the role names 90deg with transform: rotate(-90deg);
• Add IDs back on a new LAST column

The result should be something similar to the "Browser compatibility" table at https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation#Browser_compatibility

[engelgabriel]

The Permission ID in a smaller font and a greyed out color in monospace font underneath could look good too.

[fliptrail]

Working on it.

[fliptrail]

@engelgabriel Please review, did as suggested.

[engelgabriel]

Thank you so much @fliptrail it is almost perfect. I have some suggestions to make it a bit better, but they are not required for us to merge this PR.

1. The checkboxes should be in the vertical center of the line.
2. Something is making the columns have different widths, they should all have the same width.
3. Remove the black lines, as we don't use them anywhere on the project.
4. Keep the role names also in a single line and remove the unnecessary edit icon.

[fliptrail]

Edit icon is I guess necessary to show that roles can be edited.
I guess without black borders the table would look odd
Please give your reviews.

[fliptrail]

I will try to put custom checkboxes.

[engelgabriel]

I will try to put custom checkboxes.

I don't have a problem with the native checkboxes, keep them. Just fix the vertical alignment.

[engelgabriel]

Thank you so much @fliptrail
@ggazzo please merge this and let's do any minor improvements later.