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

Update mockup with new theme and fix css

Browse Source
This commit is contained in:
JC Brand 2014-05-11 20:09:16 +02:00
parent d1aead81d7
commit 0b710b807d
5 changed files with 70 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
css/converse.css
View File

@ -406,6 +406,12 @@ you can use the generic selector below, but it's slower:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#conversejs div {
box-sizing: border-box;
}
#conversejs ul li {
height: auto;
}
#conversejs div,
#conversejs span,
#conversejs h1,
@ -535,11 +541,10 @@ span.spinner.hor_centered {
height: auto;
}
#conversejs #offscreen-chatboxes .box-flyout .chat-head {
margin: 0;
font-size: 100%;
border-radius: 4px;
padding: 3px 0 0 5px;
margin-bottom: 2px;
margin: 0 0 2px 2px;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 24px;
}
@ -555,11 +560,11 @@ span.spinner.hor_centered {
}
#conversejs .chat-head {
color: #ffffff;
margin: 0;
font-size: 100%;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
padding: 3px 0 0 3px;
padding: 2px 2px 2px 4px;
margin: 0;
}
#conversejs .chat-head-chatbox {
background-color: #2D617A;
@ -571,18 +576,9 @@ span.spinner.hor_centered {
background-color: white;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
height: 289px;
border-top: 0;
}
#conversejs .chatbox .chat-body {
height: -moz-calc(62%);
height: -o-calc(62%);
height: calc(62%);
}
#conversejs .chatroom .chat-body {
height: -moz-calc(62%);
height: -o-calc(62%);
height: calc(62%);
}
#conversejs .chatroom .chat-area {
float: left;
width: 200px;
@ -590,12 +586,12 @@ span.spinner.hor_centered {
}
#conversejs .chatroom .participants {
float: left;
height: 100%;
background-color: white;
overflow: auto;
border-left: 1px solid #AAA;
max-width: 98px;
width: 100px;
border-bottom-right-radius: 4px;
height: 289px;
}
#conversejs .participants ul.participant-list li {
overflow: hidden;
@ -702,12 +698,11 @@ input.error {
margin-right: 6px;
}
#conversejs .chat-title {
padding: 1px 0;
color: white;
font-weight: bold;
line-height: 15px;
display: block;
margin-top: 2px;
margin-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -732,6 +727,7 @@ input.error {
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
padding: 1px 0;
}
#conversejs div.chat-head-chatbox a.user-custom-message {
color: white;
@ -1159,6 +1155,9 @@ select#select-xmpp-status {
resize: none;
height: 62px;
}
#conversejs .chatroom .chat-textarea {
border-bottom-right-radius: 0;
}
#conversejs ul.chat-toolbar {
font-size: 14px;
margin: 0;
@ -1329,16 +1328,19 @@ input.custom-xmpp-status {
z-index: 22;
}
#conversejs .box-flyout {
position: absolute;
display: block;
border-radius: 4px;
bottom: 6px;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
border-radius: 4px;
display: block;
height: 324px;
position: absolute;
}
#conversejs .box-flyout.minimized {
height: auto;
}
#conversejs .box-flyout.minimized .chat-head {
border-radius: 4px;
}
#conversejs .chatbox .box-flyout {
width: 200px;
}

10
index.html
View File

@ -8,10 +8,10 @@
<meta name="description" content="Converse.js: A free chat client for your website" />
<meta name="author" content="JC Brand" />
<meta name="keywords" content="xmpp chat webchat converse.js" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/theme.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/converse.css" rel="stylesheet" type="text/css" media="screen" />
<link type="text/css" rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/theme.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
<script data-main="main" src="components/requirejs/require.js"></script>
</head>
@ -211,7 +211,7 @@
</section>
<!-- Core JavaScript Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../components/jquery/dist/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Custom Theme JavaScript -->

50
less/converse.less
View File

@ -416,6 +416,14 @@ you can use the generic selector below, but it's slower:
-webkit-box-sizing: border-box;
}
#conversejs div {
box-sizing: border-box;
}
#conversejs ul li {
height: auto;
}
#conversejs div,
#conversejs span,
#conversejs h1,
@ -560,11 +568,10 @@ span.spinner.hor_centered {
}
#conversejs #offscreen-chatboxes .box-flyout .chat-head {
margin: 0;
font-size: 100%;
border-radius: 4px;
padding: 3px 0 0 5px;
margin-bottom: 2px;
margin: 0 0 2px 2px;
box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
height: 24px;
}
@ -584,11 +591,11 @@ span.spinner.hor_centered {
#conversejs .chat-head {
color: #ffffff;
margin: 0;
font-size: 100%;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
padding: 3px 0 0 3px;
padding: 2px 2px 2px 4px;
margin: 0;
}
#conversejs .chat-head-chatbox {
@ -603,21 +610,10 @@ span.spinner.hor_centered {
background-color: white;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
height: 289px;
border-top: 0;
}
#conversejs .chatbox .chat-body {
height: -moz-calc(100% - 38px);
height: -o-calc(100% - 38px);
height: calc(100% - 38px);
}
#conversejs .chatroom .chat-body {
height: -moz-calc(100% - 38px);
height: -o-calc(100% - 38px);
height: calc(100% - 38px);
}
#conversejs .chatroom .chat-area {
float: left;
width: 200px;
@ -626,12 +622,12 @@ span.spinner.hor_centered {
#conversejs .chatroom .participants {
float: left;
height: 100%;
background-color: white;
overflow: auto;
border-left: 1px solid #AAA;
max-width: 98px;
width: 100px;
border-bottom-right-radius: 4px;
height: 289px;
}
#conversejs .participants ul.participant-list li {
@ -761,12 +757,11 @@ input.error {
}
#conversejs .chat-title {
padding: 1px 0;
color: white;
font-weight: bold;
line-height: 15px;
display: block;
margin-top: 2px;
margin-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -794,6 +789,7 @@ input.error {
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
padding: 1px 0;
}
#conversejs div.chat-head-chatbox a.user-custom-message {
@ -1293,6 +1289,10 @@ select#select-xmpp-status {
height: 62px;
}
#conversejs .chatroom .chat-textarea {
border-bottom-right-radius: 0;
}
#conversejs ul.chat-toolbar {
font-size: 14px;
margin: 0;
@ -1498,18 +1498,22 @@ input.custom-xmpp-status {
}
#conversejs .box-flyout {
position: absolute;
display: block;
border-radius: 4px;
bottom: 6px;
box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
border-radius: 4px;
display: block;
height: 324px;
position: absolute;
}
#conversejs .box-flyout.minimized {
height: auto;
}
#conversejs .box-flyout.minimized .chat-head {
border-radius: 4px;
}
#conversejs .chatbox .box-flyout {
width: 200px;
}

23
mockup/index.html
View File

@ -4,12 +4,13 @@
<title id="pageTitle">Converse.js: Mockup</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Converse.js: Chat Client for Websites" />
<link type="text/css" rel="stylesheet" href="../stylesheets/stylesheet.css">
<link type="text/css" rel="stylesheet" href="../converse.css">
<meta name="description" content="Converse.js: Mockup" />
<link type="text/css" href="../css/theme.css" rel="stylesheet" media="screen" />
<link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
<script src="../components/jquery/dist/jquery.min.js"></script>
</head>
<body>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
@ -201,7 +202,7 @@
<div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
<canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
<div class="chat-title">
<a href="http://opkode.com" target="_blank" class="user">
JC Brand
@ -438,12 +439,10 @@ $(document).ready(function () {
$tab_panel = $($tab.attr('href')),
$sibling_panel = $($sibling.attr('href'));
$sibling_panel.fadeOut('fast', function () {
$sibling.removeClass('current');
$tab.addClass('current');
$tab_panel.fadeIn('fast', function () {
});
});
$sibling_panel.hide();
$sibling.removeClass('current');
$tab.addClass('current');
$tab_panel.show();
}
$(function() {
@ -459,7 +458,7 @@ $(document).ready(function () {
$('.toggle-chatbox-button').click(function(ev) {
var $grandparent = $(ev.target).parent().parent().parent();
$grandparent.find('.chat-body').slideToggle(300);
$grandparent.find('.chat-body').slideToggle('fast');
var flyout = $grandparent.find('.box-flyout');
if (flyout.hasClass('minimized')) {
flyout.removeClass('minimized');

8
mockup/minimized.html
View File

@ -5,9 +5,9 @@
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Converse.js: Chat Client for Websites" />
<link type="text/css" rel="stylesheet" href="../stylesheets/stylesheet.css">
<link type="text/css" rel="stylesheet" href="../converse.css">
<script src="../components/jquery/jquery.min.js"></script>
<link type="text/css" href="../css/theme.css" rel="stylesheet" media="screen" />
<link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
<script src="../components/jquery/dist/jquery.min.js"></script>
</head>
<body>
<!-- HEADER -->
@ -27,7 +27,7 @@
<div class="chat-head-message-count" style="display:block">3</div>
<a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
<canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
<div class="chat-title">
<a href="http://opkode.com" target="_blank" class="user">
JC Brand