Bug 633564, mobile install buttons

jbalogh · Feb 21, 2011 · df291b2 · df291b2
1 parent 4c6b9b6
commit df291b2
Show file tree

Hide file tree

Showing 12 changed files with 374 additions and 31 deletions.
diff --git a/apps/addons/buttons.py b/apps/addons/buttons.py
@@ -34,7 +34,8 @@ def install_button(context, addon, version=None, show_eula=True,
                  addon.id in request.amo_user.mobile_addons)
     c = {'button': button, 'addon': addon, 'version': button.version,
          'installed': installed}
-    t = jingo.render_to_string(request, 'addons/button.html', c)
+    template = 'addons/mobile/button.html' if request.MOBILE else 'addons/button.html'
+    t = jingo.render_to_string(request, template, c)
     return jinja2.Markup(t)
 
 

diff --git a/apps/addons/templates/addons/button.html b/apps/addons/templates/addons/button.html
@@ -2,7 +2,7 @@
 {% set _obj = version if amo.HAS_COMPAT[addon.type] else addon %}
 {% set compat = _obj.compatible_apps[APP] if _obj else None %}
 
-<div class="install-shell">
+<div class="install">
 <div class="install {{ b.install_class|join(' ') }}"
      data-addon="{{ addon.id }}"
      data-icon="{{ addon.icon_url }}"

diff --git a/apps/addons/templates/addons/mobile/button.html b/apps/addons/templates/addons/mobile/button.html
@@ -0,0 +1,51 @@
+{% set b = button %}
+{% set _obj = version if amo.HAS_COMPAT[addon.type] else addon %}
+{% set compat = _obj.compatible_apps[APP] if _obj else None %}
+
+<div class="install {{ b.install_class|join(' ') }}"
+     data-addon="{{ addon.id }}"
+     data-icon="{{ addon.icon_url }}"
+     data-developers="{{ addon.meet_the_dev_url() }}"
+     data-name="{{ addon.name }}"
+     {{ b.attrs()|xmlattr }}
+  {% if compat %}
+     data-min="{{ compat.min.version }}"
+     data-max="{{ compat.max.version }}"
+  {% endif %}>
+  {% set links = b.links() %}
+  {% if not links %}
+    <a class="button disabled">
+      {{ _('No compatible versions') }}
+    </a>
+  {% endif %}
+  {% for link in links %}
+    {% set extra = "platform " + link.os.shortname if link.os else "" %}
+    <a class="button add {{ b.button_class|join(' ') }} {{ extra }}"
+       data-hash="{{ link.file.hash }}"
+       {% if b.show_warning %}
+         href="{{ b.addon.get_url_path() }}"
+         data-realurl="{{ link.url }}"
+       {% else %}
+         href="{{ link.url }}"
+       {% endif %}>
+        {{ _('Add to Firefox') }}
+    </a>
+  {% endfor %}
+  <ul class="badges">
+    {% if False %}
+      <li class="error">{{ _('Requires Newer Version of Firefox') }}</li>
+    {% endif %}
+    {% if settings.PERF_THRESHOLD and addon.ts_slowness >= settings.PERF_THRESHOLD %}
+      <li class="warning">{{ _('May Slow Down Your Browser') }}</li>
+    {% endif %}
+    {% if files and files[0].no_restart %}
+      <li>{{ _('No Restart Required') }}</li>
+    {% endif %}
+  </ul>
+  {% if addon.privacy_policy %}
+    <a class="privacy-policy" href="{{ url('addons.privacy', addon.slug) }}">
+      {{ _('View privacy policy') }}
+    </a>
+  {% endif %}
+</div> {# install #}
+
diff --git a/apps/addons/templates/addons/mobile/details.html b/apps/addons/templates/addons/mobile/details.html
@@ -8,10 +8,8 @@
     <h3>{{ addon.name }}</h3>
     {# TODO: make this a secret link #}
     <h4 class="author">{{ _('by') }} {{ users_list(addon.listed_authors) }}</h4>
-    <div class="installer">
-      <a class="button install">Add to Firefox</a>
-      {# TODO: privacy policy (in button.html right now) #}
-    </div>
+    {{ big_install_button(addon, show_warning=False) }}
+    {# TODO: privacy policy (in button.html right now) #}
   </div>
   <div class="copy">
     <p id="summary">

diff --git a/apps/versions/helpers.py b/apps/versions/helpers.py
@@ -12,5 +12,6 @@ def version_detail(context, addon, version, src,
 
 
 @jingo.register.inclusion_tag('versions/mobile/version.html')
-def mobile_version_detail(addon, version, src):
-    return locals()
+@jinja2.contextfunction
+def mobile_version_detail(context, addon, version, src):
+    return new_context(**locals())
diff --git a/apps/versions/templates/versions/mobile/version.html b/apps/versions/templates/versions/mobile/version.html
@@ -35,8 +35,5 @@ <h4>{{ _('Works with:') }}</h4>
     {% endif %}
   </div>
 
-  <div class="installer">
-    <a class="button install">Add to Firefox</a>
-    {# TODO: privacy policy (in button.html right now) #}
-  </div>
+  {{ big_install_button(addon, version=version) }}
 </li>
diff --git a/media/css/zamboni/mobile.css b/media/css/zamboni/mobile.css
@@ -77,8 +77,15 @@ h1, h2, h3,
 .moz-menu {
     font-family: Georgia, serif;
 }
+a:link {
+    font-family: Georgia, serif;
+    color: #447bc4;
+    text-decoration: none;
+}
 .num_ratings,
-.review .old-version {
+.review .old-version,
+.install-wrapper,
+.install-wrapper a {
     font-family: "Droid Sans", sans-serif;
 }
 #content h2 {
@@ -93,11 +100,6 @@ h1, h2, h3,
 .copy p {
     color: #444;
 }
-a:link {
-    font-family: Georgia, serif;
-    color: #447bc4;
-    text-decoration: none;
-}
 
 /************************************/
 /*             GRADIENTS            */
@@ -836,17 +838,19 @@ td .versions li a {
 /*              BUTTONS             */
 /************************************/
 
-.installer {
+.install-wrapper {
     margin: 10px 0 4px;
     padding-top: 8px;
+    text-align: center;
+    font-weight: bold;
 }
 
-.infobox .installer {
+.infobox .install-wrapper {
     border-top: 2px solid #fff;
     box-shadow: 0 -1px #ccc;
 }
 
-.button {
+.button, a.button {
     -moz-transition: -moz-box-shadow 0.3s ease 0s;
     background-image: -moz-linear-gradient(#669BE1, #5784BF) repeat scroll 0 0 transparent;
 	background-image: -webkit-gradient(
@@ -910,7 +914,7 @@ td .versions li a {
 	                 0 0 100px rgba(255, 255, 255, 0.2) inset;
 }
 
-.button.install {
+.button.add {
     background-color: #84C63C;
 	background-image: -moz-linear-gradient(#84C63C, #489615);
 	background-image: -webkit-gradient(
@@ -923,24 +927,87 @@ td .versions li a {
 	color: #fff;
 	padding-left: 40px;
 }
-.button.install:before {
+.button.add:before {
     content: " ";
     display: block;
     width: 24px;
     height: 24px;
     position: absolute;
     left: 14px;
     top: 10px;
-    background: url(../../img/zamboni/mobile/install.svg) no-repeat center center;
-}
-
-.button.install.disabled {
+    background: url(../../img/zamboni/mobile/install.svg) no-repeat top left;
+}
+
+.button.warning {
+  background-attachment: scroll, scroll;
+  background-clip: border-box, border-box;
+  background-color: transparent;
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)),
+                    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGlJREFUeNqc0cEJACEMRFFNARaw/RexFe1dG3AjCBJJYDL/kNtjDqn9lRLUnlrixjd5qVdo6WNQOhiXN05Jg7PyYEJuzMmFaRn+GZG6KrQMlxHpY1A6GJc3TkmDs/JgQm7MyYVpqf0CDABVcj3T2ITzOAAAAABJRU5ErkJggg==);
+  background-origin: padding-box, padding-box;
+  background-position: 0 0%, 0 0;
+  background-repeat: repeat, repeat;
+  background-size: auto auto, auto auto;
+  color: #333333;
+  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5);
+  top: 0;
+}
+.button.add.warning:before {
+    background: url(../../img/zamboni/mobile/install.svg) no-repeat 0 -50px;
+}
+.button.disabled {
 	background: -moz-linear-gradient(#d1d4d7, #c1c5ca);
 	color: #fff;
 	-moz-box-shadow: 0 3px rgba(0, 0, 0, 0.05),
 	                 0 -4px rgba(0, 0, 0, 0.05) inset;
 	top: 0;
 }
+.button.add.disabled:before {
+    background: url(../../img/zamboni/mobile/install.svg) no-repeat top left;
+}
+
+/** Button Badges */
+
+.badges {
+    margin-top: 8px;
+}
+.badges a, .badges li {
+    display: block;
+    color: black;
+}
+.badges li {
+    border: 1px solid #ddd;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    font-size: .8em;
+    line-height: 20px;
+    height: 20px;
+    background: #fff;
+}
+.badges .error {
+    background-color: #edd4d2;
+    border-color: #ac9a98;
+}
+.badges .warning {
+    background-color: #fef9d7;
+    border-color: #bebaa1;
+}
+.install .privacy-policy {
+    display: block;
+    margin-top: 12px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    height: 27px;
+    font-size: .9em;
+    color: black;
+    line-height: 25px;
+    border: 1px solid #ccc;
+    background-color: #e6e6e6;
+    background-image: -moz-linear-gradient(#e6e6e6, #d3d3d3);
+}
 
 /************************************/
 /*              REVIEWS             */

diff --git a/media/img/zamboni/mobile/install.svg b/media/img/zamboni/mobile/install.svg
diff --git a/media/js/zamboni/init.js b/media/js/zamboni/init.js
@@ -1,5 +1,5 @@
 /* Global initialization script */
-z = {};
+var z = {};
 
 $(document).ready(function(){
 
@@ -90,7 +90,8 @@ var escape_ = function(s){
             .replace("'", '&#39;').replace('"', '&#34;');
 };
 
-
+//TODO(potch): kill underscore dead. until then, fake it on mobile.
+if (!('_' in window)) _ = {};
 /* is ``key`` in obj? */
 _.haskey = function(obj, key) {
     return typeof obj[key] !== "undefined";