Update mockup with new theme and fix css
This commit is contained in:
parent
d1aead81d7
commit
0b710b807d
@ -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
10
index.html
@ -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 -->
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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');
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user