elements icon indicating copy to clipboard operation
elements copied to clipboard
verified publisher icon stoplightio

UI tweaks in Elements

Open mmiask opened this issue 4 years ago • 3 comments

Follow up to https://github.com/stoplightio/elements/pull/1332#issuecomment-856672828 - most of it needs to be fixed outside of Elements, this issue is just for keeping everything in one place

✅ ~~Font size differ between sections. As much as it looks good for the article, it is a bit odd for me in the Security panel~~ UPDATE: this is already fixed

Screenshot 2021-06-08 at 12 45 18

✅ ~~Same thing in stacked layout - can we make it more consistent?~~ UPDATE: this is already fixed

Screenshot 2021-06-08 at 12 48 45

⚠️ We are duplicating the header content in the description

Screenshot 2021-06-08 at 12 50 25

⚠️ Dark mode in stacked layout is not working properly:

Screenshot 2021-06-08 at 12 52 18

⚠️ Error screens in dark mode are a bit hard to see

Screenshot 2021-06-08 at 12 53 28

❓ I don't know if this related to MarkdownViewer or styling in Elements, but the table width is different

We are now using the full width of the section instead of minimal space required for the content. @noor-ahmad - what are your thoughts on that?

UPDATE: we can keep the full width of the page, but need to align the contents of the columns to the left

Now:

Screenshot 2021-06-08 at 13 02 37

Before: Screenshot 2021-06-08 at 13 02 15

⚠️ Link for that logo is outdated - not needed for this PR, but worth knowing

Screenshot 2021-06-08 at 13 04 08

⚠️ Bullet points with links look like plain text, don't have the links styling

Screenshot 2021-06-08 at 13 06 56

⚠️ Padding for schemas embedded in articles doesn't look good (the required text)

Screenshot 2021-06-08 at 13 09 47

mmiask avatar Jun 10 '21 10:06 mmiask

Summary after the call with @noor-ahmad

Re: tables

  • Let's align the contents of a column to the left, as before
  • Let's bring back the table title
  • Table can take the full width of the page

Re: font sizes

  • Let's unify the font size in Request Samples, Model Examples etc. to 12 px (the right column components)

mmiask avatar Jun 30 '21 14:06 mmiask

Regarding fonts we can simply do that, but tables reside entirely in new markdown-viewer and were made to fill full width on purpose so if that's something that needs a change I guess it should be addressed there.

mallachari avatar Jun 30 '21 15:06 mallachari

tables reside entirely in new markdown-viewer and were made to fill full width on purpose so if that's something that needs a change I guess it should be addressed there.

Actually the full width can stay, the text alignment needs to change. I'll update the description

mmiask avatar Jun 30 '21 15:06 mmiask