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; }