From b903f3765730bbd9a9e2b81f3afb1817d9260b8d Mon Sep 17 00:00:00 2001 From: Marc-Antoine Lemieux Date: Fri, 3 Jul 2015 09:48:39 -0400 Subject: [PATCH 1/8] updated README for installation instructions - fixes #31 --- README.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 9a63d3da..bda20339 100644 --- 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 ```...``` 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 ``` +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.
+ +``` + +``` + 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 From b854c88d95fca8b8ea136df55ff1b94343d39ffd Mon Sep 17 00:00:00 2001 From: Julian Garritano Date: Mon, 6 Jul 2015 15:11:08 -0400 Subject: [PATCH 2/8] Switched logo to retina version so it displays nicely on all screens --- src/stylesheets/conversation.less | 10 +++++++--- src/templates/conversation.tpl | 6 +++++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/stylesheets/conversation.less b/src/stylesheets/conversation.less index f7012714..95fdafa8 100644 --- a/src/stylesheets/conversation.less +++ b/src/stylesheets/conversation.less @@ -25,7 +25,7 @@ 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; @@ -59,6 +59,7 @@ } &.sk-left-row { margin-top: 30px; + .sk-msg-wrapper { display: inline-block; max-width: 200px; @@ -84,6 +85,7 @@ } &.sk-right-row { margin-top: 10px; + .sk-msg { background-color: #00aeff; float: right; @@ -104,7 +106,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 +115,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; @@ -122,11 +124,13 @@ margin-left: ~"calc(50% - 100px)"; color: #bbbbbb; font-size: 12px; + opacity: 0.6; .sk-image { position: relative; left: 2px; top: 3px; + width: 83px; } &.anchor-bottom { position: absolute; diff --git a/src/templates/conversation.tpl b/src/templates/conversation.tpl index d2f1a5a1..d5e80b74 100644 --- a/src/templates/conversation.tpl +++ b/src/templates/conversation.tpl @@ -1,3 +1,7 @@
<%= introText %>
- \ No newline at end of file + \ No newline at end of file From a7163bb80d35edee33b692f850425499eb5d9749 Mon Sep 17 00:00:00 2001 From: Julian Garritano Date: Mon, 6 Jul 2015 15:28:16 -0400 Subject: [PATCH 3/8] Resized 2x image renders strangely on lo-dpi screens. Must use 2 images. --- src/stylesheets/conversation.less | 17 +++++++++++++++-- src/templates/conversation.tpl | 3 ++- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/stylesheets/conversation.less b/src/stylesheets/conversation.less index 95fdafa8..bcd1ad79 100644 --- a/src/stylesheets/conversation.less +++ b/src/stylesheets/conversation.less @@ -124,13 +124,26 @@ margin-left: ~"calc(50% - 100px)"; color: #bbbbbb; font-size: 12px; - opacity: 0.6; + // opacity: 0.6; - .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 index d5e80b74..df4f72ce 100644 --- a/src/templates/conversation.tpl +++ b/src/templates/conversation.tpl @@ -2,6 +2,7 @@
\ No newline at end of file From ecfd2fefe4d2ffbd2244a531a525b0658506bc27 Mon Sep 17 00:00:00 2001 From: Julian Garritano Date: Mon, 6 Jul 2015 15:33:13 -0400 Subject: [PATCH 4/8] comment --- src/stylesheets/conversation.less | 1 - 1 file changed, 1 deletion(-) diff --git a/src/stylesheets/conversation.less b/src/stylesheets/conversation.less index bcd1ad79..3390379c 100644 --- a/src/stylesheets/conversation.less +++ b/src/stylesheets/conversation.less @@ -124,7 +124,6 @@ margin-left: ~"calc(50% - 100px)"; color: #bbbbbb; font-size: 12px; - // opacity: 0.6; .sk-image, .sk-image-retina { position: relative; From 15ca53e8f1149accf9462cb1a39d661b1f85e13d Mon Sep 17 00:00:00 2001 From: Marc-Antoine Lemieux Date: Fri, 10 Jul 2015 09:45:25 -0400 Subject: [PATCH 5/8] fixed check for conversation started --- src/js/controllers/chatController.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/controllers/chatController.js b/src/js/controllers/chatController.js index a577e743..ce99f62a 100644 --- 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)); } From 19f7817e328263f9feca9b20b6214cfd7704c296 Mon Sep 17 00:00:00 2001 From: Marc-Antoine Lemieux Date: Fri, 10 Jul 2015 10:05:39 -0400 Subject: [PATCH 6/8] switched margin to padding for proper outerHeight calculation (thanks @juliangarritano) --- src/stylesheets/conversation.less | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/stylesheets/conversation.less b/src/stylesheets/conversation.less index 3390379c..78c52b0a 100644 --- a/src/stylesheets/conversation.less +++ b/src/stylesheets/conversation.less @@ -14,12 +14,8 @@ 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; @@ -58,7 +54,7 @@ } } &.sk-left-row { - margin-top: 30px; + padding-top: 30px; .sk-msg-wrapper { display: inline-block; @@ -84,7 +80,7 @@ } } &.sk-right-row { - margin-top: 10px; + padding-top: 10px; .sk-msg { background-color: #00aeff; @@ -129,7 +125,7 @@ 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; } @@ -138,7 +134,7 @@ .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; From 42f9ba2b4a0c60168d898efaab27134e170e5f55 Mon Sep 17 00:00:00 2001 From: Dhiren Audich Date: Fri, 10 Jul 2015 15:58:55 -0400 Subject: [PATCH 7/8] fixing path for dist --- example/template/demo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/template/demo.html b/example/template/demo.html index 6d239e21..946ff458 100644 --- a/example/template/demo.html +++ b/example/template/demo.html @@ -6,7 +6,7 @@ Conversation Demo - +