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

Made the table/tournament dropdowns easier to use

Browse Source
This commit is contained in:
marcin.sciesinski
2019-09-26 12:31:18 -07:00
parent 8fd3f826ca
commit 0aaff083c6
2 changed files with 204 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,174 +1,175 @@
body {
font-size: 12px;
background-color: #000000;
}
.eventHeader {
font-size: 120%;
font-weight: bolder;
background-color: #666666;
}
.serverTime {
border: 1px solid #ffffff;
}
.leagueName, #stats .period, .tournamentName, .playerStatHeader {
font-size: 200%;
font-weight: bolder;
}
.serieName {
font-size: 150%;
font-weight: bolder;
}
.borderOverlay {
border: 2px solid #000000;
}
.foilOverlay {
opacity: 0.2;
}
.cardHint {
display: inline;
color: #6f6fff;
cursor: pointer;
}
.prizeHint {
display: inline;
color: #6f6fff;
cursor: pointer;
}
.clickableFormat {
cursor: pointer;
color: #6f6fff;
}
.pocket {
background-color: #000000;
border: 1px solid #ffffff;
color: #ffffff;
font-size: 90%;
font-weight: bolder;
text-align: right;
opacity: 1;
}
.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;
}
.tableFormatName {
text-align: center;
font-weight: bold;
font-size: 100%;
}
.tableStatus {
text-align: center;
font-style: italic;
font-size: 100%;
}
.tablePlayer {
text-align: center;
}
.winningPlayer {
font-weight: bold;
font-size: 110%;
}
.losingPlayer {
font-size: 80%;
}
.chatMessage {
color: #ffffff;
}
.systemMessage {
color: #5f5f5f;
}
.warningMessage {
color: #ff0000;
}
.chatUser {
color: #ffffff;
}
.systemMessage > .timestamp {
display: inline;
color: #5f5f5f;
}
.timestamp {
display: inline;
color: #cfcfcf;
}
#disclaimer {
color: #ffffff;
font-size: 80%;
}
#latestNews {
color: #ffffff;
font-size: 90%;
}
#motd {
color: #ffffff;
font-size: 90%;
}
table.tables {
width: 100%;
}
table.tables td, table.tables th {
padding: 2px;
border: 1px solid white;
}
.ui-tabs-nav li {
font-size: 70%;
}
.ui-button-text-only .ui-button-text {
font-size: 70%;
padding: .2em .5em;
}
.standings td, .standings th {
padding: 2px;
border: 1px solid white;
}
.gameHistory td, .gameHistory th {
padding: 2px;
border: 1px solid white;
}
.userList {
border-left: 1px solid #FFFFFF;
}
tr.played {
background-color: #990000;
body {
font-size: 12px;
background-color: #000000;
}
.eventHeader {
font-size: 120%;
font-weight: bolder;
background-color: #666666;
cursor: pointer;
}
.serverTime {
border: 1px solid #ffffff;
}
.leagueName, #stats .period, .tournamentName, .playerStatHeader {
font-size: 200%;
font-weight: bolder;
}
.serieName {
font-size: 150%;
font-weight: bolder;
}
.borderOverlay {
border: 2px solid #000000;
}
.foilOverlay {
opacity: 0.2;
}
.cardHint {
display: inline;
color: #6f6fff;
cursor: pointer;
}
.prizeHint {
display: inline;
color: #6f6fff;
cursor: pointer;
}
.clickableFormat {
cursor: pointer;
color: #6f6fff;
}
.pocket {
background-color: #000000;
border: 1px solid #ffffff;
color: #ffffff;
font-size: 90%;
font-weight: bolder;
text-align: right;
opacity: 1;
}
.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;
}
.tableFormatName {
text-align: center;
font-weight: bold;
font-size: 100%;
}
.tableStatus {
text-align: center;
font-style: italic;
font-size: 100%;
}
.tablePlayer {
text-align: center;
}
.winningPlayer {
font-weight: bold;
font-size: 110%;
}
.losingPlayer {
font-size: 80%;
}
.chatMessage {
color: #ffffff;
}
.systemMessage {
color: #5f5f5f;
}
.warningMessage {
color: #ff0000;
}
.chatUser {
color: #ffffff;
}
.systemMessage > .timestamp {
display: inline;
color: #5f5f5f;
}
.timestamp {
display: inline;
color: #cfcfcf;
}
#disclaimer {
color: #ffffff;
font-size: 80%;
}
#latestNews {
color: #ffffff;
font-size: 90%;
}
#motd {
color: #ffffff;
font-size: 90%;
}
table.tables {
width: 100%;
}
table.tables td, table.tables th {
padding: 2px;
border: 1px solid white;
}
.ui-tabs-nav li {
font-size: 70%;
}
.ui-button-text-only .ui-button-text {
font-size: 70%;
padding: .2em .5em;
}
.standings td, .standings th {
padding: 2px;
border: 1px solid white;
}
.gameHistory td, .gameHistory th {
padding: 2px;
border: 1px solid white;
}
.userList {
border-left: 1px solid #FFFFFF;
}
tr.played {
background-color: #990000;
}

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

@@ -120,28 +120,15 @@ var GempLotrHallUI = Class.extend({
var content = $("<div></div>");
var toggleContent = $("<div>Toggle tournament queues</div>").button({
icons: {
primary: "ui-icon-circlesmall-minus"
},
text: false
});
var that = this;
var toggle = function() {
if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus")
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
else
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"});
content.toggle("blind", {}, 200);
that.updateHallSettings();
};
toggleContent.css({width: "13px", height: "15px"});
toggleContent.click(toggle);
header.append(toggleContent);
header.append(" Tournament queues");
header.append("Tournament queues");
header.append(" <span class='count'>(0)</span>");
header.click(toggle);
var table = $("<table class='tables queues'></table>");
table.append("<tr><th width='10%'>Format</th><th width='8%'>Collection</th><th width='20%'>Queue name</th><th width='16%'>Starts</th><th width='10%'>System</th><th width='6%'>Players</th><th width='8%'>Cost</th><th width='12%'>Prizes</th><th width='10%'>Actions</th></tr>");
@@ -150,9 +137,10 @@ var GempLotrHallUI = Class.extend({
this.tablesDiv.append(header);
this.tablesDiv.append(content);
if (!displayed) {
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
content.css({"display":"none"});
if (displayed) {
content.show();
} else {
content.hide();
}
},
@@ -161,27 +149,14 @@ var GempLotrHallUI = Class.extend({
var content = $("<div></div>");
var toggleContent = $("<div>Toggle tournaments in progress</div>").button({
icons: {
primary: "ui-icon-circlesmall-minus"
},
text: false
});
var that = this;
var toggle = function() {
if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus")
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
else
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"});
content.toggle("blind", {}, 200);
that.updateHallSettings();
};
toggleContent.css({width: "13px", height: "15px"});
toggleContent.click(toggle);
header.append(toggleContent);
header.append(" Tournaments in progress");
header.append("Tournaments in progress");
header.append(" <span class='count'>(0)</span>");
header.click(toggle);
var table = $("<table class='tables tournaments'></table>");
table.append("<tr><th width='10%'>Format</th><th width='10%'>Collection</th><th width='25%'>Tournament name</th><th width='15%'>System</th><th width='10%'>Stage</th><th width='10%'>Round</th><th width='10%'>Players</th><th width='10%'>Actions</th></tr>");
@@ -190,9 +165,10 @@ var GempLotrHallUI = Class.extend({
this.tablesDiv.append(header);
this.tablesDiv.append(content);
if (!displayed) {
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
content.css({"display":"none"});
if (displayed) {
content.show();
} else {
content.hide();
}
},
@@ -201,27 +177,14 @@ var GempLotrHallUI = Class.extend({
var content = $("<div></div>");
var toggleContent = $("<div>Toggle waiting tables</div>").button({
icons: {
primary: "ui-icon-circlesmall-minus"
},
text: false
});
var that = this;
var toggle = function() {
if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus")
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
else
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"});
content.toggle("blind", {}, 200);
that.updateHallSettings();
};
toggleContent.css({width: "13px", height: "15px"});
toggleContent.click(toggle);
header.append(toggleContent);
header.append(" Waiting tables");
header.append("Waiting tables");
header.append(" <span class='count'>(0)</span>");
header.click(toggle);
var table = $("<table class='tables waitingTables'></table>");
table.append("<tr><th width='20%'>Format</th><th width='40%'>Tournament</th><th width='10%'>Status</th><th width='20%'>Players</th><th width='10%'>Actions</th></tr>");
@@ -230,9 +193,10 @@ var GempLotrHallUI = Class.extend({
this.tablesDiv.append(header);
this.tablesDiv.append(content);
if (!displayed) {
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
content.css({"display":"none"});
if (displayed) {
content.show();
} else {
content.hide();
}
},
@@ -241,27 +205,14 @@ var GempLotrHallUI = Class.extend({
var content = $("<div></div>");
var toggleContent = $("<div>Toggle playing tables</div>").button({
icons: {
primary: "ui-icon-circlesmall-minus"
},
text: false
});
var that = this;
var toggle = function() {
if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus")
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
else
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"});
content.toggle("blind", {}, 200);
that.updateHallSettings();
};
toggleContent.css({width: "13px", height: "15px"});
toggleContent.click(toggle);
header.append(toggleContent);
header.append(" Playing tables");
header.append("Playing tables");
header.append(" <span class='count'>(0)</span>");
header.click(toggle);
var table = $("<table class='tables playingTables'></table>");
table.append("<tr><th width='20%'>Format</th><th width='40%'>Tournament</th><th width='10%'>Status</th><th width='20%'>Players</th><th width='10%'>Actions</th></tr>");
@@ -270,9 +221,10 @@ var GempLotrHallUI = Class.extend({
this.tablesDiv.append(header);
this.tablesDiv.append(content);
if (!displayed) {
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
content.css({"display":"none"});
if (displayed) {
content.show();
} else {
content.hide();
}
},
@@ -281,27 +233,14 @@ var GempLotrHallUI = Class.extend({
var content = $("<div></div>");
var toggleContent = $("<div>Toggle finished tables</div>").button({
icons: {
primary: "ui-icon-circlesmall-minus"
},
text: false
});
var that = this;
var toggle = function() {
if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus")
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
else
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"});
content.toggle("blind", {}, 200);
that.updateHallSettings();
};
toggleContent.css({width: "13px", height: "15px"});
toggleContent.click(toggle);
header.append(toggleContent);
header.append(" Finished tables");
header.append("Finished tables");
header.append(" <span class='count'>(0)</span>");
header.click(toggle);
var table = $("<table class='tables finishedTables'></table>");
table.append("<tr><th width='20%'>Format</th><th width='40%'>Tournament</th><th width='10%'>Status</th><th width='20%'>Players</th><th width='10%'>Winner</th></tr>");
@@ -310,9 +249,10 @@ var GempLotrHallUI = Class.extend({
this.tablesDiv.append(header);
this.tablesDiv.append(content);
if (!displayed) {
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
content.css({"display":"none"});
if (displayed) {
content.show();
} else {
content.hide();
}
},