isaiahstjohn / repyourblock Goto Github PK

Use https://developers.google.com/places/web-service/autocomplete and https://developers.google.com/maps/documentation/geocoding to get the user's address with an autocomplete input field. Also ask for the voter's name. Transform the Google address by, for example, 8th --> EIGHTH to match the voterfile address format. Then look for similar addresses in the voterfile (http://boelcd.franklincountyohio.gov/). Transform the name by removing all characters except A-Z and spaces. Filter out any voterfile records with dissimilar name fields. Finally, check the remaining addresses with Google's geocoding service to see if the latitude and longitude fields match that of the address provided by the user. If multiple records pass through all of these filters, provide them all to the user. Show the user their polling location and #RepYourBlock2020 candidate.

Create a pledge page to replace https://sites.google.com/view/repyourblock-pledge/home

Whitmer (https://repyourblockcolumbus.slack.com/archives/CK8U0ANJY/p1562512554007100):

Also, I think you should add something that emphasizes the donate button to make it stick out

After some more digging, it looks like our best option for integrating with Action Network is to use their custom embed codes and style them with CSS. That way we don't need to pay extra for an API key. Unfortunately, that means taking out the custom html forms @bryce-sampson wrote yesterday.

The following is the code for the email sign-up:

<link href='https://actionnetwork.org/css/style-embed-whitelabel-v3.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/widgets/v3/form/join-repyourblock2020?format=js&source=widget'></script><div id='can-form-area-join-repyourblock2020' style='width: 100%'><!-- this div is the target for our HTML insertion --></div>

And this is the code for the volunteer sign-up:

<link href='https://actionnetwork.org/css/style-embed-whitelabel-v3.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/widgets/v3/form/volunteer-w-repyourblock2020?format=js&source=widget'></script><div id='can-form-area-volunteer-w-repyourblock2020' style='width: 100%'><!-- this div is the target for our HTML insertion --></div>

We'll want to change the style='width: 100%' part in each embed code. Don't forget to style the 'Thank You' code that Action Network dynamically swaps in after the form is submitted!

Petrik suggested yesterday that it would be nice if the values boxes on the home page ("https://repyourblock2020.org/") displayed with the same number of boxes on every line. I suggest we fix this after the website is launched. I don't think it's a high priority issue and we have lots of other important stuff to get done before launch.

Currently, on a large screen, you may see this:

Or this:

We want the values boxes to always display on one or more lines such that each line has the same number of items. Since we have six items, they could be displayed in any of the following configurations:

| 1 | 2 | 3 | 4 | 5 | 6 |
--
| 1 | 2 | 3 |
| 4 | 5 | 6 |
--
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
--
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |

Probably the easiest solution would be to change to a CSS grid (as @bryce-sampson suggested) and use media queries to change the grid layout according to screen width.

The only downside with using media queries is that it will break if we change the width or number of value boxes, but that shouldn't happen too often.

A more general solution could be created with JavaScript, but I feel like that would be overkill, here.

Use this as inspiration:

Petrik (https://repyourblockcolumbus.slack.com/archives/CK8U0ANJY/p1562514464008400):

I'd recommend a little different copy that "We're taking back the Democratic Party, One Block at a Time."

I'd prefer:

Let's take back the Franklin County Democratic Party, One Block at a Time

Inspiration:

Add "Credits" header, and add "Contact" header with [email protected] address.

See https://css-tricks.com/essential-meta-tags-social-media/

Use URL's like repyourblock2020.org/donate?ref=isaiah to allow donations to be credited to Isaiah. To implement the feature, use:
let params = (new URL(window.location.href)).searchParams; let ref = params.get('ref');
Check that ref is in a list of valid refs hardcoded in the page source. This check could be bypassed by a determined person, but that would just let them donate money under an invalid referral code, which would not be a problem.
Then if the ref is determined to be valid, set a hidden ref field in the Action Network form to the value of ref.

Check all:

• Action form pages
• Action form thank you pages
• Action email responses

Whitmer (https://repyourblockcolumbus.slack.com/archives/CK8U0ANJY/p1562512424005700):

I think the vision section should go above the values section.

Try something like this: https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585

I like this: https://thenounproject.com/search/?q=donkey&i=253649

Instead of https://repyourblock2020.org/volunteer.html, I'd like to have https://repyourblock2020.org/volunteer/. It's just a little prettier with out the .html. Nginx is set up on the server to automatically do that, we just need to move www/volunteer.html and friends to www/volunteer/index.html, www/how-we-win/index.html, etc. Of course, we will then need to go through each page's source code and change the .html's to /'s. To check that everything is correct, search each page's source for '.html'. Their should be no occurrences--at least not in internal links.

Also, change "/index.html" to "/", e.g., in the #repyourblock2020 logo href attributes.