Skip to content

C
converse.js
Commit 8fd20f3a authored by JC Brand's avatar JC Brand
Browse files
Options

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
Hide whitespace changes
Inline Side-by-side
Showing with 206 additions and 1220 deletions
css/converse.css
View file @ 8fd20f3a
...@@ -431,12 +431,6 @@ ...@@ -431,12 +431,6 @@
Licensed under the BSD License. Licensed under the BSD License.
https://github.com/yahoo/pure/blob/master/LICENSE.md 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*/ /*csslint box-model:false*/
/* /*
Box-model set to false because we're setting a height on select elements, which Box-model set to false because we're setting a height on select elements, which
...@@ -477,20 +471,6 @@ ...@@ -477,20 +471,6 @@
/* Firefox: Get rid of the inner focus border */ /* Firefox: Get rid of the inner focus border */
/*csslint outline-none:false*/ /*csslint outline-none:false*/
/* Firefox: Get rid of the inner focus border */ /* 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; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
...@@ -654,626 +634,6 @@ ...@@ -654,626 +634,6 @@
max-width: 100%; max-width: 100%;
height: auto; height: auto;
display: block; } 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="text"],
#conversejs .pure-form input[type="password"], #conversejs .pure-form input[type="password"],
#conversejs .pure-form input[type="email"], #conversejs .pure-form input[type="email"],
...@@ -1629,114 +989,6 @@ ...@@ -1629,114 +989,6 @@
#conversejs a.pure-button-selected { #conversejs a.pure-button-selected {
background-color: #0078e7; background-color: #0078e7;
color: #fff; } 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 { #conversejs *, #conversejs *:before, #conversejs *:after {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -1782,12 +1034,6 @@ ...@@ -1782,12 +1034,6 @@
text-decoration: none; text-decoration: none;
color: #436F64; color: #436F64;
text-shadow: none; } 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 { #conversejs {
bottom: 0; bottom: 0;
...@@ -1896,8 +1142,6 @@ ...@@ -1896,8 +1142,6 @@
border-bottom-left-radius: 4px; } border-bottom-left-radius: 4px; }
#conversejs .error { #conversejs .error {
color: red; } color: red; }
#conversejs input.error {
border: 1px solid red; }
#conversejs .reg-feedback { #conversejs .reg-feedback {
font-size: 85%; } font-size: 85%; }
#conversejs .reg-feedback, #conversejs .reg-feedback,
...@@ -1931,12 +1175,28 @@ ...@@ -1931,12 +1175,28 @@
padding: 1px 0 1px 5px; } padding: 1px 0 1px 5px; }
#conversejs .activated { #conversejs .activated {
display: block !important; } display: block !important; }
#conversejs .pure-button {
border-radius: 4px; }
#conversejs form.pure-form.converse-form { #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 { #conversejs form.pure-form.converse-form label {
margin-top: 1em; } margin-top: 1em; }
#conversejs form.pure-form.converse-form input { #conversejs form.pure-form.converse-form input[type=text],
margin-bottom: 1em; } #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 { #conversejs form.pure-form.converse-form .form-help {
color: gray; color: gray;
font-size: 85%; font-size: 85%;
...@@ -2256,8 +1516,7 @@ ...@@ -2256,8 +1516,7 @@
#conversejs #controlbox #converse-register .instructions:hover { #conversejs #controlbox #converse-register .instructions:hover {
color: #777; } color: #777; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
margin: 2em 1em 1em 1em; margin-top: 2em; }
background: white; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon { #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto; height: auto;
white-space: normal; } white-space: normal; }
...@@ -2270,78 +1529,66 @@ ...@@ -2270,78 +1529,66 @@
color: #436F64; } color: #436F64; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input { #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%; width: 100%;
height: 30px; margin: 0.5em 0; }
margin: 1em 0; }
#conversejs #controlbox #users .add-converse-contact { #conversejs #controlbox #users .add-converse-contact {
margin: 0 0.5em 0.75em 0.5em; } margin: 0 0.5em 0.75em 0.5em; }
#conversejs #controlbox #chatrooms { #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
overflow-y: auto; } #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms form.add-chatroom { #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
background: none; width: 100%; }
padding: 0.5em; } #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit] {
#conversejs #controlbox #chatrooms form.add-chatroom input[type=button], color: #436F64; }
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit], #conversejs #controlbox #chatrooms #available-chatrooms {
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] { 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;
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; margin: 0;
width: 100%; padding: 0;
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; display: block;
font-weight: bold; white-space: normal; }
overflow: hidden; #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom div.room-info {
padding: 0.25em 0.5em; clear: left;
text-overflow: ellipsis; width: 100%; }
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%; }
#conversejs #controlbox .dropdown a { #conversejs #controlbox .dropdown a {
width: 148px; width: 148px;
display: inline-block; display: inline-block;
...@@ -2460,7 +1707,7 @@ ...@@ -2460,7 +1707,7 @@
height: 289px; height: 289px;
height: -webkit-calc(100% - 44px); height: -webkit-calc(100% - 44px);
height: calc(100% - 44px); height: calc(100% - 44px);
overflow-y: hidden; overflow-y: scroll;
overflow-x: hidden; } overflow-x: hidden; }
#conversejs #controlbox .controlbox-pane label { #conversejs #controlbox .controlbox-pane label {
font-size: 14px; font-size: 14px;
......
mockup/controlbox.html
View file @ 8fd20f3a
...@@ -27,45 +27,55 @@ ...@@ -27,45 +27,55 @@
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;"> <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="flyout box-flyout"> <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"> <div class="chat-head controlbox-head">
<ul id="controlbox-tabs"> <ul id="controlbox-tabs">
<li><a class="current" href="#login">Sign in</a></li> <li><a class="current" href="#login-dialog">Sign in</a></li>
<li><a href="#register">Register</a></li> <li><a class="s" href="#register">Register</a></li>
</ul> </ul>
<a class="close-chatbox-button icon-close"></a> <a class="chatbox-btn close-chatbox-button icon-close"></a>
</div> </div>
<div id="login-dialog" class="controlbox-pane"> <div class="controlbox-panes">
<form id="converse-login"> <div id="login-dialog" class="controlbox-pane">
<label>XMPP Username:</label><input type="text" id="jid" placeholder="name@server"> <form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
<label>Password:</label><input type="password" id="password"> <label>XMPP Username:</label>
<input class="submit" type="submit" value="Log In"> <input type="text" name="jid" placeholder="user@server">
<span class="conn-feedback"></span> <label>Password:</label>
</form> <input type="password" name="password" placeholder="password">
</div> <input class="pure-button submit" type="submit" value="Log In">
<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">
<span class="conn-feedback"></span> <span class="conn-feedback"></span>
</form> </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>
</div> </div>
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;"> <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="flyout box-flyout"> <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"> <div class="chat-head controlbox-head">
<ul id="controlbox-tabs"> <ul id="controlbox-tabs">
<li><a class="s current" href="#users">Contacts</a></li> <li><a class="s current" href="#users">Contacts</a></li>
<li><a class="s" href="#chatrooms">Rooms</a></li> <li><a class="s" href="#chatrooms">Rooms</a></li>
</ul> </ul>
<a class="close-chatbox-button icon-close"></a> <a class="chatbox-btn close-chatbox-button icon-close"></a>
</div> </div>
<div id="users" class="controlbox-pane" style="display: block;"> <div id="users" class="controlbox-pane" style="display: block;">
<form class="set-xmpp-status" action="" method="post"> <form class="set-xmpp-status" action="" method="post">
<span id="xmpp-status-holder"> <span id="xmpp-status-holder">
...@@ -101,11 +111,6 @@ ...@@ -101,11 +111,6 @@
<span class="icon-offline"></span> <span class="icon-offline"></span>
Offline</a> Offline</a>
</li> </li>
<li>
<a href="#" class="offline" data-value="offline">
<span class="icon-exit"></span>
Logout</a>
</li>
</ul> </ul>
</dd> </dd>
</dl> </dl>
...@@ -131,17 +136,20 @@ ...@@ -131,17 +136,20 @@
</dd> </dd>
</dl> </dl>
<div id="converse-roster"> <div id="converse-roster">
<input class="roster-filter" placeholder="Type to filter"> <span class="input-button-group">
<select class="filter-type"> <input class="roster-filter" placeholder="Type to filter">
<option value="contacts">Contacts</option> <select class="filter-type">
<option value="groups">Groups</option> <option value="contacts">Contacts</option>
</select> <option value="groups">Groups</option>
</select>
</span>
<dl class="roster-contacts" style="display: block;"> <dl class="roster-contacts" style="display: block;">
<dt class="roster-group" 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> <a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
</dt> </dt>
<dd class="online current-xmpp-contact"> <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> <span class="icon-online" title="This contact is online"></span>
Victor Matfield Victor Matfield
</a> </a>
...@@ -161,7 +169,6 @@ ...@@ -161,7 +169,6 @@
</a> </a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd> </dd>
<dt class="roster-group" style="display: block;"> <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> <a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
</dt> </dt>
...@@ -179,7 +186,6 @@ ...@@ -179,7 +186,6 @@
</a> </a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd> </dd>
<dt class="roster-group" style="display: block;"> <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> <a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
</dt> </dt>
...@@ -197,7 +203,6 @@ ...@@ -197,7 +203,6 @@
</a> </a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd> </dd>
<dt class="roster-group" style="display: block;"> <dt class="roster-group" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a> <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
</dt> </dt>
...@@ -208,12 +213,11 @@ ...@@ -208,12 +213,11 @@
</a> </a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd> </dd>
<dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
<dt id="xmpp-contact-requests" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a> <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
</dt> </dt>
<dd class="offline requesting-xmpp-contact"> <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"> <span class="request-actions">
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a> <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> <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
...@@ -227,10 +231,10 @@ ...@@ -227,10 +231,10 @@
</span> </span>
</dd> </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> <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Pending Contacts</a>
</dt> </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> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd> </dd>
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span> <dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span>
...@@ -238,41 +242,41 @@ ...@@ -238,41 +242,41 @@
</dd> </dd>
</dl> </dl>
</div> </div>
</div> </div>
<div id="chatrooms" class="controlbox-pane" style="display: none;"> <div id="chatrooms" class="controlbox-pane" style="">
<form class="add-chatroom" action="" method="post"> <form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name"> <fieldset>
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname"> <legend>Join an existing room or create a new one</legend>
<input type="text" name="server" class="new-chatroom-server" placeholder="Server"> <label>Room name</label>
<input type="submit" name="join" value="Join"> <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
<input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;"> <label>Nickname</label>
</form> <input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
<dl id="available-chatrooms"> <input type="submit" class="pure-button left" name="join" value="Open Room">
<dt>Rooms on conference.opkode.im</dt> </fieldset>
<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>
<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> </div>
</div> </div>
......
mockup/index.html
View file @ 8fd20f3a
...@@ -25,259 +25,6 @@ ...@@ -25,259 +25,6 @@
<span style="display: none" id="online-count">(0)</span> <span style="display: none" id="online-count">(0)</span>
</a> </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="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="dragresize dragresize-top"></div> <div class="dragresize dragresize-top"></div>
......
sass/_controlbox.scss
View file @ 8fd20f3a
...@@ -73,8 +73,7 @@ ...@@ -73,8 +73,7 @@
} }
#converse-register, #converse-login { #converse-register, #converse-login {
margin: 2em 1em 1em 1em; margin-top: 2em;
background: white;
.login-anon { .login-anon {
height: auto; height: auto;
white-space: normal; white-space: normal;
...@@ -91,8 +90,7 @@ ...@@ -91,8 +90,7 @@
} }
input { input {
width: 100%; width: 100%;
height: 30px; margin: 0.5em 0;
margin: 1em 0;
} }
} }
#users { #users {
...@@ -102,35 +100,24 @@ ...@@ -102,35 +100,24 @@
} }
#chatrooms { #chatrooms {
overflow-y: auto;
form.add-chatroom { form.add-chatroom {
background: none;
padding: 0.5em;
input[type=button], input[type=button],
input[type=submit], input[type=submit],
input[type=text] { input[type=text] {
margin: 0;
width: 100%; 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] { input[type=submit] {
color: $save-button-color; color: $save-button-color;
} }
} }
#available-chatrooms { #available-chatrooms {
padding: 0 1em 2em 1em;
text-align: left; text-align: left;
dt { dt {
font-weight: normal;
color: $text-color;
border: none; border: none;
padding: 0.5em; color: $text-color;
font-weight: normal;
padding: 0;
text-shadow: 0 1px 0 $text-shadow-color; text-shadow: 0 1px 0 $text-shadow-color;
} }
dd.available-chatroom { dd.available-chatroom {
...@@ -140,7 +127,8 @@ ...@@ -140,7 +127,8 @@
display: block; display: block;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
padding: 0.25em 0.5em; padding: 0;
padding-top: 0.5em;
text-overflow: ellipsis; text-overflow: ellipsis;
text-shadow: 0 1px 0 $text-shadow-color; text-shadow: 0 1px 0 $text-shadow-color;
white-space: nowrap; white-space: nowrap;
...@@ -341,7 +329,7 @@ ...@@ -341,7 +329,7 @@
width: 100%; width: 100%;
height: 289px; height: 289px;
@include calc(height, '100% - #{$chat-head-height}'); @include calc(height, '100% - #{$chat-head-height}');
overflow-y: hidden; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
label { label {
font-size: $font-size; font-size: $font-size;
......
sass/_core.scss
View file @ 8fd20f3a
...@@ -115,10 +115,6 @@ ...@@ -115,10 +115,6 @@
.error { .error {
color: red; color: red;
} }
input.error {
border: 1px solid red;
}
.reg-feedback { .reg-feedback {
font-size: 85%; font-size: 85%;
} }
...@@ -164,14 +160,35 @@ ...@@ -164,14 +160,35 @@
display: block !important; display: block !important;
} }
.pure-button {
border-radius: $chatbox-border-radius;
}
form { form {
&.pure-form.converse-form { &.pure-form.converse-form {
padding: 1.5em; background: white;
margin: 1em;
legend {
color: $text-color;
}
label { label {
margin-top: 1em; margin-top: 1em;
} }
input { input[type=text],
margin-bottom: 1em; 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 { .form-help {
color: gray; color: gray;
......
sass/_normalize.scss
View file @ 8fd20f3a
#conversejs { #conversejs {
@import "pure/base"; @import "pure/base";
@import "pure/grids";
@import "pure/forms"; @import "pure/forms";
@import "pure/buttons"; @import "pure/buttons";
@import "pure/menus";
@include box-sizing(border-box); @include box-sizing(border-box);
*, *:before, *:after { *, *:before, *:after {
...@@ -66,17 +64,4 @@ ...@@ -66,17 +64,4 @@
color: $link-color; color: $link-color;
text-shadow: none; text-shadow: none;
} }
form {
&.pure-form.converse-form {
padding: 1.5em;
label {
margin-top: 1em;
}
input {
margin-bottom: 1em;
}
}
}
} }
src/templates/login_panel.html
View file @ 8fd20f3a
<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) { ]} {[ if (auto_login) { ]}
<span class="spinner login-submit"/> <span class="spinner login-submit"/>
{[ } ]} {[ } ]}
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<input type="text" name="jid" placeholder="{{placeholder_username}}"> <input type="text" name="jid" placeholder="{{placeholder_username}}">
<label>{{label_password}}</label> <label>{{label_password}}</label>
<input type="password" name="password" placeholder="{{placeholder_password}}"> <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> <span class="conn-feedback"></span>
{[ } ]} {[ } ]}
{[ if (authentication == ANONYMOUS) { ]} {[ if (authentication == ANONYMOUS) { ]}
......
src/templates/register_panel.html
View file @ 8fd20f3a
<form id="converse-register" class="pure-form"> <form id="converse-register" class="pure-form converse-form">
<span class="reg-feedback"></span> <span class="reg-feedback"></span>
<label>{{label_domain}}</label> <label>{{label_domain}}</label>
<input type="text" name="domain" placeholder="{{domain_placeholder}}"> <input type="text" name="domain" placeholder="{{domain_placeholder}}">
......
src/templates/registration_request.html
View file @ 8fd20f3a
<span class="spinner login-submit"/> <span class="spinner login-submit"/>
<p class="info">{{info_message}}</p> <p class="info">{{info_message}}</p>
<button class="cancel hor_centered">{{cancel}}</button> <button class="pure-button cancel hor_centered">{{cancel}}</button>
src/templates/room_panel.html
View file @ 8fd20f3a
<form class="add-chatroom" action="" method="post"> <form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
<label>{{label_room_name}}</label> <fieldset>
<input type="text" name="chatroom" class="new-chatroom-name" <label>{{label_room_name}}</label>
placeholder="{{label_room_name}}"/> <input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{label_room_name}}"/>
<label>{{label_nickname}}</label> <label>{{label_nickname}}</label> <input type="text" name="nick" class="new-chatroom-nick" placeholder="{{label_nickname}}"/>
<input type="text" name="nick" class="new-chatroom-nick" <input type="submit" class="pure-button" name="join" value="{{label_join}}"/>
placeholder="{{label_nickname}}"/> </fieldset>
{[ if (server_input_type != 'hidden') { ]} <fieldset>
<label{{server_label_global_attr}}>{{label_server}}</label> {[ 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="{{server_input_type}}" name="server" class="new-chatroom-server" placeholder="{{label_server}}"/>
<div class="button-group"> <input type="button" class="pure-button" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
<input type="submit" class="left" name="join" value="{{label_join}}"/> </fieldset>
<input type="button" class="right" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
</div>
</form> </form>
<dl id="available-chatrooms"></dl> <dl id="available-chatrooms"></dl>
src/utils.js
View file @ 8fd20f3a
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
var XFORM_TYPE_MAP = { var XFORM_TYPE_MAP = {
'text-private': 'password', 'text-private': 'password',
'text-single': 'textline', 'text-single': 'text',
'fixed': 'label', 'fixed': 'label',
'boolean': 'checkbox', 'boolean': 'checkbox',
'hidden': 'hidden', '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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7