Various HTML/CSS fixes for the demos, particularly embedded MUC

Makefile

@@ -124,7 +124,6 @@ clean:
 	rm dist/*.min.js
 	rm css/theme.min.css
 	rm css/converse.min.css
-	rm css/converse-muc-embedded.css
 	rm css/*.map
 
 .PHONY: dev
@@ -134,14 +133,11 @@ dev: stamp-bundler stamp-npm
 ## Builds
 
 .PHONY: css
-css: dev sass/*.scss css/converse.css css/converse.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css
+css: dev sass/*.scss css/converse.css css/converse.min.css css/theme.min.css css/inverse.css css/inverse.min.css
 
 css/inverse.css:: dev sass sass
 	$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/inverse/inverse.scss css/inverse.css
 
-css/converse-muc-embedded.css:: dev sass
-	$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/_muc_embedded.scss css/converse-muc-embedded.css
-
 css/converse.css:: dev sass
 	$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/converse/converse.scss css/converse.css
 
@@ -151,7 +147,7 @@ css/%.min.css:: css/%.css
 
 .PHONY: watch
 watch: dev
-	$(SASS) --watch -I $(BOURBON) -I $(BOOTSTRAP) sass/converse/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css sass/inverse/inverse.scss:css/inverse.css
+	$(SASS) --watch -I $(BOURBON) -I $(BOOTSTRAP) sass/converse/converse.scss:css/converse.css sass/inverse/inverse.scss:css/inverse.css
 
 .PHONY: watchjs
 watchjs: dev

css/converse-muc-embedded.css

@@ -1,64 +0,0 @@
-/*
-    Color scheme helpers:
-    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
-    http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
- */
-#conversejs.converse-embedded {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  bottom: auto;
-  right: auto;
-  position: relative;
-  width: 100%; }
-  #conversejs.converse-embedded *, #conversejs.converse-embedded *:before, #conversejs.converse-embedded *:after {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box; }
-  #conversejs.converse-embedded form.converse-centered-form {
-    position: absolute;
-    top: 30%;
-    transform: translateY(-50%); }
-  #conversejs.converse-embedded .chatroom {
-    width: auto; }
-  #conversejs.converse-embedded .flyout {
-    bottom: auto;
-    display: block;
-    position: relative; }
-  #conversejs.converse-embedded .chatbox {
-    float: none; }
-    #conversejs.converse-embedded .chatbox .box-flyout {
-      box-shadow: none; }
-    #conversejs.converse-embedded .chatbox .chat-title {
-      padding: 0.3em;
-      font-size: 120%; }
-  #conversejs.converse-embedded .chatbox-btn {
-    display: none; }
-  #conversejs.converse-embedded .chatroom .box-flyout {
-    min-width: auto;
-    width: 100%;
-    height: 55vh; }
-    #conversejs.converse-embedded .chatroom .box-flyout .chat-body {
-      height: -webkit-calc(100% - 55px);
-      height: calc(100% - 55px); }
-    #conversejs.converse-embedded .chatroom .box-flyout .occupants-heading {
-      font-size: 120%; }
-    #conversejs.converse-embedded .chatroom .box-flyout .chat-content .chat-message {
-      margin: 0.5em;
-      font-size: 120%; }
-    #conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
-      padding: 0.5em;
-      font-size: 110%; }
-    #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container {
-      font-size: 180%;
-      float: left;
-      height: 100%;
-      position: relative; }
-      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input {
-        font-size: 60%; }
-    #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list {
-      padding-left: 0.3em; }
-      #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list li.occupant {
-        font-size: 120%; }
-
-/*# sourceMappingURL=converse-muc-embedded.css.map */

css/converse.css

@@ -7492,7 +7492,9 @@ body.reset {
       padding: 0.5em;
       width: 100%;
       border: none;
-      min-height: 60px; }
+      min-height: 60px;
+      max-height: 200px;
+      margin-bottom: -4px; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
       #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
         height: 42px; }
@@ -8479,6 +8481,7 @@ body.reset {
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
           height: 100%;
+          width: 100%;
           margin-top: 2em; }
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
@@ -8693,4 +8696,66 @@ body.reset {
   background: #3d6b00;
   color: inherit; }
 
+/*
+    Color scheme helpers:
+    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
+    http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
+ */
+#conversejs.converse-embedded {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  bottom: auto;
+  right: auto;
+  position: relative;
+  width: 100%; }
+  #conversejs.converse-embedded *, #conversejs.converse-embedded *:before, #conversejs.converse-embedded *:after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box; }
+  #conversejs.converse-embedded .converse-chatboxes {
+    z-index: 1031;
+    position: inherit;
+    bottom: auto;
+    height: auto;
+    width: 100%; }
+  #conversejs.converse-embedded .chatroom {
+    margin: 0;
+    width: 100%; }
+  #conversejs.converse-embedded .flyout {
+    bottom: auto;
+    display: block;
+    position: relative; }
+  #conversejs.converse-embedded .chatbox {
+    float: none; }
+    #conversejs.converse-embedded .chatbox .box-flyout {
+      box-shadow: none; }
+    #conversejs.converse-embedded .chatbox .chat-title {
+      padding: 0.3em;
+      font-size: 120%; }
+  #conversejs.converse-embedded .chatbox-btn {
+    display: none; }
+  #conversejs.converse-embedded .chatroom .box-flyout {
+    min-width: auto;
+    width: 100%;
+    height: 55vh; }
+    #conversejs.converse-embedded .chatroom .box-flyout .chat-body {
+      height: -webkit-calc(100% - 55px);
+      height: calc(100% - 55px); }
+    #conversejs.converse-embedded .chatroom .box-flyout .occupants-heading {
+      font-size: 120%; }
+    #conversejs.converse-embedded .chatroom .box-flyout .chat-content .chat-message {
+      margin: 0.5em;
+      font-size: 120%; }
+    #conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
+      padding: 0.5em;
+      font-size: 110%; }
+    #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container {
+      height: 100%;
+      position: relative; }
+    #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list {
+      padding-left: 0.3em; }
+      #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list li.occupant {
+        font-size: 120%; }
+
 /*# sourceMappingURL=converse.css.map */

css/inverse.css

@@ -7545,7 +7545,9 @@ body {
       padding: 0.5em;
       width: 100%;
       border: none;
-      min-height: 60px; }
+      min-height: 60px;
+      max-height: 400px;
+      margin-bottom: -4px; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
       #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
         height: 42px; }
@@ -8622,6 +8624,7 @@ body {
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
           height: 100%;
+          width: 100%;
           margin-top: 2em; }
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],

css/theme.css

@@ -242,7 +242,6 @@ a:focus {
   }
 }
 .btn {
-  text-transform: uppercase;
   font-family: FontAwesome;
   font-weight: 400;
   -webkit-transition: all 0.3s ease-in-out;

demo/anonymous.html

@@ -9,14 +9,13 @@
     <meta name="author" content="JC Brand" />
     <meta name="keywords" content="xmpp chat webchat converse.js" />
     <link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="node_modules/font-awesome/css/font-awesome.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/css/theme.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/bootstrap.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/theme.min.css" />
     <script type="text/javascript" src="../analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
-    <![if gte IE 9]>
-        <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/converse.min.css" />
-        <script src="https://cdn.conversejs.org/3.2.1/dist/converse.min.js"></script>
+    <![if gte IE 11]>
+        <link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
+        <script src="/dist/converse.min.js"></script>
     <![endif]>
 </head>
 

demo/embedded.html

@@ -9,15 +9,14 @@
     <meta name="author" content="JC Brand" />
     <meta name="keywords" content="xmpp chat webchat converse.js" />
     <link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/node_modules/bootstrap/dist/css/bootstrap.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/node_modules/font-awesome/css/font-awesome.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/css/theme.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/css/converse.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/css/converse-muc-embedded.min.css" />
-    <script type="text/javascript" src="https://cdn.conversejs.org/analytics.js"></script>
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/bootstrap.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/theme.min.css" />
+    <script type="text/javascript" src="/src/website.js"></script>
+    <script type="text/javascript" src="/analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
     <![if gte IE 11]>
-        <script src="https://cdn.conversejs.org/dist/converse.min.js"></script>
+        <link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
+        <script src="/dist/converse.min.js"></script>
     <![endif]>
 </head>
 

demo/index.html

@@ -8,12 +8,14 @@
     <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 rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="/node_modules/font-awesome/css/font-awesome.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/bootstrap.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/font-awesome.min.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="/css/theme.min.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
-    <script type="text/javascript" src="analytics.js"></script>
+    <script src="/src/website.js"></script>
+    <script type="text/javascript" src="/analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
     <![if gte IE 9]>
         <script src="/dist/converse.min.js"></script>

demo/without_bundled_dependencies.html

@@ -8,10 +8,9 @@
     <meta name="description" content="Converse.js: A free chat client for your website" />
     <meta name="author" content="JC Brand" />
     <link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="../node_modules/font-awesome/css/font-awesome.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="../css/theme.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="../css/converse.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/bootstrap.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/theme.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
 
     <!-- BEGIN OTR: Off-the-record encryption stuff. Can be omitted if OTR is not used. -->
     <script type="text/javascript" src="../node_modules/otr/build/dep/crypto.js"></script>

index.html

@@ -15,7 +15,7 @@
     <link type="text/css" rel="stylesheet" media="screen" href="css/font-awesome.min.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="css/theme.css" />
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
-    <script src="src/website.js"></script>
+    <script type="text/javascript" src="/src/website.js"></script>
     <script type="text/javascript" src="analytics.js"></script>
     <!-- *********************************************************************** -->
 

sass/_chatbox.scss

@@ -329,6 +329,8 @@
                 width: 100%;
                 border: none;
                 min-height: $chat-textarea-height;
+                max-height: $max-chat-textarea-height;
+                margin-bottom: -4px; // Not clear why this is necessar :(
                 &.spoiler {
                     height: 42px;
                 }

sass/_chatrooms.scss

@@ -261,6 +261,7 @@
                     }
                     .chatroom-form {
                         height: 100%;
+                        width: 100%;
                         margin-top: 2em;
 
                         label,

sass/_muc_embedded.scss

@@ -12,16 +12,17 @@
     position: relative;
     width: 100%;
 
-    form {
-        &.converse-centered-form {
-            position: absolute;
-            top: 30%;
-            transform: translateY(-50%);
-        }
+    .converse-chatboxes {
+        z-index: 1031; // One more than bootstrap navbar
+        position: inherit;
+        bottom: auto;
+        height: auto;
+        width: 100%;
     }
 
     .chatroom {
-        width: auto;
+        margin: 0;
+        width: 100%;
     }
     .flyout {
         bottom: auto;
@@ -67,13 +68,8 @@
             }
             .chatroom-body {
                 .chatroom-form-container {
-                    font-size: 180%;
-                    float: left;
                     height: 100%;
                     position: relative;
-                    input {
-                        font-size: 60%;
-                    }
                 }
             }
             .occupants {

sass/converse/converse.scss

@@ -51,4 +51,5 @@
 @import "../headline";
 @import "minimized_chats";
 @import "../bookmarks";
-@import "../awesomplete"
+@import "../awesomplete";
+@import "../muc_embedded";