ambidextrous/gemp-lotr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Fixes

Browse Source 
- Fixed the chat resizer being all wonky
- Fixed deckbuilder navigation buttons being wonky from the jquery upgrade
- Rearranged the card filter slightly to almost sorta do css
- Fixed deckbuilder not using the new gemp favicon
This commit is contained in:
Christian 'ketura' McCarty
2022-09-12 00:48:33 -05:00
parent 3e3043906b
commit 24cfca202b
7 changed files with 100 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/deckBuild.css
View File

@@ -39,6 +39,7 @@ body {
#manageDecks {
color: #ffffff;
font-size: 180%;
display: flex;
}
#editingDeck {
@@ -87,3 +88,40 @@ body {
.menu-button > .ui-button-text {
padding: 0;
}
button.navigation-butt {
padding: 0.5em;
}
.navigation-butt.ui-button-icon-only > .ui-button-text{
padding: 0;
}
.navigation-butt.ui-button-icon-only {
width: 25px;
}
.ui-button-icon-only .ui-button-icon-primary.ui-icon {
margin: auto auto auto -4px;
}
#culture-buttons .ui-button {
padding: 0;
}
#collectionSelect {
order: 100;
}
#editingDeck {
flex-grow: 1;
}
.notesText {
flex-grow: 1;
margin: 5px;
}
.notesDialog {
display: flex;
}

10
gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/hall.css
View File

@@ -346,12 +346,18 @@ table.tables tr.privateForPlayer {
position:relative;
width:100%;
/*min-height: 30px;*/
height: 500px;
height: 300px;
grid-gap: 3px;
overflow: hidden;
background-color: #121212;
top: 0 !important;
/*top: 0 !important;*/
padding-top: 5px;
align-self: flex-end;
flex-shrink: 0;
}
#chat[style] {
top: 0 !important;
}
.ui-resizable-handle {

31
gemp-lotr/gemp-lotr-async/src/main/web/deckBuild.html
View File

@@ -3,6 +3,11 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GEMP: LotR-TCG - Deckbuilder</title>
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
<link rel="manifest" href="images/icons/site.webmanifest">
<link rel="stylesheet" type="text/css" href="css/gemp-001/deckBuild.css">
@@ -54,7 +59,8 @@
onresize:function () {
ui.layoutUI(true);
},
east__minSize:"30%"
east__minSize:350,
east__maxSize:"50%"
});
$(".ui-layout-pane").css({"background-color":"#000000"});
@@ -68,26 +74,7 @@
</script>
<style type="text/css">
#manageDecks {
display: flex;
}
#collectionSelect {
order: 100;
}
#editingDeck {
flex-grow: 1;
}
.notesText {
flex-grow: 1;
margin: 5px;
}
.notesDialog {
display: flex;
}
</style>
@@ -158,8 +145,8 @@
<div id="decksRegion" style="position: absolute; left: 194px; top: 33px; width: 535px; height: 556px;"></div>
</div>
<div id="collectionDiv" class="ui-layout-east ui-layout-pane ui-layout-pane-east" style="position: absolute; margin: 0px; inset: 0px 0px 0px auto; height: 644px; z-index: 1; padding: 10px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; border: 1px solid rgb(187, 187, 187); overflow: auto; width: 299px; display: block; visibility: visible;">
<div id="cardCollectionDiv" style="position: absolute; left: 5px; top: 160px; width: 289px; height: 484px;"></div>
<div id="collectionDiv" class="ui-layout-east ui-layout-pane ui-layout-pane-east" >
<div id="cardCollectionDiv" style=""></div>
</div>
<div id="cardInfoDiv" style="display: none; z-index: 1000; outline: currentcolor none 0px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-1">

76
gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/cardFilter.js
View File

@@ -11,8 +11,11 @@ var CardFilter = Class.extend({
count: 18,
pageDiv: null,
navigationDiv: null,
filtersDiv: null,
fullFilterDiv: null,
filterDiv: null,
collectionDiv: null,
previousPageBut: null,
nextPageBut: null,
@@ -23,7 +26,7 @@ var CardFilter = Class.extend({
sortSelect: null,
raritySelect: null,
init: function (elem, pageElem, getCollectionFunc, clearCollectionFunc, addCardFunc, finishCollectionFunc) {
init: function (pageElem, getCollectionFunc, clearCollectionFunc, addCardFunc, finishCollectionFunc) {
this.getCollectionFunc = getCollectionFunc;
this.clearCollectionFunc = clearCollectionFunc;
this.addCardFunc = addCardFunc;
@@ -31,12 +34,11 @@ var CardFilter = Class.extend({
this.filter = "";
this.buildUi(elem, pageElem);
this.buildUi(pageElem);
},
enableDetailFilters: function (enable) {
$("#culture1").buttonset("option", "disabled", !enable);
$("#culture2").buttonset("option", "disabled", !enable);
$("#culture-buttons").buttonset("option", "disabled", !enable);
$("#cardType").prop("disabled", !enable);
$("#keyword").prop("disabled", !enable);
$("#race").prop("disabled", !enable);
@@ -55,12 +57,15 @@ var CardFilter = Class.extend({
$("#type").val(typeValue);
},
buildUi: function (elem, pageElem) {
buildUi: function (pageElem) {
var that = this;
this.pageDiv = $("<div></div>");
this.pageDiv = $("<div id='filter-main' style='display:flex;flex-direction:column;align-items:stretch;'></div>");
this.navigationDiv = $("<div id='card-navigation' style='display: flex; flex-direction: row; gap: 2px; align-items: center;'></div>");
this.pageDiv.append(this.navigationDiv);
pageElem.append(this.pageDiv);
this.previousPageBut = $("<button id='previousPage' style='float: left;'>Previous page</button>").button({
this.previousPageBut = $("<button id='previousPage' class='navigation-butt'></button>").button({
text: false,
icons: {
primary: "ui-icon-circle-triangle-w"
@@ -73,7 +78,7 @@ var CardFilter = Class.extend({
that.getCollection();
});
this.nextPageBut = $("<button id='nextPage' style='float: right;'>Next page</button>").button({
this.nextPageBut = $("<button id='nextPage' class='navigation-butt'></button>").button({
text: false,
icons: {
primary: "ui-icon-circle-triangle-e"
@@ -86,7 +91,7 @@ var CardFilter = Class.extend({
that.getCollection();
});
this.countSlider = $("<div id='countSlider' style='left: 50px; top: 10px; width: 200px;'></div>").slider({
this.countSlider = $("<div id='countSlider' style='flex-grow:1;'></div>").slider({
value: 18,
min: 4,
max: 40,
@@ -99,13 +104,11 @@ var CardFilter = Class.extend({
}
});
this.pageDiv.append(this.previousPageBut);
this.pageDiv.append(this.nextPageBut);
this.pageDiv.append(this.countSlider);
pageElem.append(this.pageDiv);
this.fullFilterDiv = $("<div></div>");
this.navigationDiv.append(this.previousPageBut);
this.navigationDiv.append(this.countSlider);
this.navigationDiv.append(this.nextPageBut);
this.fullFilterDiv = $("<div id='filter-inputs' style='display:flex;flex-wrap:wrap;'></div>");
this.setSelect = $("<select style='width: 130px; font-size: 80%;'>"
+ "<option value='0-33,101'>All Sets</option>"
+ "<option value='0-19'>Official Decipher Sets</option>"
@@ -207,11 +210,11 @@ var CardFilter = Class.extend({
this.fullFilterDiv.append(this.sortSelect);
this.fullFilterDiv.append(this.raritySelect);
elem.append(this.fullFilterDiv);
this.pageDiv.append(this.fullFilterDiv);
this.filterDiv = $("<div></div>");
this.filterDiv = $("<div id='culture-buttons' style='display:flex;flex-wrap:wrap;'></div>");
this.filterDiv.append("<div id='culture1'>"
this.filterDiv.append(""
+ "<input type='checkbox' id='DWARVEN'/><label for='DWARVEN' id='labelDWARVEN'><img src='images/cultures/dwarven.png'/></label>"
+ "<input type='checkbox' id='ELVEN'/><label for='ELVEN' id='labelELVEN'><img src='images/cultures/elven.png'/></label>"
+ "<input type='checkbox' id='GANDALF'/><label for='GANDALF' id='labelGANDALF'><img src='images/cultures/gandalf.png'/></label>"
@@ -219,8 +222,8 @@ var CardFilter = Class.extend({
+ "<input type='checkbox' id='ROHAN'/><label for='ROHAN' id='labelROHAN'><img src='images/cultures/rohan.png'/></label>"
+ "<input type='checkbox' id='SHIRE'/><label for='SHIRE' id='labelSHIRE'><img src='images/cultures/shire.png'/></label>"
+ "<input type='checkbox' id='GOLLUM'/><label for='GOLLUM' id='labelGOLLUM'><img src='images/cultures/gollum.png'/></label>"
+ "</div>");
this.filterDiv.append("<div id='culture2'>"
);
this.filterDiv.append(""
+ "<input type='checkbox' id='DUNLAND'/><label for='DUNLAND' id='labelDUNLAND'><img src='images/cultures/dunland.png'/></label>"
+ "<input type='checkbox' id='ISENGARD'/><label for='ISENGARD' id='labelISENGARD'><img src='images/cultures/isengard.png'/></label>"
+ "<input type='checkbox' id='MEN'/><label for='MEN' id='labelMEN'><img src='images/cultures/men.png'/></label>"
@@ -237,7 +240,7 @@ var CardFilter = Class.extend({
//+ "<input type='checkbox' id='SMAUG'/><label for='SMAUG' id='labelSMAUG'><img src='images/cultures/smaug.png'/></label>"
//+ "<input type='checkbox' id='SPIDER'/><label for='SPIDER' id='labelSPIDER'><img src='images/cultures/spider.png'/></label>"
//+ "<input type='checkbox' id='TROLL'/><label for='TROLL' id='labelTROLL'><img src='images/cultures/troll.png'/></label>"
+ "</div>");
);
var combos = $("<div></div>");
@@ -365,10 +368,10 @@ var CardFilter = Class.extend({
+ "</select>");
this.filterDiv.append(combos);
elem.append(this.filterDiv);
this.pageDiv.append(this.filterDiv);
$("#culture1").buttonset();
$("#culture2").buttonset();
$("#culture-buttons").buttonset();
var fullFilterChanged = function () {
that.start = 0;
@@ -437,18 +440,22 @@ var CardFilter = Class.extend({
//Additional Hobbit Draft labels
$("#labelDWARVEN,#labelELVEN,#labelGANDALF,#labelGONDOR,#labelROHAN,#labelSHIRE,#labelGOLLUM,#labelDUNLAND,#labelISENGARD,#labelMEN,#labelMORIA,#labelORC,#labelRAIDER,#labelSAURON,#labelURUK_HAI,#labelWRAITH,#labelESGAROTH,#labelGUNDABAD").click(filterOut);
this.collectionDiv = $("<div id='collection-display' style='display:flex;flex-direction:column;position:relative;'></div>");
//collection-display
pageElem.append(this.collectionDiv);
},
layoutUi: function (x, y, width, height) {
this.pageDiv.css({position: "absolute", left: x, top: y, width: width, height: 34});
this.countSlider.css({width: width - 100});
this.fullFilterDiv.css({position: "absolute", left: x, top: y + 34, width: width, height: 34});
this.filterDiv.css({position: "absolute", left: x, top: y + 68, width: width, height: 80});
//this.pageDiv.css({position: "absolute", left: x, top: y, width: width, height: 34});
//this.countSlider.css({width: width - 100});
//this.fullFilterDiv.css({position: "absolute", left: x, top: y + 34, width: width, height: 34});
//this.filterDiv.css({position: "absolute", left: x, top: y + 68, 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});
//this.pageDiv.css({left: x, top: y, width: width, height: 36});
//this.countSlider.css({width: width - 100});
},
disableNavigation: function () {
@@ -459,12 +466,7 @@ var CardFilter = Class.extend({
calculateNormalFilter: function () {
var cultures = new Array();
$("label", $("#culture1")).each(
function () {
if ($(this).hasClass("ui-state-active"))
cultures.push($(this).prop("id").substring(5));
});
$("label", $("#culture2")).each(
$("label", $("#culture-buttons")).each(
function () {
if ($(this).hasClass("ui-state-active"))
cultures.push($(this).prop("id").substring(5));

6
gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/deckBuildingUi.js
View File

@@ -58,7 +58,7 @@ var GempLotrDeckBuildingUI = Class.extend({
this.comm = new GempLotrCommunication("/gemp-lotr-server", that.processError);
this.cardFilter = new CardFilter($("#collectionDiv"), $("#collectionDiv"),
this.cardFilter = new CardFilter($("#collectionDiv"),
function (filter, start, count, callback) {
if (!that.specialSelection) {
filter = filter + " cardType:-THE_ONE_RING";
@@ -181,7 +181,7 @@ var GempLotrDeckBuildingUI = Class.extend({
that.cardFilter.getCollection();
});
this.normalCollectionDiv = $("#cardCollectionDiv");
this.normalCollectionDiv = $("#collection-display");
this.normalCollectionGroup = new NormalCardGroup(this.normalCollectionDiv, function (card) {
return true;
});
@@ -1137,7 +1137,7 @@ var GempLotrDeckBuildingUI = Class.extend({
this.bottomBarDiv.css({ position:"absolute", left:padding * 2 + sitesWidth, top:manageHeight + padding + deckHeight - 50, width:deckWidth - (sitesWidth + padding) - padding, height:70 });
this.cardFilter.layoutUi(padding, 0, collectionWidth - padding, 160);
this.normalCollectionDiv.css({ position:"absolute", left:padding, top:160, width:collectionWidth - padding * 2, height:collectionHeight - 160 });
//this.normalCollectionDiv.css({ position:"absolute", left:padding, top:160, width:collectionWidth - padding * 2, height:collectionHeight - 160 });
this.normalCollectionGroup.setBounds(0, 0, collectionWidth - padding * 2, collectionHeight - 160);
} else {

4
gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/hallUi.js
View File

@@ -25,8 +25,8 @@ var GempLotrHallUI = Class.extend({
$("#chat").resizable({
handles: "n",
minHeight: 150,
distance: 10
minHeight: 100,
distance: 20
});
this.comm = new GempLotrCommunication(url, function (xhr, ajaxOptions, thrownError) {

2
gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/merchantUi.js
View File

@@ -23,7 +23,7 @@ var GempLotrMerchantUI = Class.extend({
this.comm = new GempLotrCommunication("/gemp-lotr-server", that.processError);
this.cardFilter = new CardFilter(cardFilterElem, cardFilterElem,
this.cardFilter = new CardFilter(cardFilterElem,
function (filter, start, count, callback) {
that.comm.getMerchant(filter, that.ownedMin, start, count, callback);
},