Work on new deck builder.
This commit is contained in:
@@ -13,77 +13,9 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.borderOverlay {
|
||||
border: 0px solid #000000;
|
||||
}
|
||||
|
||||
.foilOverlay {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.selectableCard > .borderOverlay {
|
||||
border: 2px solid #00ff00;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectedCard > .borderOverlay {
|
||||
border: 2px solid #00cccc;
|
||||
}
|
||||
|
||||
.cardCount {
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
font-size: 120%;
|
||||
font-weight: bolder;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.ui-layout-east {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
#manageDecks {
|
||||
color: #ffffff;
|
||||
font-size: 180%;
|
||||
}
|
||||
|
||||
#editingDeck {
|
||||
vertical-align: top;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
#deckStats {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.ui-button-text-only .ui-button-text {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
#set {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
#cardType {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#fullFiltering select {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#fullFiltering input {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#filtering select {
|
||||
font-size: 80%;
|
||||
}
|
||||
.panel {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
|
||||
@@ -130,12 +62,25 @@
|
||||
|
||||
$(document).ready(
|
||||
function () {
|
||||
var ui = new GempLotrDeckBuildingUI2($("#collectionFilterDiv"), $("#paging"));
|
||||
var ui = new GempLotrDeckBuildingUI2(
|
||||
$("#collectionFilterDiv"),
|
||||
$("#paging"),
|
||||
$("#collectionContents"),
|
||||
$("#deckDiv")
|
||||
);
|
||||
|
||||
var doLayout = function() {
|
||||
var collectionWidth = $("#collectionDiv").width();
|
||||
var collectionHeight = $("#collectionDiv").height();
|
||||
var deckWidth = $("#deckPanel").width();
|
||||
var deckHeight = $("#deckPanel").height();
|
||||
ui.layoutUI(collectionWidth, collectionHeight, deckWidth, deckHeight);
|
||||
};
|
||||
|
||||
$('body').layout({
|
||||
applyDefaultStyles:true,
|
||||
onresize:function () {
|
||||
ui.layoutUI(true);
|
||||
doLayout();
|
||||
},
|
||||
north__minSize: 200
|
||||
});
|
||||
@@ -143,30 +88,35 @@
|
||||
$("#northPanel").layout({
|
||||
applyDefaultStyles:true,
|
||||
onresize:function() {
|
||||
ui.layoutUI(true);
|
||||
doLayout();
|
||||
},
|
||||
west__minSize: 340
|
||||
west__minSize: 370
|
||||
|
||||
});
|
||||
|
||||
$(".ui-layout-pane").css({"background-color":"#000000"});
|
||||
|
||||
$(window).resize(function () {
|
||||
ui.layoutUI(true);
|
||||
doLayout();
|
||||
});
|
||||
|
||||
ui.layoutUI(true);
|
||||
doLayout();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id='northPanel' class="ui-layout-north">
|
||||
<div id="collectionFilterDiv" class="ui-layout-west"></div>
|
||||
<div id="collectionDiv" class="ui-layout-center">
|
||||
<div id='northPanel' class="ui-layout-north panel">
|
||||
<div id="collectionFilterDiv" class="ui-layout-west panel"></div>
|
||||
<div id="collectionDiv" class="ui-layout-center panel">
|
||||
<div id="paging"></div>
|
||||
<div id="collectionContents" class="ui-widget-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="deckPanel" class="ui-layout-center panel">
|
||||
<div id="deckDiv" class="ui-widget-content">
|
||||
</div>
|
||||
</div>
|
||||
<div id="deckDiv" class="ui-layout-center"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -291,6 +291,11 @@ var CardFilter = Class.extend({
|
||||
this.filterDiv.css({ position:"absolute", left:x, top:y + 80, width:width, height:80 });
|
||||
},
|
||||
|
||||
layoutPageUi: function(x, y, width) {
|
||||
this.pageDiv.css({ left:x, top:y, width:width, height:36 });
|
||||
this.countSlider.css({width:width - 100});
|
||||
},
|
||||
|
||||
disableNavigation:function () {
|
||||
this.previousPageBut.button("option", "disabled", true);
|
||||
this.nextPageBut.button("option", "disabled", true);
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
var GempLotrDeckBuildingUI2 = Class.extend({
|
||||
comm:null,
|
||||
collectionType:null,
|
||||
cardFilter:null,
|
||||
collectionContentsDiv:null,
|
||||
deckDiv:null,
|
||||
padding: 3,
|
||||
|
||||
init:function (filterDiv, pageDiv, collectionContentsDiv, deckDiv) {
|
||||
this.collectionContentsDiv = collectionContentsDiv;
|
||||
this.deckDiv = deckDiv;
|
||||
|
||||
init:function (filterDiv, pageDiv) {
|
||||
var that = this;
|
||||
|
||||
this.comm = new GempLotrCommunication("/gemp-lotr-server", that.processError);
|
||||
|
||||
this.cardFilter = new CardFilter(filterDiv, pageDiv,
|
||||
this.cardFilter = new CardFilter(filterDiv, pageDiv,
|
||||
function (filter, start, count, callback) {
|
||||
that.comm.getCollection(that.collectionType, filter, start, count, function (xml) {
|
||||
callback(xml);
|
||||
@@ -27,9 +34,12 @@ var GempLotrDeckBuildingUI2 = Class.extend({
|
||||
that.finishCollection();
|
||||
});
|
||||
this.collectionType = "default";
|
||||
this.cardFilter.getCollection();
|
||||
},
|
||||
|
||||
layoutUI: function() {
|
||||
|
||||
layoutUI: function(collectionWidth, collectionHeight, deckWidth, deckHeight) {
|
||||
this.cardFilter.layoutPageUi(0, 0, collectionWidth);
|
||||
this.collectionContentsDiv.css({left: "0px", top: "0px", width: collectionWidth-3+"px", height: collectionHeight-38+"px"});
|
||||
this.deckDiv.css({left: "0px", top: "0px", width: deckWidth+"px", height: deckHeight+"px"})
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user