poanetwork / poa-dapps-voting

POA Network Governance Dapp
https://voting.poa.network
GNU General Public License v3.0
26 stars 54 forks source link

Restyling #160

Closed gabitoesmiapodo closed 6 years ago

gabitoesmiapodo commented 6 years ago

- Description:

Facelift for the Governance DApp.

There were no designs provided, so the restyling had to be done taking the POA Network Bridge UI and the POA Network style guide as guidelines.

- What is it: Feature

What to expect visually from this update:

all - desktop - top all - desktop - bottom all - tablet - top all - tablet - bottom all - mobile - top all - mobile - center all - mobile - bottom mobile menu new ballot - 1 new ballot - 2 new ballot - 3 new ballot - 4 new ballot - 5 new ballot - 6 new ballot - 7 new ballot - 8
6proof commented 6 years ago

Looks great!

gabitoesmiapodo commented 6 years ago

@vbaranov for some reason the current version has the font size for those elements set to zero (I thought that it was on purpose).

core_-_poa_network_governance_dapp

I think we could do something like this to differentiate or at least separate the items, to make them easier to read:

screen shot 2018-07-23 at 17 52 12

Using too many colors could potentially be visually noisy, and we already have three colors there, excluding white / black / gray.

vbaranov commented 6 years ago

@gabitoesmiapodo ok, vertical lines look good for separation.

vbaranov commented 6 years ago

@gabitoesmiapodo

for some reason the current version has the font size for those elements set to zero (I thought that it was on purpose).

and, no. It was unintentional. Let's fix it.

varasev commented 6 years ago

@gabitoesmiapodo please also note, that "Key type" column may have a long line like "mining, voting, payout". The same thing with "Affected key" column. Example: https://github.com/poanetwork/poa-dapps-voting/issues/131#issuecomment-396251309 - in that case, "Validator key" column must be hidden.

gabitoesmiapodo commented 6 years ago

@vbaranov implemented the visual changes:

screen shot 2018-07-24 at 09 04 53 screen shot 2018-07-24 at 09 05 02

@varasev noted. I only made some changes to the CSS here, so the logic should work as before.

varasev commented 6 years ago

@gabitoesmiapodo could you merge upstream/core branch into your restyling branch?

pashagonchar commented 6 years ago

poa_governance_app_new_ballot_2 poa_governance_app_new_ballot_3 poa_governance_app_new_ballot poa_governance_app Some style changes

vbaranov commented 6 years ago

@gabitoesmiapodo as we already merged this PR, could you create a new one to satisfy these changes ☝️?

varasev commented 6 years ago

Those styles look much better ☝️

gabitoesmiapodo commented 6 years ago

@varasev @vbaranov sorry for the delay. I'm currently working on some other things, but this will be done.

Maybe we should create an issue so this doesn't get lost?

varasev commented 6 years ago

May be we should create an issue so this doesn't get lost?

@gabitoesmiapodo Yes, create, please.

gabitoesmiapodo commented 6 years ago

There we go https://github.com/poanetwork/poa-dapps-voting/issues/164

varasev commented 6 years ago

@gabitoesmiapodo Thanks!