Six Degrees of Marvel - Progress Report

Current status: 

The facepalming is not on account of the development work. I'm enjoying the code writing! It's the need for pixel perfection that is prompting that reaction. 

Responsive CSS is fabulous when it works, but it takes a lot of tweaking. I experimented with using viewport specifiers in my CSS so that the logo and header would be centered on the device perfectly. Unfortunately it was always off center, and it took me a very long time to realize that 

  • I had set the 'Six Degrees of' text to be a header (h2 to be precise)
  • I had put a space after the 'of'

Hence my problems with centering.

Pixel perfection will be the death of me. 

Here have a screenshot (click to expand)

I tested this with the iPhone 3GS all the way to the iPhone 6 Plus along with the Galaxy Nexus 10 to test for multiple device types in both orientations. I would like to disable landscape mode for the app, but it was worth going through the exercise of trying it in landscape to realize that it was not a good option. 

I also used JQuery's Themeroller to build a custom theme for my widgets. Marvel doesn't have a styleguide so I had to do some finagling with the colors. 

I am happy to say that there is a filterable select menu available within JQuery Mobile, but unfortunately in my designs I had wanted to include an image next to the options in the dropdown. I still have the option to show an image to the left of the dropdown but this will only happen when the user selects an option. 

Once I have the UI for this page built I'll have the following tasks

  • Build the page for the visualization part: I will have some customization work to do here based on my designs
  • Parsing the JSON files from the Marvel API to populate the dropdown lists
  • ALGORITHM TIME! Time to go back to my CS roots and dive back into graph theory to build my Six Degrees algorithm. 

EDIT 02/24 2:30 AM: So I'm getting a whole lot of junk text when I try to add in radio buttons and the filter textboxes... and I don't know why

See screenshot

I copy-pasted the code from the JQuery Mobile site