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 Show 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
UGLIFYJS ?= node_modules/.bin/uglifyjs
BABEL ?= node_modules/.bin/babel
BOURBON = ./node_modules/bourbon/app/assets/stylesheets/
BOOTSTRAP = ./node_modules/bootstrap/scss/
BOOTSTRAP = ./node_modules/
BUILDDIR = ./docs
BUNDLE ?= ./.bundle/bin/bundle
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 {
color: #ffffff;
background-color: #211018;
}
body .brand-heading {
margin: auto;
font-size: 6em;
font-weight: bold;
}
body .brand-heading .icon-conversejs {
font-size: 0.88em;
}
html {
width: 100%;
height: 100%;
......@@ -43,6 +54,14 @@ a:focus {
text-decoration: none;
color: #00aaff;
}
.converse-bg {
position: relative;
height: 100vh;
text-align: center;
color: #fff;
}
.light {
font-weight: 400;
}
......
mockup/chatbox.html
View file @ 808155bc
......@@ -9,24 +9,18 @@
</head>
<body>
<div class="container-fluid">
<div id="conversejs" class="fullscreen">
<div id="controlbox" class="chatbox">
<div class="row no-gutters">
<div id="controlbox" class="chatbox col-xl-2 col-md-3">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div class="row">
<div class="col-xl-2 col-md-3">
<div class="sidebar"></div>
<div id="users" class="controlbox-pane"></div>
</div>
</div>
</div>
</div>
</div>
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="row">
<div class="col-xl-10 offset-xl-2 col-md-9 offset-md-3">
<div class="chatbox col-xl-10 col-md-9" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatbox d-flex">
<div><canvas height="44" width="44" class="avatar"></canvas></div>
......@@ -91,11 +85,9 @@
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
<div class="emoji-picker-container toolbar-menu collapsed"></div>
</li>
<li class="toggle-clear">
<a class="fa fa-trash" title="Clear all messages"></a>
</li>
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
<span class="chat-toolbar-text">unencrypted</span>
<span class="fa fa-unlock"></span>
......@@ -118,31 +110,8 @@
</div>
</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>
<div class="modals"></div>
</div>
</body>
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
......@@ -159,4 +128,6 @@
new UserPanel();
});
</script>
</body>
</html>
mockup/chatroom.html
View file @ 808155bc
......@@ -3,30 +3,24 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Converse.js Mockups</title>
<title>Chatroom Fullscreen</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="../../css/inverse.css" />
</head>
<body>
<div class="container-fluid">
<div id="conversejs" class="fullscreen chatbox">
<div id="controlbox" class="chatbox">
<div id="conversejs" class="fullscreen">
<div class="row no-gutters">
<div id="controlbox" class="chatbox col-xl-2 col-md-3">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div class="row">
<div class="col-xl-2 col-md-3">
<div class="sidebar"></div>
<div id="users" class="controlbox-pane"></div>
</div>
</div>
</div>
</div>
</div>
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="row">
<div class="col-xl-10 offset-xl-2 col-md-9 offset-md-3">
<div class="chatbox chatroom col-xl-10 col-md-9" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom d-flex">
<div class="w-100">
......@@ -39,9 +33,8 @@
</div>
<div class="chat-body chatroom-body">
<div class="row">
<div class="col-md-9 col-8">
<div class="chat-area">
<div class="row no-gutters">
<div class="chat-area col-md-9 col-8">
<div class="chat-content">
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">18:50&nbsp;
......@@ -93,15 +86,11 @@
</div>
</form>
</div>
</div>
<div class="col-md-3 col-4">
<div class="occupants w-100">
<div class="occupants col-md-3 col-4">
<p class="occupants-heading">Occupants:</p>
<form class="pure-form room-invite">
<div class="form-control">
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
</div>
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
</form>
......@@ -131,16 +120,10 @@
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modals"></div>
</div>
</body>
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
......@@ -157,4 +140,6 @@
new UserPanel();
});
</script>
</body>
</html>
mockup/converse.html
View file @ 808155bc
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inVerse Mockups</title>
<title>Overlayed chats</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="../../css/converse.css" />
</head>
......@@ -13,21 +13,18 @@
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
</div>
<div id="conversejs" class="chatbox">
<div id="controlbox" class="chatbox">
<div id="conversejs">
<div class="row no-gutters">
<div id="controlbox" class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div class="row">
<div class="col-12">
<div class="sidebar"></div>
<div id="users" class="controlbox-pane"></div>
</div>
</div>
</div>
</div>
</div>
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="chatbox col col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatbox d-flex">
<div><canvas height="32" width="32" class="avatar"></canvas></div>
......@@ -92,11 +89,9 @@
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
<div class="emoji-picker-container toolbar-menu collapsed"></div>
</li>
<li class="toggle-clear">
<a class="fa fa-trash" title="Clear all messages"></a>
</li>
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
<span class="chat-toolbar-text">unencrypted</span>
<span class="fa fa-unlock"></span>
......@@ -119,7 +114,7 @@
</div>
</div>
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="chatbox chatroom col col-lg-4 col-md-6 col-sm-8 col-xs-12 w-100" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom d-flex">
<div class="w-100">
......@@ -132,9 +127,8 @@
</div>
<div class="chat-body chatroom-body">
<div class="row">
<div class="col-md-9 col-8">
<div class="chat-area">
<div class="row no-gutters">
<div class="chat-area col-md-9 col-8">
<div class="chat-content">
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">18:50&nbsp;
......@@ -186,15 +180,11 @@
</div>
</form>
</div>
</div>
<div class="col-md-3 col-4">
<div class="occupants w-100">
<div class="occupants col-md-3 col-4">
<p class="occupants-heading">Occupants:</p>
<form class="pure-form room-invite">
<div class="form-control">
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
</div>
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
</form>
......@@ -225,65 +215,45 @@
</div>
</div>
</div>
</div>
<div id="minimized-chats">
<a id="toggle-minimized-chats" href="#">Minimized
<span id="minimized-count">(0)</span>
<div id="minimized-chats" class="col col-1 w-100">
<a id="toggle-minimized-chats" href="#" class="row no-gutters">
<div class="col"><span id="minimized-count">0</span> Minimized</div>
<span class="badge badge-light">322</span>
</a>
<div class="flyout minimized-chats-flyout">
<div class="chat-head chat-head-chatroom d-flex">
<span class="badge badge-light">3</span>
<div class="chat-head chat-head-chatroom row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox d-flex">
<span class="badge badge-light">42</span>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
<span class="badge badge-light">4</span>
</div>
<div class="chat-head chat-head-chatroom d-flex">
<div class="chat-head chat-head-chatroom row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox d-flex">
<div class="chat-head chat-head-chatbox row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox d-flex">
<span class="badge badge-light">842</span>
<div class="chat-head chat-head-chatbox row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
<span class="badge badge-light">842</span>
</div>
<div class="chat-head chat-head-chatbox d-flex">
<div class="chat-head chat-head-chatbox row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</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 class="modals"></div>
</div>
</div>
<div class="modals"></div>
</body>
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
......
mockup/fullscreen-login.html
View file @ 808155bc
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<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/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
......@@ -14,18 +14,16 @@
<h1 class="brand-heading"><i class="icon-conversejs"></i>&nbsp;inVerse</h1>
</div>
<div class="container-fluid">
<div id="conversejs" class="fullscreen">
<div class="row no-gutters">
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane">
<div class="row">
<div class="brand-heading-container col-12">
<h1 class="brand-heading">
<i class="icon-conversejs"></i> inVerse</h1>
<p>
<a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
<p><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
</div>
</div>
......@@ -52,35 +50,6 @@
</div>
</div>
</div>
<!-- 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>
</div>
</body>
</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 -->
<div class="modal fade" id="userProfileModal" tabindex="-1" role="dialog" aria-labelledby="userProfileModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
......
mockup/overlayed-login.html
View file @ 808155bc
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<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="../../css/converse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
......@@ -15,11 +15,11 @@
</div>
<div id="conversejs">
<div id="controlbox" class="chatbox">
<div class="row no-gutters">
<div id="controlbox" class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane">
<div class="row">
<div id="login-dialog" class="controlbox-pane row">
<div class="brand-heading-container col-12">
<h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
</div>
......@@ -44,35 +44,26 @@
</div>
</div>
</div>
<div class="modals"></div>
</div>
<!-- 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>
</body>
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
<script type="text/javascript" src="sidebar.js"></script>
<script type="text/javascript" src="user-panel.js"></script>
<script type="text/javascript" src="modals.js"></script>
<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>
sass/_chatbox.scss
View file @ 808155bc
......@@ -9,8 +9,8 @@
border-radius: 0;
}
bottom: $chatbox-hover-height;
display: block;
position: absolute;
@media screen and (max-height: $mobile-landscape-height) {
bottom: 0;
}
......@@ -65,12 +65,10 @@
}
}
.chatbox {
display: block;
text-align: left;
float: right;
height: $bottom-gutter-height;
margin: 0 $chat-gutter;
width: $chat-width;
@media screen and (max-height: $mobile-landscape-height) {
margin: 0;
width: $mobile-chat-width;
......@@ -84,9 +82,10 @@
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: $chat-height;
min-height: $chat-height/2;
min-width: $chat-width;
width: $chat-width;
z-index: 1;
overflow-y: scroll;
width: 100%;
@media screen and (max-height: $mobile-landscape-height) {
height: $mobile-chat-height;
width: $mobile-chat-width;
......@@ -448,9 +447,6 @@
padding: 3em 2em 3em;
}
}
> .chatbox {
width: calc(100% - 50px);
}
.chatbox {
.chat-body {
.chat-message {
......@@ -460,8 +456,6 @@
}
}
.row {
width: calc(100% - 50px);
.box-flyout {
left: 50px;
bottom: 0;
......
sass/_chatrooms.scss
View file @ 808155bc
......@@ -49,8 +49,7 @@
}
.box-flyout {
min-width: $chatroom-width;
width: $chatroom-width;
width: 100%;
@media screen and (max-height: $mobile-landscape-height) {
height: $mobile-chat-height;
width: $mobile-chat-width;
......@@ -70,6 +69,10 @@
width: 100%;
overflow: hidden;
.row {
flex-direction: row;
}
.chat-info {
color: white;
line-height: normal;
......@@ -99,8 +102,6 @@
}
.chat-area {
word-wrap: break-word;
width: 100%;
float: left;
min-width: $chat-width;
height: calc(100% - 95px);
......@@ -121,13 +122,10 @@
.occupants {
overflow-x: hidden;
overflow-y: hidden;
float: right;
vertical-align: top;
background-color: white;
border-left: 1px solid $text-color;
border-bottom-right-radius: $chatbox-border-radius;
width: 30%;
height: 100%;
padding: 0.5em;
.occupants-heading {
padding: 0.3em 0;
......
sass/_controlbox.scss
View file @ 808155bc
......@@ -2,13 +2,6 @@
#controlbox {
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 {
padding: 0;
}
......@@ -122,6 +115,8 @@
}
#login-dialog {
flex-direction: column;
.brand-heading {
color: $global-background-color;
}
......@@ -409,7 +404,6 @@
}
.controlbox-panes {
height: 100%;
overflow-y: scroll;
}
......@@ -420,9 +414,7 @@
font-size: $font-size;
left: 0;
text-align: left;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-y: scroll;
overflow-x: hidden;
border-radius: $chatbox-border-radius;
......@@ -532,6 +524,7 @@
top: 0;
left: 50px;
display: none;
width: calc(100% - 50px);
&.controlbox-pane {
height: 100vh;
......
sass/_core.scss
View file @ 808155bc
......@@ -6,46 +6,19 @@
@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,
#conversejs {
height: 0;
width: 100vw;
bottom: 0;
color: $text-color;
direction: ltr;
display: block;
font-family: "Helvetica", "Arial", sans-serif;
font-size: $font-size;
height: $bottom-gutter-height;
position: fixed;
right: 0;
width: auto;
z-index: 1031; // One more than bootstrap navbar
@media screen and (max-height: $mobile-landscape-height) {
width: 100%;
width: 100vw;
}
@media screen and (max-width: $mobile-portrait-length) {
width: 100%;
width: 100vw;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color;
......@@ -87,6 +60,7 @@ body {
height: 100vh;
padding: 10px 0;
background-color: $controlbox-head-color;
color: white;
text-align: center;
.chatbox-btn {
......@@ -102,10 +76,11 @@ body {
bottom: 1em;
}
}
.badge {
padding: 0.25em 0.4em;
padding: 0.4em;
line-height: 1;
font-weight: normal;
font-size: 90%;
}
.fa {
......@@ -387,10 +362,6 @@ body {
}
}
#conversejs {
margin: 0;
width: 100%;
height: 100%;
.chatbox {
.chat-body {
border-radius: $chatbox-border-radius;
......
sass/_normalize.scss
View file @ 808155bc
#conversejs {
@include box-sizing(border-box);
*, *:before, *:after {
@include box-sizing(border-box);
}
@media screen and (max-width: $mobile-portrait-length) {
margin: 0;
right: 10px;
......
sass/_roster.scss
View file @ 808155bc
......@@ -5,7 +5,7 @@
margin: 0;
height: $roster-height;
height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
padding: 0 0 2em 0;
padding: 0;
overflow: hidden;
&.no-contact-requests {
......
sass/converse/_chatbox.scss
View file @ 808155bc
......@@ -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) {
#controlbox {
order: -1;
#converse-register {
.button-cancel {
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 @@
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
color: $inverse-link-color;
float: right;
font-weight: bold;
height: 100%;
margin: 0 $chat-gutter;
margin-right: $chat-gutter;
bottom: 3*$chat-gutter;
padding: 0;
width: 130px;
.badge {
position: absolute;
right: 122px;
bottom: 8px;
border: 1px solid $gray-color;
}
......@@ -21,22 +17,18 @@
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
background-color: $link-color;
color: white;
position: relative;
border: 1px solid white;
padding: 10px 0 0 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
color: white;
}
.minimized-chats-flyout {
height: auto;
bottom: $bottom-gutter-height;
width: 100%;
.chat-head {
padding: 0.3em;
border-radius: $chatbox-border-radius;
width: $minimized-chats-width;
height: 35px;
margin-bottom: 0.2em;
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;
$button-border-radius: 5px !default;
$chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default;
$chatbox-hover-height: 6px !default;
$chatbox-hover-height: 3em !default;
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
......@@ -111,7 +111,7 @@ $line-height-large: 20px !default;
$controlbox-width: 200px !default;
$chat-width: 200px !default;
$chat-height: 450px !default;
$chat-gutter: 0.5em !default;
$chat-gutter: 1em !default;
$minimized-chats-width: 130px !default;
$mobile-chat-width: 100% !default;
......
sass/converse/converse.scss
View file @ 808155bc
......@@ -6,14 +6,42 @@
* Licensed under the Mozilla Public License
*/
#conversejs {
@import "bootstrap";
}
@import "bourbon";
@import "variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "../fonts";
@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 "../chatbox";
@import "chatbox";
@import "../controlbox";
......
sass/inverse/_chatbox.scss
View file @ 808155bc
......@@ -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 {
#controlbox {
width: 100%;
float: left;
margin: 0;
#login-dialog {
......
sass/inverse/_core.scss
View file @ 808155bc
body {
width: 100%;
height: 100%;
height: 100vh;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
background-color: $global-background-color;
......@@ -38,8 +35,7 @@ body {
}
#conversejs.fullscreen {
width: 100vw;
height: 100vh;
height: auto;
bottom: 0;
left: 0;
right: 0;
......@@ -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 @@
* Licensed under the Mozilla Public License
*/
@import "bootstrap";
@import "bourbon";
@import "variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "../fonts";
@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 "../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