Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Make more semantic by putting login/register column info in css

Browse Source
This commit is contained in:
JC Brand 2018-03-07 17:48:53 +01:00
parent b3f2fafeea
commit d72463c939
25 changed files with 253 additions and 3958 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
css/converse.css
View File

@ -4426,6 +4426,28 @@
body.reset { body.reset {
margin: 0; } margin: 0; }
@font-face {
font-family: 'Converse-js';
src: url("../fonticons/fonts/icomoon.eot?wvi0ht");
src: url("../fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("../fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("../fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("../fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
.icon-conversejs {
padding-right: 0.2em;
font-family: 'Converse-js';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.icon-conversejs:before {
content: "\e600"; }
#conversejs { #conversejs {
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
@ -5466,10 +5488,13 @@ body.reset {
padding-bottom: 0.5em; } padding-bottom: 0.5em; }
#conversejs #controlbox .conn-feedback p.feedback-subject.error { #conversejs #controlbox .conn-feedback p.feedback-subject.error {
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox .brand-heading-container .brand-heading { #conversejs #controlbox .brand-heading-container {
text-align: center; } flex: 0 0 100%;
#conversejs #controlbox .brand-heading-container .brand-name { max-width: 100%; }
font-size: 120%; } #conversejs #controlbox .brand-heading-container .brand-heading {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #converse-login-panel { #conversejs #controlbox #converse-login-panel {
flex-direction: column; } flex-direction: column; }
#conversejs #controlbox #converse-login-panel .brand-heading { #conversejs #controlbox #converse-login-panel .brand-heading {
@ -5675,6 +5700,9 @@ body.reset {
display: block; } } display: block; } }
#conversejs:not(.fullscreen) #controlbox { #conversejs:not(.fullscreen) #controlbox {
order: -1; } order: -1; }
#conversejs:not(.fullscreen) #controlbox #converse-register, #conversejs:not(.fullscreen) #controlbox #converse-login {
flex: 0 0 100%;
max-width: 100%; }
#conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel { #conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel {
font-size: 90%; } font-size: 90%; }
#conversejs:not(.fullscreen) #controlbox .controlbox-panes { #conversejs:not(.fullscreen) #controlbox .controlbox-panes {

70
css/inverse.css
View File

@ -4426,6 +4426,28 @@
body.reset { body.reset {
margin: 0; } margin: 0; }
@font-face {
font-family: 'Converse-js';
src: url("../fonticons/fonts/icomoon.eot?wvi0ht");
src: url("../fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("../fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("../fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("../fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
.icon-conversejs {
padding-right: 0.2em;
font-family: 'Converse-js';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.icon-conversejs:before {
content: "\e600"; }
#conversejs { #conversejs {
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
@ -5533,10 +5555,13 @@ body {
padding-bottom: 0.5em; } padding-bottom: 0.5em; }
#conversejs #controlbox .conn-feedback p.feedback-subject.error { #conversejs #controlbox .conn-feedback p.feedback-subject.error {
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox .brand-heading-container .brand-heading { #conversejs #controlbox .brand-heading-container {
text-align: center; } flex: 0 0 100%;
#conversejs #controlbox .brand-heading-container .brand-name { max-width: 100%; }
font-size: 120%; } #conversejs #controlbox .brand-heading-container .brand-heading {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #converse-login-panel { #conversejs #controlbox #converse-login-panel {
flex-direction: column; } flex-direction: column; }
#conversejs #controlbox #converse-login-panel .brand-heading { #conversejs #controlbox #converse-login-panel .brand-heading {
@ -5749,7 +5774,6 @@ body {
#conversejs.fullscreen #controlbox #converse-login-panel { #conversejs.fullscreen #controlbox #converse-login-panel {
border-radius: 0; } border-radius: 0; }
#conversejs.fullscreen #controlbox #converse-login-panel .converse-form { #conversejs.fullscreen #controlbox #converse-login-panel .converse-form {
margin: 0;
padding: 3em 2em 3em; } padding: 3em 2em 3em; }
#conversejs.fullscreen #controlbox .toggle-register-login { #conversejs.fullscreen #controlbox .toggle-register-login {
line-height: 26px; } line-height: 26px; }
@ -5792,12 +5816,36 @@ body {
background-color: #578EA9; } background-color: #578EA9; }
#conversejs.fullscreen #controlbox .box-flyout .controlbox-head { #conversejs.fullscreen #controlbox .box-flyout .controlbox-head {
display: none; } display: none; }
#conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions { #conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
margin: 1em 0; } position: relative;
#conversejs.fullscreen #controlbox #converse-register input[type=submit], width: 100%;
#conversejs.fullscreen #controlbox #converse-register input[type=button], #conversejs.fullscreen #controlbox #converse-login input[type=submit], min-height: 1px;
#conversejs.fullscreen #controlbox #converse-login input[type=button] { padding-right: 15px;
width: auto; } padding-left: 15px;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
margin-left: 16.6666666667%; }
@media (min-width: 576px) {
#conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
margin-left: 16.6666666667%; } }
@media (min-width: 768px) {
#conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
margin-left: 16.6666666667%; } }
@media (min-width: 992px) {
#conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
flex: 0 0 50%;
max-width: 50%;
margin-left: 25%; } }
#conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions {
margin: 1em 0; }
#conversejs.fullscreen #controlbox #converse-register input[type=submit],
#conversejs.fullscreen #controlbox #converse-register input[type=button], #conversejs.fullscreen #controlbox #converse-login input[type=submit],
#conversejs.fullscreen #controlbox #converse-login input[type=button] {
width: auto; }
#conversejs #converse-roster { #conversejs #converse-roster {
text-align: left; text-align: left;

2
dev.html
View File

@ -17,7 +17,7 @@
<script src="src/config.js"></script> <script src="src/config.js"></script>
</head> </head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom"> <body id="page-top" class="reset" data-target=".navbar-custom">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container"> <div class="container">
<div class="navbar-header page-scroll"> <div class="navbar-header page-scroll">

7
fonticons/Read Me.txt
View File

@ -1,7 +0,0 @@
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

155
fonticons/demo-files/demo.css
View File

@ -1,155 +0,0 @@
body {
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 1em;
line-height: 1.5;
color: #555;
background: #fff;
}
h1 {
font-size: 1.5em;
font-weight: normal;
}
small {
font-size: .66666667em;
}
a {
color: #e74c3c;
text-decoration: none;
}
a:hover, a:focus {
box-shadow: 0 1px #e74c3c;
}
.bshadow0, input {
box-shadow: inset 0 -2px #e7e7e7;
}
input:hover {
box-shadow: inset 0 -2px #ccc;
}
input, fieldset {
font-family: sans-serif;
font-size: 1em;
margin: 0;
padding: 0;
border: 0;
}
input {
color: inherit;
line-height: 1.5;
height: 1.5em;
padding: .25em 0;
}
input:focus {
outline: none;
box-shadow: inset 0 -2px #449fdb;
}
.glyph {
font-size: 16px;
width: 15em;
padding-bottom: 1em;
margin-right: 4em;
margin-bottom: 1em;
float: left;
overflow: hidden;
}
.liga {
width: 80%;
width: calc(100% - 2.5em);
}
.talign-right {
text-align: right;
}
.talign-center {
text-align: center;
}
.bgc1 {
background: #f1f1f1;
}
.fgc1 {
color: #999;
}
.fgc0 {
color: #000;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
.mvm {
margin-top: .75em;
margin-bottom: .75em;
}
.mtn {
margin-top: 0;
}
.mtl, .mal {
margin-top: 1.5em;
}
.mbl, .mal {
margin-bottom: 1.5em;
}
.mal, .mhl {
margin-left: 1.5em;
margin-right: 1.5em;
}
.mhmm {
margin-left: 1em;
margin-right: 1em;
}
.mls {
margin-left: .25em;
}
.ptl {
padding-top: 1.5em;
}
.pbs, .pvs {
padding-bottom: .25em;
}
.pvs, .pts {
padding-top: .25em;
}
.unit {
float: left;
}
.unitRight {
float: right;
}
.size1of2 {
width: 50%;
}
.size1of1 {
width: 100%;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.hidden-true {
display: none;
}
.textbox0 {
width: 3em;
background: #f1f1f1;
padding: .25em .5em;
line-height: 1.5;
height: 1.5em;
}
#testDrive {
display: block;
padding-top: 24px;
line-height: 1.5;
}
.fs0 {
font-size: 16px;
}
.fs1 {
font-size: 32px;
}
.fs2 {
font-size: 32px;
}

30
fonticons/demo-files/demo.js
View File

@ -1,30 +0,0 @@
if (!('boxShadow' in document.body.style)) {
document.body.setAttribute('class', 'noBoxShadow');
}
document.body.addEventListener("click", function(e) {
var target = e.target;
if (target.tagName === "INPUT" &&
target.getAttribute('class').indexOf('liga') === -1) {
target.select();
}
});
(function() {
var fontSize = document.getElementById('fontSize'),
testDrive = document.getElementById('testDrive'),
testText = document.getElementById('testText');
function updateTest() {
testDrive.innerHTML = testText.value || String.fromCharCode(160);
if (window.icomoonLiga) {
window.icomoonLiga(testDrive);
}
}
function updateSize() {
testDrive.style.fontSize = fontSize.value + 'px';
}
fontSize.addEventListener('change', updateSize, false);
testText.addEventListener('input', updateTest, false);
testText.addEventListener('change', updateTest, false);
updateSize();
}());

1257
fonticons/demo.html
View File

File diff suppressed because it is too large Load Diff

BIN
fonticons/fonts/icomoon.eot Normal file → Executable file
View File

Binary file not shown.

84
fonticons/fonts/icomoon.svg Normal file → Executable file
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
fonticons/fonts/icomoon.ttf Normal file → Executable file
View File

Binary file not shown.

BIN
fonticons/fonts/icomoon.woff Normal file → Executable file
View File

Binary file not shown.

2214
fonticons/selection.json Normal file → Executable file
View File

File diff suppressed because one or more lines are too long

99
fonticons/style.css Normal file → Executable file
View File

@ -1,10 +1,10 @@
@font-face { @font-face {
font-family: 'icomoon'; font-family: 'icomoon';
src: url('fonts/icomoon.eot?hbusyn'); src: url('fonts/icomoon.eot?x0id2b');
src: url('fonts/icomoon.eot?hbusyn#iefix') format('embedded-opentype'), src: url('fonts/icomoon.eot?x0id2b#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hbusyn') format('truetype'), url('fonts/icomoon.ttf?x0id2b') format('truetype'),
url('fonts/icomoon.woff?hbusyn') format('woff'), url('fonts/icomoon.woff?x0id2b') format('woff'),
url('fonts/icomoon.svg?hbusyn#icomoon') format('svg'); url('fonts/icomoon.svg?x0id2b#icomoon') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -18,95 +18,12 @@
font-variant: normal; font-variant: normal;
text-transform: none; text-transform: none;
line-height: 1; line-height: 1;
/* Enable Ligatures ================ */
letter-spacing: 0;
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
font-feature-settings: "liga";
-webkit-font-variant-ligatures: discretionary-ligatures;
font-variant-ligatures: discretionary-ligatures;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-address-book:before { content: "\270f"; } .icon-conversejs:before {
.icon-attachment:before { content: "\e032"; } content: "\e600";
.icon-away:before { content: "\25fb"; } }
.icon-blocked:before { content: "\2718"; }
.icon-bold:before { content: "\e04d"; }
.icon-bubbles2:before { content: "\e016"; }
.icon-bubbles3:before { content: "\e017"; }
.icon-bubbles:before { content: "\e015"; }
.icon-busy:before { content: "\e004"; }
.icon-cancel-circle:before { content: "\e058"; }
.icon-checkmark:before { content: "\2713"; }
.icon-close:before { content: "\2715"; }
.icon-closed:before { content: "\25ba"; }
.icon-cog:before { content: "\e02f"; }
.icon-cogs:before { content: "\e022"; }
.icon-conversejs:before { content: "\e600"; }
.icon-database:before { content: "\f1c0"; }
.icon-envelope:before { content: "\f003"; }
.icon-exit:before { content: "\e601"; }
.icon-eye-blocked:before { content: "\e031"; }
.icon-eye:before { content: "\e030"; }
.icon-github:before { content: "\eab0"; }
.icon-globe:before { content: "\f0ac"; }
.icon-google2:before { content: "\ea89"; }
.icon-group:before { content: "\f0c0"; }
.icon-happy:before { content: "\263b"; }
.icon-heart2:before { content: "\f004"; }
.icon-heart:before { content: "\2764"; }
.icon-heart_empty:before { content: "\f08a"; }
.icon-hide-users:before { content: "\e01c"; }
.icon-home:before { content: "\e000"; }
.icon-idcard-dark:before { content: "\f2c2"; }
.icon-idcard:before { content: "\f2c3"; }
.icon-image:before { content: "\2b14"; }
.icon-info:before { content: "\2360"; }
.icon-italic:before { content: "\e04f"; }
.icon-key:before { content: "\e028"; }
.icon-legal:before { content: "\f0e3"; }
.icon-lock-2:before { content: "\e027"; }
.icon-minus:before { content: "\e05a"; }
.icon-music:before { content: "\266b"; }
.icon-newtab:before { content: "\e053"; }
.icon-notebook:before { content: "\2710"; }
.icon-notification:before { content: "\e01f"; }
.icon-offline:before { content: "\e002"; }
.icon-online:before { content: "\25fc"; }
.icon-opened:before { content: "\25bc"; }
.icon-pencil:before { content: "\270e"; }
.icon-phone-hang-up:before { content: "\260e"; }
.icon-phone:before { content: "\260f"; }
.icon-plus:before { content: "\271a"; }
.icon-pushpin:before { content: "\e012"; }
.icon-quotes-left:before { content: "\e01d"; }
.icon-reddit:before { content: "\eac6"; }
.icon-remove:before { content: "\e02d"; }
.icon-room-info:before { content: "\e059"; }
.icon-save:before { content: "\f0c7"; }
.icon-search:before { content: "\e021"; }
.icon-show-users:before { content: "\e01e"; }
.icon-smiley:before { content: "\263a"; }
.icon-snowflake:before { content: "\f2dc"; }
.icon-spell-check:before { content: "\e045"; }
.icon-spinner:before { content: "\231b"; }
.icon-star:before { content: "\f005"; }
.icon-star_empty:before { content: "\f006"; }
.icon-strikethrough:before { content: "\e050"; }
.icon-twitter:before { content: "\ea96"; }
.icon-underline:before { content: "\e04e"; }
.icon-unlocked:before { content: "\e025"; }
.icon-user:before { content: "\e01a"; }
.icon-users:before { content: "\e01b"; }
.icon-warning:before { content: "\26a0"; }
.icon-wrench:before { content: "\e024"; }
.icon-xa:before { content: "\e602"; }
.icon-zoomin:before { content: "\e02b"; }
.icon-zoomout:before { content: "\e02a"; }

38
mockup/fullscreen-login.html
View File

@ -11,7 +11,7 @@
<body> <body>
<div class="container converse-bg"> <div class="container converse-bg">
<h1 class="brand-heading"><i class="icon-conversejs"></i>&nbsp;inVerse</h1> <h1 class="brand-heading">inVerse</h1>
</div> </div>
<div id="conversejs" class="fullscreen"> <div id="conversejs" class="fullscreen">
@ -20,7 +20,7 @@
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
<div class="row"> <div class="row">
<div class="brand-heading-container col-12"> <div class="brand-heading-container">
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1> <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p> <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p> <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
@ -28,25 +28,23 @@
</div> </div>
<div id="converse-login-panel" class="controlbox-pane fade-in row"> <div id="converse-login-panel" class="controlbox-pane fade-in 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="converse-form" method="post">
<form id="converse-login" class="converse-form" method="post"> <div class="form-group">
<div class="form-group"> <label for="jid">XMPP Username:</label>
<label for="jid">XMPP Username:</label> <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off"> </div>
<div 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>
<div class="switch-form">
<p>Don't have an XMPP account?</p>
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
</div> </div>
<div class="form-group"> </fieldset>
<label for="password">Password:</label> </form>
<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>
<div class="switch-form">
<p>Don't have an XMPP account?</p>
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
</div>
</fieldset>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>

34
mockup/overlayed-login.html
View File

@ -11,7 +11,7 @@
<body style="background-color: #578EA9"> <body style="background-color: #578EA9">
<div class="converse-bg container"> <div class="converse-bg container">
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1> <h1 class="brand-heading">Converse</h1>
</div> </div>
<div id="conversejs"> <div id="conversejs">
@ -20,25 +20,22 @@
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane row"> <div id="login-dialog" class="controlbox-pane row">
<div class="brand-heading-container col-12"> <div class="brand-heading-container">
<h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1> <h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
</div> </div>
<form id="converse-login" class="pure-form converse-form">
<div class="col-12"> <div class="form-group">
<form id="converse-login" class="pure-form converse-form"> <label for="jid">XMPP Username:</label>
<div class="form-group"> <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
<label for="jid">XMPP Username:</label> </div>
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off"> <div class="form-group">
</div> <label for="password">Password:</label>
<div class="form-group"> <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
<label for="password">Password:</label> </div>
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off"> <p></p>
</div> <p><input class="btn btn-primary" type="submit" value="Log In"></p>
<p></p> <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
<p><input class="btn btn-primary" type="submit" value="Log In"></p> </form>
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -61,7 +58,6 @@
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("DOMContentLoaded", function(event) {
new Modals(); new Modals();
new Sidebar(); new Sidebar();
new UserPanel();
}); });
</script> </script>

2
sass/_controlbox.scss
View File

@ -148,6 +148,8 @@
} }
.brand-heading-container { .brand-heading-container {
@include make-col(12);
.brand-heading { .brand-heading {
text-align: center; text-align: center;
} }

29
sass/_core.scss
View File

@ -10,6 +10,35 @@ body.reset {
margin: 0; margin: 0;
} }
@font-face {
font-family: 'Converse-js';
src: url($font-path + 'icomoon.eot?wvi0ht');
src: url($font-path + 'icomoon.eot?wvi0ht#iefix') format('embedded-opentype'),
url($font-path + 'icomoon.ttf?wvi0ht') format('truetype'),
url($font-path + 'icomoon.woff?wvi0ht') format('woff'),
url($font-path + 'icomoon.svg?wvi0ht#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.icon-conversejs {
padding-right: 0.2em;
font-family: 'Converse-js';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-conversejs:before {
content: "\e600";
}
#conversejs { #conversejs {
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);

4
sass/converse/_controlbox.scss
View File

@ -2,6 +2,10 @@
#controlbox { #controlbox {
order: -1; order: -1;
#converse-register, #converse-login {
@include make-col(12);
}
#converse-register { #converse-register {
.button-cancel { .button-cancel {
font-size: 90%; font-size: 90%;

17
sass/inverse/_controlbox.scss
View File

@ -13,7 +13,6 @@
#converse-login-panel { #converse-login-panel {
border-radius: 0; border-radius: 0;
.converse-form { .converse-form {
margin: 0;
padding: 3em 2em 3em; padding: 3em 2em 3em;
} }
} }
@ -61,6 +60,22 @@
} }
#converse-register, #converse-login { #converse-register, #converse-login {
@include make-col-ready();
@include make-col(8);
@include make-col-offset(2);
@include media-breakpoint-up(sm) {
@include make-col(8);
@include make-col-offset(2);
}
@include media-breakpoint-up(md) {
@include make-col(8);
@include make-col-offset(2);
}
@include media-breakpoint-up(lg) {
@include make-col(6);
@include make-col-offset(3);
}
.title, .instructions { .title, .instructions {
margin: 1em 0; margin: 1em 0;
} }

1
sass/inverse/inverse.scss
View File

@ -12,7 +12,6 @@
@import "bootstrap/scss/functions"; @import "bootstrap/scss/functions";
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins"; @import "bootstrap/scss/mixins";
#conversejs { #conversejs {
@import "bootstrap/scss/root"; @import "bootstrap/scss/root";
@import "bootstrap/scss/reboot"; @import "bootstrap/scss/reboot";

12
src/converse-controlbox.js
View File

@ -251,6 +251,7 @@
}, },
render () { render () {
this.setClasses();
if (this.model.get('connected')) { if (this.model.get('connected')) {
if (_.isUndefined(this.model.get('closed'))) { if (_.isUndefined(this.model.get('closed'))) {
this.model.set('closed', !_converse.show_controlbox_by_default); this.model.set('closed', !_converse.show_controlbox_by_default);
@ -277,6 +278,17 @@
return this; return this;
}, },
setClasses () {
if (_converse.view_mode !== 'fullscreen') {
this.el.classList.add('col');
this.el.classList.add('col-lg-2');
this.el.classList.add('col-md-3');
this.el.classList.add('col-sm-4');
this.el.classList.add('col-sx-12');
this.el.classList.add('w-100');
}
},
onConnected () { onConnected () {
if (this.model.get('connected')) { if (this.model.get('connected')) {
this.render(); this.render();

5
src/templates/brand_heading.html
View File

@ -1,4 +1,3 @@
<span class="brand-heading-container"> <div class="brand-heading-container">
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1> <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
<p class="brand-subtitle"><a href="https://conversejs.org">Open Source</a> XMPP chat client</p> <div>
<span>

4
src/templates/inverse_brand_heading.html
View File

@ -1,7 +1,7 @@
<div class="row"> <div class="row">
<span class="container brand-heading-container col-12"> <div class="container brand-heading-container">
<h1 class="brand-heading"><i class="icon-conversejs"></i>inVerse</h1> <h1 class="brand-heading"><i class="icon-conversejs"></i>inVerse</h1>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p> <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p> <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
<span> <div>
</div> </div>

64
src/templates/login_panel.html
View File

@ -1,37 +1,35 @@
<div id="converse-login-panel" class="controlbox-pane fade-in row"> <div id="converse-login-panel" class="controlbox-pane fade-in 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="converse-form" method="post">
<form id="converse-login" class="converse-form" method="post"> <legend>{{{o.__("Login")}}}</legend>
<legend>{{{o.__("Login")}}}</legend> <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
<div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}"> <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
<p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p> <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
<p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p> </div>
</div> {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
{[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]} <span class="spinner centered"/>
<span class="spinner centered"/> {[ } else { ]}
{[ } else { ]} {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
{[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]} <div class="form-group">
<div class="form-group"> <label for="jid">{{{o.__("XMPP Username:")}}}</label>
<label for="jid">{{{o.__("XMPP Username:")}}}</label> <input class="form-control" autofocus required="required" type="text" name="jid" placeholder="{{{o.placeholder_username}}}">
<input class="form-control" autofocus required="required" type="text" name="jid" placeholder="{{{o.placeholder_username}}}"> </div>
</div> {[ if (o.authentication !== o.EXTERNAL) { ]}
{[ if (o.authentication !== o.EXTERNAL) { ]} <div class="form-group">
<div class="form-group"> <label for="password">{{{o.__("Password:")}}}</label>
<label for="password">{{{o.__("Password:")}}}</label> <input class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}">
<input class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}"> </div>
</div>
{[ } ]}
<fieldset class="buttons">
<input class="btn btn-primary" type="submit" value="{{{o.__('Submit')}}}">
</fieldset>
{[ } ]}
{[ if (o.authentication == o.ANONYMOUS) { ]}
<input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
{[ } ]}
{[ if (o.authentication == o.PREBIND) { ]}
<p>Disconnected.</p>
{[ } ]} {[ } ]}
<fieldset class="buttons">
<input class="btn btn-primary" type="submit" value="{{{o.__('Submit')}}}">
</fieldset>
{[ } ]} {[ } ]}
</fieldset> {[ if (o.authentication == o.ANONYMOUS) { ]}
</form> <input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
</div> {[ } ]}
{[ if (o.authentication == o.PREBIND) { ]}
<p>Disconnected.</p>
{[ } ]}
{[ } ]}
</fieldset>
</form>
</div> </div>

47
src/templates/register_panel.html
View File

@ -1,30 +1,27 @@
<div class="row"> <div class="row">
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3"> <form id="converse-register" class="converse-form">
<form id="converse-register" class="converse-form"> <legend>{{{o.__("Create your account")}}}</legend>
<legend>{{{o.__("Create your account")}}}</legend>
<div class="form-group"> <div class="form-group">
<label>{{{o.__("Please enter the XMPP provider to register with:")}}}</label> <label>{{{o.__("Please enter the XMPP provider to register with:")}}}</label>
<div class="form-errors hidden"></div> <div class="form-errors hidden"></div>
{[ if (o.default_domain) { ]} {[ if (o.default_domain) { ]}
{{{o.default_domain}}} {{{o.default_domain}}}
</div>
{[ } ]}
{[ if (!o.default_domain) { ]}
<input class="form-control" autofocus="autofocus" required="required" type="text" name="domain" placeholder="{{{o.domain_placeholder}}}">
<p class="form-text text-muted">{{{o.help_providers}}} <a href="{{{o.href_providers}}}" class="url" target="_blank" rel="noopener">{{{o.help_providers_link}}}</a>.</p>
</div>
<fieldset class="buttons">
<input class="btn btn-primary" type="submit" value="{{{o.label_register}}}">
<div class="switch-form">
<p>{{{ o.__("Already have a chat account?") }}}</p>
<p><a class="login-here toggle-register-login" href="#converse/login">{{{o.__("Log in here")}}}</a></p>
</div>
</fieldset>
{[ } ]}
</div> </div>
</form> {[ } ]}
{[ if (!o.default_domain) { ]}
</div> <input class="form-control" autofocus="autofocus" required="required" type="text" name="domain" placeholder="{{{o.domain_placeholder}}}">
<p class="form-text text-muted">{{{o.help_providers}}} <a href="{{{o.href_providers}}}" class="url" target="_blank" rel="noopener">{{{o.help_providers_link}}}</a>.</p>
</div>
<fieldset class="buttons">
<input class="btn btn-primary" type="submit" value="{{{o.label_register}}}">
<div class="switch-form">
<p>{{{ o.__("Already have a chat account?") }}}</p>
<p><a class="login-here toggle-register-login" href="#converse/login">{{{o.__("Log in here")}}}</a></p>
</div>
</fieldset>
{[ } ]}
</div>
</form>
</div> </div>