Merge pull request #37 from supportkit/integration

Release 0.2.13
zendesk · Jul 13, 2015 · f4f6f7c · f4f6f7c
2 parents 6cfb7c8 + 31599c9
commit f4f6f7c
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -4,12 +4,18 @@ Build status: [![Circle CI](https://circleci.com/gh/supportkit/supportkit-js.svg
 
 ### Script Tag
 
-Add the following code in between the ```<head>...</head>``` tags on your page.
+Add the following code towards the end of the `body` section on your page. Placing it at the end allows the rest of the page to load first.
 
 ```html
 <script src="https://cdn.supportkit.io/supportkit.min.js"></script>
 ```
 
+Note that SupportKit requires jQuery to work. If you aren't using jQuery yet, then add the following code before the previous code snippet. This step is only needed if you are using the CDN version.<br>
+
+```
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
+```
+
 Initialize the plugin using this code snippet
 
 ```html
@@ -23,13 +29,13 @@ Initialize the plugin using this code snippet
 Install from npm
 
 ```
-npm install supportkit-js
+npm install supportkit
 ```
 
 Require and init
 
 ```javascript
-var SupportKit = require('supportkit-js');
+var SupportKit = require('supportkit');
 
 SupportKit.init({appToken: 'your_app_token'});
 ```
@@ -39,7 +45,7 @@ SupportKit.init({appToken: 'your_app_token'});
 Install from bower
 
 ```
-bower install supportkit-js
+bower install supportkit
 ```
 
 Include in JS using preferred method and init

diff --git a/example/template/demo.html b/example/template/demo.html
@@ -6,7 +6,7 @@
     <meta charset="utf-8">
     <title>Conversation Demo</title>
     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
-    <script src="/dist/WIDGET_CODE"></script>
+    <script src="../dist/WIDGET_CODE"></script>
     <script>
         /* global SupportKit: false */
 

diff --git a/release_notes/v0.2.13.md b/release_notes/v0.2.13.md
@@ -0,0 +1,15 @@
+![Whispers](http://memecrunch.com/meme/1GPPJ/i-like-to-whisper-too/image.png)
+
+# Whispers!
+
+The Web SDK now has support for whispers! 
+See <http://docs.supportkit.io/#getting-conversations-started> for more information.
+
+# Cool stuff
+
+1. Whispers
+2. Retina display supports
+
+# Bug Fixes
+
+1. Fixed height calculation for logo position
diff --git a/src/js/controllers/chatController.js b/src/js/controllers/chatController.js
@@ -153,7 +153,7 @@ module.exports = ViewController.extend({
                 .then(this._getConversation)
                 .then(this._initFaye)
                 .then(_.bind(function(conversation) {
-                    this.conversationInitiated = true;
+                    this.conversationInitiated = !conversation.isNew();
                     return conversation;
                 }, this));
         }

diff --git a/src/stylesheets/conversation.less b/src/stylesheets/conversation.less
@@ -14,18 +14,14 @@
         line-height: 1.3;
     }
     .sk-row {
-        margin-top: 31px;
         clear: both;
 
-        &:first-of-type {
-            margin-top: 10px;
-        }
         .sk-msg-wrapper {
             max-width: 100%;
             position: relative;
 
             .sk-msg {
-                box-shadow: 0 1px 2px rgba(0,0,0,0.22);
+                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
                 font-size: 14px;
                 line-height: 20px;
                 padding: 8px 12px;
@@ -58,7 +54,8 @@
             }
         }
         &.sk-left-row {
-            margin-top: 30px;
+            padding-top: 30px;
+
             .sk-msg-wrapper {
                 display: inline-block;
                 max-width: 200px;
@@ -83,7 +80,8 @@
             }
         }
         &.sk-right-row {
-            margin-top: 10px;
+            padding-top: 10px;
+
             .sk-msg {
                 background-color: #00aeff;
                 float: right;
@@ -104,7 +102,7 @@
     &::-webkit-scrollbar-track {
         border-radius: 10px;
         box-shadow: inset 0 -6px 0 0 @background-color, inset 0 6px 0 0 @background-color;
-        background-color: rgba(230,230,230,0.97);
+        background-color: rgba(230, 230, 230, 0.97);
     }
     &::-webkit-scrollbar {
         width: 8px;
@@ -113,7 +111,7 @@
     &::-webkit-scrollbar-thumb {
         border-radius: 10px;
         box-shadow: inset 0 -6px 0 0 @background-color, inset 0 6px 0 0 @background-color;
-        background-color: rgba(210,210,210,0.97);
+        background-color: rgba(210, 210, 210, 0.97);
     }
     .sk-logo {
         margin-top: 15px;
@@ -123,10 +121,24 @@
         color: #bbbbbb;
         font-size: 12px;
 
-        .sk-image {
+        .sk-image, .sk-image-retina {
             position: relative;
             left: 2px;
             top: 3px;
+
+            @media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
+                display: none;
+            }
+        }
+
+        .sk-image-retina {
+            width: 83px;
+            display: none;
+
+            /* HiDPI support */
+            @media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
+                display: inherit;
+            }
         }
         &.anchor-bottom {
             position: absolute;

diff --git a/src/templates/conversation.tpl b/src/templates/conversation.tpl
@@ -1,3 +1,8 @@
 <div class="sk-intro"><%= introText %></div>
 <div data-ui-messages></div>
-<div class="sk-logo">In-App Messaging by <a href="https://supportkit.io" target="_blank"><img class="sk-image" src="https://cdn.supportkit.io/images/logo_webwidget.png" alt="SupportKit"></a></div>
+<div class="sk-logo">In-App Messaging by 
+    <a href="https://supportkit.io" target="_blank">
+        <img class="sk-image" src="https://cdn.supportkit.io/images/logo_webwidget.png" alt="SupportKit">
+        <img class="sk-image-retina" src="https://cdn.supportkit.io/images/logo_webwidget_2x.png" alt="SupportKit">
+    </a>
+</div>