(Feature) Add new styles to DApp.

gabitoesmiapodo commented 6 years ago

Description:

Solves https://github.com/poanetwork/poa-dapps-voting/issues/164 by adding the new syles..

What is it: (Feature)

Additional Info:

I'm attaching a few screen captures to know what to expect from this update.

Core designs:

Sokol designs:

varasev commented 6 years ago

The description lines are bound to the upper border of the icon:

Maybe add padding-top: 5px; for .ballots .info to make it look like this?

gabitoesmiapodo commented 6 years ago

@varasev Fixed it.

gabitoesmiapodo commented 6 years ago

@vbaranov

Good catches, sorry about that.

Style for ballot creation button should be changed: 'NEW BALLOT' -> 'New Ballot' -> Fixed.
Key type and Action values in a ballot card should be in lower case with a first capital letter -> Changed it.
Padding between sliders should be more than padding between a slider and corresponding button -> Fixed.
All paddings inside card should be equal. -> Done.
More.../Less buttons should have another color than text. Please see the original layout. -> Changed that too.

vbaranov commented 6 years ago

@gabitoesmiapodo yes, looks good now, thanks. Could you also add small paddings between columns here:

2018-08-09 17 32 01

?

varasev commented 6 years ago

@gabitoesmiapodo I think the Load More Ballots button should be more visible - maybe with some border or background?

vbaranov commented 6 years ago

I think the Load More Ballots button should be more visible - maybe with some border or background?

@varasev there is no borders or another background from designer's layout https://user-images.githubusercontent.com/16716926/43633724-bfffce10-9712-11e8-9a53-527247032d3c.png. I guess, we should follow it.

varasev commented 6 years ago

@varasev there is no borders or another background from designer's layout https://user-images.githubusercontent.com/16716926/43633724-bfffce10-9712-11e8-9a53-527247032d3c.png. I guess, we should follow it.

Maybe make that button just with bold font then? Or make the top and the bottom whitespace around it wider?

vbaranov commented 6 years ago

Maybe make that button just with bold font then? Or make the top and the bottom whitespace around it wider?

maybe, but it should be agreed with an author of the layout https://github.com/poanetwork/poa-dapps-voting/issues/164#issuecomment-410188165.

gabitoesmiapodo commented 6 years ago

@vbaranov Added the paddings.

@varasev Maybe we should ask @pashagonchar ?

varasev commented 6 years ago

Sorry, didn't guess initially who is designer here :)

varasev commented 6 years ago

Ballot description is shown with some words broken near the right border:

Could we turn on a word wrapping?

varasev commented 6 years ago

Padding is also needed here:

varasev commented 6 years ago

Ballot time column is in the wrong place for min threshold and change proxy ballot types. You can find it if you click on Load More Ballots several times:

varasev commented 6 years ago

@pashagonchar @gabitoesmiapodo Some little defects with the search bar:

varasev commented 6 years ago

When I reduce the width of the browser window, scroll down a little and click on menu, the menu items are not clickable and they're poorly visible because they're under the faded layout.

Also, I propose not to scroll the header (not to attach it to the top of the browser client area when scrolling) because it occupies a part of the small screen of a smartphone - it brings some discomfort for a user.

gabitoesmiapodo commented 6 years ago

Ballot description is shown with some words broken near the right border: Could we turn on a word wrapping? -> Yes, changed it so it's OK now.
Padding is also needed here: -> Columns should be better separated now.
Ballot time column is in the wrong place for min threshold and change proxy ballot types. You can find it if you click on Load More Ballots several times: -> OK, went very far into the "Load More" history and I think everything is fine now.
Some little defects with the search bar: -> Yeah, those were some states which were being overwritten. I'm not sure if there's something that could be done about the X, but the text is fine now.
When I reduce the width of the browser window, scroll down a little and click on menu, the menu items are not clickable and they're poorly visible because they're under the faded layout. -> Fixed.
Also, I propose not to scroll the header (not to attach it to the top of the browser client area when scrolling) because it occupies a part of the small screen of a smartphone - it brings some discomfort for a user. -> We should decide what to do with that. It takes some screen space, sure, but it also makes the menu available at all times. It could be very far away if the user loads more ballots a few times, and he / she should have to scroll up a lot if they reach the bottom.

varasev commented 6 years ago

@gabitoesmiapodo Thanks for the fixes!

We should decide what to do with that. It takes some screen space, sure, but it also makes the menu available at all times...

Ok, let's leave it as is.

Could you also make another ballot card that was added in the layout here: https://github.com/poanetwork/poa-dapps-voting/issues/164#issuecomment-412256495

We didn't yet implement this type of ballots in DApp, but you could add makeup of it in the render function of src/components/BallotCard.jsx just for a demo to see if it looks correct. Then we will comment out its code until the logic is implemented.

varasev commented 6 years ago

@gabitoesmiapodo I mean this:

poa_governance_app_sokol_2