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.
<!-- HTML 5 doctype --> <!DOCTYPE html> <html ng-app="helloPython"> <head> <meta charset="UTF-8"> <title>Hello world app</title> <link rel="stylesheet" type="text/css" href="static/css/theme.css"> <!-- Bootstrap --> <link href="/static/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link href="/static/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <!-- gentella theme: https://github.com/puikinsh/gentelella --> <link rel="stylesheet" type="text/css" href="static/css/custom.min.css"> </head> <body class="nav-md"> <div class="container body"> <div class="main_container"> <!--<div ng-include="'/static/partials/sidenav.htm'"></div>--> <!-- sidebar --> <div class="col-md-3 left_col"> <div class="left_col scroll-view"> <div class="navbar nav_title" style="border: 0;"> <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>ComsciU</span></a> </div> <div class="clearfix"></div> <!-- menu profile quick info --> <div class="profile clearfix"> <!-- <div class="profile_pic"> <img src="images/img.jpg" alt="..." class="img-circle profile_img"> </div> --> <div class="profile_info"> <span>Welcome,</span> <h2>John Doe</h2> </div> <div class="clearfix"></div> </div> <!-- /menu profile quick info --> <br /> <!-- sidebar menu --> <div id="sidebar-menu" class="main_menu_side hidden-print main_menu"> <div class="menu_section"> <h3>General</h3> <ul class="nav side-menu"> <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#/">Main</a></li> <li><a href="#test">Test</a></li> </ul> </li> </ul> </div> </div> <!-- /sidebar menu --> <!-- /menu footer buttons --> <div class="sidebar-footer hidden-small"> <a data-toggle="tooltip" data-placement="top" title="Facebook" href="https://www.facebook.com/stefan.bradstreet"> <span class="fa fa-facebook" aria-hidden="true"></span> </a> <a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/ComSciU"> <span class="fa fa-twitter" aria-hidden="true"></span> </a> <a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/stefbrad15/"> <span class="fa fa-instagram" aria-hidden="true"></span> </a> <a data-toggle="tooltip" data-placement="top" title="LinkedIn" href="https://www.linkedin.com/in/stefan-bradstreet-0626b478/"> <span class="fa fa-linkedin" aria-hidden="true"></span> </a> </div> <!-- /menu footer buttons --> </div> </div> <div ng-include="'/static/partials/header.htm'"></div> <!-- page content --> <div class="right_col" role="main"> <div ng-view ></div> </div> <!-- /page content --> <!-- footer content --> <footer> <div class="pull-right"> Copyright ComSciU 2017 </div> <div class="clearfix"></div> </footer> <!-- /footer content --> </div> </div> <!-- jQuery --> <script src="/static/vendors/jquery/dist/jquery.min.js"></script> <!-- Bootstrap --> <script src="/static/vendors/bootstrap/dist/js/bootstrap.min.js"></script> <!-- Angular CDN Imports --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script> <!-- Angular App Declaration --> <script src="/static/js/app/app.js"></script> <!-- Angular Controllers --> <script src="/static/js/app/controllers/testController.js"></script> <!-- Custom Theme Scripts --> <script src="/static/js/custom.js"></script> </body> </body> </html>
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!