WIP: Add bootstrap tour to explain how to use FAIRshake

FAIRshakeHub/static/scripts/tour.js

@@ -0,0 +1,47 @@
+var tour = new Tour({
+  name: "FAIRshake Tour",
+  debug: true,
+  backdrop: true,
+  steps: [
+    {
+      path: '/',
+      element: "#search",
+      title: "Searching FAIRshake",
+      content: "FAIRshake lets you search everything from the home page, let's try searching for flybase!",
+      onNext: function() {
+        document.location.href = '/?q=flybase';
+        return (new $.Deferred()).promise();
+      },
+    },
+    {
+      // path: '/?q=flybase',
+      element: ".panel:first",
+      title: "Search results",
+      content: "FAIRshake presents the results as cards for each element in the database",
+    },
+    {
+      // path: '/?q=flybase',
+      element: ".panel:first .image-link img",
+      title: "Image",
+      content: "The image is registered by users for quickly identifying objects",
+    },
+    {
+      // path: '/?q=flybase',
+      element: ".panel:first .caption",
+      title: "Description",
+      content: "A short title and description is provided to further identify the object.",
+    },
+    {
+      // path: '/?q=flybase',
+      element: ".panel:first .label",
+      title: "Object Type",
+      content: "The type of Digital Object is identified.",
+    },
+    {
+      // path: '/?q=flybase',
+      element: ".panel:first .insignia",
+      title: "Insignia",
+      content: "The FAIRshake Insignia is displayed illustrating how FAIR the object is, red boxes indicate metrics which could not be asserted, while blue boxes indicate those which could.",
+    },
+  ],
+});

FAIRshakeHub/static/style/base.css

@@ -173,3 +173,6 @@ h1 {
     color: dimgray;
 }
 
+.tour-backdrop {
+    opacity: .2;
+}

FAIRshakeHub/templates/fairshake/base.html

@@ -6,6 +6,7 @@
   {% block head %}
     <link rel="shortcut icon" href="{% static 'image/favicon.ico' %}">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css" />
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 
     <title>{% block title %}{% endblock %}</title>
@@ -136,6 +137,8 @@
 {% block script %}
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"></script>
+  <script src='{% static "scripts/tour.js" %}'></script>
   <script>
   function render_insignia(q) {
     if (q === undefined)

FAIRshakeHub/templates/fairshake/generic/element.html

@@ -31,22 +31,22 @@
           ></div>
         {% endif %}
       </div>
+      {% if item.type %}
+        <span
+          class="label"
+          style="background-color:#666666;color:white;font-size:10px;position:absolute;top:164px;right:25px;"
+        >
+          {% if model == "project" %}
+            project
+          {% else %}
+            {{ item.type }}
+          {% endif %}
+        </span>
+      {% endif %}
       <div class="caption text-left">
         <p class="item-title" style="margin-right:60px;">
           {{ item.title|limit:45 }}
         </p>
-        {% if item.type %}
-          <span
-            class="label"
-            style="background-color:#666666;color:white;font-size:10px;position:absolute;top:164px;right:25px;"
-          >
-            {% if model == "project" %}
-              project
-            {% else %}
-              {{ item.type }}
-            {% endif %}
-          </span>
-        {% endif %}
         <p>{{ item.description|limit:100 }}</p>
         <div style="position:absolute;bottom:30px;margin-right:60px;">
           <div style="font-size:10px;color:gray;margin-top:5px;">

FAIRshakeHub/templates/fairshake/index.html

@@ -21,6 +21,7 @@ <h4>A System to Evaluate Digital Objects</h4>
           style="display: flex; flex-direction:row"
         >
           <input
+            id="search"
             aria-label="Search"
             autofocus
             class="form-control"