Skip to content

Commit

Permalink
Add ability list window
Browse files Browse the repository at this point in the history
  • Loading branch information
krsch committed Aug 13, 2013
1 parent ea7a3af commit f8c4e45
Show file tree
Hide file tree
Showing 7 changed files with 165 additions and 18 deletions.
11 changes: 11 additions & 0 deletions client/code/app/ui/ability-list.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
"use strict";

$('#human-button').click(function(){
var $el = $('#ability-list');
if ($el.length === 0) {
$el = $(ss.tmpl['ability-list'].r()).appendTo(document.body);
$el.draggable();
$el.on('click', '.close', function(){ $el.remove(); });
}
// $el.dialog();
});
4 changes: 3 additions & 1 deletion client/code/app/ui/index.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@
character_window = require('./character')
pass_event = require('./pass')

require('./avatar')

$ ->
require('./avatar')
require('./ability-list')
$('#main-menu-con').click -> $(this).toggleClass('open')
$('[data-pointer-map]').each ->
img = new Image()
el = $(this)
Expand Down
97 changes: 97 additions & 0 deletions client/css/main/ability-list.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
#ability-list {
width:500px;
height:214px;
position:absolute;
top:30%;
left:25%;
background:#fc0;
z-index:10;
}
#ability-list .ability-list-bg {
width:480px;
height:194px;
background:#efefef;
margin:10px 10px 10px 10px;
}
#ability-list .left-block {
width:194px;
height:194px;
float:left;
}
#ability-list .right-block {
width:271px;
height:194px;
float:left;
margin: 0 0 0 15px;
}
#ability-list .right-block .category-title {
max-width:230px;
height:18px;
background: #09C;
}
#ability-list .center {
width:92px;
height:92px;
background:#cdc9c9;
position:absolute;
margin:51px 0px 0px 51px;
}
#ability-list .category-name-2,
#ability-list .category-name-3,
#ability-list .category-name-4,
#ability-list .category-name-5,
#ability-list .category-name-6,
#ability-list .category-name-7,
#ability-list .category-name-8,
#ability-list .category-name-9,
#ability-list .category-name-10,
#ability-list .category-name-11,
#ability-list .category-name-12,
#ability-list .category-name-13{
width:41px;
height:41px;
background:#939393;
position:absolute;
}
#ability-list .category-name-2 {
margin:0px 0px 0px 0px;
}
#ability-list .category-name-3 {
margin:0px 0px 0px 51px;
}
#ability-list .category-name-4 {
margin:0px 0px 0px 102px;
}
#ability-list .category-name-5 {
margin:0px 0px 0px 153px;
}
#ability-list .category-name-6 {
margin:51px 0px 0px 153px;
}
#ability-list .category-name-7 {
margin:102px 0px 0px 153px;
}
#ability-list .category-name-8 {
margin:153px 0px 0px 153px;
}
#ability-list .category-name-9 {
margin:153px 0px 0px 102px;
}
#ability-list .category-name-10 {
margin:153px 0px 0px 51px;
}
#ability-list .category-name-11 {
margin:153px 0px 0px 0px;
}
#ability-list .category-name-12 {
margin:102px 0px 0px 0px;
}
#ability-list .category-name-13 {
margin:51px 0px 0px 0px;
}
#ability-list .close {
position: absolute;
background-color: #b11;
right: 12px;
top: 10px;
}
14 changes: 7 additions & 7 deletions client/css/main/cont-lt.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
left:0px;
background:url(/img/panel-left-top-bg.png);
background-repeat:no-repeat;
pointer-events: none;
/* pointer-events: none; */
}
.left-top-bg-lvl2 {
width:430px;
Expand Down Expand Up @@ -94,7 +94,7 @@
background: url(/img/avatar.png);
background-repeat:no-repeat;
}
a.tel-button {
a#tel-button {
width:50px;
height:50px;
display:block;
Expand All @@ -105,10 +105,10 @@ a.tel-button {
background-repeat:no-repeat;
background-position:0 0;
}
a.tel-button:hover {
a#tel-button:hover {
background-position:0px -51px;
}
a.info-button {
a#info-button {
width:50px;
height:50px;
display:block;
Expand All @@ -119,10 +119,10 @@ a.info-button {
background-repeat:no-repeat;
background-position:-54px 0;
}
a.info-button:hover {
a#info-button:hover {
background-position:-54px -51px;
}
a.human-button {
a#human-button {
width:50px;
height:50px;
display:block;
Expand All @@ -133,6 +133,6 @@ a.human-button {
background-repeat:no-repeat;
background-position:-110px 0;
}
a.human-button:hover {
a#human-button:hover {
background-position:-110px -51px;
}
10 changes: 5 additions & 5 deletions client/css/main/main-menu.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
top:8px;
left:230px;
}
#main-menu-con:hover {
#main-menu-con.open {
left:400px;
}
#main-menu-con a.exet {
#main-menu-con a#exit {
width:60px;
height:20px;
display:block;
Expand All @@ -20,10 +20,10 @@
top:8px;
left:100px;
}
#main-menu-con a.exet:hover {
#main-menu-con a#exit:hover {
background-position:0px -22px;
}
#main-menu-con a.relog {
#main-menu-con a#relog {
width:154px;
height:20px;
display:block;
Expand All @@ -33,6 +33,6 @@
top:36px;
left:54px;
}
#main-menu-con a.relog:hover {
#main-menu-con a#relog:hover {
background-position:0px -22px;
}
37 changes: 37 additions & 0 deletions client/templates/ability-list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<div id="ability-list">
<div class="ability-list-bg">
<div class="left-block">
<div class="center">1
</div>
<div class="category-name-2">2
</div>
<div class="category-name-3">3
</div>
<div class="category-name-4">4
</div>
<div class="category-name-5">5
</div>
<div class="category-name-6">6
</div>
<div class="category-name-7">7
</div>
<div class="category-name-8">8
</div>
<div class="category-name-9">9
</div>
<div class="category-name-10">10
</div>
<div class="category-name-11">11
</div>
<div class="category-name-12">13
</div>
<div class="category-name-13">13
</div>
</div>
<div class="right-block">
<div class="category-title">
</div>
</div>
<button class="close">[X]</button>
</div>
</div>
10 changes: 5 additions & 5 deletions client/views/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@
<div id="wrapper">
<div id="map"></div>
<div id="main-menu-con">
<a href="/logout" class="exet"></a>
<a href="/selectpc" class="relog"></a>
<a href="/logout" id="exit"></a>
<a href="/selectpc" id="relog"></a>
</div>
<div class="left-top-bg" id="cont-left-top" data-pointer-none>
<a href="#" class="tel-button"></a>
<a href="#" class="info-button"></a>
<a href="#" class="human-button"></a>
<a href="#" id="tel-button"></a>
<a href="#" id="info-button"></a>
<a href="#" id="human-button"></a>
<div class="left-top-bg-lvl2" data-pointer-none>
<div class="avatar">
</div>
Expand Down

0 comments on commit f8c4e45

Please sign in to comment.