core: add about modal

passbook/core/templates/base/skeleton.html

@@ -12,6 +12,7 @@
       {% endblock %}
     </title>
     <link rel="icon" type="image/png" href="{% static 'img/logo.png' %}">
+    <link rel="shortcut icon" type="image/png" href="{% static 'img/logo.png' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'css/patternfly.min.css' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'css/patternfly-additions.min.css' %}">
     {% block head %}
@@ -25,5 +26,8 @@
     <script src="{% static 'js/patternfly.min.js' %}"></script>
     {% block scripts %}
     {% endblock %}
+    <div class="modals">
+      {% include 'partials/about_modal.html' %}
+    </div>
   </body>
 </html>

passbook/core/templates/overview/base.html

@@ -26,7 +26,7 @@
         </button>
         <ul class="dropdown-menu" aria-labelledby="horizontalDropdownMenu1">
           <li><a href="#0">Help</a></li>
-          <li><a href="#0">About</a></li>
+          <li><a data-toggle="modal" data-target="#about-modal" href="#0">{% trans 'About' %}</a></li>
         </ul>
       </li>
       <li class="dropdown">

passbook/core/templates/partials/about_modal.html

@@ -0,0 +1,36 @@
+{% load static %}
+{% load i18n %}
+{% load cache %}
+
+{% load utils %}
+
+<div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content about-modal-pf">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <h1>{% trans 'passbook' %}</h1>
+                <div class="product-versions-pf">
+                    <ul class="list-unstyled">
+                        {% app_versions as vers %}
+                        {% cache 600 versions %}
+                        {% for app, ver in vers.items %}
+                        <li><strong>{{ app }}</strong> {{ ver }}</li>
+                        {% endfor %}
+                        {% endcache %}
+                    </ul>
+                </div>
+                <div class="trademark-pf">
+                    Trademark and Copyright Information
+                </div>
+            </div>
+            <div class="modal-footer">
+                <img style="max-height:64px;" src="{% static 'img/logo.png' %}" alt=" Symbol">
+            </div>
+        </div>
+    </div>
+</div>