Condensed UI experience using Jquery Mobile for browser-game [closed]

Question

I've been designing a game based on jquery mobile. I've come to a hurdle that I am finding hard to overcome.

So here's, hopefully, a fun exercise for some budding game designers out there.

I've changed the UI around quite a bit from the original plan because it became apparent that information I was previously displaying separately was much more related than in the original design.

This means, that I need a rather condensed design.

Heres a quick overview of the game:

It's based on "Archmage." Players earn 'land' which is the primary contributing factor to their overall 'power' which increases their ranking. With Land, you build structures, which increase your economy and allow you to build more units. Land is then used to upgrade each building. The higher the building power, the better ther units you can recruit are.

My stumbling point is the structure display. Currently, I am listing out each structure (8 in total, 4 military[focuses on units/battle], 4 city[focuses on economy]), in its own separate page where I want to display the following:

1. Name of Structure
2. More info on the structure
   • (gold cost)(mana cost)<-equal priority (current str level) (attunements**)
   • attunements: Each structure can have 3. They initially start out as empty. The player decides when and how to fill them up.
3. Units that the specific structure can produce (w/ or w/out 'more info' on each) 3b. A way for the user to 'recruit' these units if they want
4. A way to access the other structures pages easily
5. A way to access the "home page" for structures.
6. If the structure is being upgrade(a time factor) how far along it is.

Here is the current look (its still in early stages of development).

Most is self explanatory, however:

When clicking on "Military" or "City" you get a dialog window with a UL for the different structures. This is currently how I am navigating between structure pages.

The Upgrade button simply calls another dialog with information on the structure, and the confirmation to upgrade (after check to see if they have resources).

The 5 rune like things is a filter. Its a checkbox group, so multiple runes can be selected at a time, and it filters the below 'unit list.'

The 5 runes correspond to the "Attunements" that each structure can have (the 3 white circles in the upper right of the barracks image).

I will gladly offer more information if you request it. Like I was saying, I am finding it hard to add this information in an appealing way. Perhaps I am getting stuck on this too early, but I feel that having a good foundation for layout helps in setting up the backend for more effortless expansion.

Again, I am using jquery mobile, so bonus points to layouts that support features from 1.3.0rc1. I am familiar with jquery and javascript in general, but its an HTML5 project, so I don't want to get much more complicated than that.

Thanks for the help in advance!