Media Queries

On Thursday and Friday I worked on media queries which turned out to be more annoying than expected. On Friday, Sam found out that my style was not being applied even without the media query which is obviously a problem. I applied a text color to <h1> which is what I should of done in the beginning. I don't know why the background color was not changing though but I should be able to do more with the media queries now. Anyway, right now the list is set to green all the time and black when the device width is more than 480px but I also got orientation working so that when the phone is landscape the text changes to pink.

Responsive Layout

There are multiple ways to implement responsive layout but it seems like the best way is through media queries like you mentioned. I read about them on w3schools and jquerymobile. I didn't realize that you could also make portrait and landscape modes for a web page. I don't really know how to use media queries to change a web page from a desktop site to a mobile site though. I'll try to apply it anyway, like adding a navbar or even just changing the background color depending on the screen size.

Content Pages

I'm making pages for my list but I don't really know how to style it. You can see what I did for one of the items here. It's not that interesting but I don't really know any other way to style the page. I also noticed a couple of problems with the web page. First of all, the items cannot be dragged on the phone and the dragging is inconsistent on the computer. Also, if all the items under a divider are removed, the divider disappears so I might just remove that feature and that way I can use thumbnails on the items.

List App

I put my list app on my website and I also cleaned up the code because it was really ugly and hard to read before. I added pages to all the list items although I don't really know what to put as content. I think I should also look at other data attributes like navbar. Anyway here is my list of stuff.

Lists

It seems like most content on phone apps are implemented using lists and I think I understand how to design these apps pretty well. I made another list app this time divided into 3 categories:fruits, movies, and vegetables. I still don't know why I can't use the drag and drop code with pictures those so this list currently contains no pictures, but I would like to somehow implement both in the future. I also tried to install a graphite theme but I didn't really know how to install it. Also, I found another really nice theme creator that is specifically made for jQuery mobile. My new list app also has more content when clicking on a list item such as clicking on "apple" would show more info. I'll put it on my website later with more content so that you can actually navigate it instead of looking at pictures.

Drag and Drop

I tried this tutorial today that was about dragging and dropping list elements. It seemed pretty short and simple because it just utilized a library called jQuery UI and something else called Touch Punch to simulate a mouse on phones, but at first my app was just loading constantly after adding the script source. I sort of fixed the problem because I realized that I had to update all the links to the latest stable versions because I have been using tutorials from different dates. So this tutorial used a version of jQuery UI which I think was not compatible with the version of jQuery I had. I fixed that and I was able to load my app but for some reason the thumbnail of the pictures I had in my list became full size but I was able to drag the items so I'm guessing it would work if I didn't have pictures but I'm not sure.

You can see that one picture is taking up a huge amount of space and the footer also changed color for some reason. There may be a better way to drag and drop stuff though because this tutorial is old.

Custom Themes

I found a tutorial on how to make custom themes so it's basically CSS but the styling is different because it seems like jQuery mobile uses a lot of gradients or glossy looking buttons and such. Luckily it's easy to make styles with online tools otherwise making things like gradients would be awful. There were also a lot of other helpful resources listed but I only looked at the gradient tool. I tried to make a custom list style but it wasn't working but I did manage to make a custom footer. Although, it was a little bigger than the original and the links weren't styled.