Zyring Day 19 – Tidying up

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Display information about a single apartment on a page (continued)

Time for a final bit of styling of the indivdual apartments. I added a grey background to the apartment title to be consistent with the styling list of apartments, and did a few other small changes. Again, I don’t want to spend huge amounts of time on styling for this project, that isn’t the focus for me.

I ended up with this:

Grey background to the title for consistency.

Grey background to the title for consistency.

Pedantry

Woohoo! Everything’s done now apart from the page navigation problem from yesterday that I’m going to have to ask about. Now to tidy up a bit… fixing problems, with indentation, comments, adding some ngdocs documentation and renaming my two Angular factories to more informative names. Also cleaned up my mess of a CSS file a bit using tips from this tutorial.

Things I could add

That’s where I’m leaving it for now (apart from the page navigation problem), but I may as well list a few minor annoyances I’d like to fix if I feel like it later:

  • Map displays same area each time: would like to focus in on particular areas
  • Maybe have a map on individual apartment pages as well
  • Add navigation to go back to list of apartments from an individual apartments page
  • Currently if I do this by clicking ‘Back’, it always takes me to page 1 of the list of apartments rather than the one I was on
  • Carousel only works with mouse, not left and right arrow keys
  • Would be good to show the apartment thumbnail for apartments where there are no other images on the backend server
  • Write something more helpful in the ‘About’ view

 

Finally…

I still need to write a big old post summarising how I found the project. Coming soon…

Zyring Day 17 – Carousel Success

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Display information about a single apartment on a page (continued)

Boom! Used simonykq‘s solution on this thread and it worked beautifully. Nice to start the day with something working immediately.

I then ran into another issue that needed fixing – a problem with duplicate items in lists when using ng-repeat. This could be fixed by using the track by $index option, tracking by an object’s position in an array rather than its value. I’d seen this error come up before, nice to understand it!

OK, finally time to style the information a bit. I get as far as this:

Example apartment listing.

Example apartment listing.

Next time I plan to make this a bit fancier and more consistent with the styling of the previous pages. And hopefully find that off-by-one error… very close to finishing now!

Zyring Day 16 – Carousel Fail

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Display information about a single apartment on a page

Thought this would be straightforward, but I ended up having a fairly frustrating day of getting things wrong. Annoying when I seem to be so close to the end…

I decided I wanted a layout like this (written on a blank page of a ‘Libraries for the Future’ consultation booklet because I didn’t bring any paper with me):

Layout for my apartment page

Layout for my apartment page

Fairly basic, just a title, a big carousel of images, and a couple of lists of information.

First I was confused for quite a while about why no apartment images were being displayed. I thought that for some reason get wasn’t fetching them, and spent a long time mucking about with callbacks (on the plus side, they started making a lot more sense). Then I realised that the problem was simply that there aren’t any images on the server for most apartments, just an empty array. So I decided to start off just getting the view for the example data to work properly, and then think about what to do for the pages without images later.

For the carousel I tried to use the Angular Bootstrap library. My blog came in handy there: I knew I’d used it before but couldn’t remember what for, so the relevant post was useful. I managed to include a carousel, but the arrows weren’t working properly. I think it probably has something to do with this problem, but by now I’m happy to give this a rest for a while.

Zyring Day 13 – styling the list of apartments.

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Styling the Apartments List page

Strangely, I wasn’t really enthralled by the prospect of figuring out the off-by-one error from the last tutorial I did three weeks ago, so I decided to ease myself back in by doing a relatively self-contained tutorial on styling. I don’t want to spend ages on styling as it’s really not the focus of what I want to learn right now, but I will at least implement a basic grid of apartments.

I follow the same basic approach as for styling the list of cities, and this is what I end up with:

Basic styling for the list of apartments.

Basic styling for the list of apartments.

Not exciting, but it’ll do for now.

I also decide I don’t like the circles on the Cities page, so I go for ‘beer mats’ throughout:

Images for cities now have rounded corners.

I like beer.

OK, this has hopefully got me back into the right mindset for this project.

Zyring Day 2 – styling with Bootstrap

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Styling Your Cities Page

There’s not much instruction given here, but I’ve played with CSS and Bootstrap a little bit before and am happy to just start mucking around. I generally enjoy thinking about design and layout and spent plenty of time messing around making posters in LaTeX or vector graphics in Inkscape during my PhD.

I’m going to aim for a simple layout a bit like this:

rubbish sketch of page

High quality mockup of my page

So first I need to make a 3×2 grid, which I know how to do if I was going to manually specify what goes in each box. However, in this case what I really want to do is just populate it automatically with stuff from the controller, keeping it in three columns. This took me a while to figure out – I used this StackOverflow question for guidance, but that initially caused me to overcomplicate things a bit.

Anyway once I got that working it was down to playing with styling — this took me ages as I’m still quite new to it, but it wasn’t hard to google for relevant tutorials for things like adding a darker background to the city names to make them more readable.

What I ended up with wasn’t great and needs to be fitted to the screen better, but it’ll do as a start – I don’t want to spend forever on styling right now as I’m keen to get into the mechanics of the site.

website screenshot

Well, ┬áit’s a step up from the hand-drawn one…