Skip to content

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

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

parent b3f2fafe
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 253 additions and 3958 deletions
css/converse.css
View file @ d72463c9
...@@ -4426,6 +4426,28 @@ ...@@ -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 { ...@@ -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 { ...@@ -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 {
......
css/inverse.css
View file @ d72463c9
...@@ -4426,6 +4426,28 @@ ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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;
......
dev.html
View file @ d72463c9
...@@ -17,7 +17,7 @@ ...@@ -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">
......
fonticons/Read Me.txt deleted 100644 → 0
View file @ b3f2fafe
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.
fonticons/demo-files/demo.css deleted 100644 → 0
View file @ b3f2fafe
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;
}
fonticons/demo-files/demo.js deleted 100644 → 0
View file @ b3f2fafe
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();
}());
fonticons/demo.html deleted 100644 → 0
View file @ b3f2fafe
This diff is collapsed.
fonticons/fonts/icomoon.eot 100644 → 100755
View file @ d72463c9
No preview for this file type
fonticons/fonts/icomoon.svg 100644 → 100755
View file @ d72463c9
This diff is collapsed.
fonticons/fonts/icomoon.ttf 100644 → 100755
View file @ d72463c9
No preview for this file type
fonticons/fonts/icomoon.woff 100644 → 100755
View file @ d72463c9
No preview for this file type
fonticons/selection.json 100644 → 100755
View file @ d72463c9
This source diff could not be displayed because it is too large. You can view the blob instead.
fonticons/style.css 100644 → 100755
View file @ d72463c9
@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 @@ ...@@ -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"; }
mockup/fullscreen-login.html
View file @ d72463c9
...@@ -11,7 +11,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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>
......
mockup/overlayed-login.html
View file @ d72463c9
...@@ -11,7 +11,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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>
......
sass/_controlbox.scss
View file @ d72463c9
...@@ -148,6 +148,8 @@ ...@@ -148,6 +148,8 @@
} }
.brand-heading-container { .brand-heading-container {
@include make-col(12);
.brand-heading { .brand-heading {
text-align: center; text-align: center;
} }
......
sass/_core.scss
View file @ d72463c9
...@@ -10,6 +10,35 @@ body.reset { ...@@ -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);
......
sass/converse/_controlbox.scss
View file @ d72463c9
...@@ -2,6 +2,10 @@ ...@@ -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%;
......
sass/inverse/_controlbox.scss
View file @ d72463c9
...@@ -13,7 +13,6 @@ ...@@ -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 @@ ...@@ -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;
} }
......
sass/inverse/inverse.scss
View file @ d72463c9
...@@ -12,7 +12,6 @@ ...@@ -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";
......
src/converse-controlbox.js
View file @ d72463c9
...@@ -251,6 +251,7 @@ ...@@ -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 @@ ...@@ -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();
......
src/templates/brand_heading.html
View file @ d72463c9
<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>
src/templates/inverse_brand_heading.html
View file @ d72463c9
<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>
src/templates/login_panel.html
View file @ d72463c9
<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>
{[ } ]}
{[ 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> {[ } ]}
</form> </fieldset>
</div> </form>
</div> </div>
src/templates/register_panel.html
View file @ d72463c9
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7