diff --git a/js/client-teambuilder.js b/js/client-teambuilder.js
index ce7ff17d2..810225323 100644
--- a/js/client-teambuilder.js
+++ b/js/client-teambuilder.js
@@ -198,6 +198,20 @@
this.$el.html(buf);
},
+ show: function () {
+ Room.prototype.show.apply(this, arguments);
+ var $teamwrapper = this.$('.teamwrapper');
+ var width = $(window).width();
+ if (!$teamwrapper.length) return;
+ if (width < 640) {
+ var scale = (width/640);
+ $teamwrapper.css('transform', 'scale(' + scale + ')');
+ $teamwrapper.addClass('scaled');
+ } else {
+ $teamwrapper.css('transform', 'none');
+ $teamwrapper.removeClass('scaled');
+ }
+ },
// button actions
revealFolder: function () {
Storage.revealFolder();
@@ -507,7 +521,8 @@
buf += '';
buf += '';
}
- this.$el.html(buf);
+ this.$el.html('
' + buf + '
');
+ if ($(window).width() < 640) this.show();
},
renderSet: function (set, i) {
var template = Tools.getTemplate(set.species);
@@ -878,7 +893,8 @@
buf += '';
buf += '';
- this.$el.html(buf);
+ this.$el.html('' + buf + '
');
+ if ($(window).width() < 640) this.show();
this.$chart = this.$('.teambuilder-results');
},
updateSetTop: function () {
diff --git a/style/client.css b/style/client.css
index cc92b913b..7c02f3ee3 100644
--- a/style/client.css
+++ b/style/client.css
@@ -1881,6 +1881,11 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
height: 100%;
}
+.teamwrapper {
+ transform-origin: top left;
+ -webkit-transform-origin: top left;
+}
+
.teambar {
position: absolute;
top: 0;
@@ -2370,6 +2375,12 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
+.teamwrapper.scaled {
+ width: 640px;
+}
+.teamwrapper.scaled .teamchartbox {
+ bottom: auto;
+}
.teamchartbox.individual {
overflow: visible;
}