Leahnaya/pokemon-showdown-client
1
0
Fork 0
mirror of https://github.com/smogon/pokemon-showdown-client.git synced 2026-05-05 21:16:26 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use .textbox for teambuilder textboxes

Browse Source 
Teambuilder textboxes used to have their own CSS. They've been updated
to use the regular textbox CSS. This also makes them dark in Dark
Mode.
This commit is contained in:
Guangcong Luo 2016-01-21 20:49:17 -08:00
parent 04e96af909
commit 0a39ebf140
2 changed files with 36 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
js/client-teambuilder.js
View File

@ -1022,13 +1022,13 @@
buf += '<div class="setmenu setmenu-left"><button name="undeleteSet"><i class="fa fa-undo"></i> Undo Delete</button></div>';
}
buf += '<div class="setmenu"><button name="importSet"><i class="fa fa-upload"></i>Import</button></div>';
buf += '<div class="setchart" style="background-image:url(' + Tools.resourcePrefix + 'sprites/bw/0.png);"><div class="setcol setcol-icon"><span class="itemicon"></span><div class="setcell setcell-pokemon"><label>Pok&eacute;mon</label><input type="text" name="pokemon" class="chartinput" value="" /></div></div></div>';
buf += '<div class="setchart" style="background-image:url(' + Tools.resourcePrefix + 'sprites/bw/0.png);"><div class="setcol setcol-icon"><span class="itemicon"></span><div class="setcell setcell-pokemon"><label>Pok&eacute;mon</label><input type="text" name="pokemon" class="textbox chartinput" value="" /></div></div></div>';
buf += '</li>';
return buf;
}
buf += '<div class="setmenu"><button name="copySet"><i class="fa fa-files-o"></i>Copy</button> <button name="importSet"><i class="fa fa-upload"></i>Import/Export</button> <button name="moveSet"><i class="fa fa-arrows"></i>Move</button> <button name="deleteSet"><i class="fa fa-trash"></i>Delete</button></div>';
buf += '<div class="setchart-nickname">';
buf += '<label>Nickname</label><input type="text" value="' + Tools.escapeHTML(set.name || '') + '" placeholder="' + Tools.escapeHTML(template.baseSpecies) + '" name="nickname" />';
buf += '<label>Nickname</label><input type="text" name="nickname" class="textbox" value="' + Tools.escapeHTML(set.name || '') + '" placeholder="' + Tools.escapeHTML(template.baseSpecies) + '" />';
buf += '</div>';
buf += '<div class="setchart" style="' + Tools.getTeambuilderSprite(set, this.curTeam.gen) + ';">';
@ -1038,11 +1038,11 @@
var item = Tools.getItem(set.item);
itemicon = '<span class="itemicon" style="' + Tools.getItemIcon(item) + '"></span>';
}
buf += '<div class="setcol setcol-icon">' + itemicon + '<div class="setcell setcell-pokemon"><label>Pok&eacute;mon</label><input type="text" name="pokemon" class="chartinput" value="' + Tools.escapeHTML(set.species) + '" /></div></div>';
buf += '<div class="setcol setcol-icon">' + itemicon + '<div class="setcell setcell-pokemon"><label>Pok&eacute;mon</label><input type="text" name="pokemon" class="textbox chartinput" value="' + Tools.escapeHTML(set.species) + '" /></div></div>';
// details
buf += '<div class="setcol setcol-details"><div class="setrow">';
buf += '<div class="setcell setcell-details"><label>Details</label><button class="setdetails" tabindex="-1" name="details">';
buf += '<div class="setcell setcell-details"><label>Details</label><button class="textbox setdetails" tabindex="-1" name="details">';
var GenderChart = {
'M': 'Male',
@ -1058,21 +1058,21 @@
buf += '</button></div>';
buf += '</div><div class="setrow">';
if (this.curTeam.gen > 1) buf += '<div class="setcell setcell-item"><label>Item</label><input type="text" name="item" class="chartinput" value="' + Tools.escapeHTML(set.item) + '" /></div>';
if (this.curTeam.gen > 2) buf += '<div class="setcell setcell-ability"><label>Ability</label><input type="text" name="ability" class="chartinput" value="' + Tools.escapeHTML(set.ability) + '" /></div>';
if (this.curTeam.gen > 1) buf += '<div class="setcell setcell-item"><label>Item</label><input type="text" name="item" class="textbox chartinput" value="' + Tools.escapeHTML(set.item) + '" /></div>';
if (this.curTeam.gen > 2) buf += '<div class="setcell setcell-ability"><label>Ability</label><input type="text" name="ability" class="textbox chartinput" value="' + Tools.escapeHTML(set.ability) + '" /></div>';
buf += '</div></div>';
// moves
if (!set.moves) set.moves = [];
buf += '<div class="setcol setcol-moves"><div class="setcell"><label>Moves</label>';
buf += '<input type="text" name="move1" class="chartinput" value="' + Tools.escapeHTML(set.moves[0]) + '" /></div>';
buf += '<div class="setcell"><input type="text" name="move2" class="chartinput" value="' + Tools.escapeHTML(set.moves[1]) + '" /></div>';
buf += '<div class="setcell"><input type="text" name="move3" class="chartinput" value="' + Tools.escapeHTML(set.moves[2]) + '" /></div>';
buf += '<div class="setcell"><input type="text" name="move4" class="chartinput" value="' + Tools.escapeHTML(set.moves[3]) + '" /></div>';
buf += '<input type="text" name="move1" class="textbox chartinput" value="' + Tools.escapeHTML(set.moves[0]) + '" /></div>';
buf += '<div class="setcell"><input type="text" name="move2" class="textbox chartinput" value="' + Tools.escapeHTML(set.moves[1]) + '" /></div>';
buf += '<div class="setcell"><input type="text" name="move3" class="textbox chartinput" value="' + Tools.escapeHTML(set.moves[2]) + '" /></div>';
buf += '<div class="setcell"><input type="text" name="move4" class="textbox chartinput" value="' + Tools.escapeHTML(set.moves[3]) + '" /></div>';
buf += '</div>';
// stats
buf += '<div class="setcol setcol-stats"><div class="setrow"><label>Stats</label><button class="setstats" name="stats" class="chartinput">';
buf += '<div class="setcol setcol-stats"><div class="setrow"><label>Stats</label><button class="textbox setstats" name="stats">';
buf += '<span class="statrow statrow-head"><label></label> <span class="statgraph"></span> <em>EV</em></span>';
var stats = {};
var defaultEV = (this.curTeam.gen > 2 ? 0 : 252);

75
style/client.css
View File

@ -62,7 +62,7 @@ body {
}
.textbox:focus {
outline: 0 none;
border: 1px solid #004488;
border-color: #004488;
box-shadow: inset 0px 1px 2px #D2D2D2, 0px 0px 5px #2266AA;
background: #FFFFFF;
}
@ -115,6 +115,28 @@ button:disabled {
.dark a.button.subtle-notifying {
color: #AA6600;
}
.dark .textbox {
border: 1px solid #777777;
border-radius: 3px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 9pt;
box-shadow: none;
background: #282B2D;
color: #DDD;
}
.dark .textbox:hover {
border-color: #AAAAAA;
box-shadow: none;
background: #111111;
}
.dark .textbox:focus {
outline: 0 none;
border-color: #AAAAAA;
box-shadow: 0px 0px 4px #77BBFF;
background: #111111;
}
/* .dark button {
background: #777777;
box-shadow: none;
@ -2477,7 +2499,8 @@ a.ilink.yours {
box-shadow: inset 0px 1px 2px #D2D2D2, 1px 1px 0 rgba(255,255,255,.6);
background: #FFFFFF;
}
.setdetails:focus, .setstats:focus {
.setdetails:focus, .setstats:focus,
.dark .setdetails:focus, .dark .setstats:focus {
border: 2px solid #004488;
margin: 1px 1px 0 0;
outline: 0 none;
@ -2582,35 +2605,10 @@ a.ilink.yours {
.setchart-nickname input,
.statform input.inputform {
display: block;
border: 1px solid #AAAAAA;
border-radius: 3px;
padding: 1px;
margin: 2px 3px 1px 1px;
font-family: Verdana, sans-serif;
font-size: 9pt;
width: 104px;
height: 20px;
box-shadow: inset 0px 1px 2px #CCCCCC, 1px 1px 0 rgba(255,255,255,.6);
background: #F8FBFD;
color: black;
}
.setchart input:hover,
.setchart-nickname input:hover,
.statform input.inputform:hover,
.textbox:hover {
border-color: #474747;
box-shadow: inset 0px 1px 2px #D2D2D2, 1px 1px 0 rgba(255,255,255,.6);
background: #FFFFFF;
}
.setchart input:focus,
.setchart-nickname input:focus,
.statform input.inputform:focus,
.textbox:focus {
outline: 0 none;
border: 1px solid #004488;
box-shadow: inset 0px 1px 2px #D2D2D2, 0px 0px 5px #2266AA;
background: #FFFFFF;
}
.setchart input.incomplete {
color: #CC3311;
@ -3077,29 +3075,6 @@ a.ilink.yours {
background: black;
}
.dark .textbox {
border: 1px solid #777777;
border-radius: 3px;
padding: 2px 3px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 9pt;
box-shadow: none;
background: #282B2D;
color: #DDD;
}
.dark .textbox:hover {
border-color: #AAAAAA;
box-shadow: none;
background: #111111;
}
.dark .textbox:focus {
outline: 0 none;
border: 1px solid #AAAAAA;
box-shadow: 0px 0px 5px #4488CC;
background: #111111;
}
.dark iframe.textbox,
.dark iframe.textbox:hover,
.dark iframe.textbox:focus {