Nicer CSS and markup for room configuration forms.

This commit is contained in:
JC Brand 2017-08-16 09:39:13 +02:00
parent add3b8efb3
commit 4938621048
7 changed files with 57 additions and 23 deletions

View File

@ -1360,10 +1360,23 @@
padding: 1em; }
#converse-embedded-chat form.pure-form.converse-form legend,
#conversejs form.pure-form.converse-form legend {
color: #777; }
color: #777;
font-size: 125%; }
#converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
#conversejs form.pure-form.converse-form input[type=checkbox] {
display: block; }
#converse-embedded-chat form.pure-form.converse-form select,
#converse-embedded-chat form.pure-form.converse-form input[type=password],
#converse-embedded-chat form.pure-form.converse-form input[type=number],
#converse-embedded-chat form.pure-form.converse-form input[type=text],
#conversejs form.pure-form.converse-form select,
#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=text] {
min-width: 50%; }
#converse-embedded-chat form.pure-form.converse-form label,
#conversejs form.pure-form.converse-form label {
margin-top: 1em;
margin: 1em 0;
font-size: 16px; }
#converse-embedded-chat form.pure-form.converse-form input[type=text],
#converse-embedded-chat form.pure-form.converse-form input[type=password],

View File

@ -1360,10 +1360,23 @@
padding: 1em; }
#converse-embedded-chat form.pure-form.converse-form legend,
#conversejs form.pure-form.converse-form legend {
color: #777; }
color: #777;
font-size: 125%; }
#converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
#conversejs form.pure-form.converse-form input[type=checkbox] {
display: block; }
#converse-embedded-chat form.pure-form.converse-form select,
#converse-embedded-chat form.pure-form.converse-form input[type=password],
#converse-embedded-chat form.pure-form.converse-form input[type=number],
#converse-embedded-chat form.pure-form.converse-form input[type=text],
#conversejs form.pure-form.converse-form select,
#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=text] {
min-width: 50%; }
#converse-embedded-chat form.pure-form.converse-form label,
#conversejs form.pure-form.converse-form label {
margin-top: 1em;
margin: 1em 0;
font-size: 18px; }
#converse-embedded-chat form.pure-form.converse-form input[type=text],
#converse-embedded-chat form.pure-form.converse-form input[type=password],
@ -1445,10 +1458,9 @@ body {
height: 100vh; }
#conversejs form.pure-form.converse-form {
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[type=checkbox] {
margin-left: 1em;
display: inline; }
#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],

View File

@ -194,9 +194,19 @@
padding: 1em;
legend {
color: $text-color;
font-size: 125%;
}
input[type=checkbox] {
display: block;
}
select,
input[type=password],
input[type=number],
input[type=text] {
min-width: 50%;
}
label {
margin-top: 1em;
margin: 1em 0;
font-size: $font-size-large;
}
input[type=text],

View File

@ -39,11 +39,10 @@ body {
form {
&.pure-form.converse-form {
margin: 1em;
legend {
color: $text-color;
}
label {
margin-top: 1em;
input[type=checkbox] {
margin-left: 1em;
display: inline;
}
input[type=text],
input[type=password],

View File

@ -1,2 +1,2 @@
<label>{{{label}}}</label>
<input name="{{{name}}}" type="{{{type}}}" {{{checked}}}>
<label class="checkbox" for="{{{name}}}">{{{label}}}<input name="{{{name}}}" type="{{{type}}}" {{{checked}}}></label>

View File

@ -1,8 +1,6 @@
{[ if (label) { ]}
<label>
{{{label}}}
<input name="{{{name}}}" type="{{{type}}}"
{[ if (value) { ]} value="{{{value}}}" {[ } ]}
{[ if (required) { ]} class="required" {[ } ]} >
</label>
{[ } ]}
<input name="{{{name}}}" type="{{{type}}}"
{[ if (value) { ]} value="{{{value}}}" {[ } ]}
{[ if (required) { ]} class="required" {[ } ]} >

View File

@ -1,2 +1,4 @@
<label>{{{label}}}</label>
<select name="{{{name}}}" {[ if (multiple) { ]} multiple="multiple" {[ } ]}>{{options}}</select>
<label>
{{{label}}}
<select name="{{{name}}}" {[ if (multiple) { ]} multiple="multiple" {[ } ]}>{{options}}</select>
</label>