Commit db44a4f4 authored by JC Brand's avatar JC Brand

Update the login form for the overlayed view mode

parent d72463c9
...@@ -5495,6 +5495,9 @@ body.reset { ...@@ -5495,6 +5495,9 @@ body.reset {
text-align: center; } text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name { #conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; } font-size: 120%; }
#conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
padding-top: 0;
padding-bottom: 0; }
#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 {
...@@ -5509,7 +5512,7 @@ body.reset { ...@@ -5509,7 +5512,7 @@ body.reset {
#conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend { #conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
width: 100%; width: 100%;
text-align: center; text-align: center;
margin: 0 auto 1em auto; } margin: 0 auto 0.5em auto; }
#conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label { #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
margin-top: 2em; } margin-top: 2em; }
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons { #conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
...@@ -5699,17 +5702,59 @@ body.reset { ...@@ -5699,17 +5702,59 @@ body.reset {
#conversejs.sidebar-open #controlbox .controlbox-pane { #conversejs.sidebar-open #controlbox .controlbox-pane {
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 { position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 100%; flex: 0 0 100%;
max-width: 100%; } max-width: 100%; }
@media (min-width: 576px) {
#conversejs:not(.fullscreen) #controlbox {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; } }
@media (min-width: 768px) {
#conversejs:not(.fullscreen) #controlbox {
flex: 0 0 25%;
max-width: 25%; } }
@media (min-width: 992px) {
#conversejs:not(.fullscreen) #controlbox {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
@media (min-width: 1200px) {
#conversejs:not(.fullscreen) #controlbox {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
#conversejs:not(.fullscreen) #controlbox .controlbox-head {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between; }
#conversejs:not(.fullscreen) #controlbox .controlbox-head .brand-heading {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
order: 1;
color: #777;
font-size: 2em; }
#conversejs:not(.fullscreen) #controlbox .controlbox-head .close-chatbox-button {
order: 2; }
#conversejs:not(.fullscreen) #controlbox .controlbox-head .chatbox-btn {
color: #578EA9;
margin: 0; }
#conversejs:not(.fullscreen) #controlbox #converse-register, #conversejs:not(.fullscreen) #controlbox #converse-login {
flex: 0 0 100%;
max-width: 100%;
padding-bottom: 0; }
#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 {
border-radius: 4px; } border-radius: 4px; }
#conversejs:not(.fullscreen) #controlbox .brand-heading-container .brand-heading {
font-size: 2em;
margin: 1em 0; }
#conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator { #conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
border-radius: 10%; border-radius: 10%;
......
...@@ -5562,6 +5562,9 @@ body { ...@@ -5562,6 +5562,9 @@ body {
text-align: center; } text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name { #conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; } font-size: 120%; }
#conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
padding-top: 0;
padding-bottom: 0; }
#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 {
...@@ -5576,7 +5579,7 @@ body { ...@@ -5576,7 +5579,7 @@ body {
#conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend { #conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
width: 100%; width: 100%;
text-align: center; text-align: center;
margin: 0 auto 1em auto; } margin: 0 auto 0.5em auto; }
#conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label { #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
margin-top: 2em; } margin-top: 2em; }
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons { #conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
......
...@@ -260,30 +260,6 @@ a:focus { ...@@ -260,30 +260,6 @@ a:focus {
padding: 100px 0; padding: 100px 0;
} }
} }
.btn {
text-transform: uppercase;
font-family: FontAwesome;
font-weight: 400;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.btn-default {
border: 1px solid #82B397;
color: #82B397;
background-color: transparent;
}
.btn-default:hover,
.btn-default:focus {
border: 1px solid #82B397;
outline: none;
color: #211018;
background-color: #82B397;
}
.btn-huge {
padding: 25px;
font-size: 26px;
}
.banner-social-buttons { .banner-social-buttons {
padding-top: 3em; padding-top: 3em;
} }
......
...@@ -16,13 +16,14 @@ ...@@ -16,13 +16,14 @@
<div id="conversejs"> <div id="conversejs">
<div class="row no-gutters"> <div class="row no-gutters">
<div id="controlbox" class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12"> <div id="controlbox" class="chatbox">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head controlbox-head">
<a class="chatbox-btn close-chatbox-button fa fa-close"></a>
<div class="brand-heading"><i class="icon-conversejs"></i><span class="brand-name">converse</span></div>
</div>
<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">
<h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
</div>
<form id="converse-login" class="pure-form converse-form"> <form id="converse-login" class="pure-form converse-form">
<div class="form-group"> <div class="form-group">
<label for="jid">XMPP Username:</label> <label for="jid">XMPP Username:</label>
......
...@@ -159,6 +159,11 @@ ...@@ -159,6 +159,11 @@
} }
} }
#converse-login-panel, #converse-register-panel {
padding-top: 0;
padding-bottom: 0;
}
#converse-login-panel { #converse-login-panel {
flex-direction: column; flex-direction: column;
...@@ -183,7 +188,7 @@ ...@@ -183,7 +188,7 @@
legend { legend {
width: 100%; width: 100%;
text-align: center; text-align: center;
margin: 0 auto 1em auto; margin: 0 auto 0.5em auto;
} }
label { label {
margin-top: 2em; margin-top: 2em;
......
#conversejs:not(.fullscreen) { #conversejs:not(.fullscreen) {
#controlbox { #controlbox {
order: -1; order: -1;
@include make-col-ready();
@include media-breakpoint-up(xs) {
@include make-col(12);
}
@include media-breakpoint-up(sm) {
@include make-col(4);
}
@include media-breakpoint-up(md) {
@include make-col(3);
}
@include media-breakpoint-up(lg) {
@include make-col(2);
}
@include media-breakpoint-up(xl) {
@include make-col(2);
}
.controlbox-head {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
.brand-heading {
@include make-col-ready();
@include make-col(8);
order: 1;
color: $text-color;
font-size: 2em;
}
.close-chatbox-button {
order: 2;
}
.chatbox-btn {
color: $controlbox-head-color;
margin: 0;
}
}
#converse-register, #converse-login { #converse-register, #converse-login {
@include make-col(12); @include make-col(12);
padding-bottom: 0;
} }
#converse-register { #converse-register {
...@@ -15,12 +56,5 @@ ...@@ -15,12 +56,5 @@
.controlbox-panes { .controlbox-panes {
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
} }
.brand-heading-container {
.brand-heading {
font-size: 2em;
margin: 1em 0;
}
}
} }
} }
...@@ -251,7 +251,6 @@ ...@@ -251,7 +251,6 @@
}, },
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);
...@@ -278,17 +277,6 @@ ...@@ -278,17 +277,6 @@
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();
......
<div class="brand-heading-container">
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
<div>
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head controlbox-head"> <div class="chat-head controlbox-head">
{[ if (!o.sticky_controlbox) { ]} {[ if (!o.sticky_controlbox) { ]}
<a class="chatbox-btn close-chatbox-button icon-close"></a> <a class="chatbox-btn close-chatbox-button fa fa-close"></a>
{[ } ]} {[ } ]}
</div> </div>
<div class="controlbox-panes"></div> <div class="controlbox-panes"></div>
......
<span class="brand-heading-container"> <div class="brand-heading"><i class="icon-conversejs"></i><span class="brand-name">converse</span></div>
<div class="brand-heading">
<i class="icon-conversejs"></i>
<span class="brand-name">converse</span>
</div>
</span>
<div id="converse-login-panel" class="controlbox-pane fade-in row"> <div id="converse-login-panel" class="controlbox-pane fade-in row">
<form id="converse-login" class="converse-form" method="post"> <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}}}"> <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>
......
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