Commit a56edc03 authored by 神楽坂玲奈's avatar 神楽坂玲奈

Layout

parent 3e725677
......@@ -101,6 +101,9 @@ login = (username, password)->
Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
Candy.Core.connect(username, password)
Candy.View.Pane.Roster.joinAnimation = (elementId)->
$('#' + elementId).show().css('opacity',1)
$('.xmpp').click ->
Candy.View.Pane.PrivateRoom.open($(this).data('jid'), $(this).data('nick'), true, true)
......@@ -108,6 +111,9 @@ login = (username, password)->
window.onbeforeunload = null
$('#candy').show()
$('.xmpp').click ->
Candy.View.Pane.PrivateRoom.open($(this).data('jid'), $(this).data('nick'), true, true)
$('#roster').show()
$(document).ready ->
#stroll.bind( '.online_list ul' );
if jid = Candy.Util.getCookie('jid')
......
......@@ -182,11 +182,18 @@
Candy.View.Template.Login.form = $('#login_form_template').html();
Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
Candy.Core.connect(username, password);
Candy.View.Pane.Roster.joinAnimation = function(elementId) {
return $('#' + elementId).show().css('opacity', 1);
};
$('.xmpp').click(function() {
return Candy.View.Pane.PrivateRoom.open($(this).data('jid'), $(this).data('nick'), true, true);
});
window.onbeforeunload = null;
return $('#candy').show();
$('#candy').show();
$('.xmpp').click(function() {
return Candy.View.Pane.PrivateRoom.open($(this).data('jid'), $(this).data('nick'), true, true);
});
return $('#roster').show();
};
$(document).ready(function() {
......
body{background:#fbfbfb;}
body {
background: #fbfbfb;
}
/*顶部*/
.card_top{margin:0;height:80px;width:100%;border-bottom:1px solid #dddddd;box-shadow:0px 1px 5px #dddddd;background:#ffffff;}
.card_logo{
width:216px;height:69px;padding:0px 0 0 25px;float:left;
img{margin:10px 0 0 0;border-right:1px solid #dddddd;padding:0 15px 0 0;}
}
.card_form{
float:left;height:60px;margin:0 0 0 10px;padding:20px 0 0 0;
select{color:#147CC3;padding:4px 5px;width:120px;font-size:12px;margin:8px 0 0 11px;float:left;}
input[type=button]{background:#147CC3;border:none;border-radius:5px;width:90px;color:#ffffff;height:24px;margin:8px 0 0 25px;cursor:pointer;}
.card_top {
margin: 0;
height: 80px;
width: 100%;
border-bottom: 1px solid #dddddd;
box-shadow: 0px 1px 5px #dddddd;
background: #ffffff;
}
.log_reg{
float:right;font-size:12px;padding:34px 25px 0 0;
a{
color:#666666;text-decoration:none;
&.login{color:#147CC3;}
.card_logo {
width: 216px;
height: 69px;
padding: 0px 0 0 25px; /*float:left;*/
img {
margin: 10px 0 0 0;
border-right: 1px solid #dddddd;
padding: 0 15px 0 0;
}
span{color:#cccccc;}
}
.card_form {
/*float:left;*/
height: 60px;
margin: 0 0 0 10px;
padding: 20px 0 0 0;
select {
color: #147CC3;
padding: 4px 5px;
width: 120px;
font-size: 12px;
margin: 8px 0 0 11px;
float: left;
}
input[type=button] {
background: #147CC3;
border: none;
border-radius: 5px;
width: 90px;
color: #ffffff;
height: 24px;
margin: 8px 0 0 25px;
cursor: pointer;
}
}
.log_reg {
/*float:right;*/
font-size: 12px;
padding: 34px 25px 0 0;
a {
color: #666666;
text-decoration: none;
&.login {
color: #147CC3;
}
}
span {
color: #cccccc;
}
}
/*中央*/
.card_center{padding:20px;}
#rooms{
float:left;
/*zh*/
height:350px;
width: 480px;
overflow-y:scroll;
.card_center {
padding: 20px;
}
.room{
border:#cccccc 1px solid;
&:hover{background:#eeeeee;}
float:left;
width:150px;
height:100px
}
#rooms {
/*float:left;*/
}
.online_list{
float:left/*zh*/;max-width:210px;height:100%;border:1px solid #dddddd;padding:0 0 10px 0;
ul{
height:300px; /*zh*/
background:#ffffff;overflow-y:hidden;position:relative;
&:hover{overflow-y:scroll;}
li{
border-top:1px solid #dddddd;padding:8px 8px;height:32px;
&.online_botttom{background:url(../images/gradual_change.png) repeat-x;height:10px;bottom:0;position:fixed;width:160px;padding:0 8px;border:none;}
img{height:32px;width:32px;float:left;}span{line-height:32px;font-size:12px;padding:0 0 0 10px;float:left;}
&:hover{background:#eeeeee;}
.online_list {
/*float:left;*/
max-width: 210px;
height: 100%;
border: 1px solid #dddddd;
padding: 0 0 10px 0;
ul {
background: #ffffff;
overflow-y: hidden;
position: relative;
&:hover {
overflow-y: scroll;
}
li {
border-top: 1px solid #dddddd;
padding: 8px 8px;
height: 32px;
&.online_botttom {
background: url(../images/gradual_change.png) repeat-x;
height: 10px;
bottom: 0;
position: fixed;
width: 160px;
padding: 0 8px;
border: none;
}
img {
height: 32px;
width: 32px;
float: left;
}
span {
line-height: 32px;
font-size: 12px;
padding: 0 0 0 10px;
float: left;
}
&:hover {
background: #eeeeee;
}
}
}
}
.online_title {
height: 20px;
background: #f9f9f9;
width: 190px;
font-size: 14px;
line-height: 16px;
padding: 10px 10px;
color: #147CC3;
}
.online_title{height:20px;background:#f9f9f9;width:190px;font-size:14px;line-height:16px;padding:10px 10px;color:#147CC3;}
/*zh*/
#login_button{cursor: pointer}
/*
#login{
#login_node {width:80px}
.ui-combobox-input {width: 100px}
.ui-combobox-toggle {width: auto}
} */
#login-form{
#node{
width: 60px;
}
label[for=domain]{
width: auto;
clear: none;
padding-right: 0px;
}
#domain{
width: 74px;
/*纵向*/
html, body {
height: 100%;
}
.card_center {
padding-top: 300px;
margin-top: -300px;
padding-bottom: 41px;
height: 100%;
overflow: hidden;
box-sizing: border-box;
#rooms {
height: 100%;
overflow: hidden;
&:hover {
overflow-y: auto;
}
}
.online_list {
height: 100%;
box-sizing: border-box;
#roster {
height: 100%;
&:hover {
overflow-y: auto;
}
}
}
}
.server_filter label{
font-size: 12px;
/*横向*/
.card_top {
display: -webkit-box;
.card_form {
-webkit-box-flex: 1;
}
}
.ui-widget.server_filter{
font-size: 100%;
.ui-multiselect-checkboxes{
overflow-y: visible
.card_center {
display: -webkit-box;
#rooms {
-webkit-box-flex: 1;
.room {
border: #cccccc 1px solid;
&:hover {
background: #eeeeee;
}
float: left;
width: 150px;
height: 100px;
border-radius: 5px;
margin: 5px;
background-color: white;
}
}
}
\ No newline at end of file
......@@ -49,14 +49,14 @@
<input type="text" id="node" name="node"/>
<label for="domain">@</label>
<select id="domain" name="domain" tabindex="-1">
<option label="my-card.in" value="my-card.in" selected="selected" />
<option label="gmail.com" value="gmail.com" />
<option label="my-card.in" value="my-card.in" selected="selected"/>
<option label="gmail.com" value="gmail.com"/>
</select>
{{/displayUsername}}
<input type="hidden" id="username" name="username" value="{{presetJid}}"/>
{{#displayPassword}}<label for="password">{{_labelPassword}}</label><input type="password" id="password" name="password" />{{/displayPassword}}
<input type="submit" class="button" value="{{_loginSubmit}}" />
{{#displayPassword}}<label for="password">{{_labelPassword}}</label><input type="password" id="password" name="password"/>{{/displayPassword}}
<input type="submit" class="button" value="{{_loginSubmit}}"/>
</form>
</script>
......@@ -105,10 +105,10 @@
</div>
</div>
<div class="card_center">
<div id="rooms" ></div>
<div class="online_list" >
<div id="rooms"></div>
<div class="online_list">
<div class="online_title">聊天工具</div>
<ul>
<ul id="roster">
<li>
<span>这是开发中好友系统喵</span>
</li>
......@@ -122,23 +122,22 @@
<span>登录聊天之后才能发消息哦</span>
</li>
<li class="xmpp" data-jid="zh99998@gmail.com" data-nick="zh99998">
<img src="https://lh3.googleusercontent.com/-EVHxW12CgMs/AAAAAAAAAAI/AAAAAAAAAAA/b4Rq4BiFUT4/s32-c-k/photo.jpg?sz=32" alt=""/><span>zh99998</span>
<img src="https://lh3.googleusercontent.com/-EVHxW12CgMs/AAAAAAAAAAI/AAAAAAAAAAA/b4Rq4BiFUT4/s32-c-k/photo.jpg" alt=""/><span>zh99998</span>
</li>
<li class="xmpp" data-jid="fortunemsg@gmail.com" data-nick="Trickster">
<img src="https://lh3.googleusercontent.com/-MAW7vCbyWdE/AAAAAAAAAAI/AAAAAAAAAAA/LzyqPKFvee8/s32-c-k/photo.jpg?sz=32" alt=""/><span>Trickster</span>
<img src="https://lh3.googleusercontent.com/-MAW7vCbyWdE/AAAAAAAAAAI/AAAAAAAAAAA/LzyqPKFvee8/s32-c-k/photo.jpg" alt=""/><span>Trickster</span>
</li>
<li class="xmpp" data-jid="悼亡圣约@my-card.in" data-nick="悼亡圣约">
<img src="https://lh3.googleusercontent.com/-deevaHxZKmU/AAAAAAAAAAI/AAAAAAAAAAA/1AA3-swJOGg/s32-c-k/photo.jpg?sz=32" alt=""/><span>悼亡圣约</span>
<img src="https://lh3.googleusercontent.com/-deevaHxZKmU/AAAAAAAAAAI/AAAAAAAAAAA/1AA3-swJOGg/s32-c-k/photo.jpg" alt=""/><span>悼亡圣约</span>
</li>
<li class="xmpp" data-jid="萌の狐@my-card.in" data-nick="萌の狐">
<img src="https://lh3.googleusercontent.com/-oyc22EZHGvo/AAAAAAAAAAI/AAAAAAAAAAA/mXrA7Vz0NJg/s32-c-k/photo.jpg?sz=32" alt=""/><span>萌の狐</span>
<img src="https://lh3.googleusercontent.com/-oyc22EZHGvo/AAAAAAAAAAI/AAAAAAAAAAA/mXrA7Vz0NJg/s32-c-k/photo.jpg" alt=""/><span>萌の狐</span>
</li>
<li class="xmpp" data-jid="神様と秀吉@my-card.in" data-nick="神様と秀吉">
<img src="http://face8.qun.qq.com/cgi/svr/face/getface?cache=1&type=1&fid=0&uin=2431690577&vfwebqq=9c59459c8b630d3439aca0fe0a606c4aed7182a95d4a1aeb5c198a0f5254967765509be4502611ff&t=1359255381324" alt=""/><span>神様と秀吉</span>
<img src="https://lh6.googleusercontent.com/-zNVBxXLudFc/AAAAAAAAAAI/AAAAAAAAAAA/YH5q1jCmiDQ/s48-c-k/photo.jpg" alt=""/><span>神様と秀吉</span>
</li>
</ul>
</div>
<div style="clear:left;"></div>
</div>
<div id="candy" style="top:auto;height:260px;display:none"></div>
......@@ -215,7 +214,7 @@
<script type="text/javascript" src="/assets/javascripts/candy.fix.js"></script>
<script type="text/javascript" src="/vendor/candy/plugins/inline-images/candy.js"></script>
<link rel="stylesheet" type="text/css" href="/vendor/candy/plugins/inline-images/candy.css" />
<link rel="stylesheet" type="text/css" href="/vendor/candy/plugins/inline-images/candy.css"/>
<script src="/assets/javascripts/rooms.js"></script>
</body>
......
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