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:
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 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 {
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
View file @ 07ac8d4a
......@@ -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
View file @ 07ac8d4a
......@@ -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
View file @ 07ac8d4a
......@@ -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
View file @ 07ac8d4a
......@@ -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
View file @ 07ac8d4a
......@@ -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
View file @ 07ac8d4a
......@@ -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>
......
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 @@
<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
View file @ 07ac8d4a
......@@ -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
View file @ 07ac8d4a
......@@ -261,6 +261,7 @@
}
.chatroom-form {
height: 100%;
width: 100%;
margin-top: 2em;
label,
......
sass/_muc_embedded.scss
View file @ 07ac8d4a
......@@ -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
View file @ 07ac8d4a
......@@ -51,4 +51,5 @@
@import "../headline";
@import "minimized_chats";
@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