index.html in mangos-0.0.6

- old
+ new

@@ -2,15 +2,17 @@
 <html>
   <head>
     <meta charset="utf-8">
     <title>Mangos</title>
 
+    <link href="css/lib/bootstrap.css" rel="stylesheet" type="text/css">
     <link href="css/app.css" rel="stylesheet" type="text/css">
     <link href="css/views.index.css" rel="stylesheet" type="text/css">
     <link href="css/views.show.css" rel="stylesheet" type="text/css">
 
     <script src="js/lib/jquery-2.0.3.js" type="text/javascript"></script>
+    <script src="js/lib/bootstrap.js" type="text/javascript"></script>
     <script src="js/lib/underscore.js" type="text/javascript"></script>
     <script src="js/framework.js" type="text/javascript"></script>
     <script src="js/controllers.index.js" type="text/javascript"></script>
     <script src="js/controllers.show.js" type="text/javascript"></script>
     <script src="js/app.js" type="text/javascript"></script>
@@ -19,32 +21,38 @@
     <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
   </head>
   <body>
     <div id="view-index">
       <div id="header">
-        <input type="text" id="search">
-        <a id="clear-search" href="#index!1">Clear</a>
-        Sort:
-        <a class="sort" data-sort="publishedOn" href="#">Published On</a>
-        <a class="sort" data-sort="pages" href="#">Pages</a>
-        <a class="sort" data-sort="title" href="#">Title</a>
-        Sort Direction:
-        <a class="sort-direction" data-sort-direction="asc" href="#">Ascending</a>
-        <a class="sort-direction" data-sort-direction="desc" href="#">Descending</a>
+        <form class="form-inline">
+          <input type="text" id="search" class="form-control">
+          <span class="btn-group sort">
+            <button class="btn btn-default" data-sort="publishedOn" type="button">Published On</button>
+            <button class="btn btn-default" data-sort="pages" type="button">Pages</button>
+            <button class="btn btn-default" data-sort="title" type="button">Title</button>
+          </span>
+          <span class="btn-group sort-direction">
+            <button class="btn btn-default" data-sort-direction="asc" type="button">
+              <span class="glyphicon glyphicon-sort-by-attributes"></span>
+            </button>
+            <button class="btn btn-default" data-sort-direction="desc" type="button">
+              <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
+            </button>
+          </span>
+          <button type="button" class="btn btn-default" id="clear-search">
+            <span class="glyphicon glyphicon-remove"></span> Clear
+          </button>
+        </form>
       </div>
 
       <div id="wrapper">
         <ul id="items">
         </ul>
         <div class="clear"></div>
       </div>
     </div>
 
     <div id="view-show">
-<!--      <div id="return-to-index">
-        <a href="#index!1">Index</a>
-      </div>-->
-
       <img src="img/blank.png" id="image">
     </div>
 
     <div id="page-back" class="paginator">◀</div>
     <div id="page-next" class="paginator">▶</div>