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

Update the login form for the overlayed view mode

Browse Source
This commit is contained in:
JC Brand 2018-03-07 21:26:06 +01:00
parent d72463c939
commit db44a4f44d
11 changed files with 114 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
css/converse.css
View File

@ -5495,6 +5495,9 @@ body.reset {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
padding-top: 0;
padding-bottom: 0; }
#conversejs #controlbox #converse-login-panel {
flex-direction: column; }
#conversejs #controlbox #converse-login-panel .brand-heading {
@ -5509,7 +5512,7 @@ body.reset {
#conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
width: 100%;
text-align: center;
margin: 0 auto 1em auto; }
margin: 0 auto 0.5em auto; }
#conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
margin-top: 2em; }
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
@ -5699,17 +5702,59 @@ body.reset {
#conversejs.sidebar-open #controlbox .controlbox-pane {
display: block; } }
#conversejs:not(.fullscreen) #controlbox {
order: -1; }
order: -1;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 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%; }
max-width: 100%;
padding-bottom: 0; }
#conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel {
font-size: 90%; }
#conversejs:not(.fullscreen) #controlbox .controlbox-panes {
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 {
border-radius: 10%;

5
css/inverse.css
View File

@ -5562,6 +5562,9 @@ body {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
padding-top: 0;
padding-bottom: 0; }
#conversejs #controlbox #converse-login-panel {
flex-direction: column; }
#conversejs #controlbox #converse-login-panel .brand-heading {
@ -5576,7 +5579,7 @@ body {
#conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
width: 100%;
text-align: center;
margin: 0 auto 1em auto; }
margin: 0 auto 0.5em auto; }
#conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
margin-top: 2em; }
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {

24
css/theme.css
View File

@ -260,30 +260,6 @@ a:focus {
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 {
padding-top: 3em;
}

19
mockup/overlayed-login.html
View File

@ -10,19 +10,20 @@
</head>
<body style="background-color: #578EA9">
<div class="converse-bg container">
<h1 class="brand-heading">Converse</h1>
</div>
<div class="converse-bg container">
<h1 class="brand-heading">Converse</h1>
</div>
<div id="conversejs">
<div id="conversejs">
<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="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 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">
<div class="form-group">
<label for="jid">XMPP Username:</label>
@ -42,7 +43,7 @@
</div>
</div>
<div class="modals"></div>
</div>
</div>
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>

7
sass/_controlbox.scss
View File

@ -159,6 +159,11 @@
}
}
#converse-login-panel, #converse-register-panel {
padding-top: 0;
padding-bottom: 0;
}
#converse-login-panel {
flex-direction: column;
@ -183,7 +188,7 @@
legend {
width: 100%;
text-align: center;
margin: 0 auto 1em auto;
margin: 0 auto 0.5em auto;
}
label {
margin-top: 2em;

48
sass/converse/_controlbox.scss
View File

@ -1,9 +1,50 @@
#conversejs:not(.fullscreen) {
#controlbox {
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 {
@include make-col(12);
padding-bottom: 0;
}
#converse-register {
@ -15,12 +56,5 @@
.controlbox-panes {
border-radius: $chatbox-border-radius;
}
.brand-heading-container {
.brand-heading {
font-size: 2em;
margin: 1em 0;
}
}
}
}

12
src/converse-controlbox.js
View File

@ -251,7 +251,6 @@
},
render () {
this.setClasses();
if (this.model.get('connected')) {
if (_.isUndefined(this.model.get('closed'))) {
this.model.set('closed', !_converse.show_controlbox_by_default);
@ -278,17 +277,6 @@
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();

3
src/templates/brand_heading.html
View File

@ -1,3 +0,0 @@
<div class="brand-heading-container">
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
<div>

2
src/templates/controlbox.html
View File

@ -1,7 +1,7 @@
<div class="flyout box-flyout">
<div class="chat-head controlbox-head">
{[ 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 class="controlbox-panes"></div>

7
src/templates/converse_brand_heading.html
View File

@ -1,6 +1 @@
<span class="brand-heading-container">
<div class="brand-heading">
<i class="icon-conversejs"></i>
<span class="brand-name">converse</span>
</div>
</span>
<div class="brand-heading"><i class="icon-conversejs"></i><span class="brand-name">converse</span></div>

1
src/templates/login_panel.html
View File

@ -1,6 +1,5 @@
<div id="converse-login-panel" class="controlbox-pane fade-in row">
<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}}}">
<p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
<p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>