Make Candy responsive for mobile-friendly display

Fixes #457 #222

4 files changed, 32 insertions, 1 deletions

diff --git a/src/view.js b/src/view.js
index 66c21fe..4805bf0 100644
--- a/src/view.js
+++ b/src/view.js
@@ -129,6 +129,7 @@ Candy.View = (function(self, $) {
 			assetsPath : this.getOptions().assets
 		}, {
 			tabs: Candy.View.Template.Chat.tabs,
+			mobile: Candy.View.Template.Chat.mobileIcon,
 			rooms: Candy.View.Template.Chat.rooms,
 			modal: Candy.View.Template.Chat.modal,
 			toolbar: Candy.View.Template.Chat.toolbar
diff --git a/src/view/pane/chat.js b/src/view/pane/chat.js
index bfabaf7..196ba2f 100644
--- a/src/view/pane/chat.js
+++ b/src/view/pane/chat.js
@@ -199,6 +199,7 @@ Candy.View.Pane = (function(self, $) {
       if (Candy.Core.getOptions().disconnectWithoutTabs) {
         Candy.Core.disconnect();
         self.Chat.Toolbar.hide();
+        self.Chat.hideMobileIcon();
         return;
       }
     },
@@ -221,6 +222,32 @@ Candy.View.Pane = (function(self, $) {
       }
     },
 
+    /** Function: hideMobileIcon
+     * Hide mobile roster pane icon.
+     */
+    hideMobileIcon: function() {
+      $('#mobile-roster-icon').hide();
+    },
+
+    /** Function: showMobileIcon
+     * Show mobile roster pane icon.
+     */
+    showMobileIcon: function() {
+      $('#mobile-roster-icon').show();
+    },
+
+    /** Function: clickMobileIcon
+     * Add class to 'open' roster pane (on mobile).
+     */
+    clickMobileIcon: function(e) {
+      if ($('.room-pane').is('.open')) {
+        $('.room-pane').removeClass('open');
+      } else {
+        $('.room-pane').addClass('open');
+      }
+      e.preventDefault();
+    },
+
     /** Function: adminMessage
      * Display admin message
      *
@@ -343,6 +370,7 @@ Candy.View.Pane = (function(self, $) {
         if(Candy.Util.cookieExists('candy-nostatusmessages')) {
           $('#chat-statusmessage-control').click();
         }
+        $('.box-shadow-icon').click(self.Chat.clickMobileIcon);
       },
 
       /** Function: show
diff --git a/src/view/pane/room.js b/src/view/pane/room.js
index 2b42cd6..22af5d3 100644
--- a/src/view/pane/room.js
+++ b/src/view/pane/room.js
@@ -64,6 +64,7 @@ Candy.View.Pane = (function(self, $) {
       // First room, show sound control
       if(Candy.Util.isEmptyObject(self.Chat.rooms)) {
         self.Chat.Toolbar.show();
+        self.Chat.showMobileIcon();
       }
 
       var roomId = Candy.Util.jidToId(roomJid);
diff --git a/src/view/template.js b/src/view/template.js
index 1e74011..e7c5b8d 100644
--- a/src/view/template.js
+++ b/src/view/template.js
@@ -19,9 +19,10 @@ Candy.View.Template = (function(self){
 	};
 
 	self.Chat = {
-		pane: '<div id="chat-pane">{{> tabs}}{{> toolbar}}{{> rooms}}</div>{{> modal}}',
+		pane: '<div id="chat-pane">{{> tabs}}{{> mobile}}{{> toolbar}}{{> rooms}}</div>{{> modal}}',
 		rooms: '<div id="chat-rooms" class="rooms"></div>',
 		tabs: '<ul id="chat-tabs"></ul>',
+		mobileIcon: '<div id="mobile-roster-icon"><a class="box-shadow-icon"></a></div>',
 		tab: '<li class="roomtype-{{roomType}}" data-roomjid="{{roomJid}}" data-roomtype="{{roomType}}">' +
 				'<a href="#" class="label">{{#privateUserChat}}@{{/privateUserChat}}{{name}}</a>' +
 				'<a href="#" class="transition"></a><a href="#" class="close">\u00D7</a>' +