twaddington / pdxroasters

PDX Roasters

PDX Roasters

Find a local coffee roaster in Portland, OR.

Getting Started

Django is a great framework, but requires several steps to get a development site running on your computer. If you're running OS X these instructions should serve you well:

# Install pip
$ sudo easy_install pip

# Install virtualenv
$ sudo pip install virtualenv

# Create a new virtual environment for the project
$ virtualenv django-pdxroasters

# Activate the virtual environment
$ cd django-pdxroasters
$ source bin/activate

# Check out the project source
$ git clone [email protected]:twaddington/pdxroasters.git src

# Create a local settings file
$ cp src/site/pdxroasters/settings_local.py.sample src/site/pdxroasters/settings_local.py

# Install the required libraries
$ pip install -r src/requirements.txt

# Create the dev database
$ python src/site/manage.py syncdb

# Run the development server
$ python src/site/manage.py runserver

Note: When the Python virtualenv is activated, you'll see your shell prompt change to include a prefix like (django-pdxroasters)shin:src tristanw$. You can deactivate the virtualenv by typing deactivate.

You should now be able to access the site in your browser by visiting http://localhost:8000/ and the admin page by visiting http://localhost:8000/admin/.

When anybody modifies the data models, you'll need to delete the pdxroasters.db and run python manage.py syncdb.

Static Assets

After making changes to Sass or JavaScript, you'll need to compile the changes. To do this, use npm:

$ cd site/pdxroasters/static
$ npm install
$ npm run build

Check-in the updated files when this process has completed.

If you'll be doing several changes, you can also watch the files and recompile whenever they change:

$ npm start

Note: JavaScript source files are in /static/js/src/ and Sass files live in /static/sass/. Do not edit the files in /static/js/dist/ or /static/css/ as both folders are compiled by the build, and your changes will be overwritten the next time somebody builds.

Deploying to Heroku

To deploy the production site you need to first generate the compressed static resources. Start by switching to the release branch:

$ git checkout release
$ git merge master
$ git push heroku release:master

Note: heroku pg:reset DATABASE

License

Source released under the BSD 2-Clause License. See LICENSE.

pdxroasters's Issues

Re-Implement Modal Info Window Style

Port over the CSS from the static site and style the popup map window for roasters & cafes.

Basic search on the front-end.

We should include a basic search field that's just a Javascript search by name. Something like name.contains(query). This can be completely implemented on the front-end, but I can provide an ajax endpoint for this if necessary. Something like:

/api/roaster/?format=json&name__icontains=coava

Close info windows with users tap or click outside the window

We need to have the info window close when you tap or click anywhere outside the window.

Implement pushstate for homepage list

As prototyped with paul at isaacs, we'll have the roasters slide in from the right.

Add Custom Map Marker

Two markers, one for cafes and one for roasters.

These should be retina & standard.

Modal Button Arrangement and Functionality.

Button arrangement in the modals:

Left Button: "Where to Buy"
This button should be responsible for dropping out the Roasters' map markers and displaying third-party retailers' map markers (need to design) such as cafés, grocery stores etc. IF there are no associated cafés in the database this button should not display.

RIght Button: "Learn More"
This button should work exactly how the "Find This Roast" button is currently working by scrolling the page down to the associated roaster and popping open its informational page.

Streetview controls are hidden by top nav.

Wrap new modals to two lines

We're getting an issue where roasters with longer names are too long to fit into the smaller modal and being covered up by the new Find a Roast button. It looks like there's plenty of room on mobile to wrap these to two two lines rather than shortening the name.

Map pin is clipped off on the right.

Not sure who to assign this to. See the flat edge on the right?

Extract Nav js as pdx.nav

Currently the nav js is housed in the home app controller. I'll need to extract it and make it globally accessible so all pages can use it.

Site fails to load completely.

Currently when the site loads up, only the top banner loads. If you resize the window all the down then pull it back open, you can get some of the map to display.

Clear form after submit, add success message

Let's make sure that we're clearing the forms after success and posting a success message.

Tristan, do you think the success message should be housed on a new page / URL. Normally I would like a new page so that it's easier to create a goal funnel for tracking, but form submission is not a big goal for us here.

Forms:

Add a Roaster form
Landing URL: /add-a-roaster/
Form Success copy: Thank you for reminding us how much we suck at research. We'll get this roaster added soon!

Contact form
Landing URL: /contact/
Form Success copy: Thank you for the note. We'll get back to you soon.

Set up sitemap.xml

Can we get a sitemap set up for the site at pdxroasters.com/sitemap.xml. Not sure if the full site architecture is done yet, but this would be great to have before launch.

Add link arrow to Roaster address on detail page

Let's either add a our href style or add an arrow to the roaster address link. Currently it's not clear that this is a link

Add clear button functionality to filtering

Brandon, let's add a X button to the filter that clears the form.

Add marker to current roaster drop down

Let's add a Cafe Marker to the red drop down menu so users know what they're looking at.

Add Apple icon for home screen

Please add these for Apple and Android homescreen images.

Wire up bare domain.

Please sign in to NameCheap.com and configure the DNS as follows:

• @ www.pdxroasters.com URL Redirect(301)

That is, add www.pdxroasters.com to the @ field and set it to "URL Redirect (301)".

If you need help or have any questions please let me know.

Customize Tile Set

Customize the look of the tile set so it's not so "google-y"

Include current location in map bounds

Currently if you get into a situation where just one marker is returned in the query, the map zooms in all the way on it. This makes it complicated to have any context of the city. I think an easy fix for this would be to include the current marker within the bounds of map zoom. We need to do this for roasters and cafes.

Map loads incorrectly when using home link/logo

This seems to be an intermiten issue and so far I have been able to replicate on Safari, Chrome and FF. One thing I have noticed is that this seems to happen when site is hanging up on load and taking 2-3 minutes to render out pages.

Tristan, do we have a worker on the site keeping the machine spooled up? Can we set one up? I have definitely noticed a huge slowdown when I go to the site first thing in the morning or after a few hours.

Steps to repeat:

1. Google search: PDX Coffee Roasters
2. Paginate through a page or two (depending how google serves up results for you) and click on the link for PDX Roasters | Courrier Coffee Roasters
3. When the page finally loads, click on the home logo
   – Notice the map is not getting markers and is zoomed completely out.

Add Bing Auth to root directory for verification

I got the site verified with Google Webmaster Tools via the DNS method, but Bing is not working. To get this working, drop the emailed file in to the root directory and let me know when it's there.

Add startup image

Add startup image for saved web app.

Add fields to Add a Roaster form

The Add a Roaster form needs the following fields: *required

• *Name of Roaster (open field)
• *Order Online? (Y/N)
• *Café on Site? (Y/N)
• *Open to public? (Y/N/By Appointment Only)
• Address if Applicable (open field)
• Hours: Monday (open / close)
• Hours: Tuesday (open / close)
• Hours: Wednesday (open / close)
• Hours: Thursday (open / close)
• Hours: Friday (open / close)
• Hours: Saturday (open / close)
• Hours: Sunday (open / close)
• Phone ( (xxx) xxx-xxxx)
• URL (open field)
• Description

From errors on add-roaster form break the layout.

Need better form error styles that don't break the layout.

Add numbering to filter

Let's add dynamic numbering to the filter that reflect the number to roasters to which the filtering is applying. Something like (45) Filter Roasters that would update to (3) St, etc.

Analytics not firing for each page

Analytics are currently not firing during the following actions:

• Going from detail page back home using back/list button.
• Clicking the Home/logo on any page
• When opening a utility page e.g., Add A Roaster, About

I understanding we're doing some JS trickery to make certain things work but it would be good if we can have every "page load" fire the analytics. Perhaps it would be easier at this point to have button nav and utility pages be virtual pageview events?

Cafe markers broken on Desktop

See screen.

Make Apple Touch Icons & Favicon

retina ready app icon, favicon, etc.

Reduce Header Height, add logo

Hey Paul, Everyone

What do you guys think about reducing the height of the header? I more I look at it, the more I feel it's too thick/tall. I'd rather see more pixels dedicated to the map and perhaps pull the list up a little bit more so it's more obvious that it's down there.

Also, let's get the logo in place so we can check it out.

Extract map settings as pdx.mapsettings

Need to extract this chunk of config options, which are extendable and can have properties overwritten if need be, so they are accessible for any map initialization.

Set up Google Analytics

Let's get analytics all set up. Please drop this code before the tag.

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-39536201-1', 'pdxroasters.com'); ga('send', 'pageview'); </script>

Style the Header

Make it reflect the static design, and implement responsive.

Add CSRF token to Ajax requests.

Django requires a CSRF token to be passed along with any POST request. When using Ajax, there is a trick to get this token from the browser cookies and set it on every request automatically. Please see the instructions documented below and let me know if you run into any trouble:

https://docs.djangoproject.com/en/dev/ref/contrib/csrf/#ajax

Configure email on Heroku.

https://devcenter.heroku.com/articles/config-vars#setting-up-config-vars-for-a-deployed-application

Add an Ajax endpoint for the contact form.

Add "Add to home screen" window for iOS

Not sure if this is still the best way to do but it might help:

https://github.com/cubiq/add-to-homescreen

Add meta descriptions

Homepage
Portland’s coffee scene is pioneering, unique and fiercely dedicated to craft and quality. Use PDX Roasters to find a local coffee roaster in Portland, Ore.

Detail Pages dynamic based on roaster name
Learn more about [roaster name] on PDX Roasters.

Add a Roaster
Do you know of a coffee roaster in Portland? Add them here.

About
Learn more about the PDX Roasters project and get in touch.

Set title tag

On the home page, please change the <title> tag to:
PDX Roasters | Portland Coffee Map

On roaster detail pages change the <title> tag to:
PDX Roasters | [name of roaster]

Increase location aware zoom for maps on mobile

On mobile, when you first hit the site, getting all the markers is not very friendly and makes zooming a bit arduous. Once location is found, let's increase the zoom 3x from where it is now and center the current location marker.

API Process

Let's add a page for this rather than a simple link to the JSON. I'd like to have a page explaining the project, policy on using the API and how to credit PDX Roasters if someone wants to use it.

/api

Add a canonical path for roasters and cafes.

Logo links to home

Let's have the logo reset the site back to its home state.

Center map modals

Have each modal open and center so that it's not being cut off by the header when open.

Utility pages opening above detail pages

When opening a utility page such as About or Add A Roaster when on a detail page the utility page pushes the detail page down so that when it's closed the detail page is left at the bottom and the page appears blank.

To repeat, open any detail page then open the nav and click on a utility page. Next, close the nav and page to see that the screen is blank.

Add an Ajax endpoint for the create a roaster form.

Map markers flash in Safari

When hovering over a map marker or opening a modal the markers flash. Seems to only be happening in Safari.

Remove /contact/ page, merge with /about/

Let's get ride of the /contact/ page and create a single page for both contact and about.

The new page should include space for an About PDX Roasters header and paragraph as well as a Contact PDX Roasters header with the three existing form fields on the contact page.

Location and Hours tweak

Let's widen these on the Roaster pages so that address is always 2 lines and hours are always one line.

If we need to save space—for responsive perhaps—we can format the hours as "a" and "p" rather than a.m. and p.m.

Use NameCheap's free DNS service.

Just realized that since you just registered the domain with A Small Orange we won't have DNS. Can you sign up for NameCheap's free DNS service when you get a chance? I can help you out with this next time we get together.

http://www.namecheap.com/support/knowledgebase/article.aspx/536/51/how-do-i-set-my-domain-to-use-namecheaps-freedns-servers

We'll need to do this before going live.