Commit 8fd20f3a authored by JC Brand's avatar JC Brand

More CSS/styling updates

- Remove currently unused pure modules (forms and menus)
- Update forms (not all yet) markup and css
- Move all controlbox mockups to mockup/controlbox.html

Forms look much better now in mockups but JS and templates still needs updating.
parent 1fb18eef
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -73,8 +73,7 @@
}
#converse-register, #converse-login {
margin: 2em 1em 1em 1em;
background: white;
margin-top: 2em;
.login-anon {
height: auto;
white-space: normal;
......@@ -91,8 +90,7 @@
}
input {
width: 100%;
height: 30px;
margin: 1em 0;
margin: 0.5em 0;
}
}
#users {
......@@ -102,35 +100,24 @@
}
#chatrooms {
overflow-y: auto;
form.add-chatroom {
background: none;
padding: 0.5em;
input[type=button],
input[type=submit],
input[type=text] {
margin: 0;
width: 100%;
padding: 0.25em;
}
span.spinner,
input[type=button],
input[type=submit] {
margin-top: 0.5em;
display: table-cell;
width: auto;
}
input[type=submit] {
color: $save-button-color;
}
}
#available-chatrooms {
padding: 0 1em 2em 1em;
text-align: left;
dt {
font-weight: normal;
color: $text-color;
border: none;
padding: 0.5em;
color: $text-color;
font-weight: normal;
padding: 0;
text-shadow: 0 1px 0 $text-shadow-color;
}
dd.available-chatroom {
......@@ -140,7 +127,8 @@
display: block;
font-weight: bold;
overflow: hidden;
padding: 0.25em 0.5em;
padding: 0;
padding-top: 0.5em;
text-overflow: ellipsis;
text-shadow: 0 1px 0 $text-shadow-color;
white-space: nowrap;
......@@ -341,7 +329,7 @@
width: 100%;
height: 289px;
@include calc(height, '100% - #{$chat-head-height}');
overflow-y: hidden;
overflow-y: scroll;
overflow-x: hidden;
label {
font-size: $font-size;
......
......@@ -115,10 +115,6 @@
.error {
color: red;
}
input.error {
border: 1px solid red;
}
.reg-feedback {
font-size: 85%;
}
......@@ -164,14 +160,35 @@
display: block !important;
}
.pure-button {
border-radius: $chatbox-border-radius;
}
form {
&.pure-form.converse-form {
padding: 1.5em;
background: white;
margin: 1em;
legend {
color: $text-color;
}
label {
margin-top: 1em;
}
input {
margin-bottom: 1em;
input[type=text],
input[type=password],
input[type=number],
input[type=button],
input[type=submit] {
height: 2.2em;
}
input[type=button],
input[type=submit] {
padding-left: 1em;
padding-right: 1em;
}
input.error {
border: 1px solid red;
color: $text-color;
}
.form-help {
color: gray;
......
#conversejs {
@import "pure/base";
@import "pure/grids";
@import "pure/forms";
@import "pure/buttons";
@import "pure/menus";
@include box-sizing(border-box);
*, *:before, *:after {
......@@ -66,17 +64,4 @@
color: $link-color;
text-shadow: none;
}
form {
&.pure-form.converse-form {
padding: 1.5em;
label {
margin-top: 1em;
}
input {
margin-bottom: 1em;
}
}
}
}
<form class="pure-form pure-form-stacked" id="converse-login" method="post">
<form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
{[ if (auto_login) { ]}
<span class="spinner login-submit"/>
{[ } ]}
......@@ -8,7 +8,7 @@
<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}}">
<input class="pure-button" type="submit" value="{{label_login}}">
<span class="conn-feedback"></span>
{[ } ]}
{[ if (authentication == ANONYMOUS) { ]}
......
<form id="converse-register" class="pure-form">
<form id="converse-register" class="pure-form converse-form">
<span class="reg-feedback"></span>
<label>{{label_domain}}</label>
<input type="text" name="domain" placeholder="{{domain_placeholder}}">
......
<span class="spinner login-submit"/>
<p class="info">{{info_message}}</p>
<button class="cancel hor_centered">{{cancel}}</button>
<button class="pure-button cancel hor_centered">{{cancel}}</button>
<form class="add-chatroom" action="" method="post">
<form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
<fieldset>
<label>{{label_room_name}}</label>
<input type="text" name="chatroom" class="new-chatroom-name"
placeholder="{{label_room_name}}"/>
<label>{{label_nickname}}</label>
<input type="text" name="nick" class="new-chatroom-nick"
placeholder="{{label_nickname}}"/>
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{label_room_name}}"/>
<label>{{label_nickname}}</label> <input type="text" name="nick" class="new-chatroom-nick" placeholder="{{label_nickname}}"/>
<input type="submit" class="pure-button" name="join" value="{{label_join}}"/>
</fieldset>
<fieldset>
{[ if (server_input_type != 'hidden') { ]}
<label{{server_label_global_attr}}>{{label_server}}</label>
{[ } ]}
<input type="{{server_input_type}}" name="server" class="new-chatroom-server"
placeholder="{{label_server}}"/>
<div class="button-group">
<input type="submit" class="left" name="join" value="{{label_join}}"/>
<input type="button" class="right" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
</div>
<input type="{{server_input_type}}" name="server" class="new-chatroom-server" placeholder="{{label_server}}"/>
<input type="button" class="pure-button" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
</fieldset>
</form>
<dl id="available-chatrooms"></dl>
......@@ -10,7 +10,7 @@
var XFORM_TYPE_MAP = {
'text-private': 'password',
'text-single': 'textline',
'text-single': 'text',
'fixed': 'label',
'boolean': 'checkbox',
'hidden': 'hidden',
......
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