CSS fixes for fancy dropdowns after some browser testing

This commit is contained in:
JC Brand 2013-05-20 19:54:22 +02:00
parent d1a743e6b5
commit 9aabe16155
2 changed files with 77 additions and 60 deletions

View File

@ -156,7 +156,6 @@ ul.participant-list li.moderator {
.chat-info {
color:#666666;
}
.chat-message-me {
@ -183,6 +182,10 @@ ul.participant-list li.moderator {
color: #808080;
}
li.chat-help {
padding-left: 10px;
}
.chat-date {
display: inline-block;
padding-top: 10px;
@ -270,12 +273,6 @@ a.subscribe-to-user {
dl.add-converse-contact {
margin: 0 0 0 0.5em;
z-index: 21;
background: url('images/add_icon.png') no-repeat 3px;
}
dt#xmpp-contact-search {
padding-top: 3px;
}
.fancy-dropdown {
@ -285,9 +282,8 @@ dt#xmpp-contact-search {
.fancy-dropdown a.choose-xmpp-status,
.fancy-dropdown a.toggle-xmpp-contact-form {
text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
padding-left: 1.5em;
width: 140px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
padding-left: 2em;
display: block;
overflow: hidden;
text-overflow: ellipsis;
@ -295,17 +291,11 @@ dt#xmpp-contact-search {
float: left;
}
#fancy-xmpp-status-select {
padding-bottom: 3px;
}
#fancy-xmpp-status-select a.change-xmpp-status-message {
text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
background: url('images/pencil_icon.png') no-repeat right top;
background: url('images/pencil_icon.png') no-repeat right 3px;
float: right;
clear: right;
width: 1em;
height: 1em;
height: 22px;
}
ul#found-users {
@ -316,8 +306,7 @@ ul#found-users {
form.search-xmpp-contact {
margin: 0;
padding-left: 5px;
padding: 1em 0 0 5px;
background: white;
padding: 0 0 5px 5px;
}
form.search-xmpp-contact input {
@ -649,15 +638,27 @@ form#converse-login .login-submit {
width: auto;
}
form.set-xmpp-status,
form.set-xmpp-status {
padding: 0.5em 0 0.5em 0.5em;
}
form.add-chatroom {
padding: 0.5em 0 0.3em 0.5em;
background: white;
padding: 0.5em;
}
form.add-chatroom input[type=text] {
width: 172px;
margin: 3px;
padding: 1px;
}
form.add-chatroom input[type=button],
form.add-chatroom input[type=submit] {
width: 50%;
}
.set-xmpp-status li {
list-style: none;
padding-left: 5px;
}
select#select-xmpp-status {
@ -754,16 +755,13 @@ form#set-custom-xmpp-status {
}
/* status dropdown styles */
dl.dropdown {
.chatbox dl.dropdown {
margin-right: 0.5em;
margin-bottom: 0;
background-color: rgb(240, 240, 240);
}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
div.xmpp-status {
padding: 3px;
}
.chatbox .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.chatbox .dropdown dd { position:relative; }
input.custom-xmpp-status {
width: 138px;
@ -778,47 +776,57 @@ form.add-xmpp-contact input {
width: 125px;
}
.dropdown dt a span {
cursor:pointer; display:block; padding:5px;
.chatbox .dropdown dt a span {
cursor:pointer;
display:block;
padding: 5px;
}
.dropdown dd ul {
padding-top: 5px;
.chatbox .dropdown dd ul {
padding: 5px 0 5px 0;
list-style:none;
position:absolute; left:0; top:0;
border:1px solid #ddd;
border-top: 0;
width: 99%;
background-color: #FFF;
z-index: 21;
background-color: rgb(240, 240, 240);
}
.dropdown dd ul li a:hover {
background-color: #bed6e5;
.set-xmpp-status .dropdown dd ul {
z-index: 22;
}
.dropdown span.value {
.chatbox .dropdown span.value {
display:none;
}
.dropdown dd ul li a {
padding:0 5px 5px 30px;
.chatbox .dropdown a {
padding: 3px 0 0 25px;
display: block;
height: 22px;
}
.dropdown a.online {
background: url(images/user_online_panel.png) no-repeat left 3px;
.chatbox .dropdown a.toggle-xmpp-contact-form {
background: url('images/add_icon.png') no-repeat 4px 2px;
}
.dropdown a.offline {
background: url(images/user_offline_panel.png) no-repeat left 3px;
.chatbox .dropdown a.online {
background: url(images/user_online_panel.png) no-repeat 3px 4px;
}
.dropdown a.dnd {
background: url(images/user_busy_panel.png) no-repeat left 3px;
.chatbox .dropdown a.offline {
background: url(images/user_offline_panel.png) no-repeat 3px 4px;
}
.dropdown a.away {
background: url(images/user_away_panel.png) no-repeat left 3px;
.chatbox .dropdown a.dnd {
background: url(images/user_busy_panel.png) no-repeat 3px 4px;
}
.chatbox .dropdown a.away {
background: url(images/user_away_panel.png) no-repeat 3px 4px;
}
.chatbox .dropdown dd ul a:hover {
background-color: #bed6e5;
}

View File

@ -585,17 +585,22 @@
),
add_contact_template: _.template(
'<li>'+
'<form class="add-xmpp-contact">' +
'<input type="text" name="identifier" class="username" placeholder="Contact name"/>' +
'<button type="submit">Add</button>' +
'</form>'),
'</form>'+
'<li>'
),
search_contact_template: _.template(
'<li>'+
'<form class="search-xmpp-contact">' +
'<input type="text" name="identifier" class="username" placeholder="Contact name"/>' +
'<button type="submit">Search</button>' +
'<ul id="found-users"></ul>' +
'</form>'),
'</form>'+
'<li>'
),
render: function () {
var markup;
@ -622,14 +627,16 @@
searchContacts: function (ev) {
ev.preventDefault();
$.getJSON(portal_url + "/search-users?q=" + $(ev.target).find('input.username').val(), function (data) {
var $results_el = $('#found-users');
$(data).each(function (idx, obj) {
if ($results_el.children().length) {
$results_el.empty();
var $ul= $('.search-xmpp ul');
$ul.find('li.found-user').remove();
$ul.find('li.chat-help').remove();
if (!data.length) {
$ul.append('<li class="chat-help">No users found</li>');
}
$results_el.append(
$('<li></li>')
.attr('id', 'found-users-'+obj.id)
$(data).each(function (idx, obj) {
$ul.append(
$('<li class="found-user"></li>')
.append(
$('<a class="subscribe-to-user" href="#" title="Click to add as a chat contact"></a>')
.attr('data-recipient', Strophe.escapeNode(obj.id)+'@'+converse.domain)
@ -744,8 +751,10 @@
template: _.template(
'<form class="add-chatroom" action="" method="post">'+
'<legend>'+
'<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name"/>'+
'<input type="text" name="server" class="new-chatroom-server" placeholder="Server"/>'+
'</legend>'+
'<input type="submit" name="join" value="Join"/>'+
'<input type="button" name="show" id="show-rooms" value="Show rooms"/>'+
'</form>'+