Vscode-pull-request-github: Suggested description page styling tweaks

Created on 15 May 2019  路  9Comments  路  Source: microsoft/vscode-pull-request-github

Found while testing https://github.com/microsoft/vscode-pull-request-github/issues/1152

  • While the page is loading, the text "Loading..." is displayed at the very top of the page with no padding. It would be nice to have a top margin for this, or possibly make it more central
  • The comment editor seems to have lost its padding between the text area and buttons:
    Screen Shot 2019-05-14 at 11 03 57 AM
description page good first issue ux

Most helpful comment

@Ashniu123 that makes sense. Here is the final view.

#1156

Let me know what you think?

All 9 comments

Can I try this?

@Adam13531 Yes! The second bullet point has already been fixed. The code that adds the "Loading..." text is here: https://github.com/microsoft/vscode-pull-request-github/blob/d8088a6473db83738e477ec116b3bf9041dcb13c/preview-src/app.tsx#L22 and the stylesheet is preview-src/index.css

@Adam13531 Yes!

I think you may have tagged the wrong person. @Ashniu123, see the last response.

Should I just put an margin-top like

<div margin-top="10px">Loading...</div>

? Or Add use the "title" class ?

It would be helpful to post some screenshots so we can visually compare the two

Would something like this work, or is this too far?

Before - no spacing:

before-spacing-change

After - centered:

after-spacing-changes

@queerviolet
if this is still open and available? I would like to take it. I have centered the "Loading..." text and increased the font size so that it is more visible.

#1156

@rishab-pdx if your PR is ready then by all means... Go ahead! :D

Edit: I'd recommend to not increase the font-size unnecessarily as people generally set their font sizes to suite them and overriding it would be bad UX.

@Ashniu123 that makes sense. Here is the final view.

#1156

Let me know what you think?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

octogonz picture octogonz  路  3Comments

paulirish picture paulirish  路  3Comments

Tyriar picture Tyriar  路  4Comments

Velyks picture Velyks  路  3Comments

scrossan-crown picture scrossan-crown  路  4Comments