Merge pull request #346 from /issues/275

Used Bootstrap Tour to create an inline tutorial
inpho · Dec 30, 2018 · 5b33bb4 · 5b33bb4
2 parents 0f0567b + 362dd86
commit 5b33bb4
Show file tree

Hide file tree

Showing 6 changed files with 2,917 additions and 932 deletions.
diff --git a/www/bars.mustache.html b/www/bars.mustache.html
@@ -2,16 +2,21 @@
 <div id="main" class="container">
   <div class="row">
     <div class="col-xs-12">
-      <h1><a href="{{home_link}}"><span class="logo-word">InPhO</span> Topic Explorer</a></h1>
+      <h1 id="home-page"><a href="{{home_link}}"><span class="logo-word">InPhO</span> Topic Explorer</a></h1>
       <!--<h2 class="title non-null"></h2>-->
       <h2 class="text-center">
         {{#corpus_link}}<a href="{{corpus_link}}">{{corpus_name}}</a>{{/corpus_link}} 
         {{^corpus_link}}{{corpus_name}}{{/corpus_link}} <br />
         <small><a id="aboutLink" href="#about">About this corpus <span class="glyphicon glyphicon-arrow-down"></span></a></small><br />
         <small>Click ? button at bottom left for help with the topic explorer interface.</small></h2>
+        <div style="text-align: center">
+            <h2><button type="button" class="btn btn-lg btn-primary" style="text-align: center" id="tour-button">Getting Started</button></h2>
+        </div>
+      </div>
     </div>
-  </div>
   <div class="row">
+
+  <br>
   <div class="col-xs-12">
 
 
@@ -20,7 +25,7 @@ <h2 class="text-center">
       <script>
         $('#autocompleteDoc').tooltip({title: 'Toggle Word/Document Search', placement: 'bottom'});
       </script>
-    <div class="form-group">
+    <div class="form-group" id="visualize_button">
 
       <label for="doc" class="col-sm-2 control-label" id="search-label">Focal document</label>
       <div class="col-sm-8">
@@ -32,8 +37,8 @@ <h2 class="text-center">
         </div>
       </div>
       <div class="col-sm-2">
-        <div class="btn-group">
-          <button type="submit" id="submit" class="btn btn-default">Visualize</button>
+        <div class="btn-group" id="tutorial">
+          <button type="submit" id="submit" class="btn btn-default" >Visualize</a></button>
           <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
           <ul class="dropdown-menu">
             {{#topic_range}}
@@ -98,7 +103,7 @@ <h3 class="modal-title">Document search</h3>
               <input type="hidden" name="doc" id="hidden_id">
               <input type="text" id="doc" class="form-control typeahead" placeholder="Click button on right to select random document →" autocomplete="off">
               <div class="input-group-btn">
-                <button class="btn btn-default" type="button" id="randomDoc" data-original-title="" title=""><span class="glyphicon glyphicon-random"></span></button>
+                <button class="btn btn-default" type="button" data-original-title="" title=""><span class="glyphicon glyphicon-random"></span></button>
               </div>
             </div>
           </div>
@@ -122,4 +127,7 @@ <h4><img src="/img/icon-fingerprint.png" alt="Fingerprint icon" /> Topic Fingerp
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
+
+<script src="/bootstrap-tour.js"></script>
 <script src="/topicprint.js"></script>
+