As a super user, I can customize the branding slightly (VCMA)

[ggordn3r]

Request from VoterChoice Massachusetts:

Branding it with our colors and logo. It needs to be specific to MA. Logo block, custom color pallet, powered by FV is okay, customized the contact at the bottom.

What we propose to do out of this:

• allow super-users to change some colors (e.g. the bar)
• allow co-branding alongside RankIt logo

[proggeramlug]

This is implemented and can be tested now.

Example: https://rankit.skelpo.com/vote/ICkHuqpt8zcol1mGGxQb

[ggordn3r]

Sorry--ignore the shuffle. I accidentally moved the wrong one.

[proggeramlug]

okay, still to be tested :)

[ggordn3r]

Tested this, but I can't see the results to confirm that the bar has changed color in the link you provided. See screenshot of https://rankit.skelpo.com/vote/ICkHuqpt8zcol1mGGxQb/success below:

And here's what happens when I click "View Results": https://rankit.skelpo.com/results/ICkHuqpt8zcol1mGGxQb/summary

[proggeramlug]

Reload, you should see this now:

[ggordn3r]

Now the success page is right, but I still can't see results. I think you have it set to hold them in your settings with #106! 😆

[proggeramlug]

now! :)

[ggordn3r]

Hmm... I see the logo, but the colors don't look any different:

[proggeramlug]

Alright, check now. I had implemented it for the "vote" page only.

We are for now only changing the color of the header. Should we apply those colors to the buttons as well?

[ggordn3r]

Ah, looking back at the description, I see that I didn't define this very well. Sorry about that.

Users want to be able to customize 4 color values:

• The header (done)
• The bar (done)
• The purple button color
• The pink button color

At a minimum, those should change in vote, results, and success pages. Other pages can go either way.

Also, I sent the client a screenshot of the logo behavior for confirmation. When a custom logo is added, she is asking for the RankIt logo to be moved to the footer and reduced in size (try 70% of width). The custom logo should then be centered in the header.

[proggeramlug]

Okay, I need a bit more explanation here:

Can you send me a screenshot with both colors and for the buttons? I'm only seeing purple right now.

Also, the footer is actually never visible for me, neither when voting nor on the success page. It might be on the results page, but how are we showing the logo then?

[ggordn3r]

Yes, sorry, I should have clarified this better and shared a mockup. Pink appears on the back button on mobile and the "View Results" button. It is definitely less prominent than the purple.

Pink example 1, back button on mobile:

Pink example 2, View results:

Here is what the logo should look like at the bottom. To be clear, the RankIt logo only appears at the bottom when there is a custom logo on top. I think this footer should be visible on all pages except the success page (because of the purple background), but that doesn't matter for this issue. The logo just needs to be in the footer whenever/wherever the footer appears.

UPDATE: the footer is on the results page, it's just hiding behind the buttons 😆 Please fix that:

[proggeramlug]

"UPDATE: the footer is on the results page, it's just hiding behind the buttons 😆 Please fix that:"

how do we want to fix this? The problem is that the buttons are statically fixed to the bottom here and they will lay over anything else. So how would we keep the footer visible? @ggordn3r

[ggordn3r]

Hmm... dumb solution: add 2-3 line breaks to the bottom of the footer? If we have blank space the size of the buttons underneath then the footer will be visible when someone scrolls all the way down.

[proggeramlug]

Check it out now!

[ggordn3r]

The last line is still not quite visible on my mobile screen. Add 2 more lines and let's try again.

[proggeramlug]

try now

[ggordn3r]

That looks perfect. Now I can get back to testing the actual functionality. I'm using this poll to test: https://rankit.skelpo.com/results/D48E57IxOKn4kFnCCgwJ/summary

The ability to modify the branding should be available to super users and admins, but not regular users. I've confirmed that the permissions work properly for both regular users and admins, but I realized that I may have missed a requirement here: is there currently a "super user" type between user and admin?

If not, a super user should be able to do everything a user can do, plus customize the branding. That's the only difference for now. They may receive more powers in the next release.

2 small fixes to the success page:

• Use button color 2 for the CTA button. When not custom set, the default should be the pink button color we use elsewhere.
• Notice the sharing buttons are being cut off like the footer was before. Can that be fixed again with line breaks? When "Show results" is enabled, the pink "View Results" button also cuts it off at the bottom.
• This is on a poll where results are closed, so there's also a big white space. We should hide that when no buttons are available at the bottom.

I modified all of the colors (font, button 1, button 2) to tan and orange but the default colors appear, even if I force the cache to refresh:

I intentionally tested the poll with a gigantic logo image. It's handled fine on desktop but grows huge on mobile. Let's keep the size of the logo the same on mobile as it is on desktop, i.e. regardless of screen width.

[proggeramlug]

Okay, went through all your feedback and hopefully this is now final!

The super user permission was added and you can (as admin) grant it to users (in the app).

[ggordn3r]

Ship it!