Include CSS from pure.css and update styles and markup a bit.

This commit is contained in:
JC Brand 2015-10-28 20:31:24 +00:00
parent 857a2e4c08
commit 8708b68577
7 changed files with 1516 additions and 31 deletions

File diff suppressed because it is too large Load Diff

View File

@ -38,17 +38,18 @@
<a class="chatbox-btn close-chatbox-button icon-close"></a>
</div>
<div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane"><form id="converse-login" method="post">
<div id="login-dialog" class="controlbox-pane">
<form class="pure-form pure-form-stacked" id="converse-login" method="post">
<label>XMPP Username:</label>
<input type="username" name="jid" placeholder="user@server">
<input type="text" name="jid" placeholder="user@server">
<label>Password:</label>
<input type="password" name="password" placeholder="password">
<input class="submit" type="submit" value="Log In">
<input class="pure-button submit" type="submit" value="Log In">
<span class="conn-feedback"></span>
</form>
</div>
<div id="register" class="controlbox-pane" style="display: none;">
<form id="converse-register">
<form id="converse-register" class="pure-form">
<span class="reg-feedback"></span>
<label>Your XMPP provider's domain name:</label>
<input type="text" name="domain" placeholder=" e.g. conversejs.org">
@ -56,7 +57,7 @@
Tip: A list of public XMPP providers is available
<a href="https://xmpp.net/directory.php" class="url" target="_blank">here</a>.
</p>
<input class="submit" type="submit" value="Fetch registration form">
<input class="pure-button submit" type="submit" value="Fetch registration form">
</form>
</div>
</div>

View File

@ -86,7 +86,7 @@
span {
display: inline-block;
&.chat-msg-author {
max-width: 100px;
max-width: 100%;
font-weight: bold;
white-space: nowrap;
float: left;

View File

@ -75,15 +75,6 @@
#converse-register, #converse-login {
margin: 2em 1em 1em 1em;
background: white;
.login-submit, .submit {
height: 30px;
padding: 0px;
font-size: $font-size;
}
.submit {
margin: 1em 0;
}
.login-anon {
height: auto;
white-space: normal;
@ -101,8 +92,7 @@
input {
width: 100%;
height: 30px;
margin: 5px 0 10px 0;
padding-left: 0.5em;
margin: 1em 0;
}
}
#users {

View File

@ -1,4 +1,10 @@
#conversejs {
@import "pure/base";
@import "pure/grids";
@import "pure/forms";
@import "pure/buttons";
@import "pure/menus";
@include box-sizing(border-box);
*, *:before, *:after {
@include box-sizing(border-box);

View File

@ -1,18 +1,18 @@
<form id="converse-login" method="post">
<form class="pure-form pure-form-stacked" id="converse-login" method="post">
{[ if (auto_login) { ]}
<span class="spinner login-submit"/>
{[ } ]}
{[ if (!auto_login) { ]}
{[ if (authentication == LOGIN) { ]}
<label>{{label_username}}</label>
<input name="jid" placeholder="{{placeholder_username}}">
<input type="text" name="jid" placeholder="{{placeholder_username}}">
<label>{{label_password}}</label>
<input type="password" name="password" placeholder="{{placeholder_password}}">
<input class="submit" type="submit" value="{{label_login}}">
<span class="conn-feedback"></span>
{[ } ]}
{[ if (authentication == ANONYMOUS) { ]}
<input type="submit" class="submit login-anon" value="{{label_anon_login}}"/>
<input type="pure-button submit" class="submit login-anon" value="{{label_anon_login}}"/>
{[ } ]}
{[ if (authentication == PREBIND) { ]}
<p>Disconnected.</p>

View File

@ -1,7 +1,7 @@
<form id="converse-register">
<form id="converse-register" class="pure-form">
<span class="reg-feedback"></span>
<label>{{label_domain}}</label>
<input type="text" name="domain" placeholder="{{domain_placeholder}}">
<p class="form-help">{{help_providers}} <a href="{{href_providers}}" class="url" target="_blank">{{help_providers_link}}</a>.</p>
<input class="submit" type="submit" value="{{label_register}}">
<input class="pure-button submit" type="submit" value="{{label_register}}">
</form>