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

Update chatroom form for pure.css

Browse Source
This commit is contained in:
JC Brand 2015-10-28 21:07:29 +00:00
parent 8708b68577
commit 1fb18eeff7
6 changed files with 111 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
css/converse.css
View File

@ -1782,10 +1782,16 @@
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;
color: #6C4C44;
color: #777;
direction: ltr;
display: block;
font-size: 14px;
@ -1925,17 +1931,18 @@
padding: 1px 0 1px 5px; }
#conversejs .activated {
display: block !important; }
#conversejs form label {
font-size: 14px;
font-weight: bold;
height: auto;
margin: 4px; }
#conversejs form .form-help {
color: gray;
font-size: 85%;
padding-top: 5px; }
#conversejs form .form-help:hover {
color: #6C4C44; }
#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 form.pure-form.converse-form .form-help {
color: gray;
font-size: 85%;
padding-top: 5px; }
#conversejs form.pure-form.converse-form .form-help:hover {
color: #777; }
#conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308;
margin: 0; }
@ -2000,12 +2007,12 @@
height: -webkit-calc(100% - 44px);
height: calc(100% - 44px); }
#conversejs .chatbox .chat-body p {
color: #6C4C44;
color: #777;
font-size: 14px;
margin: 0;
padding: 5px; }
#conversejs .chatbox .chat-body .chat-info {
color: #6C4C44;
color: #777;
color: #808080;
margin: 0.3em; }
#conversejs .chatbox .chat-body .chat-info.chat-event {
@ -2042,7 +2049,7 @@
position: relative;
padding: 0.5em;
font-size: 13px;
color: #6C4C44;
color: #777;
overflow-y: auto;
border: 0;
background-color: #ffffff;
@ -2247,7 +2254,7 @@
color: gray;
font-size: 85%; }
#conversejs #controlbox #converse-register .instructions:hover {
color: #6C4C44; }
color: #777; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
margin: 2em 1em 1em 1em;
background: white; }
@ -2290,14 +2297,14 @@
text-align: left; }
#conversejs #controlbox #chatrooms #available-chatrooms dt {
font-weight: normal;
color: #6C4C44;
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: #6C4C44;
color: #777;
display: block;
font-weight: bold;
overflow: hidden;
@ -2390,7 +2397,7 @@
border-bottom: 0;
height: 44px;
cursor: default;
color: #6C4C44; }
color: #777; }
#conversejs #controlbox #controlbox-tabs li {
float: left;
list-style: none;
@ -2412,7 +2419,7 @@
text-align: center;
text-decoration: none; }
#conversejs #controlbox #controlbox-tabs li a:hover {
color: #6C4C44; }
color: #777; }
#conversejs #controlbox .xmpp-status {
display: inline; }
#conversejs #controlbox .fancy-dropdown {
@ -2548,7 +2555,7 @@
overflow-y: auto; }
#conversejs #converse-roster .roster-contacts dt.roster-group {
border: none;
color: #6C4C44;
color: #777;
display: none;
font-weight: normal;
padding: 0.5em;
@ -2556,13 +2563,13 @@
#conversejs #converse-roster .roster-contacts dt.roster-group:hover {
background-color: #E1E6E5; }
#conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
color: #6C4C44;
color: #777;
display: block;
width: 100%; }
#conversejs #converse-roster .roster-contacts dd {
border: none;
clear: both;
color: #6C4C44;
color: #777;
display: block;
font-weight: bold;
height: 24px;
@ -2600,7 +2607,7 @@
width: 22px;
margin: 0;
display: none;
color: #6C4C44; }
color: #777; }
#conversejs #converse-roster .roster-contacts dd a .open-chat {
width: 80%; }
#conversejs #converse-roster span.pending-contact-name {
@ -2668,53 +2675,18 @@
width: 100px; }
#conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li.moderator {
color: #8f2831; }
#conversejs .chatroom .box-flyout .chatroom-body label {
display: block;
font-size: 12px;
font-style: italic;
margin-left: 2px;
margin: 0.5em; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
background-color: white;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border: 0;
color: #6C4C44;
color: #777;
font-size: 14px;
height: 289px;
height: -webkit-calc(100% - 44px);
height: calc(100% - 44px);
overflow-y: auto;
position: absolute;
text-align: center;
width: 100%; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
padding: 1em; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form .instructions {
color: gray;
font-size: 95%; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input {
width: 100%;
padding: 0.5em;
text-align: left; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=checkbox] {
width: auto;
margin: auto; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=submit], #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=button] {
width: 50%;
margin-top: 1em;
text-align: center; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form legend {
font-size: 16px;
font-weight: bold;
margin: 10px 0 15px 0; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label {
font-weight: bold;
display: block;
clear: both;
margin-top: 1em; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label input, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label select {
float: right; }
position: absolute; }
#conversejs .chatroom .chat-head-chatroom {
background-color: #346121; }
#conversejs .chatroom .chat-textarea {

87
mockup/chatroom.html
View File

@ -33,46 +33,59 @@
</div>
<div class="chat-body chatroom-body">
<div class="chatroom-form-container">
<form class="chatroom-form">
<legend>Configuration for discuss@conference.conversejs.com</legend>
<p class="instructions">Complete and submit this form to configure the room.</p>
<input name="FORM_TYPE" type="hidden" value="http://jabber.org/protocol/muc#roomconfig">
<label>Name</label>
<input name="muc#roomconfig_roomname" type="textline" value="xxx">
<form class="pure-form pure-form-stacked converse-form chatroom-form">
<fieldset>
<legend>Configuration for discuss@conference.conversejs.com</legend>
<p class="form-help">Complete and submit this form to configure the room.</p>
<label>Description</label>
<input name="muc#roomconfig_roomdesc" type="textline">
<div class="input-group cb-input-group">
<label>Make Room Persistent?</label>
<input name="muc#roomconfig_persistentroom" type="checkbox">
</div>
<div class="input-group cb-input-group">
<label>Make Room Publicly Searchable?</label>
<input name="muc#roomconfig_publicroom" type="checkbox" checked="1">
</div>
<div class="input-group cb-input-group">
<label>Allow Occupants to Change Subject?</label>
<input name="muc#roomconfig_changesubject" type="checkbox">
</div>
<label>Who May Discover Real JIDs?</label>
<select name="muc#roomconfig_whois"><option value="moderators" selected="selected">Moderators Only</option>
<option value="anyone">Anyone</option>
</select>
<input name="FORM_TYPE" type="hidden" value="http://jabber.org/protocol/muc#roomconfig">
<label>Name</label>
<input name="muc#roomconfig_roomname" type="text" value="xxx">
<label>Description</label>
<input name="muc#roomconfig_roomdesc" type="text">
<label for="foo" class="pure-checkbox">
Make Room Persistent?
<input id="foo" name="muc#roomconfig_persistentroom" type="checkbox">
</label>
<label for="bar" class="pure-checkbox">
Make Room Publicly Searchable?
<input id="bar" name="muc#roomconfig_publicroom" type="checkbox" checked="1">
</label>
<label for="baz" class="pure-checkbox">
Allow Occupants to Change Subject?
<input id="baz" name="muc#roomconfig_changesubject" type="checkbox">
</label>
<label>Who May Discover Real JIDs?</label>
<select name="muc#roomconfig_whois"><option value="moderators" selected="selected">Moderators Only</option>
<option value="anyone">Anyone</option>
</select>
<label>Password</label>
<input name="muc#roomconfig_roomsecret" type="password">
<label for="buz" class="pure-checkbox">
Make Room Moderated?
<input id="buz" name="muc#roomconfig_moderatedroom" type="checkbox">
</label>
<label for="blah" class="pure-checkbox">
Make Room Members-Only?
<input id="blah" name="muc#roomconfig_membersonly" type="checkbox">
</label>
<label>Password</label>
<input name="muc#roomconfig_roomsecret" type="password">
<div class="input-group cb-input-group">
<label>Make Room Moderated?</label>
<input name="muc#roomconfig_moderatedroom" type="checkbox">
</div>
<div class="input-group cb-input-group">
<label>Make Room Members-Only?</label>
<input name="muc#roomconfig_membersonly" type="checkbox">
</div>
<label>Maximum Number of History Messages Returned by Room</label>
<input name="muc#roomconfig_historylength" type="textline" value="20">
<input type="submit" class="save-submit" value="Save">
<input type="button" class="cancel-submit" value="Cancel"></form>
<input name="muc#roomconfig_historylength" type="number" value="20">
</fieldset>
<fieldset>
<input type="submit" class="pure-button save-submit" value="Save">
<input type="button" class="pure-button cancel-submit" value="Cancel"></form>
</fieldset>
</div>
</div>
</div>

47
sass/_chatrooms.scss
View File

@ -67,13 +67,6 @@
}
}
}
label {
display: block;
font-size: 12px;
font-style: italic;
margin-left: 2px;
margin: 0.5em;
}
.chatroom-form-container {
background-color: white;
border-bottom-left-radius: $chatbox-border-radius;
@ -85,46 +78,6 @@
@include calc(height, '100% - #{$chat-head-height}');
overflow-y: auto;
position: absolute;
text-align: center;
width: 100%;
.chatroom-form {
padding: 1em;
.instructions {
color: gray;
font-size: 95%;
}
input {
width: 100%;
padding: 0.5em;
text-align: left;
}
input[type=checkbox] {
width: auto;
margin: auto;
}
input[type=submit], input[type=button] {
width: 50%;
margin-top: 1em;
text-align: center;
}
legend {
font-size: $legend-font-size;
font-weight: bold;
margin: 10px 0 15px 0;
}
label {
font-weight: bold;
display: block;
clear: both;
margin-top: 1em;
label input, label select {
float: right;
}
}
}
}
}
}

27
sass/_core.scss
View File

@ -165,18 +165,21 @@
}
form {
label {
font-size: $font-size;
font-weight: bold;
height: auto;
margin: 4px;
}
.form-help {
color: gray;
font-size: 85%;
padding-top: 5px;
&:hover {
color: $text-color;
&.pure-form.converse-form {
padding: 1.5em;
label {
margin-top: 1em;
}
input {
margin-bottom: 1em;
}
.form-help {
color: gray;
font-size: 85%;
padding-top: 5px;
&:hover {
color: $text-color;
}
}
}
}

12
sass/_normalize.scss
View File

@ -67,4 +67,16 @@
text-shadow: none;
}
form {
&.pure-form.converse-form {
padding: 1.5em;
label {
margin-top: 1em;
}
input {
margin-bottom: 1em;
}
}
}
}

2
sass/_variables.scss
View File

@ -2,7 +2,7 @@
$inverse-link-color: white !default;
$link-shadow-color: #FAFAFA !default;
$text-shadow-color: #FAFAFA !default;
$text-color: #6C4C44 !default;
$text-color: #777 !default;
$border-color: #CCC !default;
$warning-color: #681F2C !default;
$light-background-border-color: #E5E9E8 !default;