Use popovers instead of dialogs for help

pdc/apps/compose/templates/compose_list.html

@@ -3,9 +3,11 @@
 {% load pdctags %}
 
 {% block content %}
-{% include "help_button.html" %}
 
-<h2 class="page-header">{% trans "Composes" %}</h2>
+<h2 class="page-header">
+    {% trans "Composes" %}
+    {% include "help_button.html" %}
+</h2>
 
 <form method="GET" style="float: left;">
   {% csrf_token %}
@@ -17,7 +19,7 @@ <h2 class="page-header">{% trans "Composes" %}</h2>
 {% include "compose_list_include.html" %}
 {% include "pagination.html" %}
 
-{% helpmodal %}
+{% helppopover %}
     <p>A <em>compose</em> is a snapshot of a
     <a href="{% url "release/index" %}">release</a> with unique identifier
     derived from release identifier and date.</p>
@@ -26,6 +28,6 @@ <h2 class="page-header">{% trans "Composes" %}</h2>
     metadata like <code>.treeinfo</code>, repodata etc.</p>
 
     <p>Like a release, a compose is divided into <em>variants</em>.</p>
-{% endhelpmodal %}
+{% endhelppopover %}
 
 {% endblock %}

pdc/apps/compose/templates/overrides_form.html

@@ -4,9 +4,11 @@
 
 {% block content %}
 
-{% include "help_button.html" %}
 
-<h1 class="page-header">Override management for <strong>{{ package }}</strong> in <strong>{{ release_id }}</strong></h1>
+<h1 class="page-header">
+    Override management for <strong>{{ package }}</strong> in <strong>{{ release_id }}</strong>
+    {% include "help_button.html" %}
+</h1>
 
 <p>Based on <strong>{{ compose.compose_id }}</strong></p>
 
@@ -173,7 +175,7 @@ <h3>Unused overrides</h3>
 {% endif %}
 
 
-{% helpmodal %}
+{% helppopover %}
     <table class="table">
       <thead>
         <tr>
@@ -204,7 +206,7 @@ <h3>Unused overrides</h3>
     non-existing compose RPM can only exist if they have
     <code>do_not_delete</code> set to to <code>True</code>. Such overrides are
     listed below the form.</p>
-{% endhelpmodal %}
+{% endhelppopover %}
 
 
 {% endblock %}

pdc/apps/release/templates/base_product_list.html

@@ -3,9 +3,11 @@
 {% load pdctags %}
 
 {% block content %}
-{% include "help_button.html" %}
 
-<h2 class="page-header">{% trans "Base Products" %}</h2>
+<h2 class="page-header">
+    {% trans "Base Products" %}
+    {% include "help_button.html" %}
+</h2>
 
 <form method="GET" style="float: left;">
   {% csrf_token %}
@@ -17,13 +19,13 @@ <h2 class="page-header">{% trans "Base Products" %}</h2>
 {% include "base_product_list_include.html" %}
 {% include "pagination.html" %}
 
-{% helpmodal %}
+{% helppopover %}
     <p>A <em>base product</em> represents the operating system on which a
     <a href="{% url "release/index" %}">release</a> is supposed to run on.</p>
 
     <p>In reality, base products often correspond to
     <a href="{% url "product_version/index" %}">product version</a>
     of that OS.</p>
-{% endhelpmodal %}
+{% endhelppopover %}
 
 {% endblock %}

pdc/apps/release/templates/product_list.html

@@ -3,9 +3,11 @@
 {% load pdctags %}
 
 {% block content %}
-{% include "help_button.html" %}
 
-<h2 class="page-header">{% trans "Products" %}</h2>
+<h2 class="page-header">
+    {% trans "Products" %}
+    {% include "help_button.html" %}
+</h2>
 
 <form method="GET" style="float: left;">
   {% csrf_token %}
@@ -17,13 +19,13 @@ <h2 class="page-header">{% trans "Products" %}</h2>
 {% include "product_list_include.html" %}
 {% include "pagination.html" %}
 
-{% helpmodal %}
+{% helppopover %}
     <p>In PDC, a <em>product</em> is just a group of
     <a href="{% url "product_version/index" %}">product versions</a> with the
     same name.</p>
 
     <p>Products are only used for grouping and organizing releases. They do not
     have any metadata on their own.</p>
-{% endhelpmodal %}
+{% endhelppopover %}
 
 {% endblock %}

pdc/apps/release/templates/product_version_list.html

@@ -3,9 +3,11 @@
 {% load pdctags %}
 
 {% block content %}
-{% include "help_button.html" %}
 
-<h2 class="page-header">{% trans "Product Versions" %}</h2>
+<h2 class="page-header">
+    {% trans "Product Versions" %}
+    {% include "help_button.html" %}
+</h2>
 
 <form method="GET" style="float: left;">
   {% csrf_token %}
@@ -17,13 +19,13 @@ <h2 class="page-header">{% trans "Product Versions" %}</h2>
 {% include "product_version_list_include.html" %}
 {% include "pagination.html" %}
 
-{% helpmodal %}
+{% helppopover %}
     <p>In PDC, a <em>product version</em> is just a group of
     <a href="{% url "release/index" %}">releases</a>
     with the same name and major version.</p>
 
     <p>Product versions are only used for grouping and organizing releases.
     They do not have any metadata on their own.</p>
-{% endhelpmodal %}
+{% endhelppopover %}
 
 {% endblock %}

pdc/apps/release/templates/release_list.html

@@ -3,9 +3,11 @@
 {% load pdctags %}
 
 {% block content %}
-{% include "help_button.html" %}
 
-<h2 class="page-header">{% trans "Releases" %}</h2>
+<h2 class="page-header">
+    {% trans "Releases" %}
+    {% include "help_button.html" %}
+</h2>
 
 <form method="GET" style="float: left;">
   {% csrf_token %}
@@ -17,7 +19,7 @@ <h2 class="page-header">{% trans "Releases" %}</h2>
 {% include "release_list_include.html" %}
 {% include "pagination.html" %}
 
-{% helpmodal %}
+{% helppopover %}
     <p>A <em>release</em> is a collection of software with a unique identity
     and specific life cycle.</p>
 
@@ -28,6 +30,6 @@ <h2 class="page-header">{% trans "Releases" %}</h2>
     release content targetted at a specific user, for example <em>server</em>
     or <em>workstation</em>. Each variant can be built for multiple
     architectures.</p>
-{% endhelpmodal %}
+{% endhelppopover %}
 
 {% endblock %}

pdc/apps/utils/templatetags/pdctags.py

@@ -26,31 +26,31 @@ def login_url(redirect=None):
     return url
 
 
-def do_help_modal(parser, token):
-    nodelist = parser.parse(('endhelpmodal',))
+def do_help_popover(parser, token):
+    nodelist = parser.parse(('endhelppopover',))
     parser.delete_first_token()
-    return HelpModalNode(nodelist)
+    return HelpPopoverNode(nodelist)
 
 
-class HelpModalNode(template.Node):
-    """Create a Bootstrap modal dialog with help.
+class HelpPopoverNode(template.Node):
+    """Create a Bootstrap popover with help.
 
     Use the ``help_button.html`` template to create a button to display this
     dialog.
 
     To use it, just wrap the dialog contents with template tags like ::
 
-        {% helpmodal %}
-            Contents of the dialog...
-        {% endhelpmodal %}
+        {% helppopover %}
+            Contents of the popover...
+        {% endhelppopover %}
 
-    On each page, there can be only one dialog created using this tag.
+    On each page, there can be only one popover created using this tag.
     """
     def __init__(self, nodelist):
         self.nodelist = nodelist
 
     def render(self, context):
-        t = get_template('help_modal.html')
+        t = get_template('help_popover.html')
         output = self.nodelist.render(context)
         context['content'] = output
         return t.render(context)
@@ -60,4 +60,4 @@ def render(self, context):
 
 register.simple_tag(pdc_version)
 register.simple_tag(login_url)
-register.tag('helpmodal', do_help_modal)
+register.tag('helppopover', do_help_popover)

pdc/static/pdc/style.css

@@ -67,3 +67,11 @@ ul.pagination.pull-right {
 .help-button {
     margin-top: 1em;
 }
+/* Increase width of popovers and add some shadow */
+.popover {
+    max-width: 30%;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
+}
+.popover-content {
+    font-size: 12px;
+}

pdc/templates/help_button.html

@@ -1,3 +1,3 @@
-<button class="btn btn-default btn-lg pull-right help-button" data-toggle="modal" data-target="#helpOverlay">
-    <span class="glyphicon glyphicon-question-sign"></span> Help
+<button class="help-trigger btn btn-link btn-lg">
+    <span class="glyphicon glyphicon-question-sign"></span>
 </button>

pdc/templates/help_popover.html

@@ -0,0 +1,23 @@
+<div class="hidden help-content">{{ content }}</div>
+
+<script type="text/javascript">
+var mouseIn = false;
+const timeout = 500;
+$("body").on('mouseenter', ".popover", function () { mouseIn = true });
+$("body").on('mouseleave', ".popover", function () { mouseIn = false });
+$(".help-trigger").popover({
+    content: function () { return $(".help-content").html(); },
+    html: true,
+    trigger: 'hover',
+    delay: {hide: timeout},
+    viewport: {selector: "body", padding: 100},
+}).on('hide.bs.popover', function () {
+    if (mouseIn) {
+        $('.popover').on('mouseleave', function() {
+                setTimeout(function () {
+                        $('.help-trigger').popover('hide');
+                        }, timeout)});
+        return false;
+    }
+});
+</script>