index.html in storys-0.0.6

- old
+ new

@@ -10,10 +10,11 @@
     <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/lib/handlebars-v1.3.0.js" type="text/javascript"></script>
     <script src="js/lib/jquery.browser.js" type="text/javascript"></script>
     <script src="js/jquery.twoup.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>
@@ -21,14 +22,37 @@
 
     <meta name="HandheldFriendly" content="true">
     <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
   </head>
   <body>
+    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+      <div class="container-fluid">
+        <div class="nav navbar-nav navbar-left">
+          <button type="button" class="btn btn-default navbar-btn" id="page-back-10">
+            <span class="glyphicon glyphicon-backward"></span>
+          </button>
+          <button type="button" class="btn btn-default navbar-btn" id="page-back">
+            <span class="glyphicon glyphicon-chevron-left"></span>
+          </button>
+        </div>
+        <div class="navbar-nav navbar-right">
+          <button type="button" class="btn btn-default navbar-btn" id="page-next">
+            <span class="glyphicon glyphicon-chevron-right"></span>
+          </button>
+          <button type="button" class="btn btn-default navbar-btn" id="page-next-10">
+            <span class="glyphicon glyphicon-forward"></span>
+          </button>
+        </div>
+        <div id="navbar-content-target">
+        </div>
+      </div>
+    </nav>
+
     <div id="wrapper">
       <div id="view-index">
-        <div id="header">
-          <form class="form-inline">
+        <div class="navbar-content">
+          <form class="navbar-form ">
             <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="wordCount" type="button">Pages</button>
               <button class="btn btn-default" data-sort="title" type="button">Title</button>
@@ -46,21 +70,40 @@
             </button>
           </form>
         </div>
 
         <ul id="stories">
+          <div id="stories-template">
+            <li>
+              <a href="#show/{{story.key}}!1">
+                <span title="Story title">{{story.title}}</span>
+                <div class="emblems">
+                  {{#if story.visits}}
+                    <span class="label label-info" title="Visits to story">
+                      <span class="glyphicon glyphicon-star-empty"></span>
+                      {{story.visits}}
+                    </span>&thinsp;
+                  {{/if}}
+                  <span class="label label-info" title="Page count of story">
+                    <span class="glyphicon glyphicon-file"></span>
+                    {{story.pages}}
+                  </span>
+                </div>
+              </a>
+            </li>
+          </div>
         </ul>
         <div class="clear"></div>
       </div>
 
       <div id="view-show">
+        <div class="navbar-content">
+          <button type="button" class="btn btn-default navbar-btn" id="page-home">
+            <span class="glyphicon glyphicon-eject"></span>
+          </button>
+        </div>
+
         <div id="story"></div>
       </div>
     </div>
-
-    <div id="page-back" class="paginator">◀</div>
-    <div id="page-next" class="paginator">▶</div>
-    <div id="page-back-10" class="paginator">◀◀</div>
-    <div id="page-next-10" class="paginator">▶▶</div>
-    <div id="page-home" class="paginator">❌</div>
   </body>
 </html>