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 1 Packages Projects Releases Wiki Activity

Zoom out teambuilder in mobile

Browse Source 
The teambuilder honestly isn't great in mobile, but since it's
impossible to zoom out in mobile, it's better to start zoomed out
and let the user zoom in, than start zoomed in and not give the
user a choice.
This commit is contained in:
Guangcong Luo 2015-07-17 04:54:05 -04:00
parent ba0a7e72ff
commit 99ae3f700d
2 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
js/client-teambuilder.js
View File

@ -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 += '</ol>';
buf += '</div>';
}
this.$el.html(buf);
this.$el.html('<div class="teamwrapper">' + buf + '</div>');
if ($(window).width() < 640) this.show();
},
renderSet: function (set, i) {
var template = Tools.getTemplate(set.species);
@ -878,7 +893,8 @@
buf += '<textarea class="pokemonedit textbox" rows="14"></textarea>';
buf += '</div>';
this.$el.html(buf);
this.$el.html('<div class="teamwrapper">' + buf + '</div>');
if ($(window).width() < 640) this.show();
this.$chart = this.$('.teambuilder-results');
},
updateSetTop: function () {

11
style/client.css
View File

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