load jquery ui async

app/scripts/require_config.js

@@ -6,7 +6,6 @@ require.config({
   baseUrl: '/scripts',
   paths: {
     jquery: '../bower_components/jquery/dist/jquery',
-    'jquery-ui': '../bower_components/jquery-ui/jquery-ui',
     backbone: '../bower_components/backbone/backbone',
     underscore: '../bower_components/underscore/underscore',
     fxaClient: '../bower_components/fxa-js-client/fxa-client',
@@ -20,17 +19,13 @@ require.config({
     md5: '../bower_components/JavaScript-MD5/js/md5'
   },
   shim: {
-    'jquery-ui': {
-      exports: '$',
-      deps: ['jquery']
-    },
     underscore: {
       exports: '_'
     },
     backbone: {
       deps: [
         'underscore',
-        'jquery-ui'
+        'jquery'
       ],
       exports: 'Backbone'
     },

app/scripts/templates/settings/avatar.mustache

@@ -10,7 +10,7 @@
         <img src="{{ avatar }}" />
       {{/avatar}}
       {{^avatar}}
-        <img src="/images/avatar.jpg" class="default"/>
+        <img class="default"/>
       {{/avatar}}
     </p>
 

app/scripts/templates/settings/avatar_camera.mustache

@@ -10,7 +10,7 @@
         <img src="{{ avatar }}" />
       {{/avatar}}
       {{^avatar}}
-        <img src="/images/avatar.jpg" class="default"/>
+        <img class="default"/>
       {{/avatar}}
       <video id="video" class="hidden"></video>
     </p>

app/scripts/templates/settings/avatar_change.mustache

@@ -14,7 +14,7 @@
       {{/avatar}}
       {{^avatar}}
       <p class="avatar-wrapper">
-        <img src="/images/avatar.jpg" class="default"/>
+        <img class="default"/>
       </p>
       {{/avatar}}
     </div>

app/scripts/templates/settings/avatar_url.mustache

@@ -13,7 +13,7 @@
         <img src="{{ avatar }}" id="avatar"/>
       {{/avatar}}
       {{^avatar}}
-        <img src="/images/avatar.jpg" id="gravatar" />
+        <img class="default" />
       {{/avatar}}
     </div>
     <form novalidate>

app/scripts/views/settings/avatar_change.js

@@ -69,10 +69,13 @@ function ($, _, FormView, Template, Session, AuthErrors) {
           var img = new Image();
           img.src = src;
           img.onload = function () {
-            Session.set('cropImgWidth', img.width);
-            Session.set('cropImgHeight', img.height);
 
-            self.navigate('settings/avatar/crop');
+            require(['../bower_components/jquery-ui/ui/draggable'], function (ui) {
+              Session.set('cropImgWidth', img.width);
+              Session.set('cropImgHeight', img.height);
+
+              self.navigate('settings/avatar/crop');
+            });
           };
           img.onerror = function () {
             self.navigate('settings/avatar', {

app/styles/_avatars.scss

@@ -1,6 +1,12 @@
 .avatar-wrapper img {
   width: $avatar-size;
   height: $avatar-size;
+  display: block;
+}
+
+.avatar-wrapper img.default {
+  background-image: url(/images/avatar.jpg);
+  background-size: cover;
 }
 
 .avatar-wrapper {
@@ -45,6 +51,7 @@
   display: inline-block;
   margin: 0px 0px 5px;
   border-radius: 50%;
+  border-width: 0px;
   height: $avatar-size;
   width: $avatar-size;
 }

grunttasks/copy.js

@@ -39,11 +39,18 @@ module.exports = function (grunt) {
           src: [
             '*.{ico,png,txt}',
             '.htaccess',
-            'images/{,*/}*.{webp,gif}',
+            'images/{,*/}*.{webp,gif,svg}',
             'styles/fonts/{,*/}*.*',
             'fonts/**/*.{woff,eot,ttf,svg,ofl}',
             'i18n/{,*/}{,*/}*.*'
           ]
+        },
+        {
+          // jquery ui
+          expand: true,
+          cwd: '<%= yeoman.app %>/bower_components/jquery-ui',
+          src: ['**/*.js'],
+          dest: '<%= yeoman.dist %>/bower_components/jquery-ui'
         }
       ]
     },

grunttasks/rev.js

@@ -10,10 +10,10 @@ module.exports = function (grunt) {
       files: {
         src: [
           '<%= yeoman.dist %>/bower_components/**/*.js',
-          '<%= yeoman.dist %>/bower_components/{,*/}*.js',
+          '!<%= yeoman.dist %>/bower_components/jquery-ui/**/*.js',
           '<%= yeoman.dist %>/scripts/{,*/}*.js',
           '<%= yeoman.dist %>/styles/{,*/}*.css',
-          '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}',
+          '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
           '<%= yeoman.dist %>/fonts/{,*/}*.{woff,svg,ofl,eot,ttf}'
         ]
       }

grunttasks/uglify.js

@@ -12,12 +12,20 @@ module.exports = function (grunt) {
    */
   grunt.config('uglify', {
     dist: {
-      files: [{
-        expand: true,
-        cwd: '<%= yeoman.tmp %>/scripts',
-        src: ['**/*.js'],
-        dest: '<%= yeoman.dist %>/scripts'
-      }]
+      files: [
+        {
+          expand: true,
+          cwd: '<%= yeoman.tmp %>/scripts',
+          src: ['**/*.js'],
+          dest: '<%= yeoman.dist %>/scripts'
+        },
+        {
+          expand: true,
+          cwd: '<%= yeoman.app %>/bower_components/jquery-ui',
+          src: ['**/*.js'],
+          dest: '<%= yeoman.dist %>/bower_components/jquery-ui'
+        }
+      ]
     }
   });
 };

server/templates/pages/src/404.html

@@ -12,6 +12,7 @@
 
         <!-- build:css(.tmp) /styles/{{ locale }}.css -->
         <link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
+        <link rel="stylesheet" href="/styles/fontello.css">
         {{#if fontSupportDisabled}}
         <link rel="stylesheet" href="/styles/system-font-main.css">
         {{else}}

server/templates/pages/src/500.html

@@ -12,6 +12,7 @@
 
         <!-- build:css(.tmp) /styles/{{ locale }}.css -->
         <link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
+        <link rel="stylesheet" href="/styles/fontello.css">
         {{#if fontSupportDisabled}}
         <link rel="stylesheet" href="/styles/system-font-main.css">
         {{else}}

server/templates/pages/src/503.html

@@ -12,6 +12,7 @@
 
         <!-- build:css(.tmp) /styles/{{ locale }}.css -->
         <link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
+        <link rel="stylesheet" href="/styles/fontello.css">
         {{#if fontSupportDisabled}}
         <link rel="stylesheet" href="/styles/system-font-main.css">
         {{else}}

server/templates/pages/src/privacy.html

@@ -13,6 +13,7 @@
 
         <!-- build:css(.tmp) /styles/{{ locale }}.css -->
         <link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
+        <link rel="stylesheet" href="/styles/fontello.css">
         {{#if fontSupportDisabled}}
         <link rel="stylesheet" href="/styles/system-font-main.css">
         {{else}}

server/templates/pages/src/terms.html

@@ -13,6 +13,7 @@
 
         <!-- build:css(.tmp) /styles/{{ locale }}.css -->
         <link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
+        <link rel="stylesheet" href="/styles/fontello.css">
         {{#if fontSupportDisabled}}
         <link rel="stylesheet" href="/styles/system-font-main.css">
         {{else}}