From 0b710b807d2a3aa70535325466dfb83d93a931a4 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Sun, 11 May 2014 20:09:16 +0200
Subject: [PATCH] Update mockup with new theme and fix css

---
 css/converse.css      | 44 +++++++++++++++++++------------------
 index.html            | 10 ++++-----
 less/converse.less    | 50 +++++++++++++++++++++++--------------------
 mockup/index.html     | 23 ++++++++++----------
 mockup/minimized.html |  8 +++----
 5 files changed, 70 insertions(+), 65 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index 5f60ccdb4..d3e23f35c 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -406,6 +406,12 @@ you can use the generic selector below, but it's slower:
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
+#conversejs div {
+  box-sizing: border-box;
+}
+#conversejs ul li {
+  height: auto;
+}
 #conversejs div,
 #conversejs span,
 #conversejs h1,
@@ -535,11 +541,10 @@ span.spinner.hor_centered {
   height: auto;
 }
 #conversejs #offscreen-chatboxes .box-flyout .chat-head {
-  margin: 0;
   font-size: 100%;
   border-radius: 4px;
   padding: 3px 0 0 5px;
-  margin-bottom: 2px;
+  margin: 0 0 2px 2px;
   box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
   height: 24px;
 }
@@ -555,11 +560,11 @@ span.spinner.hor_centered {
 }
 #conversejs .chat-head {
   color: #ffffff;
-  margin: 0;
   font-size: 100%;
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
-  padding: 3px 0 0 3px;
+  padding: 2px 2px 2px 4px;
+  margin: 0;
 }
 #conversejs .chat-head-chatbox {
   background-color: #2D617A;
@@ -571,18 +576,9 @@ span.spinner.hor_centered {
   background-color: white;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
+  height: 289px;
   border-top: 0;
 }
-#conversejs .chatbox .chat-body {
-  height: -moz-calc(62%);
-  height: -o-calc(62%);
-  height: calc(62%);
-}
-#conversejs .chatroom .chat-body {
-  height: -moz-calc(62%);
-  height: -o-calc(62%);
-  height: calc(62%);
-}
 #conversejs .chatroom .chat-area {
   float: left;
   width: 200px;
@@ -590,12 +586,12 @@ span.spinner.hor_centered {
 }
 #conversejs .chatroom .participants {
   float: left;
-  height: 100%;
   background-color: white;
   overflow: auto;
   border-left: 1px solid #AAA;
-  max-width: 98px;
+  width: 100px;
   border-bottom-right-radius: 4px;
+  height: 289px;
 }
 #conversejs .participants ul.participant-list li {
   overflow: hidden;
@@ -702,12 +698,11 @@ input.error {
   margin-right: 6px;
 }
 #conversejs .chat-title {
+  padding: 1px 0;
   color: white;
   font-weight: bold;
   line-height: 15px;
   display: block;
-  margin-top: 2px;
-  margin-right: 20px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -732,6 +727,7 @@ input.error {
   text-overflow: ellipsis;
   white-space: nowrap;
   margin: 0;
+  padding: 1px 0;
 }
 #conversejs div.chat-head-chatbox a.user-custom-message {
   color: white;
@@ -1159,6 +1155,9 @@ select#select-xmpp-status {
   resize: none;
   height: 62px;
 }
+#conversejs .chatroom .chat-textarea {
+  border-bottom-right-radius: 0;
+}
 #conversejs ul.chat-toolbar {
   font-size: 14px;
   margin: 0;
@@ -1329,16 +1328,19 @@ input.custom-xmpp-status {
   z-index: 22;
 }
 #conversejs .box-flyout {
-  position: absolute;
-  display: block;
+  border-radius: 4px;
   bottom: 6px;
   box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-  border-radius: 4px;
+  display: block;
   height: 324px;
+  position: absolute;
 }
 #conversejs .box-flyout.minimized {
   height: auto;
 }
+#conversejs .box-flyout.minimized .chat-head {
+  border-radius: 4px;
+}
 #conversejs .chatbox .box-flyout {
   width: 200px;
 }
diff --git a/index.html b/index.html
index 817b9760b..540667454 100644
--- a/index.html
+++ b/index.html
@@ -8,10 +8,10 @@
     <meta name="description" content="Converse.js: A free chat client for your website" />
     <meta name="author" content="JC Brand" />
     <meta name="keywords" content="xmpp chat webchat converse.js" />
-    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
-    <link href="css/theme.css" rel="stylesheet" type="text/css" media="screen" />
-    <link href="css/converse.css" rel="stylesheet" type="text/css" media="screen" />
+    <link type="text/css" rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="css/theme.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
     <script data-main="main" src="components/requirejs/require.js"></script>
 </head>
 
@@ -211,7 +211,7 @@
     </section>
 
     <!-- Core JavaScript Files -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="../components/jquery/dist/jquery.min.js"></script>
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
     <!-- Custom Theme JavaScript -->
diff --git a/less/converse.less b/less/converse.less
index b78e3c6ce..e8bf528b0 100644
--- a/less/converse.less
+++ b/less/converse.less
@@ -416,6 +416,14 @@ you can use the generic selector below, but it's slower:
     -webkit-box-sizing: border-box;
 }
 
+#conversejs div {
+    box-sizing: border-box;
+}
+
+#conversejs ul li {
+    height: auto;
+}
+
 #conversejs div,
 #conversejs span,
 #conversejs h1,
@@ -560,11 +568,10 @@ span.spinner.hor_centered {
 }
 
 #conversejs #offscreen-chatboxes .box-flyout .chat-head {
-    margin: 0;
     font-size: 100%;
     border-radius: 4px;
     padding: 3px 0 0 5px;
-    margin-bottom: 2px;
+    margin: 0 0 2px 2px;
     box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
     height: 24px;
 }
@@ -584,11 +591,11 @@ span.spinner.hor_centered {
 
 #conversejs .chat-head {
     color: #ffffff;
-    margin: 0;
     font-size: 100%;
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
-    padding: 3px 0 0 3px;
+    padding: 2px 2px 2px 4px;
+    margin: 0;
 }
 
 #conversejs .chat-head-chatbox {
@@ -603,21 +610,10 @@ span.spinner.hor_centered {
     background-color: white;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
+    height: 289px;
     border-top: 0;
 }
 
-#conversejs .chatbox .chat-body {
-    height: -moz-calc(100% - 38px);
-    height: -o-calc(100% - 38px);
-    height: calc(100% - 38px);
-}
-
-#conversejs .chatroom .chat-body {
-    height: -moz-calc(100% - 38px);
-    height: -o-calc(100% - 38px);
-    height: calc(100% - 38px);
-}
-
 #conversejs .chatroom .chat-area {
     float: left;
     width: 200px;
@@ -626,12 +622,12 @@ span.spinner.hor_centered {
 
 #conversejs .chatroom .participants {
     float: left;
-    height: 100%;
     background-color: white;
     overflow: auto;
     border-left: 1px solid #AAA;
-    max-width: 98px;
+    width: 100px;
     border-bottom-right-radius: 4px;
+    height: 289px;
 }
 
 #conversejs .participants ul.participant-list li {
@@ -761,12 +757,11 @@ input.error {
 }
 
 #conversejs .chat-title {
+    padding: 1px 0;
     color: white;
     font-weight: bold;
     line-height: 15px;
     display: block;
-    margin-top: 2px;
-    margin-right: 20px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -794,6 +789,7 @@ input.error {
     text-overflow: ellipsis;
     white-space: nowrap;
     margin: 0;
+    padding: 1px 0;
 }
 
 #conversejs div.chat-head-chatbox a.user-custom-message {
@@ -1293,6 +1289,10 @@ select#select-xmpp-status {
     height: 62px;
 }
 
+#conversejs .chatroom .chat-textarea {
+    border-bottom-right-radius: 0;
+}
+
 #conversejs ul.chat-toolbar {
     font-size: 14px;
     margin: 0;
@@ -1498,18 +1498,22 @@ input.custom-xmpp-status {
 }
 
 #conversejs .box-flyout {
-    position: absolute;
-    display: block;
+    border-radius: 4px;
     bottom: 6px;
     box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
-    border-radius: 4px;
+    display: block;
     height: 324px;
+    position: absolute;
 }
 
 #conversejs .box-flyout.minimized {
     height: auto;
 }
 
+#conversejs .box-flyout.minimized .chat-head {
+    border-radius: 4px;
+}
+
 #conversejs .chatbox .box-flyout {
     width: 200px;
 }
diff --git a/mockup/index.html b/mockup/index.html
index 4c4ddad6f..9de2ab47a 100644
--- a/mockup/index.html
+++ b/mockup/index.html
@@ -4,12 +4,13 @@
     <title id="pageTitle">Converse.js: Mockup</title>
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta name="description" content="Converse.js: Chat Client for Websites" />
-    <link type="text/css" rel="stylesheet" href="../stylesheets/stylesheet.css">
-    <link type="text/css" rel="stylesheet" href="../converse.css">
+    <meta name="description" content="Converse.js: Mockup" />
+    <link type="text/css" href="../css/theme.css" rel="stylesheet" media="screen" />
+    <link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
     <script src="../components/jquery/dist/jquery.min.js"></script>
 </head>
-<body>
+<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
+
 <!-- HEADER -->
 <div id="header_wrap" class="outer">
     <header class="inner">
@@ -201,7 +202,7 @@
             <div class="chat-head chat-head-chatbox">
                 <a class="close-chatbox-button icon-close"></a>
                 <a class="toggle-chatbox-button icon-minus"></a>
-                <canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
+                <canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
                 <div class="chat-title">
                     <a href="http://opkode.com" target="_blank" class="user">
                         JC Brand
@@ -438,12 +439,10 @@ $(document).ready(function () {
             $tab_panel = $($tab.attr('href')),
             $sibling_panel = $($sibling.attr('href'));
 
-        $sibling_panel.fadeOut('fast', function () {
-            $sibling.removeClass('current');
-            $tab.addClass('current');
-            $tab_panel.fadeIn('fast', function () {
-            });
-        });
+        $sibling_panel.hide();
+        $sibling.removeClass('current');
+        $tab.addClass('current');
+        $tab_panel.show();
     }
 
     $(function() {
@@ -459,7 +458,7 @@ $(document).ready(function () {
 
         $('.toggle-chatbox-button').click(function(ev) {
             var $grandparent = $(ev.target).parent().parent().parent();
-            $grandparent.find('.chat-body').slideToggle(300);
+            $grandparent.find('.chat-body').slideToggle('fast');
             var flyout = $grandparent.find('.box-flyout');
             if (flyout.hasClass('minimized')) {
                 flyout.removeClass('minimized');
diff --git a/mockup/minimized.html b/mockup/minimized.html
index 192270f66..7196e3c07 100644
--- a/mockup/minimized.html
+++ b/mockup/minimized.html
@@ -5,9 +5,9 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="description" content="Converse.js: Chat Client for Websites" />
-    <link type="text/css" rel="stylesheet" href="../stylesheets/stylesheet.css">
-    <link type="text/css" rel="stylesheet" href="../converse.css">
-    <script src="../components/jquery/jquery.min.js"></script>
+    <link type="text/css" href="../css/theme.css" rel="stylesheet" media="screen" />
+    <link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
+    <script src="../components/jquery/dist/jquery.min.js"></script>
 </head>
 <body>
 <!-- HEADER -->
@@ -27,7 +27,7 @@
                 <div class="chat-head-message-count" style="display:block">3</div>
                 <a class="close-chatbox-button icon-close"></a>
                 <a class="toggle-chatbox-button icon-minus"></a>
-                <canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
+                <canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
                 <div class="chat-title">
                     <a href="http://opkode.com" target="_blank" class="user">
                         JC Brand