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 Show whitespace changes
Inline Side-by-side
Showing with 253 additions and 3958 deletions
css/converse.css
View file @ d72463c9
......@@ -4426,6 +4426,28 @@
body.reset {
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 {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
......@@ -5466,6 +5488,9 @@ body.reset {
padding-bottom: 0.5em; }
#conversejs #controlbox .conn-feedback p.feedback-subject.error {
font-weight: bold; }
#conversejs #controlbox .brand-heading-container {
flex: 0 0 100%;
max-width: 100%; }
#conversejs #controlbox .brand-heading-container .brand-heading {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
......@@ -5675,6 +5700,9 @@ body.reset {
display: block; } }
#conversejs:not(.fullscreen) #controlbox {
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 {
font-size: 90%; }
#conversejs:not(.fullscreen) #controlbox .controlbox-panes {
......
css/inverse.css
View file @ d72463c9
......@@ -4426,6 +4426,28 @@
body.reset {
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 {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
......@@ -5533,6 +5555,9 @@ body {
padding-bottom: 0.5em; }
#conversejs #controlbox .conn-feedback p.feedback-subject.error {
font-weight: bold; }
#conversejs #controlbox .brand-heading-container {
flex: 0 0 100%;
max-width: 100%; }
#conversejs #controlbox .brand-heading-container .brand-heading {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
......@@ -5749,7 +5774,6 @@ body {
#conversejs.fullscreen #controlbox #converse-login-panel {
border-radius: 0; }
#conversejs.fullscreen #controlbox #converse-login-panel .converse-form {
margin: 0;
padding: 3em 2em 3em; }
#conversejs.fullscreen #controlbox .toggle-register-login {
line-height: 26px; }
......@@ -5792,6 +5816,30 @@ body {
background-color: #578EA9; }
#conversejs.fullscreen #controlbox .box-flyout .controlbox-head {
display: none; }
#conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
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],
......
dev.html
View file @ d72463c9
......@@ -17,7 +17,7 @@
<script src="src/config.js"></script>
</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">
<div class="container">
<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-family: 'icomoon';
src: url('fonts/icomoon.eot?hbusyn');
src: url('fonts/icomoon.eot?hbusyn#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hbusyn') format('truetype'),
url('fonts/icomoon.woff?hbusyn') format('woff'),
url('fonts/icomoon.svg?hbusyn#icomoon') format('svg');
src: url('fonts/icomoon.eot?x0id2b');
src: url('fonts/icomoon.eot?x0id2b#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?x0id2b') format('truetype'),
url('fonts/icomoon.woff?x0id2b') format('woff'),
url('fonts/icomoon.svg?x0id2b#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
......@@ -19,94 +19,11 @@
text-transform: none;
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 =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-address-book:before { content: "\270f"; }
.icon-attachment:before { content: "\e032"; }
.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"; }
.icon-conversejs:before {
content: "\e600";
}
mockup/fullscreen-login.html
View file @ d72463c9
......@@ -11,7 +11,7 @@
<body>
<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 id="conversejs" class="fullscreen">
......@@ -20,7 +20,7 @@
<div class="flyout box-flyout">
<div class="controlbox-panes">
<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>
<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>
......@@ -28,7 +28,6 @@
</div>
<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">
<div class="form-group">
<label for="jid">XMPP Username:</label>
......@@ -52,6 +51,5 @@
</div>
</div>
</div>
</div>
</body>
</html>
mockup/overlayed-login.html
View file @ d72463c9
......@@ -11,7 +11,7 @@
<body style="background-color: #578EA9">
<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 id="conversejs">
......@@ -20,11 +20,9 @@
<div class="flyout box-flyout">
<div class="controlbox-panes">
<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>
</div>
<div class="col-12">
<form id="converse-login" class="pure-form converse-form">
<div class="form-group">
<label for="jid">XMPP Username:</label>
......@@ -43,7 +41,6 @@
</div>
</div>
</div>
</div>
<div class="modals"></div>
</div>
......@@ -61,7 +58,6 @@
document.addEventListener("DOMContentLoaded", function(event) {
new Modals();
new Sidebar();
new UserPanel();
});
</script>
......
sass/_controlbox.scss
View file @ d72463c9
......@@ -148,6 +148,8 @@
}
.brand-heading-container {
@include make-col(12);
.brand-heading {
text-align: center;
}
......
sass/_core.scss
View file @ d72463c9
......@@ -10,6 +10,35 @@ body.reset {
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 {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
......
sass/converse/_controlbox.scss
View file @ d72463c9
......@@ -2,6 +2,10 @@
#controlbox {
order: -1;
#converse-register, #converse-login {
@include make-col(12);
}
#converse-register {
.button-cancel {
font-size: 90%;
......
sass/inverse/_controlbox.scss
View file @ d72463c9
......@@ -13,7 +13,6 @@
#converse-login-panel {
border-radius: 0;
.converse-form {
margin: 0;
padding: 3em 2em 3em;
}
}
......@@ -61,6 +60,22 @@
}
#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 {
margin: 1em 0;
}
......
sass/inverse/inverse.scss
View file @ d72463c9
......@@ -12,7 +12,6 @@
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
#conversejs {
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
......
src/converse-controlbox.js
View file @ d72463c9
......@@ -251,6 +251,7 @@
},
render () {
this.setClasses();
if (this.model.get('connected')) {
if (_.isUndefined(this.model.get('closed'))) {
this.model.set('closed', !_converse.show_controlbox_by_default);
......@@ -277,6 +278,17 @@
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 () {
if (this.model.get('connected')) {
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>
<p class="brand-subtitle"><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
<span>
<div>
src/templates/inverse_brand_heading.html
View file @ d72463c9
<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>
<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>
<span>
<div>
</div>
src/templates/login_panel.html
View file @ d72463c9
<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">
<legend>{{{o.__("Login")}}}</legend>
<div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
......@@ -33,5 +32,4 @@
{[ } ]}
</fieldset>
</form>
</div>
</div>
src/templates/register_panel.html
View file @ d72463c9
<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">
<legend>{{{o.__("Create your account")}}}</legend>
......@@ -25,6 +24,4 @@
{[ } ]}
</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