Sponsorship benefits ux fixes (#1687)

* Install jqueryui

* Quickly displays elements titles

* Update to all areas that states 'packages'  to 'sponsor packages'

* Highlight package only benefits

Author: berinhard

sponsors/forms.py

@@ -110,13 +110,13 @@ def _clean_benefits(self, cleaned_data):
                 if not package:
                     raise forms.ValidationError(
                         _(
-                            "The application has 1 or more package only benefits and no package."
+                            "The application has 1 or more package only benefits and no sponsor package."
                         )
                     )
                 elif not benefit.packages.filter(id=package.id).exists():
                     raise forms.ValidationError(
                         _(
-                            "The application has 1 or more package only benefits but wrong package."
+                            "The application has 1 or more package only benefits but wrong sponsor package."
                         )
                     )
 

sponsors/models.py

@@ -32,7 +32,7 @@ class Meta(OrderedModel.Meta):
 
     def has_user_customization(self, benefits):
         """
-        Given a list of benefits this method checks if it exclusively matches the package benefits
+        Given a list of benefits this method checks if it exclusively matches the sponsor package benefits
         """
         pkg_benefits_with_conflicts = set(self.benefits.with_conflicts())
 
@@ -113,7 +113,7 @@ class SponsorshipBenefit(OrderedModel):
     )
     package_only = models.BooleanField(
         default=False,
-        verbose_name="Package Only Benefit",
+        verbose_name="Sponsor Package Only Benefit",
         help_text="If a benefit is only available via a sponsorship package, select this option.",
     )
     new = models.BooleanField(
@@ -158,7 +158,7 @@ class SponsorshipBenefit(OrderedModel):
     )
 
     NEW_MESSAGE = "New benefit this year!"
-    PACKAGE_ONLY_MESSAGE = "This benefit is only available with packages"
+    PACKAGE_ONLY_MESSAGE = "Benefit only available as part of a sponsor package"
     NO_CAPACITY_MESSAGE = "This benefit is currently at capacity"
 
     @property

sponsors/tests/test_forms.py

@@ -101,7 +101,7 @@ def test_package_only_benefit_without_package_should_not_validate(self):
         form = SponsorshiptBenefitsForm(data=data)
         self.assertFalse(form.is_valid())
         self.assertIn(
-            "The application has 1 or more package only benefits and no package.",
+            "The application has 1 or more package only benefits and no sponsor package.",
             form.errors["__all__"],
         )
 
@@ -118,7 +118,7 @@ def test_package_only_benefit_with_wrong_package_should_not_validate(self):
         form = SponsorshiptBenefitsForm(data=data)
         self.assertFalse(form.is_valid())
         self.assertIn(
-            "The application has 1 or more package only benefits but wrong package.",
+            "The application has 1 or more package only benefits but wrong sponsor package.",
             form.errors["__all__"],
         )
 

static/js/libs/jquery-ui-1.12.1.min.js

@@ -65,4 +65,9 @@ $(document).ready(function(){
           }
       });
     });
+
+  $(document).tooltip({
+    show: { effect: "blind", duration: 0 },
+    hide: false
+  });
 });

static/js/sponsors/applicationForm.js

@@ -3618,13 +3618,18 @@ span.highlighted {
   font-style: italic; }
 
 /* ! ===== SPONSORSHIP APP ===== */
+.ui-tooltip-content {
+  font-size: 75%; }
+
 #sponsorship_application_container {
   display: block;
   text-align: center;
   display: block;
   text-align: center; }
   #sponsorship_application_container form {
     margin-bottom: 0; }
+    #sponsorship_application_container form .package_only_label {
+      color: #666666; }
   #sponsorship_application_container #package_selection {
     display: inline-block; }
     #sponsorship_application_container #package_selection li {

static/sass/style.css

@@ -2395,12 +2395,21 @@ span.highlighted {
 @import "fonts";
 
 /* ! ===== SPONSORSHIP APP ===== */
+.ui-tooltip-content {
+    font-size: 75%;
+}
+
 #sponsorship_application_container {
+
     display: block;
     text-align: center;
 
     form {
         margin-bottom: 0;
+
+        .package_only_label {
+            color: $grey;
+        }
     }
 
     #package_selection {

static/sass/style.scss

@@ -9,6 +9,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <link rel="prefetch" href="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
+    <link rel="prefetch" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
 
     <meta name="application-name" content="{{ SITE_INFO.site_name }}">
     <meta name="msapplication-tooltip" content="{{ SITE_INFO.site_descript }}">
@@ -37,6 +38,7 @@
     {# equivalent to: #}
     {#<link rel="stylesheet" href="{{ STATIC_URL }}stylesheets/no-mq.css" media="screen">#}
     <![endif]-->
+    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
 
     {# Place icon files in the root if possible (let browsers look for them where they expect them to be) #}
     <link rel="icon" type="image/x-icon" href="{{ STATIC_URL }}favicon.ico">
@@ -327,6 +329,8 @@ <h1 class="site-headline">
     {% block javascript %}
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
     <script>window.jQuery || document.write('<script src="{{ STATIC_URL }}js/libs/jquery-1.8.2.min.js"><\/script>')</script>
+    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <script>window.jQuery || document.write('<script src="{{ STATIC_URL }}js/libs/jquery-ui-1.12.1.min.js"><\/script>')</script>
 
     <script src="{{ STATIC_URL }}js/libs/masonry.pkgd.min.js"></script>
     <script src="{{ STATIC_URL }}js/libs/html-includes.js"></script>

templates/base.html

@@ -41,6 +41,8 @@
               <div>
                 <span><i class="fa fa-cubes"></i> {{ benefit_model.PACKAGE_ONLY_MESSAGE }}</span>
                 {% if capacities_met %}<span><i class="fa fa-close"></i> {{ benefit_model.NO_CAPACITY_MESSAGE }}</span>{% endif %}
+                <br/>
+                <span><i class="fa fa-info"></i> Hover over benefit for details</span>
               </div>
             </div>
 
@@ -53,7 +55,8 @@ <h3 class="title">{{ field.label }}</h3>
                 <li class="{% cycle '' 'highlight' %}">
                     <label for="id_{{field.name}}_{{ forloop.counter0 }}" benefit_id="{{ benefit.id }}">
                         <input id="id_{{field.name}}_{{ forloop.counter0 }}" name="{{ field.name }}" type="checkbox" value="{{ benefit.id }}" {% if benefit.unavailability_message %}disabled{% endif %} {% if benefit.id in field.initial %}checked{% endif %} {% if benefit.package_only %}package_only='true'{% endif %}>
-                        <span {% if benefit.description %}title="{{ benefit.description }}"{% endif %}>{{ benefit.name }}</span>
+                        <span {% if benefit.package_only %} class='package_only_label'{% endif %}>{{ benefit.name }}</span>
+                        {% if benefit.description %}<i class="fa fa-info" title="{{ benefit.description }}"></i>{% endif %}
                         {% if benefit.package_only %}<i class="fa fa-cubes"  title="{{ benefit_model.PACKAGE_ONLY_MESSAGE }}"></i>{% endif %}
                         {% if not benefit.has_capacity %}<i class="fa fa-close"  title="{{ benefit_model.NO_CAPACITY_MESSAGE }}"></i>{% endif %}
                     </label>