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

css/converse.css

@@ -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

@@ -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

@@ -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

@@ -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.

fonticons/demo-files/demo.css

@@ -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;
-}
-

fonticons/demo-files/demo.js

@@ -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();
-}());

fonticons/style.css

@@ -1,10 +1,10 @@
 @font-face {
   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-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-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

@@ -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

@@ -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

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

sass/_core.scss

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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>
-    <p class="brand-subtitle"><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
+<div>
-<span>

src/templates/inverse_brand_heading.html

@@ -1,7 +1,7 @@
 <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

@@ -1,5 +1,4 @@
 <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

@@ -1,5 +1,4 @@
 <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>