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

Layout

parent 3e725677
...@@ -101,6 +101,9 @@ login = (username, password)-> ...@@ -101,6 +101,9 @@ login = (username, password)->
Candy.Util.setCookie('candy-nostatusmessages', '1', 365); Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
Candy.Core.connect(username, password) Candy.Core.connect(username, password)
Candy.View.Pane.Roster.joinAnimation = (elementId)->
$('#' + elementId).show().css('opacity',1)
$('.xmpp').click -> $('.xmpp').click ->
Candy.View.Pane.PrivateRoom.open($(this).data('jid'), $(this).data('nick'), true, true) Candy.View.Pane.PrivateRoom.open($(this).data('jid'), $(this).data('nick'), true, true)
...@@ -108,6 +111,9 @@ login = (username, password)-> ...@@ -108,6 +111,9 @@ login = (username, password)->
window.onbeforeunload = null window.onbeforeunload = null
$('#candy').show() $('#candy').show()
$('.xmpp').click ->
Candy.View.Pane.PrivateRoom.open($(this).data('jid'), $(this).data('nick'), true, true)
$('#roster').show()
$(document).ready -> $(document).ready ->
#stroll.bind( '.online_list ul' ); #stroll.bind( '.online_list ul' );
if jid = Candy.Util.getCookie('jid') if jid = Candy.Util.getCookie('jid')
......
...@@ -182,11 +182,18 @@ ...@@ -182,11 +182,18 @@
Candy.View.Template.Login.form = $('#login_form_template').html(); Candy.View.Template.Login.form = $('#login_form_template').html();
Candy.Util.setCookie('candy-nostatusmessages', '1', 365); Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
Candy.Core.connect(username, password); Candy.Core.connect(username, password);
Candy.View.Pane.Roster.joinAnimation = function(elementId) {
return $('#' + elementId).show().css('opacity', 1);
};
$('.xmpp').click(function() { $('.xmpp').click(function() {
return Candy.View.Pane.PrivateRoom.open($(this).data('jid'), $(this).data('nick'), true, true); return Candy.View.Pane.PrivateRoom.open($(this).data('jid'), $(this).data('nick'), true, true);
}); });
window.onbeforeunload = null; 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() { $(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_top {
.card_logo{ margin: 0;
width:216px;height:69px;padding:0px 0 0 25px;float:left; height: 80px;
img{margin:10px 0 0 0;border-right:1px solid #dddddd;padding:0 15px 0 0;} width: 100%;
} border-bottom: 1px solid #dddddd;
.card_form{ box-shadow: 0px 1px 5px #dddddd;
float:left;height:60px;margin:0 0 0 10px;padding:20px 0 0 0; background: #ffffff;
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; .card_logo {
a{ width: 216px;
color:#666666;text-decoration:none; height: 69px;
&.login{color:#147CC3;} padding: 0px 0 0 25px; /*float:left;*/
} img {
span{color:#cccccc;} 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;
}
}
.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;} .card_center {
#rooms{ padding: 20px;
float:left; }
/*zh*/
height:350px; #rooms {
width: 480px; /*float:left;*/
overflow-y:scroll; }
.room{ .online_list {
border:#cccccc 1px solid; /*float:left;*/
&:hover{background:#eeeeee;} max-width: 210px;
float:left; height: 100%;
width:150px; border: 1px solid #dddddd;
height:100px 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_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_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*/ /*zh*/
#login_button{cursor: pointer}
/* /*纵向*/
#login{ html, body {
#login_node {width:80px} height: 100%;
.ui-combobox-input {width: 100px} }
.ui-combobox-toggle {width: auto}
} */ .card_center {
#login-form{ padding-top: 300px;
#node{ margin-top: -300px;
width: 60px; padding-bottom: 41px;
} height: 100%;
label[for=domain]{ overflow: hidden;
width: auto; box-sizing: border-box;
clear: none; #rooms {
padding-right: 0px; height: 100%;
overflow: hidden;
&:hover {
overflow-y: auto;
}
} }
#domain{ .online_list {
width: 74px; 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%; .card_center {
.ui-multiselect-checkboxes{ display: -webkit-box;
overflow-y: visible
#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 @@ ...@@ -49,14 +49,14 @@
<input type="text" id="node" name="node"/> <input type="text" id="node" name="node"/>
<label for="domain">@</label> <label for="domain">@</label>
<select id="domain" name="domain" tabindex="-1"> <select id="domain" name="domain" tabindex="-1">
<option label="my-card.in" value="my-card.in" selected="selected" /> <option label="my-card.in" value="my-card.in" selected="selected"/>
<option label="gmail.com" value="gmail.com" /> <option label="gmail.com" value="gmail.com"/>
</select> </select>
{{/displayUsername}} {{/displayUsername}}
<input type="hidden" id="username" name="username" value="{{presetJid}}"/> <input type="hidden" id="username" name="username" value="{{presetJid}}"/>
{{#displayPassword}}<label for="password">{{_labelPassword}}</label><input type="password" id="password" name="password" />{{/displayPassword}} {{#displayPassword}}<label for="password">{{_labelPassword}}</label><input type="password" id="password" name="password"/>{{/displayPassword}}
<input type="submit" class="button" value="{{_loginSubmit}}" /> <input type="submit" class="button" value="{{_loginSubmit}}"/>
</form> </form>
</script> </script>
...@@ -105,10 +105,10 @@ ...@@ -105,10 +105,10 @@
</div> </div>
</div> </div>
<div class="card_center"> <div class="card_center">
<div id="rooms" ></div> <div id="rooms"></div>
<div class="online_list" > <div class="online_list">
<div class="online_title">聊天工具</div> <div class="online_title">聊天工具</div>
<ul> <ul id="roster">
<li> <li>
<span>这是开发中好友系统喵</span> <span>这是开发中好友系统喵</span>
</li> </li>
...@@ -122,23 +122,22 @@ ...@@ -122,23 +122,22 @@
<span>登录聊天之后才能发消息哦</span> <span>登录聊天之后才能发消息哦</span>
</li> </li>
<li class="xmpp" data-jid="zh99998@gmail.com" data-nick="zh99998"> <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>
<li class="xmpp" data-jid="fortunemsg@gmail.com" data-nick="Trickster"> <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>
<li class="xmpp" data-jid="悼亡圣约@my-card.in" data-nick="悼亡圣约"> <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>
<li class="xmpp" data-jid="萌の狐@my-card.in" data-nick="萌の狐"> <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>
<li class="xmpp" data-jid="神様と秀吉@my-card.in" data-nick="神様と秀吉"> <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> </li>
</ul> </ul>
</div> </div>
<div style="clear:left;"></div>
</div> </div>
<div id="candy" style="top:auto;height:260px;display:none"></div> <div id="candy" style="top:auto;height:260px;display:none"></div>
...@@ -215,7 +214,7 @@ ...@@ -215,7 +214,7 @@
<script type="text/javascript" src="/assets/javascripts/candy.fix.js"></script> <script type="text/javascript" src="/assets/javascripts/candy.fix.js"></script>
<script type="text/javascript" src="/vendor/candy/plugins/inline-images/candy.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> <script src="/assets/javascripts/rooms.js"></script>
</body> </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