Commit a607e09e authored by JC Brand's avatar JC Brand

Better textarea styling. Ensure all boxes are same height.

Conflicts:
	converse.css
parent b2d4205b
...@@ -75,7 +75,7 @@ span.spinner.hor_centered { ...@@ -75,7 +75,7 @@ span.spinner.hor_centered {
font-size: 100%; font-size: 100%;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
padding: 3px 0 3px 7px; padding: 3px 0 0 3px;
} }
.chat-head-chatbox { .chat-head-chatbox {
...@@ -88,7 +88,7 @@ span.spinner.hor_centered { ...@@ -88,7 +88,7 @@ span.spinner.hor_centered {
} }
.chatroom .chat-body { .chatroom .chat-body {
height: 272px; height: 274px;
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;
...@@ -107,12 +107,14 @@ span.spinner.hor_centered { ...@@ -107,12 +107,14 @@ span.spinner.hor_centered {
.chatroom .participants { .chatroom .participants {
float: left; float: left;
width: auto;
height: 272px;
background-color: white;
overflow: auto; overflow: auto;
border-left: 1px solid #AAA; border-left: 1px solid #AAA;
max-width: 98px; max-width: 98px;
height: 274px;
background-color: white;
overflow: auto;
border-left: 1px solid #AAA;
border-bottom-right-radius: 4px;
} }
.participants ul.participant-list li { .participants ul.participant-list li {
...@@ -129,11 +131,6 @@ ul.participant-list li.moderator { ...@@ -129,11 +131,6 @@ ul.participant-list li.moderator {
color: #FE0007; color: #FE0007;
} }
.chatroom form.sendXMPPMessage {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
.chatroom .participant-list { .chatroom .participant-list {
list-style: none; list-style: none;
} }
...@@ -148,8 +145,8 @@ ul.participant-list li.moderator { ...@@ -148,8 +145,8 @@ ul.participant-list li.moderator {
padding: 0.3em; padding: 0.3em;
font-size: 13px; font-size: 13px;
color: rgb(79, 79, 79); color: rgb(79, 79, 79);
height:193px; height:200px;
width: 190px; width: 192px;
overflow-y:auto; overflow-y:auto;
border: 0; border: 0;
background-color: #ffffff; background-color: #ffffff;
...@@ -171,6 +168,10 @@ ul.participant-list li.moderator { ...@@ -171,6 +168,10 @@ ul.participant-list li.moderator {
margin:0; margin:0;
} }
.chatroom .chat-content {
height:200px;
}
.chat-info { .chat-info {
color:#666666; color:#666666;
} }
...@@ -629,7 +630,7 @@ div#controlbox-panes { ...@@ -629,7 +630,7 @@ div#controlbox-panes {
background-color: white; background-color: white;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
width: 199px; width: 200px;
} }
...@@ -743,7 +744,7 @@ form.sendXMPPMessage { ...@@ -743,7 +744,7 @@ form.sendXMPPMessage {
background: white; background: white;
border: 0; border: 0;
border-top: 1px solid #BBB; border-top: 1px solid #BBB;
padding: 0.5em; padding: 0;
margin: 0; margin: 0;
position: relative; position: relative;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
...@@ -754,7 +755,45 @@ form.sendXMPPMessage { ...@@ -754,7 +755,45 @@ form.sendXMPPMessage {
background-clip: padding-box; background-clip: padding-box;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
height: 54px; height: 65px;
width: 200px;
}
.chatroom form.sendXMPPMessage {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
height: 65px;
}
.chat-textarea {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 0;
width: 100%;
padding: 3px;
border-radius: 4px;
resize: none;
height: 65px;
}
ul.chat-toolbar {
font-size: 14px;
margin: 0;
padding: 0 5px 0 0;
float: right;
display: inline-block;
height: 20px;
}
ul.chat-toolbar li {
display: inline-block;
list-style: none;
padding: 0 3px 0 3px;
}
ul.chat-toolbar li:hover {
cursor: pointer;
color: rgb(39, 39, 39);
} }
form#set-custom-xmpp-status { form#set-custom-xmpp-status {
...@@ -762,6 +801,16 @@ form#set-custom-xmpp-status { ...@@ -762,6 +801,16 @@ form#set-custom-xmpp-status {
padding: 0; padding: 0;
} }
.chat-textarea-chatbox-selected {
border: 1px solid #578308;
margin:0;
}
.chat-textarea-chatroom-selected {
border: 2px solid #2D617A;
margin:0;
}
#set-custom-xmpp-status button { #set-custom-xmpp-status button {
padding: 1px 2px 1px 1px; padding: 1px 2px 1px 1px;
} }
......
...@@ -586,7 +586,7 @@ ...@@ -586,7 +586,7 @@
return; return;
} }
var img_src = 'data:'+this.model.get('image_type')+';base64,'+this.model.get('image'), var img_src = 'data:'+this.model.get('image_type')+';base64,'+this.model.get('image'),
canvas = $('<canvas height="35px" width="35px" class="avatar"></canvas>'), canvas = $('<canvas height="33px" width="33px" class="avatar"></canvas>'),
ctx = canvas.get(0).getContext('2d'), ctx = canvas.get(0).getContext('2d'),
img = new Image(); // Create new Image object img = new Image(); // Create new Image object
img.onload = function() { img.onload = function() {
......
...@@ -193,7 +193,7 @@ ...@@ -193,7 +193,7 @@
<div class="chat-head chat-head-chatbox"> <div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
<a href="http://opkode.com" target="_blank" class="user"> <a href="http://opkode.com" target="_blank" class="user">
<canvas height="35px" width="35px" class="avatar" style="background-color: black"></canvas> <canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
<div class="chat-title"> JC Brand </div> <div class="chat-title"> JC Brand </div>
</a> </a>
<p class="user-custom-message"></p> <p class="user-custom-message"></p>
...@@ -219,6 +219,10 @@ ...@@ -219,6 +219,10 @@
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span> <span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div> </div>
<div class="chat-event">JC Brand is busy</div> <div class="chat-event">JC Brand is busy</div>
<div class="chat-message ">
<span class="chat-message-me">19:43 me:&nbsp;</span>
<span class="chat-message-content">Another message to check that scrolling works.</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>
...@@ -255,6 +259,10 @@ ...@@ -255,6 +259,10 @@
<span class="chat-message-me">19:42 me:&nbsp;</span> <span class="chat-message-me">19:42 me:&nbsp;</span>
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span> <span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div> </div>
<div class="chat-message ">
<span class="chat-message-room">19:43 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
<span class="chat-message-content">Another message to check that scrolling works.</span>
</div>
</div> </div>
<form class="sendXMPPMessage" action="" method="post"> <form class="sendXMPPMessage" action="" method="post">
<textarea type="text" class="chat-textarea" placeholder="Message"></textarea> <textarea type="text" class="chat-textarea" placeholder="Message"></textarea>
......
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