Beta Issues

[nicpottier]

All

• Button rollover states - what’s the easiest global change we can make? I’m thinking all rollovers fade background of button by like 20%?
• Can we be sure that all yellows, greens, blues, etc are the same? For example, you said Mexico has two yellows… I don’t think that should be the case. Can we confirm?

Home

Latest Opinion Section

• Add Margin entire above Latest Opinion section (basically just space between the header, and this would be the case for the landing pages as well. See the Invision for spacing.
• Related to above, add padding above the chart on the Latest Opinion background so the graph paper doesn’t perfectly line up with the top of the color block to the left, about 25-30px or so.
• Latest Opinion section - On the Mexico site for example, the green background to the left looks good, can we make the chart be the same color as the left always? Will help connect the question to the chart.
• There is a lot of empty space on the green background. Realize this is a tricky issue. Maybe we should center the question vertically?
• View Full Results button - left align to chart and closer to chart, cut that vertical space about in half.
• The graph paper background (this will relate to other areas site wide too, has a left or right border, lets lose that — want that to fade or just break away not be so rigid.

U-Reporters Section

• Ages on the chart, top line, reduce font size to 14px

Social Media Section

• some spacing below the buttons to make them stand out a bit more, about 25px or so
• Can/should the social media plugins be able to scroll…? Thinking out loud here… thoughts?

Photo Section

• Limit the box to 6 photos
• Can we add a button here on the left side below the content?

Pre-footer

• Read more button left align not centered

Select Your Country Dropdown

• Hover states on flags
• U-Report logo links to global (ureport.in)

Opinions Landing

• Add padding above graph paper (see notes on homepage Latest Opinion section, same details here).
• Reduce the font size of the Search dropdown items inside the accordion by about 25% and reduce line height.
• Reduce the amount of space between the Top charts / Map and the first question.
• In top left section above main title, add about 20px of spacing below the category box.
• Add about 20px of spacing below “Total Responses.”
• Reduct font size and circle size of question number by about 25%.
• XX Resonded out of XXX polled, change that font to Montserrat, same weight and size is good.
• Did we test the graphs on the chart? Can you send me a test screenshot?
• Can we reduce the number of colors on the word cloud? Maybe just top 2-3 (or even shades of one color?)

Footer

• Add more spacing between Opinions and Stories links on the right
• Need to move the Login button… lets put it to the right of the social icons and that scale instead on right side of the icons.

Stories Individual

• pull quote font change to same as body font
• Comments section too wide, lets make it the same width as content block above it.

Engagement

• This background color should go full width behind, don’t want the white gutters left and right please.
• Overall Statistics - change that title font to not be in Italics
• Bar chart box lines - no white background around the bars

About / Open Template

• On this content block, make the button of it touch the pre-footer (aka no graph paper or border below the content.

Join Now

• Add more padding top bottom in each section, about 40px each.
• Can these color bars go full width?

Updated / New assets or content JN to send you:

• Higher res video bkg logo
• Send Nic Content for the U-Report about section
• Update the map graphic
• Photos section content
• pre-footer U graphic low res
• pre-footer content tagline
• higher res U-Report logo in country dropdown
• individual Stories U graphic too large, low

Responsive

Header

• I realize this is the wrong logo, but still thinking its too large, lets reduce the size by 25% or so.
• Did you see my notes on the mobile menu?

Home

• U-Reporters section / Age — font/spacing/scale here is way off, please reference the Invision for scale and spacing. Ignore the orange of the bars, not needed.
• More padding top/bottom in the “Join” section, again see InVision
• Social plugins are extending into the feature story image below.
• Social plugins, if it scrolls…. This will create a scroll trap on mobile devices. Lets not have scroll if we can’t turn off on mobile, that make sense?
• Photos section, center the images, and like other list, reduce to 6 photos.

Prefooter/Footer

• Engagement section is messy. See the Invision, basically just lose the U graphic and that’ll fix the spacing.
• Footer doesn’t have to look just like the InVision but let’s add more spacing above and below the main links, reduce the font size of those main links by about 25%. Lets start there and we can tidy up the rest.
• Pre-footer section broken, stories should be full width and stacked. Again, please see the InVision.

New Punch List (Round 2, General)

• Home - Latest Opinion Section - add margin above the colored block (see screenshot)
• Header - add 1px border to the bottom of the header (see same screenshot as above)
• Homepage Latest Opinion section - reduce line height on Question Title to line-height: 2rem;
• Homepage social media button switching not working
• Let’s disable social media plugin scrolling on mobile
• Can we add the Select Your Country dropdown on mobile as well
• Whats the status of the mobile menu changes?
• Horizontal bar charts — can we reduce the space between lines by about 25%?
• Can we animate the Ages chart on homepage at scroll like the Opinions charts
• On the Opinions page, the export screenshot feature works great. Is there anyway we can remove a few of the items that appear in the image like the question number and the buttons?
• Age chart on Opinions, lets reduce the font size of the “0-14… 15-19” row by about 25%, make not bold like the line to the left of it below gender
• The button rollover state notes I gave you aren’t looking good, which is on me. I’m thinking the most consistent thing to do will be to make the button rollover states be exactly like the hover states on the charts (i.e. when you rollover a bar it highlights) can we borrow those same styles for buttons globally?
• Tablet view homepage Latest Opinion bug (see screenshot)
• On Individual Stories pages, reduce width of FB comments section to be same as content block above
• Please make sure full width dark background is on all the Engagement page including the top section (see screenshot, no white showing on sides)
• Is there a way to animate the map on load on the Engagement page? It loads late than abruptly displays? Maybe Loading icon before? Or animate fade in? Or both if needed?
• On Opinions buttons lockup we use the word “State”, on Engagement we use “Location”… is it always state? If so, lets use that word. If not, can you confirm?
• On Engagement can we have the lines/bars animate once you get to that section on scroll, not just the whole chart fade in? I think this is working on the first chart and looks great, but not the 3 below.
• On the Opinions and Engagement maps, can the highest response rate region be highlighted by default then change if hovered over another like it does now?

Polish List 1

• Black button rollover color: bg-gray700
• FYI still seeing the tablet bug on “Latest Opinion” homepage section
• Can we make the admin toolbar position: fixed when signed in fixed to header on scroll
• On pre-footer, can we add a height to the stories so that the “Read More” buttons always line up?
• On Opinions color blocks, add more padding above and below the question (in other words, make the color block taller, I tested with adding “padding: 14% 0;” to the bg-dark divs and liked it, and then like we did with the question, center the pill buttons and chart in the space too.
• Make the numbers of the questions to font-size: 1rem;
• Lets be sure the charts animate on scroll, not before, I’d like to see every chart animate once you get to it
• Did we test adding the graph paper-y background to the Opinions charts? Not sure I want to add just curious
• Add more padding to the top and bottom of the footer div, the equivalent of about 50px both top and bottom
• The Latest Opinion changes look good, though lets add a bit more margin above the color block (the spacing should be the same distance from “Opinions” to the gray line as the color block is to the gray line)
• Remove white overline on the “Select Your Country” flag hover
• On the Individual stories title, center the title in the dark div section
• Make the “U” graphic on individual story template smaller by 50%
• Engagement - the Overall Statistics and and map aren’t in the container, lets frame similarly as charts and filter bar below it
• Filter Results bar top and bottom - border-color: Distribute the backfill task for schemes #777;
• On map, move “Top Region” to be inline with the region, so all one line “Top Region: Harare Province” so the map section doesn’t skip below it when it adds and removes

[norkans7]

Admin list

• Lets please make all of the lines on the left and right line up. Basically the header items should line up with the sidebar items, and the right side items should line up similarly. See screenshots for examples of what I’m talking about, all areas should all be aligned either left or right.
• Can we make the font throughout the admin Montserrat like the rest of the areas and sidebar? And all consistently sized across all admin pages?
• So we can keep the same logo, maybe the logo should move to the white bar at the top? Or we could change the header background to be white — we need to keep the same logo asset, correct?
• Similar to the header question, if we are stuck using the white background logo asset, lets use the same footer as the front-end of the site.
• For “Polls” lets use the same language and be sure that’s “Opinions” (and the translations of depending on country) is used everywhere including buttons (i.e. Add Opinion not add poll)
• For RapidPro, can we link to their RapidPro login? And open this in a new tab? Idea here is adding the ability to link to their RapidPro backend easily if needed. Can we do anything to make that connection easier?
• Remove the Analytics links in the sidebar.
• I need to send you some more assets for the sidebar icons.
• Some of the titles aren’t including the icon and some are… can we be sure all are included? On the “Home” page Is the Latest Notifications functioning? What is shown here? If not much, lets just remove this page entirely and just straight to the Opinions page.
• on the Opinions page for example, can we have row rollover state? Subtle light gray background on rollover, just slightly darker than the gray rows. That possible?
• On the logged in bar for admins, lets make the font be bold and the font size a bit larger. Same with the icons on the right.
• Have you guys made any progress on the “Edit” icons Nic mentioned on our call

[norkans7]

Bugs List 2

• Admin black header you see on site while logged in, the icons are a good size, but reduce the font-size to font-size: .85rem;
• Looking at the Mexico site with the new logos, the header logo is way too big ;) please see Invision for scale
• When signed in as an Admin, the sticky header is great, except for the Engagement page… is there a way to keep both fixed but stacked on that page?
• Can the social plugin on the homepage crossfade when changing? And can we center the Twitter Follow button centered and add a bit of padding just below it? If we can’t crossfade let me know, we can talk over tomorrow.
• Is the Engagement pre-footer section on a different container size? For example, the white line to the right of the text is not lined up with the content above.
• What are our options for Location bar colors? I’ve noticed they are always red/orange/yellow.
• Admin header/footer updates (see screenshot, simplifying the header, and can we just duplicate the main site footer)
• Stories landing and homepage feature — make the title of the story and the image clickable to the story too
• Homepage Latest Opinion section, lets go back to having the “View Full Results” button be centered rather than left aligned
• Z-index bug with signed-in admin bar on Opinions map (see screenshot)
• Filter Results bar on Engagement page, border color change is showing in the code but getting over-written somewhere, be sure the top and bottom borders are Distribute the backfill task for schemes #777 (in other words should be more subtle gray)
• Pre-footer — top border change to Distribute the backfill task for schemes #777 instead of border-color: #fff;
• Header and Footer text buttons, rollover color to Distribute the backfill task for schemes #777
• On rollover, Opinions and Stories main links in the header, change the border on the bottom to be the feature color of the country (i.e. change on hover to be green border on bottom for example to highlight the hover
• Latest Opinion section, change the “Latest Opinion” text to not be bold, make regular, and add ~40px of space below it between the title.
• Join Now page - make the white “Text” and “Facebook” buttons bigger by 2x (text can stay same size) and be sure those are true circles not ovals
• On admin login page, remove the “Sign In” and faux text. Center the Username, Password, Enter Dashboard button and put Forgot password also centered below “Enter Dashboard “button.
• On Stories template, can we make the photos different sizes?
• On Stories template, what are our options for adding video?
• What can we do do to improve the layout of the Jobs page? Its not good right now…

Tablet

• On tablet, be sure that the “Photos” section on homepage stays 2 columns always (and on mobile view too like above^ for tablet)
• “Select Your Country” dropdown (thinking out loud a bit here) can we reduce the size of the U-Report global logo just a bit or figure out how to add one more column or two wider on the flag icons? Can talk over this tomorrow if helpful.
• Map region — click/tap isn’t working on mobile devices
• Stories individual pages still showing as serif font on tablet

Mobile

• As you can see in the screenshot, something on the homepage is pushing outside the container and making things off centered, I think it looks like its the "Partnering with..." text.
• Let's always have the photos be two columns, 2x3.
• We this engagement text and button gets to mobile, lets center it and the button please.
• As you can see in the screenshot, the ages chart is getting outside the frame.
• On mobile, can we reduce the space between each story by about half.
• Similar to 4, this section is messy on mobile.
• On mobile view, can we center the pills, "Filter Results" text, and social icon button row?