Apple iPad (Wi-Fi, 32GB) – Space Gray (Latest Model)
Please help this site by purchasing through our Amazon links
First we download and extract the theme and poke around. We can see there are a ton of examples in the production folder. Index.html usually is a good place to start. Let’s open this up in a browser and a text editor.
Ok this looks like a pretty solid theme, we can see some type of login status, examples of lots of charts if we’re tracking metrics, a drop down email/notification system in the top right, a collapsable menu system on the left, and lots of components we can poke around with. For the scope of this tutorial the basic menu structure, the signed in status, and some kind of messaging template will be of most interest.
Under the extras section we can see a “plain_page” view. This seems like a straight forward place to start bringing stuff into our project. Open plain_page.html in a text editor and get a feel the composition of the html elements.
Going back into our project lets open up index.html and make those changes stated above.
If you carefully compare our index.html to the theme’s demo index.html you will see quite a bit is different. First i ripped out a lot of the buttons in the side navigation. There is a commented out part where I was going to move the sidebar into a partial but the jquery bug I was talking about above struck. As much as I’d like to keep a a stripped down index.html file we will keep the sidebar here for jquery to register its event handlers on.
The header has been moved into a partial that angular will load on initialization. As an exercise try moving the header content from the theme’s index.html into the ‘/static/partials/header.htm’ file and see if it renders correctly in your page. Also replace the content inside of /static/views/main.htm that we set up last time with the main content from the theme’s page.
You can find that specific content here
That sure looks a lot better then what we had before doesn’t it. Comment below if you ran into any troubles. Next time we will try to work with some AWS IAM and DynamoDB!