diff --git a/Brocfile.js b/Brocfile.js index 328cc541..16bcd676 100644 --- a/Brocfile.js +++ b/Brocfile.js @@ -32,6 +32,7 @@ app.import('bower_components/JavaScript-MD5/js/md5.js'); app.import('vendor/ansiparse.js'); app.import('vendor/log.js'); app.import('vendor/customerio.js'); +app.import('vendor/charmscout.js'); app.import('bower_components/moment/moment.js'); // Use `app.import` to add additional libraries to the generated // output files. diff --git a/app/initializers/charm.coffee b/app/initializers/charm.coffee index d3b2fd02..6e1c0b3d 100644 --- a/app/initializers/charm.coffee +++ b/app/initializers/charm.coffee @@ -6,7 +6,8 @@ initialize = (container, app) -> key: config.charmKey url: "https://charmscout.herokuapp.com/feedback" - $('head').append $('') + window.bootstrapCharm() + # $('head').append $('') Initializer = name: 'charm' diff --git a/app/styles/app/charm.sass b/app/styles/app/charm.sass index 3f8ccdde..ac33bbf5 100644 --- a/app/styles/app/charm.sass +++ b/app/styles/app/charm.sass @@ -1,3 +1,74 @@ +.feedback-button + display: inline-block + position: fixed + right: 0 + left: auto + // top: 35% + bottom: 0 + margin: 0 + padding: 1.5em 1em .5em + border-radius: 4px + // transform: rotate(90deg) translateY(-140%) + will-change: transform + transition: transform ease 200ms + background: $white + font-size: 13px + color: #a2afb3 + text-transform: uppercase + box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15) + z-index: 999 + +.feedback-button:hover + // transform: rotate(90deg) translateY(-130%) + +.feedback-popup + position: fixed + top: 50% + left: 50% + width: 30em + transform: translate(-50%, -50%) + padding: 1em 1.3em + background-color: #ffffff + border-radius: 5px + z-index: 999 + box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15) + h1 + margin: 0 0 .4em + padding-left: .4em + color: #347389 + font-size: 20px + textarea + box-sizing: border-box + display: block + width: 100% + height: 10em + margin-bottom: .8em + padding: .5em .6em + resize: vertical + background-color: #f4f3eb + font-size: 15px + color: #7d7e80 + border: none + font-family: $font-family-sans-serif + .submit + margin-right: 1em + padding: .3em .7em + background-color: #37a766 + color: $white + font-size: 15px + border: none + border-radius: 4px + font-family: $font-family-sans-serif + cursor: pointer + a + color: #7d7e80 + font-size: 15px + text-decoration: none + a:hover + text-decoration: underline + +#CHARM_FORM_TARGET + display: none .feedback-button display: none diff --git a/vendor/charmscout.js b/vendor/charmscout.js index 6c1907f9..dc8a56fe 100644 --- a/vendor/charmscout.js +++ b/vendor/charmscout.js @@ -1,81 +1,9 @@ // Copyright (c) 2010-2012 Slash7 LLC http://charmhq.com/ // Copyright (c) 2010-2012 Thomas Fuchs http://mir.aculo.us/ // License: https://github.com/cheerful/charmeur/blob/master/MIT-LICENSE -(function(){ + +window.bootstrapCharm = function(){ var tab, box, email, shown = false, sending = false, openmsg = null, callbacks = {}, - VENDORS = ['webkit','moz','o','ms'], - STYLE = - '.feedback-button {' + - ' display: inline-block;' + - ' position: fixed;' + - ' right: 0;' + - ' left: auto;' + - ' top: 35%;' + - ' margin: 0;' + - ' padding: 1.5em 1em .5em;' + - ' border-radius: 4px;' + - ' transform: rotate(90deg) translateY(-140%);' + - ' will-change: transform;' + - ' transition: transform ease 200ms;' + - ' background: #ffffff;' + - ' font-size: 13px;' + - ' color: #a2afb3;' + - ' text-transform: uppercase;' + - ' box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15);' + - '}' + - '.feedback-button:hover {' + - ' transform: rotate(90deg) translateY(-130%);' + - '}' + - '.feedback-popup {' + - ' position: fixed;' + - ' top: 50%;' + - ' left: 50%;' + - ' width: 30em;' + - ' transform: translate(-50%, -50%);' + - ' padding: 1em 1.3em;' + - ' background-color: #ffffff;' + - ' border-radius: 5px;' + - ' z-index: 999;' - ' box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15);' + - ' }' + - ' .feedback-popup h1 {' + - ' margin: 0 0 .4em;' + - ' padding-left: .4em;' + - ' color: #347389;' + - ' font-size: 20px;' + - ' }' + - ' .feedback-popup textarea {' + - ' box-sizing: border-box;' + - ' display: block;' + - ' width: 100%;' + - ' height: 10em;' + - ' margin-bottom: .8em;' + - ' padding: .5em .6em;' + - ' resize: vertical;' + - ' background-color: #f4f3eb;' + - ' font-size: 15px;' + - ' color: #7d7e80;' + - ' border: none;' + - ' font-family: "Source Sans Pro", Helvetica, sans-serif;' + - ' }' + - ' .feedback-popup .submit {' + - ' margin-right: 1em;' + - ' padding: .3em .7em;' + - ' background-color: #37a766;' + - ' color: #ffffff;' + - ' font-size: 15px;' + - ' border: none;' + - ' border-radius: 4px;' + - ' font-family: "Source Sans Pro", Helvetica, sans-serif;' + - ' }' + - ' .feedback-popup a {' + - ' color: #7d7e80;' + - ' font-size: 15px;' + - ' text-decoration: none;' + - ' }' + - ' .feedback-popup a:hover {' + - ' text-decoration: underline;' + - ' }', BOX = '