Redesign teambuilder

- Nicer looking buttons
- Nicer layout
- Ctrl+F-able pokemon species names

js/client-teambuilder.js

@@ -132,10 +132,11 @@
 				this.$el.html(buf);
 				return;
 			}
-			buf = '<div class="pad"><p>y\'know zarel this is a pretty good teambuilder</p>';
-			buf += '<p>aww thanks I\'m glad you like it :)</p>';
+			buf = '<div class="pad"><p>y\'know strawberries have more potassium than bananas</p>';
+			buf += '<p>that doesn\'t have anything to do with teambuilding!</p>';
+			buf += '<p><i>fiiiiiiine</i> press Ctrl+F to find teams by pokemon name</p>';
 			buf += this.clipboardHTML();
-			buf += '<ul>';
+			buf += '<ul class="teamlist">';
 			if (!window.localStorage && !window.nodewebkit) buf += '<li>== CAN\'T SAVE ==<br /><small>Your browser doesn\'t support <code>localStorage</code> and can\'t save teams! Update to a newer browser.</small></li>';
 			if (Storage.cantSave) buf += '<li>== CAN\'T SAVE ==<br /><small>You hit your browser\'s limit for team storage! Please backup them and delete some of them. Your teams won\'t be saved until you\'re under the limit again.</small></li>';
 			if (!teams.length) {
@@ -169,7 +170,7 @@
 						formatText = '['+team.format+'] ';
 					}
 
-					buf += '<li><button name="edit" value="'+i+'" style="width:400px;vertical-align:middle">'+formatText+'<strong>'+Tools.escapeHTML(team.name)+'</strong><br /><small>';
+					buf += '<li><button name="edit" value="'+i+'" class="team">'+formatText+'<strong>'+Tools.escapeHTML(team.name)+'</strong><br /><small>';
 					buf += Storage.getTeamIcons(team);
 					buf += '</small></button> <button name="edit" value="'+i+'"><i class="icon-pencil"></i>Edit</button> <button name="delete" value="'+i+'"><i class="icon-trash"></i>Delete</button></li>';
 				}

js/storage.js

@@ -456,7 +456,7 @@ Storage.packedTeamIcons = function(buf) {
 	if (!buf) return '<em>(empty team)</em>';
 
 	return this.packedTeamNames(buf).map(function (species) {
-		return '<span class="pokemonicon" style="display:inline-block;' + Tools.getIcon(species) + '"></span>';
+		return '<span class="pokemonicon" style="' + Tools.getIcon(species) + ';float:left;overflow:visible"><span style="font-size:0px">' + toId(species) + '</span></span>';
 	}).join('');
 };
 

style/battle.css

@@ -895,3 +895,11 @@ License: GPLv2
 .message-error {
 	color: #992222;
 }
+.message-overflow,
+.chat small.message-overflow {
+	font-size: 0pt;
+}
+.message-overflow::before {
+	font-size:9pt;
+	content: '...';
+}

style/client.css

@@ -23,6 +23,9 @@ body {
 	margin: 0;
 	padding: 5px 15px;
 }
+.pad p {
+	margin: 9px 0;
+}
 .label {
 	font-size: 9pt;
 	font-weight: bold;
@@ -472,9 +475,8 @@ p.or:after {
 	border: 1px solid #888888;
 	background: #D5D5D5;
 }
-.select {
+.select, .team {
 	cursor: pointer;
-	box-sizing: border-box;
 	width: 230px;
 	height: 32px;
 	padding: 0 5px;
@@ -488,18 +490,19 @@ p.or:after {
 	box-shadow: inset 0 1px 0 #FFFFFF;
 	background: linear-gradient(to bottom,  #edf2f8,  #d7e3ec);
 	color: black;
+	box-sizing: border-box;
 }
 .select.teamselect {
 	height: 43px;
 	white-space: nowrap;
 	overflow: hidden;
 }
-.select:hover {
+.select:hover, .team:hover {
 	border-color: #555555;
 	background: #FFFFFF;
 	background: linear-gradient(to bottom,  #dce4ec,  #c6d3e0);
 }
-.select:active {
+.select:active, .team:active {
 	border-color: #777777;
 	background: #DDDDDD;
 	box-shadow: none;
@@ -1753,6 +1756,39 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
  * Teambuilder
  *********************************************************/
 
+.teamlist {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.teamlist li {
+	margin: 3px 16px;
+	padding: 0;
+}
+
+.teamlist .team {
+	white-space: nowrap;
+	width: 360px;
+	height: 49px;
+	padding: 1px 6px 1px 6px;
+	font-size: 8pt;
+	vertical-align: middle;
+	text-align: center;
+}
+.teamlist .team small {
+	display: block;
+	padding: 3px 74px 0 74px;
+}
+.teamlist .team .pokemonicon span {
+	font-size: 9px !important;
+	display: block;
+	overflow: visible;
+	position: relative;
+	width: 32px;
+	top: 22px;
+	color: transparent;
+}
+
 .teamedit {
 	position: absolute;
 	display: block;