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

More CSS and markup fixes after looking in FF.

Browse Source 
Changed the icon-* selector to apply only to :before (fixes ugly font rendering in FF).
This commit is contained in:
JC Brand 2015-11-02 00:10:34 +00:00
parent 80d8b89797
commit 66c029ed3e
9 changed files with 59 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/converse.css
View File

@ -229,7 +229,7 @@
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; } -moz-osx-font-smoothing: grayscale; }
#conversejs [class^="icon-"], #conversejs [class*=" icon-"] { #conversejs [class^="icon-"]:before, #conversejs [class*=" icon-"]:before {
background-position: 14px 14px; background-position: 14px 14px;
background-image: none; background-image: none;
font-family: 'Converse-js'; font-family: 'Converse-js';
@ -1026,8 +1026,6 @@
font-size: 14px; font-size: 14px;
padding: 0.25em; padding: 0.25em;
min-height: 0; } min-height: 0; }
#conversejs input[type=text] {
height: 26px; }
#conversejs strong { #conversejs strong {
font-weight: 700; } font-weight: 700; }
#conversejs ol, #conversejs ul { #conversejs ol, #conversejs ul {
@ -1235,7 +1233,7 @@
float: right; float: right;
font-size: 9px; font-size: 9px;
margin: 0 0.2em; margin: 0 0.2em;
padding: 5px; padding: 0.5em;
text-decoration: none; } text-decoration: none; }
#conversejs .chatbox-btn:active { #conversejs .chatbox-btn:active {
position: relative; position: relative;
@ -1656,13 +1654,11 @@
border: 1px solid #B1BFC4; border: 1px solid #B1BFC4;
height: 25px; height: 25px;
border-radius: 4px; border-radius: 4px;
text-align: left; } text-align: left;
padding: 0;
padding-left: 0.3em; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status { #conversejs #controlbox .fancy-dropdown .choose-xmpp-status {
width: 155px; } width: 155px; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status span {
padding-right: 5px;
padding-left: 5px;
float: left; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status, #conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form { #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff;
@ -1670,14 +1666,11 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: inline; } display: inline; }
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form span {
float: left; }
#conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message { #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
float: right; float: right;
clear: right; clear: right;
height: 22px;
width: 12px; width: 12px;
margin: 0px 5px 0 0; margin-right: 0.3em;
color: #2A9D8F; } color: #2A9D8F; }
#conversejs #controlbox .controlbox-pane { #conversejs #controlbox .controlbox-pane {
background-color: white; background-color: white;

34
mockup/controlbox.html
View File

@ -82,8 +82,7 @@
<dl id="target" class="dropdown"> <dl id="target" class="dropdown">
<dt id="fancy-xmpp-status-select" class="fancy-dropdown"> <dt id="fancy-xmpp-status-select" class="fancy-dropdown">
<div class="xmpp-status"> <div class="xmpp-status">
<a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status"> <a class="choose-xmpp-status online icon-online" data-value="I am online" href="#" title="Click to change your chat status">
<span class="icon-online"></span>
I am online I am online
</a> </a>
<a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a> <a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
@ -92,24 +91,16 @@
<dd> <dd>
<ul style="display: none;" class="xmpp-status-menu"> <ul style="display: none;" class="xmpp-status-menu">
<li> <li>
<a href="#" class="online" data-value="online"> <a href="#" class="online icon-online" data-value="online">Online</a>
<span class="icon-online"></span>
Online</a>
</li> </li>
<li> <li>
<a href="#" class="dnd" data-value="dnd"> <a href="#" class="dnd icon-dnd" data-value="dnd">Busy</a>
<span class="icon-dnd"></span>
Busy</a>
</li> </li>
<li> <li>
<a href="#" class="away" data-value="away"> <a href="#" class="away icon-away" data-value="away">Away</a>
<span class="icon-away"></span>
Away</a>
</li> </li>
<li> <li>
<a href="#" class="offline" data-value="offline"> <a href="#" class="offline icon-offline" data-value="offline">Offline</a>
<span class="icon-offline"></span>
Offline</a>
</li> </li>
</ul> </ul>
</dd> </dd>
@ -118,8 +109,7 @@
</form> </form>
<dl class="add-converse-contact dropdown"> <dl class="add-converse-contact dropdown">
<dt id="xmpp-contact-search" class="fancy-dropdown"> <dt id="xmpp-contact-search" class="fancy-dropdown">
<a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts"> <a class="toggle-xmpp-contact-form icon-plus" href="#" title="Click to add new chat contacts">
<span class="icon-plus"></span>
Add a contact Add a contact
</a> </a>
</dt> </dt>
@ -127,7 +117,7 @@
<ul> <ul>
<li> <li>
<form class="pure-form add-xmpp-contact"> <form class="pure-form add-xmpp-contact">
<input type="text" name="identifier" class="username" placeholder="Contact username"> <input type="text" name="identifier" class="username" placeholder="e.g. user@example">
<button class="pure-button button-primary" type="submit">Add</button> <button class="pure-button button-primary" type="submit">Add</button>
</form> </form>
</li> </li>
@ -146,7 +136,7 @@
<dl class="roster-contacts" style="display: block;"> <dl class="roster-contacts" style="display: block;">
<dt class="roster-group" style="display: block;"> <dt class="roster-group" style="display: block;">
<a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a> <a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Colleagues</a>
</dt> </dt>
<dd class="online current-xmpp-contact"> <dd class="online current-xmpp-contact">
<a class="open-chat" title="Name: Victor Matfield JID: victor.matfield@localhost Click to chat with this contact" href="#"> <a class="open-chat" title="Name: Victor Matfield JID: victor.matfield@localhost Click to chat with this contact" href="#">
@ -170,7 +160,7 @@
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd> </dd>
<dt class="roster-group" style="display: block;"> <dt class="roster-group" style="display: block;">
<a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a> <a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Family</a>
</dt> </dt>
<dd class="away current-xmpp-contact"> <dd class="away current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#"> <a class="open-chat" title="Click to chat with this contact" href="#">
@ -187,7 +177,7 @@
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd> </dd>
<dt class="roster-group" style="display: block;"> <dt class="roster-group" style="display: block;">
<a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a> <a href="#" data-group="Friends" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Friends</a>
</dt> </dt>
<dd class="online current-xmpp-contact"> <dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#"> <a class="open-chat" title="Click to chat with this contact" href="#">
@ -204,7 +194,7 @@
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd> </dd>
<dt class="roster-group" style="display: block;"> <dt class="roster-group" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a> <a href="#" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Ungrouped</a>
</dt> </dt>
<dd class="online current-xmpp-contact"> <dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#"> <a class="open-chat" title="Click to chat with this contact" href="#">
@ -214,7 +204,7 @@
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd> </dd>
<dt class="roster-group" id="xmpp-contact-requests" style="display: block;"> <dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a> <a href="#" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Contact Requests</a>
</dt> </dt>
<dd class="offline requesting-xmpp-contact"> <dd class="offline requesting-xmpp-contact">
<span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span> <span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span>

29
mockup/index.html
View File

@ -43,8 +43,7 @@
<dl id="target" class="dropdown"> <dl id="target" class="dropdown">
<dt id="fancy-xmpp-status-select" class="fancy-dropdown"> <dt id="fancy-xmpp-status-select" class="fancy-dropdown">
<div class="xmpp-status"> <div class="xmpp-status">
<a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status"> <a class="choose-xmpp-status online icon-online" data-value="I am online" href="#" title="Click to change your chat status">
<span class="icon-online"></span>
I am online I am online
</a> </a>
<a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a> <a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
@ -53,23 +52,16 @@
<dd> <dd>
<ul style="display: none;" class="xmpp-status-menu"> <ul style="display: none;" class="xmpp-status-menu">
<li> <li>
<a href="#" class="online" data-value="online"> <a href="#" class="online icon-online" data-value="online">Online</a>
<span class="icon-online"></span>
Online</a>
</li> </li>
<li> <li>
<a href="#" class="dnd" data-value="dnd"> <a href="#" class="dnd icon-dnd" data-value="dnd">Busy</a>
<span class="icon-dnd"></span>
Busy</a>
</li> </li>
<li> <li>
<a href="#" class="away" data-value="away"> <a href="#" class="away icon-away" data-value="away">Away</a>
<span class="icon-away"></span>
Away</a>
</li> </li>
<li> <li>
<a href="#" class="offline" data-value="offline"> <a href="#" class="offline icon-offline" data-value="offline">
<span class="icon-offline"></span>
Offline</a> Offline</a>
</li> </li>
</ul> </ul>
@ -79,8 +71,7 @@
</form> </form>
<dl class="add-converse-contact dropdown"> <dl class="add-converse-contact dropdown">
<dt id="xmpp-contact-search" class="fancy-dropdown"> <dt id="xmpp-contact-search" class="fancy-dropdown">
<a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts"> <a class="toggle-xmpp-contact-form icon-plus" href="#" title="Click to add new chat contacts">
<span class="icon-plus"></span>
Add a contact Add a contact
</a> </a>
</dt> </dt>
@ -247,13 +238,13 @@
<div class="dragresize dragresize-topleft"></div> <div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div> <div class="dragresize dragresize-left"></div>
<div class="chat-head chat-head-chatbox"> <div class="chat-head chat-head-chatbox">
<a class="chatbox-btn close-chatbox-button icon-close" title="Close this chat box"></a> <a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus" title="Minimize this chat box"></a> <a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
<a class="chatbox-btn toggle-chatbox-button icon-eye" title="View more information on this person"></a> <a class="chatbox-btn toggle-chatbox-button icon-eye"></a>
<canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas> <canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
<div class="chat-title"> <div class="chat-title">
<a href="http://opkode.com" target="_blank" class="user"> <a href="http://opkode.com" target="_blank" class="user">
Jan-Carel Brand JC Brand
</a> </a>
</div> </div>
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p> <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>

2
sass/_chatbox.scss
View File

@ -44,7 +44,7 @@
float: right; float: right;
font-size: $box-close-font-size; font-size: $box-close-font-size;
margin: 0 0.2em; margin: 0 0.2em;
padding: 5px; padding: 0.5em;
text-decoration: none; text-decoration: none;
&:active { &:active {
position: relative; position: relative;

15
sass/_controlbox.scss
View File

@ -268,15 +268,12 @@
.fancy-dropdown { .fancy-dropdown {
border: 1px solid $light-background-border-color; border: 1px solid $light-background-border-color;
height: $controlbox-dropdown-height; height: $controlbox-dropdown-height;
border-radius: 4px; border-radius: $chatbox-border-radius;
text-align: left; text-align: left;
padding: 0;
padding-left: 0.3em;
.choose-xmpp-status { .choose-xmpp-status {
width: 155px; width: 155px;
span {
padding-right: 5px;
padding-left: 5px;
float: left;
}
} }
.choose-xmpp-status, .choose-xmpp-status,
.toggle-xmpp-contact-form { .toggle-xmpp-contact-form {
@ -286,17 +283,13 @@
white-space: nowrap; white-space: nowrap;
display: inline; display: inline;
} }
.toggle-xmpp-contact-form span {
float: left;
}
} }
#fancy-xmpp-status-select { #fancy-xmpp-status-select {
a.change-xmpp-status-message { a.change-xmpp-status-message {
float: right; float: right;
clear: right; clear: right;
height: 22px;
width: 12px; width: 12px;
margin: 0px 5px 0 0; margin-right: 0.3em;
color: $link-color; color: $link-color;
} }
} }

2
sass/_fonts.scss
View File

@ -132,7 +132,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
[class^="icon-"], [class*=" icon-"] { [class^="icon-"]:before, [class*=" icon-"]:before {
background-position: 14px 14px; background-position: 14px 14px;
background-image: none; background-image: none;
font-family: 'Converse-js'; font-family: 'Converse-js';

4
sass/_normalize.scss
View File

@ -38,10 +38,6 @@
min-height: 0; min-height: 0;
} }
input[type=text] {
height: 26px;
}
strong { strong {
font-weight: 700; font-weight: 700;
} }

4
src/templates/add_contact_dropdown.html
View File

@ -1,8 +1,6 @@
<dl class="add-converse-contact dropdown"> <dl class="add-converse-contact dropdown">
<dt id="xmpp-contact-search" class="fancy-dropdown"> <dt id="xmpp-contact-search" class="fancy-dropdown">
<a class="toggle-xmpp-contact-form" href="#" <a class="toggle-xmpp-contact-form icon-plus" href="#" title="{{label_click_to_chat}}"> {{label_add_contact}}</a>
title="{{label_click_to_chat}}">
<span class="icon-plus"></span>{{label_add_contact}}</a>
</dt> </dt>
<dd class="search-xmpp" style="display:none"><ul></ul></dd> <dd class="search-xmpp" style="display:none"><ul></ul></dd>
</dl> </dl>

11
src/templates/chat_status.html
View File

@ -1,11 +1,6 @@
<div class="xmpp-status"> <div class="xmpp-status">
<a class="choose-xmpp-status {{chat_status}}" <a class="choose-xmpp-status {{chat_status}} icon-{{chat_status}}" data-value="{{status_message}}" href="#" title="{{desc_change_status}}">
data-value="{{status_message}}" {{status_message}}
href="#" title="{{desc_change_status}}">
<span class="icon-{{chat_status}}"></span>{{status_message}}
</a> </a>
<a class="change-xmpp-status-message icon-pencil" <a class="change-xmpp-status-message icon-pencil" href="#" title="{{desc_custom_status}}"></a>
href="#"
title="{{desc_custom_status}}"></a>
</div> </div>