Skip to content

C
converse.js
Commit 808155bc authored by JC Brand's avatar JC Brand
Browse files
Options

Place chat boxes inside bootstrap rows 

instead of the other way around.
parent 7f8b42fa
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 9783 additions and 12900 deletions
Makefile
View file @ 808155bc
...@@ -3,7 +3,7 @@ SHELL := /bin/bash --login ...@@ -3,7 +3,7 @@ SHELL := /bin/bash --login
UGLIFYJS ?= node_modules/.bin/uglifyjs UGLIFYJS ?= node_modules/.bin/uglifyjs
BABEL ?= node_modules/.bin/babel BABEL ?= node_modules/.bin/babel
BOURBON = ./node_modules/bourbon/app/assets/stylesheets/ BOURBON = ./node_modules/bourbon/app/assets/stylesheets/
BOOTSTRAP = ./node_modules/bootstrap/scss/ BOOTSTRAP = ./node_modules/
BUILDDIR = ./docs BUILDDIR = ./docs
BUNDLE ?= ./.bundle/bin/bundle BUNDLE ?= ./.bundle/bin/bundle
CHROMIUM ?= ./node_modules/.bin/run-headless-chromium CHROMIUM ?= ./node_modules/.bin/run-headless-chromium
......
css/bootstrap.min.css deleted 100644 → 0
View file @ 7f8b42fa
This source diff could not be displayed because it is too large. You can view the blob instead.
css/converse.css
View file @ 808155bc
This diff is collapsed.
css/font-awesome.min.css deleted 100644 → 0
View file @ 7f8b42fa
This diff is collapsed.
css/inverse.css
View file @ 808155bc
This diff is collapsed.
css/theme.css
View file @ 808155bc
...@@ -5,6 +5,17 @@ body { ...@@ -5,6 +5,17 @@ body {
color: #ffffff; color: #ffffff;
background-color: #211018; background-color: #211018;
} }
body .brand-heading {
margin: auto;
font-size: 6em;
font-weight: bold;
}
body .brand-heading .icon-conversejs {
font-size: 0.88em;
}
html { html {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -43,6 +54,14 @@ a:focus { ...@@ -43,6 +54,14 @@ a:focus {
text-decoration: none; text-decoration: none;
color: #00aaff; color: #00aaff;
} }
.converse-bg {
position: relative;
height: 100vh;
text-align: center;
color: #fff;
}
.light { .light {
font-weight: 400; font-weight: 400;
} }
......
mockup/chatbox.html
View file @ 808155bc
This diff is collapsed.
mockup/chatroom.html
View file @ 808155bc
This diff is collapsed.
mockup/converse.html
View file @ 808155bc
This diff is collapsed.
mockup/fullscreen-login.html
View file @ 808155bc
...@@ -3,84 +3,53 @@ ...@@ -3,84 +3,53 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Converse.js Mockups</title> <title>Login Fullscreen</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
</head> </head>
<body> <body>
<div class="container converse-bg"> <div class="container converse-bg">
<h1 class="brand-heading"><i class="icon-conversejs"></i>&nbsp;inVerse</h1> <h1 class="brand-heading"><i class="icon-conversejs"></i>&nbsp;inVerse</h1>
</div> </div>
<div class="container-fluid"> <div id="conversejs" class="fullscreen">
<div id="conversejs" class="fullscreen"> <div class="row no-gutters">
<div id="controlbox" class="chatbox"> <div id="controlbox" class="chatbox">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane"> <div id="login-dialog" class="controlbox-pane">
<div class="row"> <div class="row">
<div class="brand-heading-container col-12"> <div class="brand-heading-container col-12">
<h1 class="brand-heading"> <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
<i class="icon-conversejs"></i> inVerse</h1> <p><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
<p> </div>
<a href="https://conversejs.org">Open Source</a> XMPP chat client</p> </div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3"> <div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<form id="converse-login" class="pure-form converse-form"> <form id="converse-login" class="pure-form converse-form">
<div class="form-group"> <div class="form-group">
<label for="jid">XMPP Username:</label> <label for="jid">XMPP Username:</label>
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off"> <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password">Password:</label> <label for="password">Password:</label>
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off"> <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
</div> </div>
<fieldset class="buttons"> <fieldset class="buttons">
<p><input class="btn btn-primary" type="submit" value="Log In"></p> <p><input class="btn btn-primary" type="submit" value="Log In"></p>
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p> <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
</fieldset> </fieldset>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Register Modal --> </div>
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="registerModalLabel">Register</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="converse-register">
<div class="form-group">
<label for="domain">Your XMPP provider's domain name:</label>
<input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
</div>
<p>Tip: A list of public XMPP providers is available
<a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
<input class="btn btn-primary" type="submit" value="Fetch registration form">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body> </body>
</html> </html>
mockup/modals.html
View file @ 808155bc
<!-- Register Modal -->
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="registerModalLabel">Register</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="converse-register">
<div class="form-group">
<label for="domain">Your XMPP provider's domain name:</label>
<input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
</div>
<p>Tip: A list of public XMPP providers is available
<a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
<input class="btn btn-primary" type="submit" value="Fetch registration form">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Contact Profile Modal -->
<div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- User Profile Modal --> <!-- User Profile Modal -->
<div class="modal fade" id="userProfileModal" tabindex="-1" role="dialog" aria-labelledby="userProfileModalLabel" aria-hidden="true"> <div class="modal fade" id="userProfileModal" tabindex="-1" role="dialog" aria-labelledby="userProfileModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
......
mockup/overlayed-login.html
View file @ 808155bc
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Converse.js Mockups</title> <title>Login Overlayed</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" /> <link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
...@@ -15,64 +15,55 @@ ...@@ -15,64 +15,55 @@
</div> </div>
<div id="conversejs"> <div id="conversejs">
<div id="controlbox" class="chatbox"> <div class="row no-gutters">
<div class="flyout box-flyout"> <div id="controlbox" class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12">
<div class="controlbox-panes"> <div class="flyout box-flyout">
<div id="login-dialog" class="controlbox-pane"> <div class="controlbox-panes">
<div class="row"> <div id="login-dialog" class="controlbox-pane row">
<div class="brand-heading-container col-12"> <div class="brand-heading-container col-12">
<h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1> <h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
</div> </div>
<div class="col-12"> <div class="col-12">
<form id="converse-login" class="pure-form converse-form"> <form id="converse-login" class="pure-form converse-form">
<div class="form-group"> <div class="form-group">
<label for="jid">XMPP Username:</label> <label for="jid">XMPP Username:</label>
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off"> <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password">Password:</label> <label for="password">Password:</label>
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off"> <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
</div> </div>
<p></p> <p></p>
<p><input class="btn btn-primary" type="submit" value="Log In"></p> <p><input class="btn btn-primary" type="submit" value="Log In"></p>
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p> <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="modals"></div>
</div> </div>
<!-- Register Modal --> <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true"> <script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
<div class="modal-dialog" role="document"> <script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
<div class="modal-content">
<div class="modal-header"> <script type="text/javascript" src="sidebar.js"></script>
<h5 class="modal-title" id="registerModalLabel">Register</h5> <script type="text/javascript" src="user-panel.js"></script>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <script type="text/javascript" src="modals.js"></script>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="converse-register">
<div class="form-group">
<label for="domain">Your XMPP provider's domain name:</label>
<input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
</div>
<p>Tip: A list of public XMPP providers is available
<a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
<input class="btn btn-primary" type="submit" value="Fetch registration form">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
new Modals();
new Sidebar();
new UserPanel();
});
</script>
</body>
</html> </html>
sass/_chatbox.scss
View file @ 808155bc
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
border-radius: 0; border-radius: 0;
} }
bottom: $chatbox-hover-height; bottom: $chatbox-hover-height;
display: block;
position: absolute; position: absolute;
@media screen and (max-height: $mobile-landscape-height) { @media screen and (max-height: $mobile-landscape-height) {
bottom: 0; bottom: 0;
} }
...@@ -65,12 +65,10 @@ ...@@ -65,12 +65,10 @@
} }
} }
.chatbox { .chatbox {
display: block;
text-align: left; text-align: left;
float: right;
height: $bottom-gutter-height; height: $bottom-gutter-height;
margin: 0 $chat-gutter; margin: 0 $chat-gutter;
width: $chat-width;
@media screen and (max-height: $mobile-landscape-height) { @media screen and (max-height: $mobile-landscape-height) {
margin: 0; margin: 0;
width: $mobile-chat-width; width: $mobile-chat-width;
...@@ -84,9 +82,10 @@ ...@@ -84,9 +82,10 @@
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: $chat-height; height: $chat-height;
min-height: $chat-height/2; min-height: $chat-height/2;
min-width: $chat-width;
width: $chat-width;
z-index: 1; z-index: 1;
overflow-y: scroll;
width: 100%;
@media screen and (max-height: $mobile-landscape-height) { @media screen and (max-height: $mobile-landscape-height) {
height: $mobile-chat-height; height: $mobile-chat-height;
width: $mobile-chat-width; width: $mobile-chat-width;
...@@ -448,9 +447,6 @@ ...@@ -448,9 +447,6 @@
padding: 3em 2em 3em; padding: 3em 2em 3em;
} }
} }
> .chatbox {
width: calc(100% - 50px);
}
.chatbox { .chatbox {
.chat-body { .chat-body {
.chat-message { .chat-message {
...@@ -460,8 +456,6 @@ ...@@ -460,8 +456,6 @@
} }
} }
.row { .row {
width: calc(100% - 50px);
.box-flyout { .box-flyout {
left: 50px; left: 50px;
bottom: 0; bottom: 0;
......
sass/_chatrooms.scss
View file @ 808155bc
...@@ -49,8 +49,7 @@ ...@@ -49,8 +49,7 @@
} }
.box-flyout { .box-flyout {
min-width: $chatroom-width; width: 100%;
width: $chatroom-width;
@media screen and (max-height: $mobile-landscape-height) { @media screen and (max-height: $mobile-landscape-height) {
height: $mobile-chat-height; height: $mobile-chat-height;
width: $mobile-chat-width; width: $mobile-chat-width;
...@@ -70,6 +69,10 @@ ...@@ -70,6 +69,10 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
.row {
flex-direction: row;
}
.chat-info { .chat-info {
color: white; color: white;
line-height: normal; line-height: normal;
...@@ -99,8 +102,6 @@ ...@@ -99,8 +102,6 @@
} }
.chat-area { .chat-area {
word-wrap: break-word; word-wrap: break-word;
width: 100%;
float: left;
min-width: $chat-width; min-width: $chat-width;
height: calc(100% - 95px); height: calc(100% - 95px);
...@@ -121,13 +122,10 @@ ...@@ -121,13 +122,10 @@
.occupants { .occupants {
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
float: right;
vertical-align: top; vertical-align: top;
background-color: white; background-color: white;
border-left: 1px solid $text-color; border-left: 1px solid $text-color;
border-bottom-right-radius: $chatbox-border-radius; border-bottom-right-radius: $chatbox-border-radius;
width: 30%;
height: 100%;
padding: 0.5em; padding: 0.5em;
.occupants-heading { .occupants-heading {
padding: 0.3em 0; padding: 0.3em 0;
......
sass/_controlbox.scss
View file @ 808155bc
...@@ -2,13 +2,6 @@ ...@@ -2,13 +2,6 @@
#controlbox { #controlbox {
margin-right: 2*$chat-gutter; margin-right: 2*$chat-gutter;
@media screen and (max-width: $mobile-portrait-length) {
margin: 0;
}
@media screen and (max-height: $mobile-landscape-height) {
margin: 0;
}
.pure-form.converse-form { .pure-form.converse-form {
padding: 0; padding: 0;
} }
...@@ -122,6 +115,8 @@ ...@@ -122,6 +115,8 @@
} }
#login-dialog { #login-dialog {
flex-direction: column;
.brand-heading { .brand-heading {
color: $global-background-color; color: $global-background-color;
} }
...@@ -409,7 +404,6 @@ ...@@ -409,7 +404,6 @@
} }
.controlbox-panes { .controlbox-panes {
height: 100%;
overflow-y: scroll; overflow-y: scroll;
} }
...@@ -420,9 +414,7 @@ ...@@ -420,9 +414,7 @@
font-size: $font-size; font-size: $font-size;
left: 0; left: 0;
text-align: left; text-align: left;
width: 100%; overflow-y: scroll;
height: 100%;
overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
...@@ -532,6 +524,7 @@ ...@@ -532,6 +524,7 @@
top: 0; top: 0;
left: 50px; left: 50px;
display: none; display: none;
width: calc(100% - 50px);
&.controlbox-pane { &.controlbox-pane {
height: 100vh; height: 100vh;
......
sass/_core.scss
View file @ 808155bc
...@@ -6,59 +6,32 @@ ...@@ -6,59 +6,32 @@
@include animation-timing-function(ease); @include animation-timing-function(ease);
} }
// FIXME: these need to go elsewhere, they're outside of #conversejs
.converse-bg {
position: relative;
height: 100vh;
text-align: center;
color: #fff;
}
body {
.brand-heading {
margin: auto;
font-size: 6em;
font-weight: bold;
.icon-conversejs {
font-size: 0.88em;
}
}
}
#converse-embedded-chat, #converse-embedded-chat,
#conversejs { #conversejs {
height: 0;
width: 100vw;
bottom: 0; bottom: 0;
color: $text-color; color: $text-color;
direction: ltr; direction: ltr;
display: block; display: block;
font-family: "Helvetica", "Arial", sans-serif; font-family: "Helvetica", "Arial", sans-serif;
font-size: $font-size; font-size: $font-size;
height: $bottom-gutter-height;
position: fixed; position: fixed;
right: 0; right: 0;
width: auto;
z-index: 1031; // One more than bootstrap navbar z-index: 1031; // One more than bootstrap navbar
@media screen and (max-height: $mobile-landscape-height) {
width: 100%; ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
width: 100vw; color: $subdued-color;
} }
@media screen and (max-width: $mobile-portrait-length) { ::-moz-placeholder { /* Firefox 19+ */
width: 100%; color: $subdued-color;
width: 100vw; }
:-ms-input-placeholder { /* IE 10+ */
color: $subdued-color;
}
:-moz-placeholder { /* Firefox 18- */
color: $subdued-color;
} }
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color;
}
::-moz-placeholder { /* Firefox 19+ */
color: $subdued-color;
}
:-ms-input-placeholder { /* IE 10+ */
color: $subdued-color;
}
:-moz-placeholder { /* Firefox 18- */
color: $subdued-color;
}
::placeholder { ::placeholder {
color: $subdued-color; color: $subdued-color;
} }
...@@ -81,31 +54,33 @@ body { ...@@ -81,31 +54,33 @@ body {
} }
.sidebar { .sidebar {
display: none; display: none;
position: absolute; position: absolute;
width: 50px; width: 50px;
height: 100vh; height: 100vh;
padding: 10px 0; padding: 10px 0;
background-color: $controlbox-head-color; background-color: $controlbox-head-color;
color: white;
text-align: center; text-align: center;
.chatbox-btn { .chatbox-btn {
float: none; float: none;
margin: 0; margin: 0;
font-size: 1.35em; font-size: 1.35em;
&.fa-vcard { &.fa-vcard {
margin-top: 1em; margin-top: 1em;
} }
} }
.bottom { .bottom {
position: absolute; position: absolute;
bottom: 1em; bottom: 1em;
} }
} }
.badge {
.badge { padding: 0.4em;
padding: 0.25em 0.4em;
line-height: 1; line-height: 1;
font-weight: normal;
font-size: 90%;
} }
.fa { .fa {
...@@ -387,10 +362,6 @@ body { ...@@ -387,10 +362,6 @@ body {
} }
} }
#conversejs { #conversejs {
margin: 0;
width: 100%;
height: 100%;
.chatbox { .chatbox {
.chat-body { .chat-body {
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
......
sass/_normalize.scss
View file @ 808155bc
#conversejs { #conversejs {
@include box-sizing(border-box);
*, *:before, *:after {
@include box-sizing(border-box);
}
@media screen and (max-width: $mobile-portrait-length) { @media screen and (max-width: $mobile-portrait-length) {
margin: 0; margin: 0;
right: 10px; right: 10px;
......
sass/_roster.scss
View file @ 808155bc
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
margin: 0; margin: 0;
height: $roster-height; height: $roster-height;
height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px"); height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
padding: 0 0 2em 0; padding: 0;
overflow: hidden; overflow: hidden;
&.no-contact-requests { &.no-contact-requests {
......
sass/converse/_chatbox.scss
View file @ 808155bc
...@@ -58,3 +58,11 @@ ...@@ -58,3 +58,11 @@
} }
} }
} }
@include media-breakpoint-down(sm) {
#conversejs:not(.fullscreen) {
.row {
flex-direction: column;
}
}
}
sass/converse/_controlbox.scss
View file @ 808155bc
#conversejs:not(.fullscreen) { #conversejs:not(.fullscreen) {
#controlbox { #controlbox {
order: -1;
#converse-register { #converse-register {
.button-cancel { .button-cancel {
font-size: 90%; font-size: 90%;
......
sass/converse/_core.scss 0 → 100644
View file @ 808155bc
#conversejs {
.row {
flex-direction: row-reverse;
flex-wrap: nowrap;
}
}
sass/converse/_minimized_chats.scss
View file @ 808155bc
...@@ -3,16 +3,12 @@ ...@@ -3,16 +3,12 @@
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius; border-top-right-radius: $chatbox-border-radius;
color: $inverse-link-color; color: $inverse-link-color;
float: right;
font-weight: bold;
height: 100%; height: 100%;
margin: 0 $chat-gutter; margin-right: $chat-gutter;
bottom: 3*$chat-gutter;
padding: 0; padding: 0;
width: 130px;
.badge { .badge {
position: absolute;
right: 122px;
bottom: 8px; bottom: 8px;
border: 1px solid $gray-color; border: 1px solid $gray-color;
} }
...@@ -21,22 +17,18 @@ ...@@ -21,22 +17,18 @@
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius; border-top-right-radius: $chatbox-border-radius;
background-color: $link-color; background-color: $link-color;
color: white; border: 1px solid white;
position: relative;
padding: 10px 0 0 0; padding: 10px 0 0 0;
display: block;
width: 100%;
height: 100%;
text-align: center; text-align: center;
color: white;
} }
.minimized-chats-flyout { .minimized-chats-flyout {
height: auto; width: 100%;
bottom: $bottom-gutter-height;
.chat-head { .chat-head {
padding: 0.3em; padding: 0.3em;
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
width: $minimized-chats-width;
height: 35px; height: 35px;
margin-bottom: 0.2em; margin-bottom: 0.2em;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
......
sass/converse/_variables.scss
View file @ 808155bc
...@@ -87,7 +87,7 @@ $info-color: $dark-green !default; ...@@ -87,7 +87,7 @@ $info-color: $dark-green !default;
$button-border-radius: 5px !default; $button-border-radius: 5px !default;
$chatbox-border-radius: 4px !default; $chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default; $bottom-gutter-height: 35px !default;
$chatbox-hover-height: 6px !default; $chatbox-hover-height: 3em !default;
$mobile_landscape_height: 450px !default; $mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default; $mobile_portrait_length: 480px !default;
...@@ -111,7 +111,7 @@ $line-height-large: 20px !default; ...@@ -111,7 +111,7 @@ $line-height-large: 20px !default;
$controlbox-width: 200px !default; $controlbox-width: 200px !default;
$chat-width: 200px !default; $chat-width: 200px !default;
$chat-height: 450px !default; $chat-height: 450px !default;
$chat-gutter: 0.5em !default; $chat-gutter: 1em !default;
$minimized-chats-width: 130px !default; $minimized-chats-width: 130px !default;
$mobile-chat-width: 100% !default; $mobile-chat-width: 100% !default;
......
sass/converse/converse.scss
View file @ 808155bc
...@@ -6,14 +6,42 @@ ...@@ -6,14 +6,42 @@
* Licensed under the Mozilla Public License * Licensed under the Mozilla Public License
*/ */
#conversejs {
@import "bootstrap";
}
@import "bourbon"; @import "bourbon";
@import "variables"; @import "variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "../fonts"; @import "../fonts";
@import "../normalize"; @import "../normalize";
#conversejs {
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/utilities";
}
@import "../core"; @import "../core";
@import "core";
@import "../chatbox"; @import "../chatbox";
@import "chatbox"; @import "chatbox";
@import "../controlbox"; @import "../controlbox";
......
sass/inverse/_chatbox.scss
View file @ 808155bc
...@@ -85,3 +85,16 @@ ...@@ -85,3 +85,16 @@
} }
} }
} }
@media screen and (max-width: 767px) {
#conversejs.fullscreen {
> .chatbox {
width: calc(100% - 50px);
}
.chatbox {
.row {
width: calc(100% - 50px);
}
}
}
}
sass/inverse/_controlbox.scss
View file @ 808155bc
#conversejs.fullscreen { #conversejs.fullscreen {
#controlbox { #controlbox {
width: 100%;
float: left;
margin: 0; margin: 0;
#login-dialog { #login-dialog {
......
sass/inverse/_core.scss
View file @ 808155bc
body { body {
width: 100%;
height: 100%;
height: 100vh;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff; color: #ffffff;
background-color: $global-background-color; background-color: $global-background-color;
...@@ -38,8 +35,7 @@ body { ...@@ -38,8 +35,7 @@ body {
} }
#conversejs.fullscreen { #conversejs.fullscreen {
width: 100vw; height: auto;
height: 100vh;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
...@@ -68,12 +64,3 @@ body { ...@@ -68,12 +64,3 @@ body {
} }
} }
} }
@media screen and (max-width: 767px) {
#conversejs.fullscreen {
background-color: white;
margin: 0;
width: 100%;
height: 100%;
}
}
sass/inverse/inverse.scss
View file @ 808155bc
...@@ -6,11 +6,39 @@ ...@@ -6,11 +6,39 @@
* Licensed under the Mozilla Public License * Licensed under the Mozilla Public License
*/ */
@import "bootstrap";
@import "bourbon"; @import "bourbon";
@import "variables"; @import "variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "../fonts"; @import "../fonts";
@import "../normalize"; @import "../normalize";
#conversejs {
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/utilities";
}
@import "../core"; @import "../core";
@import "core"; @import "core";
@import "../chatbox"; @import "../chatbox";
......
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