Skip to content

C
converse.js
Commit 07ac8d4a authored by JC Brand's avatar JC Brand
Browse files
Options

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

parent fb11cfe7
Show whitespace changes
Inline Side-by-side
Showing with 40962 additions and 37675 deletions
Makefile
View file @ 07ac8d4a
...@@ -124,7 +124,6 @@ clean: ...@@ -124,7 +124,6 @@ clean:
rm dist/*.min.js rm dist/*.min.js
rm css/theme.min.css rm css/theme.min.css
rm css/converse.min.css rm css/converse.min.css
rm css/converse-muc-embedded.css
rm css/*.map rm css/*.map
.PHONY: dev .PHONY: dev
...@@ -134,14 +133,11 @@ dev: stamp-bundler stamp-npm ...@@ -134,14 +133,11 @@ dev: stamp-bundler stamp-npm
## Builds ## Builds
.PHONY: css .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 css/inverse.css:: dev sass sass
$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/inverse/inverse.scss css/inverse.css $(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 css/converse.css:: dev sass
$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/converse/converse.scss css/converse.css $(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/converse/converse.scss css/converse.css
...@@ -151,7 +147,7 @@ css/%.min.css:: css/%.css ...@@ -151,7 +147,7 @@ css/%.min.css:: css/%.css
.PHONY: watch .PHONY: watch
watch: dev 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 .PHONY: watchjs
watchjs: dev watchjs: dev
......
css/converse-muc-embedded.css deleted 100644 → 0
View file @ fb11cfe7
/*
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
View file @ 07ac8d4a
...@@ -7492,7 +7492,9 @@ body.reset { ...@@ -7492,7 +7492,9 @@ body.reset {
padding: 0.5em; padding: 0.5em;
width: 100%; width: 100%;
border: none; border: none;
min-height: 60px; } min-height: 60px;
max-height: 200px;
margin-bottom: -4px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
#conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler { #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
height: 42px; } height: 42px; }
...@@ -8479,6 +8481,7 @@ body.reset { ...@@ -8479,6 +8481,7 @@ body.reset {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form { #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
height: 100%; height: 100%;
width: 100%;
margin-top: 2em; } 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 label,
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
...@@ -8693,4 +8696,66 @@ body.reset { ...@@ -8693,4 +8696,66 @@ body.reset {
background: #3d6b00; background: #3d6b00;
color: inherit; } 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 */ /*# sourceMappingURL=converse.css.map */
css/inverse.css
View file @ 07ac8d4a
...@@ -7545,7 +7545,9 @@ body { ...@@ -7545,7 +7545,9 @@ body {
padding: 0.5em; padding: 0.5em;
width: 100%; width: 100%;
border: none; border: none;
min-height: 60px; } min-height: 60px;
max-height: 400px;
margin-bottom: -4px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
#conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler { #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
height: 42px; } height: 42px; }
...@@ -8622,6 +8624,7 @@ body { ...@@ -8622,6 +8624,7 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form { #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
height: 100%; height: 100%;
width: 100%;
margin-top: 2em; } 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 label,
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
......
css/theme.css
View file @ 07ac8d4a
...@@ -242,7 +242,6 @@ a:focus { ...@@ -242,7 +242,6 @@ a:focus {
} }
} }
.btn { .btn {
text-transform: uppercase;
font-family: FontAwesome; font-family: FontAwesome;
font-weight: 400; font-weight: 400;
-webkit-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;
......
demo/anonymous.html
View file @ 07ac8d4a
...@@ -9,14 +9,13 @@ ...@@ -9,14 +9,13 @@
<meta name="author" content="JC Brand" /> <meta name="author" content="JC Brand" />
<meta name="keywords" content="xmpp chat webchat converse.js" /> <meta name="keywords" content="xmpp chat webchat converse.js" />
<link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/> <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="/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="https://cdn.conversejs.org/css/theme.min.css" />
<script type="text/javascript" src="../analytics.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> <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<![if gte IE 9]> <![if gte IE 11]>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/converse.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
<script src="https://cdn.conversejs.org/3.2.1/dist/converse.min.js"></script> <script src="/dist/converse.min.js"></script>
<![endif]> <![endif]>
</head> </head>
......
demo/embedded.html
View file @ 07ac8d4a
...@@ -9,15 +9,14 @@ ...@@ -9,15 +9,14 @@
<meta name="author" content="JC Brand" /> <meta name="author" content="JC Brand" />
<meta name="keywords" content="xmpp chat webchat converse.js" /> <meta name="keywords" content="xmpp chat webchat converse.js" />
<link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/> <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="/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="/css/theme.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/css/theme.min.css" /> <script type="text/javascript" src="/src/website.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/css/converse.min.css" /> <script type="text/javascript" src="/analytics.js"></script>
<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>
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript> <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<![if gte IE 11]> <![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]> <![endif]>
</head> </head>
......
demo/index.html
View file @ 07ac8d4a
...@@ -8,12 +8,14 @@ ...@@ -8,12 +8,14 @@
<meta name="description" content="Converse.js: A free chat client for your website" /> <meta name="description" content="Converse.js: A free chat client for your website" />
<meta name="author" content="JC Brand" /> <meta name="author" content="JC Brand" />
<meta name="keywords" content="xmpp chat webchat converse.js" /> <meta name="keywords" content="xmpp chat webchat converse.js" />
<link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/> <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="/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/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/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/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> <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<![if gte IE 9]> <![if gte IE 9]>
<script src="/dist/converse.min.js"></script> <script src="/dist/converse.min.js"></script>
......
demo/without_bundled_dependencies.html
View file @ 07ac8d4a
...@@ -8,10 +8,9 @@ ...@@ -8,10 +8,9 @@
<meta name="description" content="Converse.js: A free chat client for your website" /> <meta name="description" content="Converse.js: A free chat client for your website" />
<meta name="author" content="JC Brand" /> <meta name="author" content="JC Brand" />
<link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/> <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="/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/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/converse.min.css" />
<!-- BEGIN OTR: Off-the-record encryption stuff. Can be omitted if OTR is not used. --> <!-- 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> <script type="text/javascript" src="../node_modules/otr/build/dep/crypto.js"></script>
......
dist/converse-muc-embedded.js
View file @ 07ac8d4a
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/converse-no-dependencies.js
View file @ 07ac8d4a
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/converse.js
View file @ 07ac8d4a
This source diff could not be displayed because it is too large. You can view the blob instead.
index.html
View file @ 07ac8d4a
...@@ -15,7 +15,7 @@ ...@@ -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/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/theme.css" />
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript> <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> <script type="text/javascript" src="analytics.js"></script>
<!-- *********************************************************************** --> <!-- *********************************************************************** -->
......
sass/_chatbox.scss
View file @ 07ac8d4a
...@@ -329,6 +329,8 @@ ...@@ -329,6 +329,8 @@
width: 100%; width: 100%;
border: none; border: none;
min-height: $chat-textarea-height; min-height: $chat-textarea-height;
max-height: $max-chat-textarea-height;
margin-bottom: -4px; // Not clear why this is necessar :(
&.spoiler { &.spoiler {
height: 42px; height: 42px;
} }
......
sass/_chatrooms.scss
View file @ 07ac8d4a
...@@ -261,6 +261,7 @@ ...@@ -261,6 +261,7 @@
} }
.chatroom-form { .chatroom-form {
height: 100%; height: 100%;
width: 100%;
margin-top: 2em; margin-top: 2em;
label, label,
......
sass/_muc_embedded.scss
View file @ 07ac8d4a
...@@ -12,16 +12,17 @@ ...@@ -12,16 +12,17 @@
position: relative; position: relative;
width: 100%; width: 100%;
form { .converse-chatboxes {
&.converse-centered-form { z-index: 1031; // One more than bootstrap navbar
position: absolute; position: inherit;
top: 30%; bottom: auto;
transform: translateY(-50%); height: auto;
} width: 100%;
} }
.chatroom { .chatroom {
width: auto; margin: 0;
width: 100%;
} }
.flyout { .flyout {
bottom: auto; bottom: auto;
...@@ -67,13 +68,8 @@ ...@@ -67,13 +68,8 @@
} }
.chatroom-body { .chatroom-body {
.chatroom-form-container { .chatroom-form-container {
font-size: 180%;
float: left;
height: 100%; height: 100%;
position: relative; position: relative;
input {
font-size: 60%;
}
} }
} }
.occupants { .occupants {
......
sass/converse/converse.scss
View file @ 07ac8d4a
...@@ -51,4 +51,5 @@ ...@@ -51,4 +51,5 @@
@import "../headline"; @import "../headline";
@import "minimized_chats"; @import "minimized_chats";
@import "../bookmarks"; @import "../bookmarks";
@import "../awesomplete" @import "../awesomplete";
@import "../muc_embedded";
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7