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

More CSS/styling updates

Browse Source 
- 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.
This commit is contained in:
JC Brand 2015-10-29 07:12:13 +00:00
parent 1fb18eeff7
commit 8fd20f3ac9
11 changed files with 207 additions and 1221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

909
css/converse.css
View File

@ -431,12 +431,6 @@
Licensed under the BSD License.
https://github.com/yahoo/pure/blob/master/LICENSE.md
*/
/*!
Pure v0.6.1-pre
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yahoo/pure/blob/master/LICENSE.md
*/
/*csslint box-model:false*/
/*
Box-model set to false because we're setting a height on select elements, which
@ -477,20 +471,6 @@
/* Firefox: Get rid of the inner focus border */
/*csslint outline-none:false*/
/* Firefox: Get rid of the inner focus border */
/*!
Pure v0.6.1-pre
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yahoo/pure/blob/master/LICENSE.md
*/
/*csslint adjoining-classes: false, box-model:false*/
/* HORIZONTAL MENU */
/* Initial menus should be inline-block so that they are horizontal */
/* Submenus should still be display: block; */
/* Vertical Menus - show the dropdown arrow */
/* Horizontal Menus - show the dropdown arrow */
/* scrollable menus */
/* misc default styling */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
@ -654,626 +634,6 @@
max-width: 100%;
height: auto;
display: block; }
@media screen and (min-width: 35.5em) {
#conversejs .pure-u-sm-1,
#conversejs .pure-u-sm-1-1,
#conversejs .pure-u-sm-1-2,
#conversejs .pure-u-sm-1-3,
#conversejs .pure-u-sm-2-3,
#conversejs .pure-u-sm-1-4,
#conversejs .pure-u-sm-3-4,
#conversejs .pure-u-sm-1-5,
#conversejs .pure-u-sm-2-5,
#conversejs .pure-u-sm-3-5,
#conversejs .pure-u-sm-4-5,
#conversejs .pure-u-sm-5-5,
#conversejs .pure-u-sm-1-6,
#conversejs .pure-u-sm-5-6,
#conversejs .pure-u-sm-1-8,
#conversejs .pure-u-sm-3-8,
#conversejs .pure-u-sm-5-8,
#conversejs .pure-u-sm-7-8,
#conversejs .pure-u-sm-1-12,
#conversejs .pure-u-sm-5-12,
#conversejs .pure-u-sm-7-12,
#conversejs .pure-u-sm-11-12,
#conversejs .pure-u-sm-1-24,
#conversejs .pure-u-sm-2-24,
#conversejs .pure-u-sm-3-24,
#conversejs .pure-u-sm-4-24,
#conversejs .pure-u-sm-5-24,
#conversejs .pure-u-sm-6-24,
#conversejs .pure-u-sm-7-24,
#conversejs .pure-u-sm-8-24,
#conversejs .pure-u-sm-9-24,
#conversejs .pure-u-sm-10-24,
#conversejs .pure-u-sm-11-24,
#conversejs .pure-u-sm-12-24,
#conversejs .pure-u-sm-13-24,
#conversejs .pure-u-sm-14-24,
#conversejs .pure-u-sm-15-24,
#conversejs .pure-u-sm-16-24,
#conversejs .pure-u-sm-17-24,
#conversejs .pure-u-sm-18-24,
#conversejs .pure-u-sm-19-24,
#conversejs .pure-u-sm-20-24,
#conversejs .pure-u-sm-21-24,
#conversejs .pure-u-sm-22-24,
#conversejs .pure-u-sm-23-24,
#conversejs .pure-u-sm-24-24 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto; }
#conversejs .pure-u-sm-1-24 {
width: 4.1667%;
*width: 4.1357%; }
#conversejs .pure-u-sm-1-12,
#conversejs .pure-u-sm-2-24 {
width: 8.3333%;
*width: 8.3023%; }
#conversejs .pure-u-sm-1-8,
#conversejs .pure-u-sm-3-24 {
width: 12.5000%;
*width: 12.4690%; }
#conversejs .pure-u-sm-1-6,
#conversejs .pure-u-sm-4-24 {
width: 16.6667%;
*width: 16.6357%; }
#conversejs .pure-u-sm-1-5 {
width: 20%;
*width: 19.9690%; }
#conversejs .pure-u-sm-5-24 {
width: 20.8333%;
*width: 20.8023%; }
#conversejs .pure-u-sm-1-4,
#conversejs .pure-u-sm-6-24 {
width: 25%;
*width: 24.9690%; }
#conversejs .pure-u-sm-7-24 {
width: 29.1667%;
*width: 29.1357%; }
#conversejs .pure-u-sm-1-3,
#conversejs .pure-u-sm-8-24 {
width: 33.3333%;
*width: 33.3023%; }
#conversejs .pure-u-sm-3-8,
#conversejs .pure-u-sm-9-24 {
width: 37.5000%;
*width: 37.4690%; }
#conversejs .pure-u-sm-2-5 {
width: 40%;
*width: 39.9690%; }
#conversejs .pure-u-sm-5-12,
#conversejs .pure-u-sm-10-24 {
width: 41.6667%;
*width: 41.6357%; }
#conversejs .pure-u-sm-11-24 {
width: 45.8333%;
*width: 45.8023%; }
#conversejs .pure-u-sm-1-2,
#conversejs .pure-u-sm-12-24 {
width: 50%;
*width: 49.9690%; }
#conversejs .pure-u-sm-13-24 {
width: 54.1667%;
*width: 54.1357%; }
#conversejs .pure-u-sm-7-12,
#conversejs .pure-u-sm-14-24 {
width: 58.3333%;
*width: 58.3023%; }
#conversejs .pure-u-sm-3-5 {
width: 60%;
*width: 59.9690%; }
#conversejs .pure-u-sm-5-8,
#conversejs .pure-u-sm-15-24 {
width: 62.5000%;
*width: 62.4690%; }
#conversejs .pure-u-sm-2-3,
#conversejs .pure-u-sm-16-24 {
width: 66.6667%;
*width: 66.6357%; }
#conversejs .pure-u-sm-17-24 {
width: 70.8333%;
*width: 70.8023%; }
#conversejs .pure-u-sm-3-4,
#conversejs .pure-u-sm-18-24 {
width: 75%;
*width: 74.9690%; }
#conversejs .pure-u-sm-19-24 {
width: 79.1667%;
*width: 79.1357%; }
#conversejs .pure-u-sm-4-5 {
width: 80%;
*width: 79.9690%; }
#conversejs .pure-u-sm-5-6,
#conversejs .pure-u-sm-20-24 {
width: 83.3333%;
*width: 83.3023%; }
#conversejs .pure-u-sm-7-8,
#conversejs .pure-u-sm-21-24 {
width: 87.5000%;
*width: 87.4690%; }
#conversejs .pure-u-sm-11-12,
#conversejs .pure-u-sm-22-24 {
width: 91.6667%;
*width: 91.6357%; }
#conversejs .pure-u-sm-23-24 {
width: 95.8333%;
*width: 95.8023%; }
#conversejs .pure-u-sm-1,
#conversejs .pure-u-sm-1-1,
#conversejs .pure-u-sm-5-5,
#conversejs .pure-u-sm-24-24 {
width: 100%; } }
@media screen and (min-width: 48em) {
#conversejs .pure-u-md-1,
#conversejs .pure-u-md-1-1,
#conversejs .pure-u-md-1-2,
#conversejs .pure-u-md-1-3,
#conversejs .pure-u-md-2-3,
#conversejs .pure-u-md-1-4,
#conversejs .pure-u-md-3-4,
#conversejs .pure-u-md-1-5,
#conversejs .pure-u-md-2-5,
#conversejs .pure-u-md-3-5,
#conversejs .pure-u-md-4-5,
#conversejs .pure-u-md-5-5,
#conversejs .pure-u-md-1-6,
#conversejs .pure-u-md-5-6,
#conversejs .pure-u-md-1-8,
#conversejs .pure-u-md-3-8,
#conversejs .pure-u-md-5-8,
#conversejs .pure-u-md-7-8,
#conversejs .pure-u-md-1-12,
#conversejs .pure-u-md-5-12,
#conversejs .pure-u-md-7-12,
#conversejs .pure-u-md-11-12,
#conversejs .pure-u-md-1-24,
#conversejs .pure-u-md-2-24,
#conversejs .pure-u-md-3-24,
#conversejs .pure-u-md-4-24,
#conversejs .pure-u-md-5-24,
#conversejs .pure-u-md-6-24,
#conversejs .pure-u-md-7-24,
#conversejs .pure-u-md-8-24,
#conversejs .pure-u-md-9-24,
#conversejs .pure-u-md-10-24,
#conversejs .pure-u-md-11-24,
#conversejs .pure-u-md-12-24,
#conversejs .pure-u-md-13-24,
#conversejs .pure-u-md-14-24,
#conversejs .pure-u-md-15-24,
#conversejs .pure-u-md-16-24,
#conversejs .pure-u-md-17-24,
#conversejs .pure-u-md-18-24,
#conversejs .pure-u-md-19-24,
#conversejs .pure-u-md-20-24,
#conversejs .pure-u-md-21-24,
#conversejs .pure-u-md-22-24,
#conversejs .pure-u-md-23-24,
#conversejs .pure-u-md-24-24 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto; }
#conversejs .pure-u-md-1-24 {
width: 4.1667%;
*width: 4.1357%; }
#conversejs .pure-u-md-1-12,
#conversejs .pure-u-md-2-24 {
width: 8.3333%;
*width: 8.3023%; }
#conversejs .pure-u-md-1-8,
#conversejs .pure-u-md-3-24 {
width: 12.5000%;
*width: 12.4690%; }
#conversejs .pure-u-md-1-6,
#conversejs .pure-u-md-4-24 {
width: 16.6667%;
*width: 16.6357%; }
#conversejs .pure-u-md-1-5 {
width: 20%;
*width: 19.9690%; }
#conversejs .pure-u-md-5-24 {
width: 20.8333%;
*width: 20.8023%; }
#conversejs .pure-u-md-1-4,
#conversejs .pure-u-md-6-24 {
width: 25%;
*width: 24.9690%; }
#conversejs .pure-u-md-7-24 {
width: 29.1667%;
*width: 29.1357%; }
#conversejs .pure-u-md-1-3,
#conversejs .pure-u-md-8-24 {
width: 33.3333%;
*width: 33.3023%; }
#conversejs .pure-u-md-3-8,
#conversejs .pure-u-md-9-24 {
width: 37.5000%;
*width: 37.4690%; }
#conversejs .pure-u-md-2-5 {
width: 40%;
*width: 39.9690%; }
#conversejs .pure-u-md-5-12,
#conversejs .pure-u-md-10-24 {
width: 41.6667%;
*width: 41.6357%; }
#conversejs .pure-u-md-11-24 {
width: 45.8333%;
*width: 45.8023%; }
#conversejs .pure-u-md-1-2,
#conversejs .pure-u-md-12-24 {
width: 50%;
*width: 49.9690%; }
#conversejs .pure-u-md-13-24 {
width: 54.1667%;
*width: 54.1357%; }
#conversejs .pure-u-md-7-12,
#conversejs .pure-u-md-14-24 {
width: 58.3333%;
*width: 58.3023%; }
#conversejs .pure-u-md-3-5 {
width: 60%;
*width: 59.9690%; }
#conversejs .pure-u-md-5-8,
#conversejs .pure-u-md-15-24 {
width: 62.5000%;
*width: 62.4690%; }
#conversejs .pure-u-md-2-3,
#conversejs .pure-u-md-16-24 {
width: 66.6667%;
*width: 66.6357%; }
#conversejs .pure-u-md-17-24 {
width: 70.8333%;
*width: 70.8023%; }
#conversejs .pure-u-md-3-4,
#conversejs .pure-u-md-18-24 {
width: 75%;
*width: 74.9690%; }
#conversejs .pure-u-md-19-24 {
width: 79.1667%;
*width: 79.1357%; }
#conversejs .pure-u-md-4-5 {
width: 80%;
*width: 79.9690%; }
#conversejs .pure-u-md-5-6,
#conversejs .pure-u-md-20-24 {
width: 83.3333%;
*width: 83.3023%; }
#conversejs .pure-u-md-7-8,
#conversejs .pure-u-md-21-24 {
width: 87.5000%;
*width: 87.4690%; }
#conversejs .pure-u-md-11-12,
#conversejs .pure-u-md-22-24 {
width: 91.6667%;
*width: 91.6357%; }
#conversejs .pure-u-md-23-24 {
width: 95.8333%;
*width: 95.8023%; }
#conversejs .pure-u-md-1,
#conversejs .pure-u-md-1-1,
#conversejs .pure-u-md-5-5,
#conversejs .pure-u-md-24-24 {
width: 100%; } }
@media screen and (min-width: 64em) {
#conversejs .pure-u-lg-1,
#conversejs .pure-u-lg-1-1,
#conversejs .pure-u-lg-1-2,
#conversejs .pure-u-lg-1-3,
#conversejs .pure-u-lg-2-3,
#conversejs .pure-u-lg-1-4,
#conversejs .pure-u-lg-3-4,
#conversejs .pure-u-lg-1-5,
#conversejs .pure-u-lg-2-5,
#conversejs .pure-u-lg-3-5,
#conversejs .pure-u-lg-4-5,
#conversejs .pure-u-lg-5-5,
#conversejs .pure-u-lg-1-6,
#conversejs .pure-u-lg-5-6,
#conversejs .pure-u-lg-1-8,
#conversejs .pure-u-lg-3-8,
#conversejs .pure-u-lg-5-8,
#conversejs .pure-u-lg-7-8,
#conversejs .pure-u-lg-1-12,
#conversejs .pure-u-lg-5-12,
#conversejs .pure-u-lg-7-12,
#conversejs .pure-u-lg-11-12,
#conversejs .pure-u-lg-1-24,
#conversejs .pure-u-lg-2-24,
#conversejs .pure-u-lg-3-24,
#conversejs .pure-u-lg-4-24,
#conversejs .pure-u-lg-5-24,
#conversejs .pure-u-lg-6-24,
#conversejs .pure-u-lg-7-24,
#conversejs .pure-u-lg-8-24,
#conversejs .pure-u-lg-9-24,
#conversejs .pure-u-lg-10-24,
#conversejs .pure-u-lg-11-24,
#conversejs .pure-u-lg-12-24,
#conversejs .pure-u-lg-13-24,
#conversejs .pure-u-lg-14-24,
#conversejs .pure-u-lg-15-24,
#conversejs .pure-u-lg-16-24,
#conversejs .pure-u-lg-17-24,
#conversejs .pure-u-lg-18-24,
#conversejs .pure-u-lg-19-24,
#conversejs .pure-u-lg-20-24,
#conversejs .pure-u-lg-21-24,
#conversejs .pure-u-lg-22-24,
#conversejs .pure-u-lg-23-24,
#conversejs .pure-u-lg-24-24 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto; }
#conversejs .pure-u-lg-1-24 {
width: 4.1667%;
*width: 4.1357%; }
#conversejs .pure-u-lg-1-12,
#conversejs .pure-u-lg-2-24 {
width: 8.3333%;
*width: 8.3023%; }
#conversejs .pure-u-lg-1-8,
#conversejs .pure-u-lg-3-24 {
width: 12.5000%;
*width: 12.4690%; }
#conversejs .pure-u-lg-1-6,
#conversejs .pure-u-lg-4-24 {
width: 16.6667%;
*width: 16.6357%; }
#conversejs .pure-u-lg-1-5 {
width: 20%;
*width: 19.9690%; }
#conversejs .pure-u-lg-5-24 {
width: 20.8333%;
*width: 20.8023%; }
#conversejs .pure-u-lg-1-4,
#conversejs .pure-u-lg-6-24 {
width: 25%;
*width: 24.9690%; }
#conversejs .pure-u-lg-7-24 {
width: 29.1667%;
*width: 29.1357%; }
#conversejs .pure-u-lg-1-3,
#conversejs .pure-u-lg-8-24 {
width: 33.3333%;
*width: 33.3023%; }
#conversejs .pure-u-lg-3-8,
#conversejs .pure-u-lg-9-24 {
width: 37.5000%;
*width: 37.4690%; }
#conversejs .pure-u-lg-2-5 {
width: 40%;
*width: 39.9690%; }
#conversejs .pure-u-lg-5-12,
#conversejs .pure-u-lg-10-24 {
width: 41.6667%;
*width: 41.6357%; }
#conversejs .pure-u-lg-11-24 {
width: 45.8333%;
*width: 45.8023%; }
#conversejs .pure-u-lg-1-2,
#conversejs .pure-u-lg-12-24 {
width: 50%;
*width: 49.9690%; }
#conversejs .pure-u-lg-13-24 {
width: 54.1667%;
*width: 54.1357%; }
#conversejs .pure-u-lg-7-12,
#conversejs .pure-u-lg-14-24 {
width: 58.3333%;
*width: 58.3023%; }
#conversejs .pure-u-lg-3-5 {
width: 60%;
*width: 59.9690%; }
#conversejs .pure-u-lg-5-8,
#conversejs .pure-u-lg-15-24 {
width: 62.5000%;
*width: 62.4690%; }
#conversejs .pure-u-lg-2-3,
#conversejs .pure-u-lg-16-24 {
width: 66.6667%;
*width: 66.6357%; }
#conversejs .pure-u-lg-17-24 {
width: 70.8333%;
*width: 70.8023%; }
#conversejs .pure-u-lg-3-4,
#conversejs .pure-u-lg-18-24 {
width: 75%;
*width: 74.9690%; }
#conversejs .pure-u-lg-19-24 {
width: 79.1667%;
*width: 79.1357%; }
#conversejs .pure-u-lg-4-5 {
width: 80%;
*width: 79.9690%; }
#conversejs .pure-u-lg-5-6,
#conversejs .pure-u-lg-20-24 {
width: 83.3333%;
*width: 83.3023%; }
#conversejs .pure-u-lg-7-8,
#conversejs .pure-u-lg-21-24 {
width: 87.5000%;
*width: 87.4690%; }
#conversejs .pure-u-lg-11-12,
#conversejs .pure-u-lg-22-24 {
width: 91.6667%;
*width: 91.6357%; }
#conversejs .pure-u-lg-23-24 {
width: 95.8333%;
*width: 95.8023%; }
#conversejs .pure-u-lg-1,
#conversejs .pure-u-lg-1-1,
#conversejs .pure-u-lg-5-5,
#conversejs .pure-u-lg-24-24 {
width: 100%; } }
@media screen and (min-width: 80em) {
#conversejs .pure-u-xl-1,
#conversejs .pure-u-xl-1-1,
#conversejs .pure-u-xl-1-2,
#conversejs .pure-u-xl-1-3,
#conversejs .pure-u-xl-2-3,
#conversejs .pure-u-xl-1-4,
#conversejs .pure-u-xl-3-4,
#conversejs .pure-u-xl-1-5,
#conversejs .pure-u-xl-2-5,
#conversejs .pure-u-xl-3-5,
#conversejs .pure-u-xl-4-5,
#conversejs .pure-u-xl-5-5,
#conversejs .pure-u-xl-1-6,
#conversejs .pure-u-xl-5-6,
#conversejs .pure-u-xl-1-8,
#conversejs .pure-u-xl-3-8,
#conversejs .pure-u-xl-5-8,
#conversejs .pure-u-xl-7-8,
#conversejs .pure-u-xl-1-12,
#conversejs .pure-u-xl-5-12,
#conversejs .pure-u-xl-7-12,
#conversejs .pure-u-xl-11-12,
#conversejs .pure-u-xl-1-24,
#conversejs .pure-u-xl-2-24,
#conversejs .pure-u-xl-3-24,
#conversejs .pure-u-xl-4-24,
#conversejs .pure-u-xl-5-24,
#conversejs .pure-u-xl-6-24,
#conversejs .pure-u-xl-7-24,
#conversejs .pure-u-xl-8-24,
#conversejs .pure-u-xl-9-24,
#conversejs .pure-u-xl-10-24,
#conversejs .pure-u-xl-11-24,
#conversejs .pure-u-xl-12-24,
#conversejs .pure-u-xl-13-24,
#conversejs .pure-u-xl-14-24,
#conversejs .pure-u-xl-15-24,
#conversejs .pure-u-xl-16-24,
#conversejs .pure-u-xl-17-24,
#conversejs .pure-u-xl-18-24,
#conversejs .pure-u-xl-19-24,
#conversejs .pure-u-xl-20-24,
#conversejs .pure-u-xl-21-24,
#conversejs .pure-u-xl-22-24,
#conversejs .pure-u-xl-23-24,
#conversejs .pure-u-xl-24-24 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto; }
#conversejs .pure-u-xl-1-24 {
width: 4.1667%;
*width: 4.1357%; }
#conversejs .pure-u-xl-1-12,
#conversejs .pure-u-xl-2-24 {
width: 8.3333%;
*width: 8.3023%; }
#conversejs .pure-u-xl-1-8,
#conversejs .pure-u-xl-3-24 {
width: 12.5000%;
*width: 12.4690%; }
#conversejs .pure-u-xl-1-6,
#conversejs .pure-u-xl-4-24 {
width: 16.6667%;
*width: 16.6357%; }
#conversejs .pure-u-xl-1-5 {
width: 20%;
*width: 19.9690%; }
#conversejs .pure-u-xl-5-24 {
width: 20.8333%;
*width: 20.8023%; }
#conversejs .pure-u-xl-1-4,
#conversejs .pure-u-xl-6-24 {
width: 25%;
*width: 24.9690%; }
#conversejs .pure-u-xl-7-24 {
width: 29.1667%;
*width: 29.1357%; }
#conversejs .pure-u-xl-1-3,
#conversejs .pure-u-xl-8-24 {
width: 33.3333%;
*width: 33.3023%; }
#conversejs .pure-u-xl-3-8,
#conversejs .pure-u-xl-9-24 {
width: 37.5000%;
*width: 37.4690%; }
#conversejs .pure-u-xl-2-5 {
width: 40%;
*width: 39.9690%; }
#conversejs .pure-u-xl-5-12,
#conversejs .pure-u-xl-10-24 {
width: 41.6667%;
*width: 41.6357%; }
#conversejs .pure-u-xl-11-24 {
width: 45.8333%;
*width: 45.8023%; }
#conversejs .pure-u-xl-1-2,
#conversejs .pure-u-xl-12-24 {
width: 50%;
*width: 49.9690%; }
#conversejs .pure-u-xl-13-24 {
width: 54.1667%;
*width: 54.1357%; }
#conversejs .pure-u-xl-7-12,
#conversejs .pure-u-xl-14-24 {
width: 58.3333%;
*width: 58.3023%; }
#conversejs .pure-u-xl-3-5 {
width: 60%;
*width: 59.9690%; }
#conversejs .pure-u-xl-5-8,
#conversejs .pure-u-xl-15-24 {
width: 62.5000%;
*width: 62.4690%; }
#conversejs .pure-u-xl-2-3,
#conversejs .pure-u-xl-16-24 {
width: 66.6667%;
*width: 66.6357%; }
#conversejs .pure-u-xl-17-24 {
width: 70.8333%;
*width: 70.8023%; }
#conversejs .pure-u-xl-3-4,
#conversejs .pure-u-xl-18-24 {
width: 75%;
*width: 74.9690%; }
#conversejs .pure-u-xl-19-24 {
width: 79.1667%;
*width: 79.1357%; }
#conversejs .pure-u-xl-4-5 {
width: 80%;
*width: 79.9690%; }
#conversejs .pure-u-xl-5-6,
#conversejs .pure-u-xl-20-24 {
width: 83.3333%;
*width: 83.3023%; }
#conversejs .pure-u-xl-7-8,
#conversejs .pure-u-xl-21-24 {
width: 87.5000%;
*width: 87.4690%; }
#conversejs .pure-u-xl-11-12,
#conversejs .pure-u-xl-22-24 {
width: 91.6667%;
*width: 91.6357%; }
#conversejs .pure-u-xl-23-24 {
width: 95.8333%;
*width: 95.8023%; }
#conversejs .pure-u-xl-1,
#conversejs .pure-u-xl-1-1,
#conversejs .pure-u-xl-5-5,
#conversejs .pure-u-xl-24-24 {
width: 100%; } }
#conversejs .pure-form input[type="text"],
#conversejs .pure-form input[type="password"],
#conversejs .pure-form input[type="email"],
@ -1629,114 +989,6 @@
#conversejs a.pure-button-selected {
background-color: #0078e7;
color: #fff; }
#conversejs .pure-menu {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
#conversejs .pure-menu-fixed {
position: fixed;
left: 0;
top: 0;
z-index: 3; }
#conversejs .pure-menu-list,
#conversejs .pure-menu-item {
position: relative; }
#conversejs .pure-menu-list {
list-style: none;
margin: 0;
padding: 0; }
#conversejs .pure-menu-item {
padding: 0;
margin: 0;
height: 100%; }
#conversejs .pure-menu-link,
#conversejs .pure-menu-heading {
display: block;
text-decoration: none;
white-space: nowrap; }
#conversejs .pure-menu-horizontal {
width: 100%;
white-space: nowrap; }
#conversejs .pure-menu-horizontal .pure-menu-list {
display: inline-block; }
#conversejs .pure-menu-horizontal .pure-menu-item,
#conversejs .pure-menu-horizontal .pure-menu-heading,
#conversejs .pure-menu-horizontal .pure-menu-separator {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle; }
#conversejs .pure-menu-item .pure-menu-item {
display: block; }
#conversejs .pure-menu-children {
display: none;
position: absolute;
left: 100%;
top: 0;
margin: 0;
padding: 0;
z-index: 3; }
#conversejs .pure-menu-horizontal .pure-menu-children {
left: 0;
top: auto;
width: inherit; }
#conversejs .pure-menu-allow-hover:hover > .pure-menu-children,
#conversejs .pure-menu-active > .pure-menu-children {
display: block;
position: absolute; }
#conversejs .pure-menu-has-children > .pure-menu-link:after {
padding-left: 0.5em;
content: "\25B8";
font-size: small; }
#conversejs .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
content: "\25BE"; }
#conversejs .pure-menu-scrollable {
overflow-y: scroll;
overflow-x: hidden; }
#conversejs .pure-menu-scrollable .pure-menu-list {
display: block; }
#conversejs .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
display: inline-block; }
#conversejs .pure-menu-horizontal.pure-menu-scrollable {
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
/* a little extra padding for this style to allow for scrollbars */
padding: .5em 0; }
#conversejs .pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
display: none; }
#conversejs .pure-menu-separator {
background-color: #ccc;
height: 1px;
margin: .3em 0; }
#conversejs .pure-menu-horizontal .pure-menu-separator {
width: 1px;
height: 1.3em;
margin: 0 0.3em; }
#conversejs .pure-menu-heading {
text-transform: uppercase;
color: #565d64; }
#conversejs .pure-menu-link {
color: #777; }
#conversejs .pure-menu-children {
background-color: #fff; }
#conversejs .pure-menu-link,
#conversejs .pure-menu-disabled,
#conversejs .pure-menu-heading {
padding: .5em 1em; }
#conversejs .pure-menu-disabled {
opacity: .5; }
#conversejs .pure-menu-disabled .pure-menu-link:hover {
background-color: transparent; }
#conversejs .pure-menu-active > .pure-menu-link,
#conversejs .pure-menu-link:hover,
#conversejs .pure-menu-link:focus {
background-color: #eee; }
#conversejs .pure-menu-selected .pure-menu-link,
#conversejs .pure-menu-selected .pure-menu-link:visited {
color: #000; }
#conversejs *, #conversejs *:before, #conversejs *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -1782,12 +1034,6 @@
text-decoration: none;
color: #436F64;
text-shadow: none; }
#conversejs form.pure-form.converse-form {
padding: 1.5em; }
#conversejs form.pure-form.converse-form label {
margin-top: 1em; }
#conversejs form.pure-form.converse-form input {
margin-bottom: 1em; }
#conversejs {
bottom: 0;
@ -1896,8 +1142,6 @@
border-bottom-left-radius: 4px; }
#conversejs .error {
color: red; }
#conversejs input.error {
border: 1px solid red; }
#conversejs .reg-feedback {
font-size: 85%; }
#conversejs .reg-feedback,
@ -1931,12 +1175,28 @@
padding: 1px 0 1px 5px; }
#conversejs .activated {
display: block !important; }
#conversejs .pure-button {
border-radius: 4px; }
#conversejs form.pure-form.converse-form {
padding: 1.5em; }
background: white;
margin: 1em; }
#conversejs form.pure-form.converse-form legend {
color: #777; }
#conversejs form.pure-form.converse-form label {
margin-top: 1em; }
#conversejs form.pure-form.converse-form input {
margin-bottom: 1em; }
#conversejs form.pure-form.converse-form input[type=text],
#conversejs form.pure-form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] {
height: 2.2em; }
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em; }
#conversejs form.pure-form.converse-form input.error {
border: 1px solid red;
color: #777; }
#conversejs form.pure-form.converse-form .form-help {
color: gray;
font-size: 85%;
@ -2256,8 +1516,7 @@
#conversejs #controlbox #converse-register .instructions:hover {
color: #777; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
margin: 2em 1em 1em 1em;
background: white; }
margin-top: 2em; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto;
white-space: normal; }
@ -2270,78 +1529,66 @@
color: #436F64; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%;
height: 30px;
margin: 1em 0; }
margin: 0.5em 0; }
#conversejs #controlbox #users .add-converse-contact {
margin: 0 0.5em 0.75em 0.5em; }
#conversejs #controlbox #chatrooms {
overflow-y: auto; }
#conversejs #controlbox #chatrooms form.add-chatroom {
background: none;
padding: 0.5em; }
#conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
margin: 0;
width: 100%;
padding: 0.25em; }
#conversejs #controlbox #chatrooms form.add-chatroom span.spinner,
#conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit] {
margin-top: 0.5em;
display: table-cell;
width: auto; }
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit] {
color: #436F64; }
#conversejs #controlbox #chatrooms #available-chatrooms {
text-align: left; }
#conversejs #controlbox #chatrooms #available-chatrooms dt {
font-weight: normal;
color: #777;
border: none;
padding: 0.5em;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom {
border: none;
clear: both;
color: #777;
display: block;
font-weight: bold;
overflow: hidden;
padding: 0.25em 0.5em;
#conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
width: 100%; }
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit] {
color: #436F64; }
#conversejs #controlbox #chatrooms #available-chatrooms {
padding: 0 1em 2em 1em;
text-align: left; }
#conversejs #controlbox #chatrooms #available-chatrooms dt {
border: none;
color: #777;
font-weight: normal;
padding: 0;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom {
border: none;
clear: both;
color: #777;
display: block;
font-weight: bold;
overflow: hidden;
padding: 0;
padding-top: 0.5em;
text-overflow: ellipsis;
text-shadow: 0 1px 0 #FAFAFA;
white-space: nowrap; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover {
background-color: #E1E6E5; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover .room-info {
display: block;
font-size: 14px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info {
width: 15px;
display: none;
clear: right; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.open-room {
float: left;
overflow-x: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 0 #FAFAFA;
white-space: nowrap; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover {
background-color: #E1E6E5; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover .room-info {
display: block;
font-size: 14px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info {
width: 15px;
display: none;
clear: right; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.open-room {
float: left;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom .room-info {
font-size: 11px;
font-style: normal;
font-weight: normal; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom li.room-info {
display: block;
margin-left: 5px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom p.room-info {
margin: 0;
padding: 0;
display: block;
white-space: normal; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom div.room-info {
clear: left;
width: 100%; }
white-space: nowrap;
width: 150px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom .room-info {
font-size: 11px;
font-style: normal;
font-weight: normal; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom li.room-info {
display: block;
margin-left: 5px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom p.room-info {
margin: 0;
padding: 0;
display: block;
white-space: normal; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom div.room-info {
clear: left;
width: 100%; }
#conversejs #controlbox .dropdown a {
width: 148px;
display: inline-block;
@ -2460,7 +1707,7 @@
height: 289px;
height: -webkit-calc(100% - 44px);
height: calc(100% - 44px);
overflow-y: hidden;
overflow-y: scroll;
overflow-x: hidden; }
#conversejs #controlbox .controlbox-pane label {
font-size: 14px;

150
mockup/controlbox.html
View File

@ -27,45 +27,55 @@
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="flyout box-flyout">
<div class="dragresize"></div>
<div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<div class="chat-head controlbox-head">
<ul id="controlbox-tabs">
<li><a class="current" href="#login">Sign in</a></li>
<li><a href="#register">Register</a></li>
<li><a class="current" href="#login-dialog">Sign in</a></li>
<li><a class="s" href="#register">Register</a></li>
</ul>
<a class="close-chatbox-button icon-close"></a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
</div>
<div id="login-dialog" class="controlbox-pane">
<form id="converse-login">
<label>XMPP Username:</label><input type="text" id="jid" placeholder="name@server">
<label>Password:</label><input type="password" id="password">
<input class="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">
<label>XMPP Username:</label><input type="text" id="jid" placeholder="name@server">
<label>Password:</label><input type="password" name="password">
<label>Confirm Password:</label><input type="password" name="password_confirm">
<input class="submit" type="submit" value="Register">
<div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane">
<form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
<label>XMPP Username:</label>
<input type="text" name="jid" placeholder="user@server">
<label>Password:</label>
<input type="password" name="password" placeholder="password">
<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" class="pure-form converse-form">
<span class="reg-feedback"></span>
<label>Your XMPP provider's domain name:</label>
<input type="text" name="domain" placeholder=" e.g. conversejs.org">
<p class="form-help">
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="pure-button submit" type="submit" value="Fetch registration form">
</form>
</div>
</div>
</div>
</div>
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="flyout box-flyout">
<div class="dragresize"></div>
<div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<div class="chat-head controlbox-head">
<ul id="controlbox-tabs">
<li><a class="s current" href="#users">Contacts</a></li>
<li><a class="s" href="#chatrooms">Rooms</a></li>
</ul>
<a class="close-chatbox-button icon-close"></a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
</div>
<div id="users" class="controlbox-pane" style="display: block;">
<form class="set-xmpp-status" action="" method="post">
<span id="xmpp-status-holder">
@ -101,11 +111,6 @@
<span class="icon-offline"></span>
Offline</a>
</li>
<li>
<a href="#" class="offline" data-value="offline">
<span class="icon-exit"></span>
Logout</a>
</li>
</ul>
</dd>
</dl>
@ -131,17 +136,20 @@
</dd>
</dl>
<div id="converse-roster">
<input class="roster-filter" placeholder="Type to filter">
<select class="filter-type">
<option value="contacts">Contacts</option>
<option value="groups">Groups</option>
</select>
<span class="input-button-group">
<input class="roster-filter" placeholder="Type to filter">
<select class="filter-type">
<option value="contacts">Contacts</option>
<option value="groups">Groups</option>
</select>
</span>
<dl class="roster-contacts" style="display: block;">
<dt class="roster-group" style="display: block;">
<a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<a class="open-chat" title="Name: Victor Matfield JID: victor.matfield@localhost Click to chat with this contact" href="#">
<span class="icon-online" title="This contact is online"></span>
Victor Matfield
</a>
@ -161,7 +169,6 @@
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
<a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
</dt>
@ -179,7 +186,6 @@
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
<a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
</dt>
@ -197,7 +203,6 @@
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
</dt>
@ -208,12 +213,11 @@
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt id="xmpp-contact-requests" style="display: block;">
<dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
</dt>
<dd class="offline requesting-xmpp-contact">
<span class="req-contact-name">Bob Skinstad</span>
<span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span>
<span class="request-actions">
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
@ -227,10 +231,10 @@
</span>
</dd>
<dt id="pending-xmpp-contacts" style="display: block;">
<dt class="roster-group" id="pending-xmpp-contacts" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Pending Contacts</a>
</dt>
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Rassie Erasmus</span>
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name" title="Name: Rassie Erasmus JID: rassie.erasmus@localhost">Rassie Erasmus</span>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span>
@ -238,41 +242,41 @@
</dd>
</dl>
</div>
</div>
</div>
<div id="chatrooms" class="controlbox-pane" style="display: none;">
<form class="add-chatroom" action="" method="post">
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
<input type="text" name="server" class="new-chatroom-server" placeholder="Server">
<input type="submit" name="join" value="Join">
<input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
</form>
<dl id="available-chatrooms">
<dt>Rooms on conference.opkode.im</dt>
<dd class="available-chatroom">
<a class="open-room"
data-room-jid="converse.js@conference.opkode.im"
title="Click to open this room" href="#">Special chatroom with a long name (2)</a>
<a class="room-info icon-room-info"
data-room-jid="converse.js@conference.opkode.im"
title="Show more information on this room" href="#">&nbsp;</a>
<div class="room-info">
<p class="room-info"><strong>Description:</strong></p>
<p class="room-info"><strong>Occupants:</strong> 2</p>
<p class="room-info"><strong>Features:</strong> </p>
<ul>
<li class="room-info">Moderated</li><li class="room-info">Open room</li>
<li class="room-info">Permanent room</li><li class="room-info">Public</li>
<li class="room-info">Semi-anonymous</li>
<li class="room-info">Requires authentication <span class="icon-lock"></span></li>
<p></p>
</ul>
</div>
</dd>
</dl>
</div>
<div id="chatrooms" class="controlbox-pane" style="">
<form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
<fieldset>
<legend>Join an existing room or create a new one</legend>
<label>Room name</label>
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
<label>Nickname</label>
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
<input type="submit" class="pure-button left" name="join" value="Open Room">
</fieldset>
<fieldset>
<label>Server</label>
<!-- TODO: this must be a tooltip
<p class="form-help">Rooms are hosted on XMPP servers. You need to specify a server on which the room you want to join is hosted. </p>
-->
<input type="text" name="server" class="new-chatroom-server" placeholder="Server">
<input type="button" class="pure-button right" name="show" id="show-rooms" value="Show rooms">
</fieldset>
</form>
<dl id="available-chatrooms">
<dt>Rooms on conference.myserver.com</dt>
<dd class="available-chatroom">
<a class="open-room" data-room-jid="eee@conference.opkode.com" title="Click to open this room" href="#">Current Events</a>
<a class="room-info icon-room-info" data-room-jid="eee@conference.opkode.com" title="Show more information on this room" href="#">&nbsp;</a>
</dd>
<dd class="available-chatroom">
<a class="open-room" data-room-jid="hello@conference.opkode.com" title="Click to open this room" href="#">Software Development</a>
<a class="room-info icon-room-info" data-room-jid="hello@conference.opkode.com" title="Show more information on this room" href="#">&nbsp;</a>
</dd>
</dl>
</dl>
</div>
</div>
</div>
</div>

253
mockup/index.html
View File

@ -25,259 +25,6 @@
<span style="display: none" id="online-count">(0)</span>
</a>
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="flyout box-flyout">
<div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<div class="chat-head controlbox-head">
<ul id="controlbox-tabs">
<li><a class="current" href="#login-dialog">Sign in</a></li>
<li><a class="s" href="#register">Register</a></li>
</ul>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
</div>
<div class="controlbox-panes">
<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="text" name="jid" placeholder="user@server">
<label>Password:</label>
<input type="password" name="password" placeholder="password">
<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" 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">
<p class="form-help">
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="pure-button submit" type="submit" value="Fetch registration form">
</form>
</div>
</div>
</div>
</div>
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="flyout box-flyout">
<div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<div class="chat-head controlbox-head">
<ul id="controlbox-tabs">
<li><a class="s current" href="#users">Contacts</a></li>
<li><a class="s" href="#chatrooms">Rooms</a></li>
</ul>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
</div>
<div id="users" class="controlbox-pane" style="display: block;">
<form class="set-xmpp-status" action="" method="post">
<span id="xmpp-status-holder">
<dl id="target" class="dropdown">
<dt id="fancy-xmpp-status-select" class="fancy-dropdown">
<div class="xmpp-status">
<a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">
<span class="icon-online"></span>
I am online
</a>
<a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
</div>
</dt>
<dd>
<ul style="display: none;" class="xmpp-status-menu">
<li>
<a href="#" class="online" data-value="online">
<span class="icon-online"></span>
Online</a>
</li>
<li>
<a href="#" class="dnd" data-value="dnd">
<span class="icon-dnd"></span>
Busy</a>
</li>
<li>
<a href="#" class="away" data-value="away">
<span class="icon-away"></span>
Away</a>
</li>
<li>
<a href="#" class="offline" data-value="offline">
<span class="icon-offline"></span>
Offline</a>
</li>
</ul>
</dd>
</dl>
</span>
</form>
<dl class="add-converse-contact dropdown">
<dt id="xmpp-contact-search" class="fancy-dropdown">
<a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts">
<span class="icon-plus"></span>
Add a contact
</a>
</dt>
<dd class="search-xmpp" style="display:none">
<ul>
<li>
<form class="add-xmpp-contact">
<input type="text" name="identifier" class="username" placeholder="Contact username">
<button type="submit">Add</button>
</form>
</li>
<li></li>
</ul>
</dd>
</dl>
<div id="converse-roster">
<span class="input-button-group">
<input class="roster-filter" placeholder="Type to filter">
<select class="filter-type">
<option value="contacts">Contacts</option>
<option value="groups">Groups</option>
</select>
</span>
<dl class="roster-contacts" style="display: block;">
<dt class="roster-group" style="display: block;">
<a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Name: Victor Matfield JID: victor.matfield@localhost Click to chat with this contact" href="#">
<span class="icon-online" title="This contact is online"></span>
Victor Matfield
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="away current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-away" title="this contact is away"></span>
William Winterbottom
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="dnd current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-dnd" title="This contact is busy"></span>
Gary Teichmann
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
<a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
</dt>
<dd class="away current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-away" title="this contact is away"></span>
Allan Donald
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="offline current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-offline" title="This contact is offline"></span>
Corné Krige
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
<a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-online" title="This contact is online"></span>
John Smit
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-online" title="This contact is online"></span>
Bakkies Botha
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-online" title="This contact is online"></span>
James Small
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
</dt>
<dd class="offline requesting-xmpp-contact">
<span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span>
<span class="request-actions">
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
</span>
</dd>
<dd class="offline requesting-xmpp-contact">
<span class="req-contact-name">André Vos</span>
<span class="request-actions">
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
</span>
</dd>
<dt class="roster-group" id="pending-xmpp-contacts" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Pending Contacts</a>
</dt>
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name" title="Name: Rassie Erasmus JID: rassie.erasmus@localhost">Rassie Erasmus</span>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
</dl>
</div>
</div>
<div id="chatrooms" class="controlbox-pane" style="display: none;">
<form class="add-chatroom" action="" method="post">
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
<input type="text" name="server" class="new-chatroom-server" placeholder="Server">
<input type="submit" name="join" value="Join">
<input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
</form>
<dl id="available-chatrooms">
<dt>Rooms on conference.opkode.im</dt>
<dd class="available-chatroom">
<a class="open-room"
data-room-jid="converse.js@conference.opkode.im"
title="Click to open this room" href="#">Special chatroom with a long name (2)</a>
<a class="room-info icon-room-info"
data-room-jid="converse.js@conference.opkode.im"
title="Show more information on this room" href="#">&nbsp;</a>
<div class="room-info">
<p class="room-info"><strong>Description:</strong></p>
<p class="room-info"><strong>Occupants:</strong> 2</p>
<p class="room-info"><strong>Features:</strong> </p>
<ul>
<li class="room-info">Moderated</li><li class="room-info">Open room</li>
<li class="room-info">Permanent room</li><li class="room-info">Public</li>
<li class="room-info">Semi-anonymous</li>
<li class="room-info">Requires authentication <span class="icon-lock"></span></li>
<p></p>
</ul>
</div>
</dd>
</dl>
</div>
</div>
</div>
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout">
<div class="dragresize dragresize-top"></div>

30
sass/_controlbox.scss
View File

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

31
sass/_core.scss
View File

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

15
sass/_normalize.scss
View File

@ -1,9 +1,7 @@
#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;
}
}
}
}

4
src/templates/login_panel.html
View File

@ -1,4 +1,4 @@
<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) { ]}

2
src/templates/register_panel.html
View File

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

2
src/templates/registration_request.html
View File

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

30
src/templates/room_panel.html
View File

@ -1,18 +1,16 @@
<form class="add-chatroom" action="" method="post">
<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}}"/>
{[ 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>
<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="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}}"/>
<input type="button" class="pure-button" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
</fieldset>
</form>
<dl id="available-chatrooms"></dl>

2
src/utils.js
View File

@ -10,7 +10,7 @@
var XFORM_TYPE_MAP = {
'text-private': 'password',
'text-single': 'textline',
'text-single': 'text',
'fixed': 'label',
'boolean': 'checkbox',
'hidden': 'hidden',