[fix] fit plan price to bubble width

app/assets/javascripts/app.js.erb

@@ -20,7 +20,7 @@ angular.module('application', ['ngCookies', 'ngResource', 'ngSanitize', 'ngAnima
                'ui.select', 'ui.calendar', 'angularMoment', 'Devise', 'DeviseModal', 'angular-growl', 'xeditable',
                'checklist-model', 'unsavedChanges', 'angular-loading-bar', 'ngTouch', 'angular-google-analytics',
                'angularUtils.directives.dirDisqus', 'summernote', 'elasticsearch', 'angular-medium-editor', 'naif.base64',
-               'minicolors', 'pascalprecht.translate']).
+               'minicolors', 'pascalprecht.translate', 'ngFitText']).
 config(['$httpProvider', 'AuthProvider', "growlProvider", "unsavedWarningsConfigProvider", "AnalyticsProvider", "uibDatepickerPopupConfig", "$provide", "$translateProvider",
     function($httpProvider, AuthProvider, growlProvider, unsavedWarningsConfigProvider, AnalyticsProvider, uibDatepickerPopupConfig, $provide, $translateProvider) {
 

app/assets/javascripts/application.js

@@ -67,6 +67,7 @@
 //= require angular-translate-loader-partial/angular-translate-loader-partial
 //= require messageformat/messageformat
 //= require angular-translate-interpolation-messageformat/angular-translate-interpolation-messageformat
+//= require ngFitText/dist/ng-FitText.min
 //= require_tree ./controllers
 //= require_tree ./services
 //= require_tree ./directives

app/assets/stylesheets/app.components.scss

@@ -220,13 +220,13 @@
       .amount {
         padding-top: 16px;
         font-weight: bold;
-        font-size: 1vw;
+        font-size: rem-calc(20);
         color: white;
       }
       .period {
         position: relative;
         top: -6px;
-        font-size: 0.75vw;
+        font-size: rem-calc(14);
         color: white;
       }
     }

app/assets/templates/plans/index.html.erb

@@ -35,7 +35,7 @@
               <div class="content">
                 <div class="wrap">
                   <div class="price">
-                    <div class="amount">{{plan.amount | currency}}</div>
+                    <div class="amount" data-fittext>{{plan.amount | currency}}</div>
                       <span class="period">{{ plan.interval | planIntervalFilter: plan.interval_count }}</span>
                   </div>
                 </div>

bower.json

@@ -52,7 +52,8 @@
     "angular-translate-loader-partial": "~2.8.1",
     "angular-translate-interpolation-messageformat": "~2.8.1",
     "messageformat": "=0.1.8",
-    "moment-timezone": "~0.5.0"
+    "moment-timezone": "~0.5.0",
+    "ngFitText": "~4.1.1"
   },
   "resolutions": {
     "jquery": ">=1.10.2",

vendor/assets/components/ngFitText/.bower.json

@@ -0,0 +1,37 @@
+{
+  "name": "ngFitText",
+  "version": "4.1.1",
+  "main": [
+    "dist/ng-FitText.min.js"
+  ],
+  "keywords": [
+    "angular",
+    "javascript",
+    "typography"
+  ],
+  "ignore": [
+    "demo",
+    "lib",
+    "node_modules",
+    "src",
+    "test",
+    ".bowerrc",
+    "gulpfile.js",
+    "package.json",
+    "index.html"
+  ],
+  "dependencies": {
+    "angular": "1.x"
+  },
+  "homepage": "https://github.com/patrickmarabeas/ng-FitText.js",
+  "_release": "4.1.1",
+  "_resolution": {
+    "type": "version",
+    "tag": "v4.1.1",
+    "commit": "0af12af4b129c9b9b9bac119e8dfbf105a8f4ade"
+  },
+  "_source": "git://github.com/patrickmarabeas/ng-FitText.js.git",
+  "_target": "~4.1.1",
+  "_originalSource": "ngFitText",
+  "_direct": true
+}

vendor/assets/components/ngFitText/.gitignore

@@ -0,0 +1,3 @@
+.idea
+lib/
+node_modules/

vendor/assets/components/ngFitText/.npmignore

@@ -0,0 +1,8 @@
+demo
+lib
+node_modules
+test
+.bowerrc
+bower.json
+gulpfile.js
+index.html

vendor/assets/components/ngFitText/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Patrick Marabeas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

vendor/assets/components/ngFitText/README.md

@@ -0,0 +1,108 @@
+# ng-FitText.js
+
+### ng-FitText.js makes font-sizes flexible. Use this AngularJS directive in your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
+
+This is a rework of the original jQuery plugin which can be found here: https://github.com/davatron5000/FitText.js.
+
+### Install and Inclusion
+
+Grab it with Bower: `bower install ngFitText`
+
+Include it in your AngularJS application
+
+```javascript
+var myApp = angular.module('myApp', ['ngFitText']);
+```
+
+### Implementation
+
+```html
+<!-- basic implementation -->
+<h1 data-fittext>FitText</h1>
+
+<!-- dynamic content -->
+<h1 data-fittext ></h1>
+
+<!-- setting a minimum font size -->
+<h1 data-fittext data-fittext-min="10">FitText</h1>
+
+<!-- minimum font size inherited from CSS -->
+<h1 data-fittext data-fittext-min="inherit">FitText</h1>
+
+<!-- setting a maximum font size -->
+<h1 data-fittext data-fittext-max="10">FitText</h1>
+
+<!-- maximum font size inherited from CSS -->
+<h1 data-fittext data-fittext-max="inherit">FitText</h1>
+
+<!-- combination of restrictions -->
+<h1 data-fittext data-fittext-min="10" data-fittext-max="inherit">FitText</h1>
+<h1 data-fittext data-fittext-min="inherit" data-fittext-max="100">FitText</h1>
+<h1 data-fittext data-fittext-min="10" data-fittext-max="100">FitText</h1>
+
+<!-- block child elements will share smallest font size -->
+<div data-fittext>
+  <div>Short line</div>
+  <div>Font size of this element will be used</div>
+  <div>Short</div>
+</div>
+
+<!-- inline child elements will behave as a single line of text -->
+<span data-fittext>
+  <span>Single</span>
+  <span> line of text</span>
+  <span> spans 100% width</span>
+</span>
+
+<!-- Custom fonts may take to load in. A delay can be specified before size is initially calculated -->
+<h1 data-fittext data-fittext-load-delay="500">Custom font</h1>
+
+<!-- Custom fonts may ooze out of element; this is the same as the original compressor attr -->
+<h1 data-fittext=".9">Custom font</h1>
+```
+
+### FitText Config Provider
+
+Because MODULARIZATION, this module doesn't come with debounce functionality included. Instead you will need to specify the functionality in the `fitTextConfigProvider`:
+
+```javascript
+module.config(['fitTextConfigProvider', function(fitTextConfigProvider) {
+  fitTextConfigProvider.config = {
+    debounce: _.debounce,               // include a vender function like underscore or lodash
+    debounce: function(a,b,c) {         // specify your own function
+      var d;return function(){var e=this,f=arguments;clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b),c&&!d&&a.apply(e,f)}
+    },
+    delay: 1000,                        // debounce delay
+    loadDelay: 10,                      // global default delay before initial calculation
+    compressor: 1,                      // global default calculation multiplier
+    min: 0,                             // global default min
+    max: Number.POSITIVE_INFINITY       // global default max
+  };
+}]);
+```
+
+### Changelog
+
+#### [v4.1.0](https://github.com/patrickmarabeas/ng-FitText.js/releases/tag/v4.1.0)
++ Replace `'initial'` value with more semantic `'inherit'`
++ Both `data-fittext-min` and `data-fittext-max` can use the inherited CSS value by using `'inherit'`
+
+#### [v4.0.0](https://github.com/patrickmarabeas/ng-FitText.js/releases/tag/v4.0.0)
++ `data-fittext-max` can now take `'initial'` as a value to use inherited CSS value. This allows for PX, EM or REM to be used.
++ Line heights are preserved
++ Display property is now preserved
++ New lines no longer need to be specified with an attribute
++ `ng-model` was mistakenly used for `ng-bind` - No longer need to use both `ng-model` and `{{}}` for dynamic values
++ Minified version now delivered via Bower
++ Config provider namespaced to avoid conflicts
+
+#### [v3.0.0](https://github.com/patrickmarabeas/ng-FitText.js/releases/tag/v3.0.0)
++ Element now defaults to 100% width
++ Compressor now fine tunes from this point
++ Debounce functionality now needs to be passed in via fitTextConfigProvider
+
+#### < v2.4.0
++ Specifying a value for data-fittext allows you to fine tune the text size. Defaults to 1. Increasing this number (ie 1.5) will resize the text more aggressively. Decreasing this number (ie 0.5) will reduce the aggressiveness of resize. data-fittext-min and data-fittext-max allow you to set upper and lower limits.
++ The element needs to either be a block element or an inline-block element with a width specified (% or px).
++ Font sizes can be limited with `data-fittext-max` and `data-fittext-max`
++ Debouncing addded

vendor/assets/components/ngFitText/bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "ngFitText",
+  "version": "4.1.1",
+  "main": [
+    "dist/ng-FitText.min.js"
+  ],
+  "keywords": [
+    "angular",
+    "javascript",
+    "typography"
+  ],
+  "ignore": [
+    "demo",
+    "lib",
+    "node_modules",
+    "src",
+    "test",
+    ".bowerrc",
+    "gulpfile.js",
+    "package.json",
+    "index.html"
+  ],
+  "dependencies": {
+    "angular": "1.x"
+  }
+}

vendor/assets/components/ngFitText/dist/ng-FitText.min.js

@@ -0,0 +1 @@
+!function(t,e,i,n){"use strict";i.module("ngFitText",[]).value("fitTextDefaultConfig",{debounce:!1,delay:250,loadDelay:10,compressor:1,min:0,max:Number.POSITIVE_INFINITY}).directive("fittext",["$timeout","fitTextDefaultConfig","fitTextConfig",function(e,n,o){return{restrict:"A",scope:!0,link:function(f,a,l){function r(){var t=T*h/s.offsetWidth/h;return Math.max(Math.min((c[0].offsetWidth-6)*t*p,parseFloat(y)),parseFloat(m))}function u(){s.offsetHeight*s.offsetWidth!==0&&(d.fontSize=T+"px",d.lineHeight="1",d.display="inline-block",d.fontSize=r()+"px",d.lineHeight=b,d.display=v)}i.extend(n,o.config);var c=a.parent(),s=a[0],d=s.style,x=t.getComputedStyle(a[0],null),h=a.children().length||1,g=l.fittextLoadDelay||n.loadDelay,p=l.fittext||n.compressor,m=("inherit"===l.fittextMin?x["font-size"]:l.fittextMin)||n.min,y=("inherit"===l.fittextMax?x["font-size"]:l.fittextMax)||n.max,b=x["line-height"],v=x.display,T=10;e(function(){u()},g),f.$watch(l.ngBind,function(){u()}),n.debounce?i.element(t).bind("resize",n.debounce(function(){f.$apply(u)},n.delay)):i.element(t).bind("resize",function(){f.$apply(u)})}}}]).provider("fitTextConfig",function(){var t=this;return this.config={},this.$get=function(){var e={};return e.config=t.config,e},this})}(window,document,angular);