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

Mockup: add chatroom with error, fix box heights.

Browse Source
This commit is contained in:
JC Brand 2013-08-12 20:10:12 +02:00
parent e2c11bf19f
commit 4e606b3510
2 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
converse.css
View File

@ -55,7 +55,7 @@ span.spinner.hor_centered {
#toggle-controlbox { #toggle-controlbox {
position: fixed; position: fixed;
font-size: 80%; font-size: 70%;
bottom: 0; bottom: 0;
right: 0; right: 0;
border-top-right-radius: 4px; border-top-right-radius: 4px;
@ -63,9 +63,9 @@ span.spinner.hor_centered {
background: #e3e2e2; background: #e3e2e2;
border: 1px solid #c3c3c3; border: 1px solid #c3c3c3;
border-bottom: none; border-bottom: none;
padding: 0.25em 0.5em; padding: 1px 3px;
margin-right: 1em; margin-right: 15px;
height: 1.1em; height: 16px;
} }
#connecting-to-chat { #connecting-to-chat {
@ -222,7 +222,7 @@ li.chat-info {
div#settings, div#settings,
div#chatrooms, div#chatrooms,
div#login-dialog { div#login-dialog {
height: 272px; height: 274px;
} }
p.not-implemented { p.not-implemented {
@ -605,18 +605,12 @@ dd.available-chatroom:hover a.open-room {
border-radius: 4px; border-radius: 4px;
} }
.chatbox {
width: 201px;
}
.chatroom { .chatroom {
width: 300px; width: 300px;
height: 311px;
} }
.oc-chat-content { .oc-chat-content {
height:272px; height:274px;
width: 199px;
padding: 0; padding: 0;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
@ -742,7 +736,6 @@ div#login-dialog,
div#settings { div#settings {
border: 0; border: 0;
font-size: 14px; font-size: 14px;
width: 199px;
background-color: white; background-color: white;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;

37
mockup.html
View File

@ -172,18 +172,15 @@
<p></p> <p></p>
</div> </div>
<div class="chat-content"> <div class="chat-content">
<div class="chat-message"><span class="chat-message-me">19:39 me:&nbsp;</span><span class="chat-message-content">Hello world</span></div> <div class="chat-message">
<span class="chat-message-me">19:39 me:&nbsp;</span>
<span class="chat-message-content">Hello world</span>
</div>
</div> </div>
<form class="sendXMPPMessage" action="" method="post"> <form class="sendXMPPMessage" action="" method="post">
<textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea> <textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
</form> </form>
</div> </div>
</div>
<div id="toggle-controlbox">
<a href="#" class="chat toggle-online-users">
<strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
</a>
</div>
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392" style="opacity: 1; display: inline;"> <div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392" style="opacity: 1; display: inline;">
<div class="chat-head chat-head-chatroom"> <div class="chat-head chat-head-chatroom">
@ -221,6 +218,32 @@
</div> </div>
</div> </div>
<div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9" style="opacity: 1; display: inline;">
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button">X</a>
<a class="configure-chatroom-button" style="display:none">&nbsp;</a>
<div class="chat-title"> problematic </div>
<p class="chatroom-topic"></p>
<p></p>
</div>
<div class="chat-body">
<div class="chatroom-form-container">
<form class="chatroom-form">
<legend>This chatroom requires a password</legend>
<label>Password: <input type="password" name="password"></label>
</form>
</div>
</div>
</div>
</div>
<div id="toggle-controlbox">
<a href="#" class="chat toggle-online-users">
<strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
</a>
</div>
</div> </div>
</body> </body>