Mid-semester break: style updates and more angular

I used the break to work on CSS/SASS and spend time with trove and the Wayback Time-machine.

Styles

• fixed some style inconsistencies with p and h styles
• fixed the logotype: h1 size ration (logotype in now larger)
• looked at the design of the page and changed from the 'indigo' colour palette to 'blackboard green' to match the infographic
• crop the category image using CSS

CSS Crop

Page design

Trove/Wayback machine

My next task for the break was sourcing material for our site.  We had already decided on the four categories (sport, arts, education, government) and my task was to find approx 3 websites per category and source appropriate illustrative images from Trove, and web historical content from the Wayback Time-machine.  I search a combination of Pandora and Wayback Time-machine to find good examples of sites for each categories.  I concentrated on local sites (Brisbane, Queensland, Australia).

Once I had selected the sites and made a list of the Wayback Machine addresses, I then went to Trove to find good search queries for each site.  Some were definitely easier than others.  I had AFL listed as one of the sport categories but was unable to find any images that were copyright free/retrievable with the Trove API.  I then proceeded to make the API calls, found the work IDs I needed, checked the calls work, and added the image URLs to an array to access for home.html.  

Problems and solutions

I used Plnkr to test adding real images to angular using a hard-coded array.  I then applied that to our real code but changed the hard coded array to the dynamic one constructed using API calls to Trove.

The complicated part of using this array is the combination of Angular and Trove loading times.  The angular repeat happens much quicker than the Trove API calls.  Given that a lot of the information about the website (the link, website name, alt text, etc) the order of the images in the image array is important. The first step was then to direct each API call to a specific place in the array that corresponded to the data in the angular file.  

e.g. imageArraySport[1]=olympicsImg;

Where imageArraySport is the array to store the images for the sports tab and olympicsImg is the variable storing the image for the Sydney Olympics website.

The next problem I had adding the images to the html generated by Angular.  I wrote a jQuery function that worked in plnkr that targeted a class and added the image source link from the links in the array.  This worked fine but wouldn't work when I used the real API calls instead of the hardcoded array.  I realised this was because the API calls came back at different times and when the function iterated over the array, it was not always full and returned a src link of nothing.

To counteract this, I ran the function in each AJAX API calland added an if statement to check if the array had the number of images.

e.g. if(imageArraySport.length == 3)

Where the sport category has 3 websites and the if statement checks this first before running the rest of the function.