Place chat boxes inside bootstrap rows
instead of the other way around.
This commit is contained in:
JC Brand
parent
7f8b42faf0
commit
808155bc3c
2
Makefile
2
Makefile
|
|
@ -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
|
||||
|
|
|
|||
6
css/bootstrap.min.css
vendored
6
css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
9967
css/converse.css
9967
css/converse.css
File diff suppressed because it is too large
Load Diff
4
css/font-awesome.min.css
vendored
4
css/font-awesome.min.css
vendored
File diff suppressed because one or more lines are too long
11143
css/inverse.css
11143
css/inverse.css
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,140 +9,109 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div id="conversejs" class="fullscreen">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<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 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="sidebar"></div>
|
||||
<div id="users" class="controlbox-pane"></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="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<div><canvas height="44" width="44" class="avatar"></canvas></div>
|
||||
<div class="chat-title w-100">JC Brand
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||
</div>
|
||||
|
||||
<div class="chat-body">
|
||||
<div class="chat-content">
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-info">This is an info message</span></div>
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-danger">This is an error message</span></div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">09:35
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Hello world
|
||||
<span class="fa fa-smile-o"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-them">19:25
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-them">Benedict-John: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:39
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-info chat-event">
|
||||
<span class="badge badge-success">JC Brand is busy</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<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>
|
||||
<ul class="toolbar-menu collapsed">
|
||||
<li>
|
||||
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="chat-title w-100">JC Brand
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||
</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">×</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 class="chat-body">
|
||||
<div class="chat-content">
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-info">This is an info message</span></div>
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-danger">This is an error message</span></div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">09:35
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Hello world
|
||||
<span class="fa fa-smile-o"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-them">19:25
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-them">Benedict-John: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:39
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-info chat-event">
|
||||
<span class="badge badge-success">JC Brand is busy</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<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>
|
||||
<ul class="toolbar-menu collapsed">
|
||||
<li>
|
||||
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modals"></div>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -3,144 +3,127 @@
|
|||
<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 class="sidebar"></div>
|
||||
<div id="users" class="controlbox-pane"></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="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatroom d-flex">
|
||||
<div class="w-100">
|
||||
<div class="chat-title">Chatroom</div>
|
||||
<p class="chatroom-topic">May the force be with you</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-wrench"></a>
|
||||
<a class="chatbox-btn fa fa-minus"></a>
|
||||
<a class="chatbox-btn fa fa-close"></a>
|
||||
</div>
|
||||
<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">
|
||||
<div class="chat-title">Chatroom</div>
|
||||
<p class="chatroom-topic">May the force be with you</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-wrench"></a>
|
||||
<a class="chatbox-btn fa fa-minus"></a>
|
||||
<a class="chatbox-btn fa fa-close"></a>
|
||||
</div>
|
||||
|
||||
<div class="chat-body chatroom-body">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-8">
|
||||
<div class="chat-area">
|
||||
<div class="chat-content">
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">18:50
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">luke: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">leia: hi :)</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">leia: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="chat-body chatroom-body">
|
||||
<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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">luke: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">leia: hi :)</span>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-4">
|
||||
<div class="occupants w-100">
|
||||
<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>
|
||||
|
||||
<ul class="occupant-list">
|
||||
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
|
||||
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
|
||||
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||
</ul>
|
||||
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">leia: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="occupants col-md-3 col-4">
|
||||
<p class="occupants-heading">Occupants:</p>
|
||||
<form class="pure-form room-invite">
|
||||
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
||||
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
||||
</form>
|
||||
|
||||
<ul class="occupant-list">
|
||||
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
|
||||
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
|
||||
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||
</ul>
|
||||
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modals"></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>
|
||||
|
|
|
|||
|
|
@ -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,277 +13,247 @@
|
|||
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
|
||||
</div>
|
||||
|
||||
<div id="conversejs" class="chatbox">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<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 class="sidebar"></div>
|
||||
<div id="users" class="controlbox-pane"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||
<div class="flyout box-flyout">
|
||||
<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>
|
||||
<div class="chat-title w-100">JC Brand
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||
<div><canvas height="32" width="32" class="avatar"></canvas></div>
|
||||
<div class="chat-title w-100">JC Brand
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||
</div>
|
||||
|
||||
<div class="chat-body">
|
||||
<div class="chat-content">
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-info">This is an info message</span></div>
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-danger">This is an error message</span></div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">09:35
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Hello world
|
||||
<span class="fa fa-smile-o"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-them">19:25
|
||||
<div class="chat-content">
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-info">This is an info message</span></div>
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-danger">This is an error message</span></div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">09:35
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Hello world
|
||||
<span class="fa fa-smile-o"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-them">19:25
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-them">Benedict-John: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:39
|
||||
</span>
|
||||
<span class="chat-msg-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:39
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
</span>
|
||||
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-info chat-event">
|
||||
<span class="badge badge-success">JC Brand is busy</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:43
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-info chat-event">
|
||||
<span class="badge badge-success">JC Brand is busy</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<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>
|
||||
<ul class="toolbar-menu collapsed">
|
||||
<li>
|
||||
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<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>
|
||||
<ul class="toolbar-menu collapsed">
|
||||
<li>
|
||||
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||
<div class="flyout box-flyout">
|
||||
<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">
|
||||
<div class="chat-title">Chatroom</div>
|
||||
<p class="chatroom-topic">May the force be with you</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-wrench"></a>
|
||||
<a class="chatbox-btn fa fa-minus"></a>
|
||||
<a class="chatbox-btn fa fa-close"></a>
|
||||
<div class="w-100">
|
||||
<div class="chat-title">Chatroom</div>
|
||||
<p class="chatroom-topic">May the force be with you</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-wrench"></a>
|
||||
<a class="chatbox-btn fa fa-minus"></a>
|
||||
<a class="chatbox-btn fa fa-close"></a>
|
||||
</div>
|
||||
|
||||
<div class="chat-body chatroom-body">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-8">
|
||||
<div class="chat-area">
|
||||
<div class="chat-content">
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">18:50
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">luke: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">leia: hi :)</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">leia: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-4">
|
||||
<div class="occupants w-100">
|
||||
<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>
|
||||
|
||||
<ul class="occupant-list">
|
||||
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
|
||||
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
|
||||
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||
<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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">luke: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">leia: hi :)</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">leia: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="occupants col-md-3 col-4">
|
||||
<p class="occupants-heading">Occupants:</p>
|
||||
<form class="pure-form room-invite">
|
||||
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
||||
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
||||
</form>
|
||||
|
||||
<ul class="occupant-list">
|
||||
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
|
||||
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
|
||||
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||
</ul>
|
||||
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
</a>
|
||||
<div class="flyout minimized-chats-flyout">
|
||||
<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>
|
||||
<span class="badge badge-light">42</span>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<span class="badge badge-light">42</span>
|
||||
<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>
|
||||
<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>
|
||||
<span class="badge badge-light">4</span>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatroom d-flex">
|
||||
<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 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>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<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 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>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<span class="badge badge-light">842</span>
|
||||
<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>
|
||||
<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>
|
||||
<span class="badge badge-light">842</span>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<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 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>
|
||||
</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">×</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>
|
||||
</div>
|
||||
<div class="modals"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
|
||||
|
|
|
|||
|
|
@ -3,84 +3,53 @@
|
|||
<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" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container converse-bg">
|
||||
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
|
||||
</div>
|
||||
<div class="container converse-bg">
|
||||
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div id="conversejs" class="fullscreen">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<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">
|
||||
<div class="form-group">
|
||||
<label for="jid">XMPP Username:</label>
|
||||
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<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">
|
||||
<div class="form-group">
|
||||
<label for="jid">XMPP Username:</label>
|
||||
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
|
||||
</div>
|
||||
<fieldset class="buttons">
|
||||
<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>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">×</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,50 @@
|
|||
<!-- 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">×</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">×</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">
|
||||
|
|
|
|||
|
|
@ -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,64 +15,55 @@
|
|||
</div>
|
||||
|
||||
<div id="conversejs">
|
||||
<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> converse</h1>
|
||||
</div>
|
||||
<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 row">
|
||||
<div class="brand-heading-container col-12">
|
||||
<h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<form id="converse-login" class="pure-form converse-form">
|
||||
<div class="form-group">
|
||||
<label for="jid">XMPP Username:</label>
|
||||
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
|
||||
</div>
|
||||
<p></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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<form id="converse-login" class="pure-form converse-form">
|
||||
<div class="form-group">
|
||||
<label for="jid">XMPP Username:</label>
|
||||
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
|
||||
</div>
|
||||
<p></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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">×</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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -6,59 +6,32 @@
|
|||
@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;
|
||||
}
|
||||
::-moz-placeholder { /* Firefox 19+ */
|
||||
color: $subdued-color;
|
||||
}
|
||||
:-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 {
|
||||
color: $subdued-color;
|
||||
}
|
||||
|
|
@ -81,31 +54,33 @@ body {
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 100vh;
|
||||
padding: 10px 0;
|
||||
background-color: $controlbox-head-color;
|
||||
background-color: $controlbox-head-color;
|
||||
color: white;
|
||||
text-align: center;
|
||||
|
||||
.chatbox-btn {
|
||||
float: none;
|
||||
.chatbox-btn {
|
||||
float: none;
|
||||
margin: 0;
|
||||
font-size: 1.35em;
|
||||
&.fa-vcard {
|
||||
&.fa-vcard {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
}
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.25em 0.4em;
|
||||
}
|
||||
.badge {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
#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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -58,3 +58,11 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
#conversejs:not(.fullscreen) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
#conversejs:not(.fullscreen) {
|
||||
#controlbox {
|
||||
order: -1;
|
||||
|
||||
#converse-register {
|
||||
.button-cancel {
|
||||
font-size: 90%;
|
||||
|
|
|
|||
6
sass/converse/_core.scss
Normal file
6
sass/converse/_core.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
#conversejs {
|
||||
.row {
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -85,3 +85,16 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs.fullscreen {
|
||||
> .chatbox {
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
.chatbox {
|
||||
.row {
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
#conversejs.fullscreen {
|
||||
|
||||
#controlbox {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
|
||||
#login-dialog {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user