Skip to content

Commit

Permalink
Finish cleaning up popupmenu CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zarel
Zarel committed Nov 3, 2023
1 parent 593e665 commit d47f7d2
Show file tree
Hide file tree
Showing 6 changed files with 42 additions and 193 deletions.
21 changes: 10 additions & 11 deletions js/client-mainmenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1260,7 +1260,7 @@
var bufs = [];
var curBuf = 0;
if (this.selectType === 'watch' && !this.search) {
bufs[1] = '<li><button name="selectFormat" value=""' + (curFormat === '' ? ' class="sel"' : '') + '>(All formats)</button></li>';
bufs[1] = '<li><button name="selectFormat" value="" class="option' + (curFormat === '' ? ' sel' : '') + '">(All formats)</button></li>';
}

for (var i in this.starred) {
Expand All @@ -1278,7 +1278,7 @@
var formatName = BattleLog.escapeFormat(BattleFormats[i].id);
bufs[1] += (
'<li><button name="selectFormat" value="' + i +
'"' + (curFormat === i ? ' class="sel"' : '') + '>' + formatName +
'" class="option' + (curFormat === i ? ' sel' : '') + '">' + formatName +
'<i class="fa fa-star" style="float: right; color: #FFD700; text-shadow: 0 0 1px #000;"></i></button></li>'
);
}
Expand Down Expand Up @@ -1314,7 +1314,7 @@
formatName = formatName.replace('[Gen 7 ', '[');
bufs[curBuf] += (
'<li><button name="selectFormat" value="' + i +
'"' + (curFormat === i ? ' class="sel"' : '') + '>' + formatName +
'" class="option' + (curFormat === i ? ' sel' : '') + '">' + formatName +
'<i class="fa fa-star subtle" style="float: right;"></i></button></li>'
);
}
Expand Down Expand Up @@ -1448,7 +1448,7 @@
if ((!teams[i].format && !teamFormat) || teams[i].format === teamFormat) {
var selected = (i === curTeam);
if (!this.folderToggleOn) {
bufs[curBuf] += '<li><button name="selectTeam" value="' + i + '"' + (selected ? ' class="sel"' : '') + '>' + BattleLog.escapeHTML(teams[i].name) + '</button></li>';
bufs[curBuf] += '<li><button name="selectTeam" value="' + i + '" class="option' + (selected ? 'sel' : '') + '">' + BattleLog.escapeHTML(teams[i].name) + '</button></li>';
count++;
if (count % bufBoundary === 0 && curBuf < 4) curBuf++;
} else {
Expand All @@ -1473,7 +1473,7 @@
}
}
if (!exists) {
bufs[curBuf] += '<li><button name="selectFolder" class="folderButtonOpen folderButtonOver" value="' + key + '"><i class="fa fa-folder-open" style="margin-right: 7px; margin-left: 4px;"></i>' + BattleLog.escapeHTML(key) + '</button></li>';
bufs[curBuf] += '<li><button name="selectFolder" class="button" value="' + key + '"><i class="fa fa-folder-open" style="margin-right: 7px; margin-left: 4px;"></i>' + BattleLog.escapeHTML(key) + '</button></li>';
count++;
if (count % bufBoundary === 0 && curBuf < 4) curBuf++;
for (var j = 0; j < folderData.length; j++) {
Expand All @@ -1483,7 +1483,7 @@
if (count % bufBoundary === 0 && curBuf < 4) curBuf++;
}
} else {
bufs[curBuf] += '<li><button name="selectFolder" class="folderButton" value="' + key + '"><i class="fa fa-folder" style="margin-right: 7px; margin-left: 4px;"></i>' + BattleLog.escapeHTML(key) + '</button></li>';
bufs[curBuf] += '<li><button name="selectFolder" class="button" value="' + key + '"><i class="fa fa-folder" style="margin-right: 7px; margin-left: 4px;"></i>' + BattleLog.escapeHTML(key) + '</button></li>';
count++;
if (count % bufBoundary === 0 && curBuf < 4) curBuf++;
}
Expand All @@ -1496,19 +1496,18 @@
}
}
if (!isNoFolder) {
bufs[curBuf] += '<li><button name="selectFolder" class="folderButtonOpen folderButtonOver" value="(No Folder)"><i class="fa fa-folder-open" style="margin-right: 7px; margin-left: 4px;"></i>(No Folder)</button></li>';
bufs[curBuf] += '<li><button name="selectFolder" class="button" value="(No Folder)"><i class="fa fa-folder-open" style="margin-right: 7px; margin-left: 4px;"></i>(No Folder)</button></li>';
} else {
bufs[curBuf] += '<li><button name="selectFolder" class="folderButton" value="(No Folder)"><i class="fa fa-folder" style="margin-right: 7px; margin-left: 4px;"></i>(No Folder)</button></li>';
bufs[curBuf] += '<li><button name="selectFolder" class="button" value="(No Folder)"><i class="fa fa-folder" style="margin-right: 7px; margin-left: 4px;"></i>(No Folder)</button></li>';
count++;
if (count % bufBoundary === 0 && count != 0 && curBuf < 4) curBuf++;
}
console.log(teamFormat);
if (!isNoFolder) {
for (var i = 0; i < teams.length; i++) {
if ((!teams[i].format && !teamFormat) || teams[i].format === teamFormat) {
var selected = (i === curTeam);
if (teams[i].folder === "") {
bufs[curBuf] += '<li><button name="selectTeam" value="' + i + '"' + (selected ? ' class="sel"' : '') + '>' + BattleLog.escapeHTML(teams[i].name) + '</button></li>';
bufs[curBuf] += '<li><button name="selectTeam" value="' + i + '" class="option' + (selected ? ' sel' : '') + '">' + BattleLog.escapeHTML(teams[i].name) + '</button></li>';
count++;
if (count % bufBoundary === 0 && curBuf < 4) curBuf++;
}
Expand All @@ -1528,7 +1527,7 @@
for (var i = 0; i < teams.length; i++) {
if (teamFormat && teams[i].format === teamFormat) continue;
var selected = (i === curTeam);
bufs[curBuf] += '<li><button name="selectTeam" value="' + i + '"' + (selected ? ' class="sel"' : '') + '>' + BattleLog.escapeHTML(teams[i].name) + '</button></li>';
bufs[curBuf] += '<li><button name="selectTeam" value="' + i + '" class="option' + (selected ? ' sel' : '') + '">' + BattleLog.escapeHTML(teams[i].name) + '</button></li>';
count++;
if (count % bufBoundary === 0 && curBuf < 4) curBuf++;
}
Expand Down
18 changes: 8 additions & 10 deletions js/client-teambuilder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,10 +189,10 @@

if (this.exportMode) {
if (this.curFolder) {
buf = '<div class="pad"><button name="back"><i class="fa fa-chevron-left"></i> List</button></div>';
buf = '<div class="pad"><button name="back" class="button"><i class="fa fa-chevron-left"></i> List</button></div>';
buf += '<div class="teamedit"><textarea readonly class="textbox" rows="17">' + BattleLog.escapeHTML(Storage.exportFolder(this.curFolder)) + '</textarea></div>';
} else {
buf = '<div class="pad"><button name="back"><i class="fa fa-chevron-left"></i> List</button> <button name="saveBackup" class="savebutton"><i class="fa fa-floppy-o"></i> Save</button></div>';
buf = '<div class="pad"><button name="back" class="button"><i class="fa fa-chevron-left"></i> List</button> <button name="saveBackup" class="savebutton button"><i class="fa fa-floppy-o"></i> Save</button></div>';
buf += '<div class="teamedit"><textarea class="textbox" rows="17">';
if (Storage.teams.length > 350) {
buf += BattleLog.escapeHTML(Storage.getPackedTeams());
Expand Down Expand Up @@ -3538,23 +3538,21 @@
}

var buf = '';
buf += '<p>Pick a variant or <button name="close">Cancel</button></p>';
buf += '<p>Pick a variant or <button name="close" class="button">Cancel</button></p>';
buf += '<div class="formlist">';

var formCount = forms.length;
for (var i = 0; i < formCount; i++) {
var formid = forms[i].substring(baseid.length);
var form = (formid ? formid[0].toUpperCase() + formid.slice(1) : '');
var offset = '-' + (((i - 1) % 7) * spriteSize) + 'px -' + (Math.floor((i - 1) / 7) * spriteSize) + 'px';
buf += '<button name="setForm" value="' + form + '" style="';
buf += 'background-position:' + offset + '; background: url(' + spriteDir + '/' + baseid + (form ? '-' + formid : '') + '.png) no-repeat; ' + spriteDim + '"';
buf += (form === species.form || (form === '' && !species.form) ? ' class="cur"' : '') + '></button>';
buf += '<button name="setForm" value="' + form + '" style="';
buf += 'background-image: url(' + spriteDir + '/' + baseid + (form ? '-' + formid : '') + '.png); ' + spriteDim + '" class="option';
buf += (form === (species.forme || '') ? ' cur' : '') + '"></button>';
}
buf += '<div style="clear:both"></div>';
buf += '</div>';

var height = Math.ceil(formCount / 7);
var width = Math.ceil(formCount / height);
this.$el.html(buf).css({'max-width': (4 + spriteSize) * width, 'height': 42 + (4 + spriteSize) * height});
this.$el.html(buf).css({'max-width': (4 + spriteSize) * 7});
},
setForm: function (form) {
var species = Dex.species.get(this.curSet.species);
Expand Down
16 changes: 8 additions & 8 deletions js/client-topbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -720,7 +720,7 @@
for (var i = 1; i <= 293; i++) {
if (i === 162 || i === 168) continue;
var offset = '-' + (((i - 1) % 16) * 80 + 1) + 'px -' + (Math.floor((i - 1) / 16) * 80 + 1) + 'px';
buf += '<button name="setAvatar" value="' + i + '" style="background-position:' + offset + '"' + (i === cur ? ' class="cur"' : '') + ' title="/avatar ' + i + '"></button>';
buf += '<button name="setAvatar" value="' + i + '" style="background-position:' + offset + '" class="option pixelated' + (i === cur ? ' cur' : '') + '" title="/avatar ' + i + '"></button>';
}
buf += '</div><div style="clear:left"></div>';

Expand Down Expand Up @@ -794,18 +794,18 @@
buf += '<p><strong>Default</strong></p>';
buf += '<div class="bglist">';

buf += '<button name="setBg" value=""' + (!cur ? ' class="cur"' : '') + '><strong style="background:#888888;color:white;padding:16px 18px;display:block;font-size:12pt">' + (location.host === Config.routes.client ? 'Random' : 'Default') + '</strong></button>';
buf += '<button name="setBg" value="" class="option' + (!cur ? ' cur' : '') + '"><strong style="background:#888888;color:white;padding:16px 18px;display:block;font-size:12pt">' + (location.host === Config.routes.client ? 'Random' : 'Default') + '</strong></button>';

buf += '</div><div style="clear:left"></div>';
buf += '<p><strong>Official</strong></p>';
buf += '<div class="bglist">';

buf += '<button name="setBg" value="charizards"' + (cur === 'charizards' ? ' class="cur"' : '') + '><span class="bg" style="background-position:0 -' + (90 * 0) + 'px"></span>Charizards</button>';
buf += '<button name="setBg" value="horizon"' + (cur === 'horizon' ? ' class="cur"' : '') + '><span class="bg" style="background-position:0 -' + (90 * 1) + 'px"></span>Horizon</button>';
buf += '<button name="setBg" value="waterfall"' + (cur === 'waterfall' ? ' class="cur"' : '') + '><span class="bg" style="background-position:0 -' + (90 * 2) + 'px"></span>Waterfall</button>';
buf += '<button name="setBg" value="ocean"' + (cur === 'ocean' ? ' class="cur"' : '') + '><span class="bg" style="background-position:0 -' + (90 * 3) + 'px"></span>Ocean</button>';
buf += '<button name="setBg" value="shaymin"' + (cur === 'shaymin' ? ' class="cur"' : '') + '><span class="bg" style="background-position:0 -' + (90 * 4) + 'px"></span>Shaymin</button>';
buf += '<button name="setBg" value="solidblue"' + (cur === 'solidblue' ? ' class="cur"' : '') + '><span class="bg" style="background: #344b6c"></span>Solid blue</button>';
buf += '<button name="setBg" value="charizards" class="option' + (cur === 'charizards' ? ' cur' : '') + '"><span class="bg" style="background-position:0 -' + (90 * 0) + 'px"></span>Charizards</button>';
buf += '<button name="setBg" value="horizon" class="option' + (cur === 'horizon' ? ' cur' : '') + '"><span class="bg" style="background-position:0 -' + (90 * 1) + 'px"></span>Horizon</button>';
buf += '<button name="setBg" value="waterfall" class="option' + (cur === 'waterfall' ? ' cur' : '') + '"><span class="bg" style="background-position:0 -' + (90 * 2) + 'px"></span>Waterfall</button>';
buf += '<button name="setBg" value="ocean" class="option' + (cur === 'ocean' ? ' cur' : '') + '"><span class="bg" style="background-position:0 -' + (90 * 3) + 'px"></span>Ocean</button>';
buf += '<button name="setBg" value="shaymin" class="option' + (cur === 'shaymin' ? ' cur' : '') + '"><span class="bg" style="background-position:0 -' + (90 * 4) + 'px"></span>Shaymin</button>';
buf += '<button name="setBg" value="solidblue" class="option' + (cur === 'solidblue' ? ' cur' : '') + '"><span class="bg" style="background: #344b6c"></span>Solid blue</button>';

buf += '</div><div style="clear:left"></div>';
buf += '<p><strong>Custom</strong></p>';
Expand Down
4 changes: 2 additions & 2 deletions js/client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2546,7 +2546,7 @@ function toId() {
},
initialize: function (data) {
if (!this.type) this.type = 'semimodal';
this.$el.html('<form><p style="white-space:pre-wrap;word-wrap:break-word">' + (data.htmlMessage || BattleLog.parseMessage(data.message)) + '</p><p class="buttonbar">' + (data.buttons || '<button type="button" name="close" class="autofocus"><strong>OK</strong></button>') + '</p></form>').css('max-width', data.maxWidth || 480);
this.$el.html('<form><p style="white-space:pre-wrap;word-wrap:break-word">' + (data.htmlMessage || BattleLog.parseMessage(data.message)) + '</p><p class="buttonbar">' + (data.buttons || '<button type="button" name="close" class="autofocus" class="button"><strong>OK</strong></button>') + '</p></form>').css('max-width', data.maxWidth || 480);
},

dispatchClickButton: function (e) {
Expand Down Expand Up @@ -2610,7 +2610,7 @@ function toId() {
var buf = '<form>';
buf += '<p><label class="label">' + data.message;
buf += '<input class="textbox autofocus" type="text" name="data" value="' + BattleLog.escapeHTML(data.value || '') + '" /></label></p>';
buf += '<p class="buttonbar"><button type="submit"><strong>' + data.button + '</strong></button> <button type="button" name="close">Cancel</button></p>';
buf += '<p class="buttonbar"><button type="submit" class="button"><strong>' + data.button + '</strong></button> <button type="button" name="close" class="button">Cancel</button></p>';
buf += '</form>';

this.$el.html(buf);
Expand Down
14 changes: 8 additions & 6 deletions style/battle-log.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,7 @@ button:disabled {
}

.option {
background: transparent;
background-color: transparent;
border: 1px solid transparent;
border-radius: 4px;
padding: 2px 5px;
Expand All @@ -341,13 +341,14 @@ button:disabled {
white-space: nowrap;
overflow: hidden;
}
.option.sel {
.option.sel, .option.cur {
border-color: #999999;
}
.option:hover,
.option.sel:hover {
.option.sel:hover,
.option.cur:hover {
border-color: #888888;
background: #D5D5D5;
background-color: #D5D5D5;
color: black;
}

Expand All @@ -356,9 +357,10 @@ button:disabled {
box-shadow: none;
}
.dark .option:hover,
.dark .option.sel:hover {
.dark .option.sel:hover,
.dark .option.cur:hover {
border-color: #777777;
background: rgba(100, 100, 100, 0.5);
background-color: rgba(100, 100, 100, 0.5);
color: #FFFFFF;
}

Expand Down
Loading

0 comments on commit d47f7d2

Please sign in to comment.