Proper theme needed for 'phone' build

[Nicholas Skaggs]

A proper theme is needed for the application. Currently the application on the device contains titles that are too long, poor layouts and inability to navigate. This is all combined with a grey dull appearance. Ideally a bright and well designed theme would be created. Nevertheless a basic theme to fix these issues is needed.

[Daniel McGuire (danielmcguire)]

So I have been looking at this for a few hours, I have linked the app to Canonicals CSS framework:

http://assets.ubuntu.com/sites/guidelines/css/latest/ubuntu-styles.css

This saves a lot of time when it comes to the styling and if Canonical updates the CSS framework the app will also update. However this means the app MUST have data connection. Is this an okay route to go down?

In a few hours the first page looks like this: http://i.imgur.com/Q0MGBtl.png

Let me know.

[David Planella (dpm)]

Daniel, fantastic work, thanks so much!

We are planning to have the FAQ both online on help.ubuntu.com and on the phone as an app. We decided to give the ability to use the app also when offline or when there is a not so good connection.

So to answer the question, I think the app needs to work even when there is no connection. However, that shouldn't be a problem if we serve the CSS locally.

Right now the app has got two themes:
- phone (to be used in the app, based on the HTML UI toolkit theme)
- web (to be used on help.u.c [1], based on the Ubuntu Web guidelines)

While we're mostly there with the web theme, we've been wondering for a while what to do with the phone theme. It seems if the text is outside an html widget (i.e. dropped in the MainView as we do right now), it will need custom CSS to define margins and other styles.

I liked the idea to have a native phone style so that it's more integrated in the rest of the UI. However, what you've done here is to merge the two themes, which might also be a good idea.

What do you think? Does it make sense to add the custom CSS to the phone theme, or rather to make it more like the Ubuntu Web Guidelines?

[1] proof of concept: http://people.canonical.com/~dpm/help-app/web/index.en-us.html

[Daniel McGuire (danielmcguire)]

Thanks a lot :)

I guess because I knew the app would be on both the web and in the phone I did try to mix them both and try and get it to a point where it would look on both platforms.

I would rather it on the phone look fully native to it and when it is launched in a web browser it refer to the Ubuntu Web Guidelines. Trying to do both is quite messy. Also with using the Ubuntu Web Guidelines the app will need a constant connection as the CSS is not local.

I can give you an idea about how it will look if you want with the HTML UI toolkit if you wish.

I agree on making the app work with no connection completely.

So to answer:

"Does it make sense to add the custom CSS to the phone theme, or rather to make it more like the Ubuntu Web Guidelines?"

I think we should work towards adding custom CSS to the phone theme. I am fully open to also do the Web version of this app.

[David Planella (dpm)]

I think we're all in agreement, and your help both in the phone and web theme will be fantastic, thanks!

[Daniel Holbach (dholbach)]

Bug 1432699 is the bare essentials version of this bug.