[Draft] Added slider instead of drop down for referendum vote conviction

niklabh commented 4 years ago

Closes: https://github.com/paritytech/polkassembly/issues/775

Screenshot from 2020-08-09 20-50-35

Need help with design and css

niklabh commented 4 years ago

CSS help needed

Tbaut commented 4 years ago

I'm not a css widzard, but do you mean you need help to match the design proposed in the issue? or is there something else?

niklabh commented 4 years ago

Yes need help to match proposed design

https://user-images.githubusercontent.com/7072141/81508605-4f227800-9305-11ea-8ffc-6da62eccb368.png

erler commented 4 years ago

When I prototyped this a few months ago I did it the lazy way and used this slider, so that you can actually drag it with your mouse and have visualised steps. Can't remember if it has arrow key support for accessibility (it ideally should have).

Updated CSS for that would be

.rc-slider-rail {
        background-color: grey_light;
    }

    .rc-slider-track {
        background-color: pink_primary; 
    }

    .rc-slider-handle {
        border-top-color: grey_secondary;
        border-bottom-color: grey_secondary;
        border-left-color: grey_secondary;
        border-right-color: grey_secondary;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-right-width: 1px;
        &:active {
            box-shadow: none;
        }
    }

    .rc-slider-dot-active {
        border-top-color: pink_primary;
        border-bottom-color: pink_primary;
        border-left-color: pink_primary;
        border-right-color: pink_primary;
    }

And then have the line beneath it: tokensLocked * lockPeriodMultiplier = votes, so that the user gets an idea how the amount of votes come together and can adjust either tokens and lock period.

paritytech / polkassembly

[Draft] Added slider instead of drop down for referendum vote conviction #996