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

Responsive battle UI

Browse Source 
Instead of our previous minimum width of 640px, the new battle UI is
now responsive down to 320px.

Screenshot: http://d.pr/i/17UYD/1V6IYX2T
This commit is contained in:
Guangcong Luo 2015-07-14 18:14:30 -04:00
parent f529ac6e39
commit cce2fa5019
2 changed files with 42 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/client-battle.js
View File

@ -51,11 +51,22 @@
return true;
},
updateLayout: function () {
if (this.$el.width() < 950) {
var width = this.$el.width();
if (width < 950) {
this.battle.messageDelay = 800;
} else {
this.battle.messageDelay = 8;
}
if (width < 640) {
var scale = (width/640);
this.$battle.css('transform', 'scale(' + scale + ')');
this.$foeHint.css('transform', 'scale(' + scale + ')');
this.$controls.css('top', 360 * scale + 10);
} else {
this.$battle.css('transform', 'none');
this.$foeHint.css('transform', 'none');
this.$controls.css('top', 370);
}
if (this.$chat) this.$chatFrame.scrollTop(this.$chat.height());
},
show: function () {
@ -937,6 +948,7 @@
if (x > 335) x = 335;
if (y < 140) y = 140;
if (x > $(window).width() - 303) x = Math.max($(window).width() - 303, 0);
if (!$('#tooltipwrapper').length) $(document.body).append('<div id="tooltipwrapper"></div>');
$('#tooltipwrapper').css({
left: x,

32
style/client.css
View File

@ -1424,12 +1424,28 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
border-right: 0;
top: 0;
left: 0;
transform-origin: top left;
}
.ps-room .foehint {
transform-origin: top left;
}
.ps-room .battle-controls {
position: absolute;
top: 370px;
left: 0;
width: 640px;
background: #EEF2F5;
}
@media (max-width:639px) {
.ps-room .battle-controls {
left: 0;
right: 0;
width: auto;
}
.movecontrols, .switchcontrols {
max-width: 330px;
margin: 0 auto;
}
}
.battle-controls p {
@ -1638,12 +1654,17 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
color: #777777 !important;
}
@media (max-height:571px) {
@media (max-height:570px) and (min-width: 440px) {
/*
* This is the black move/switch menu for low-res screens
*/
.controls {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
width: auto;
background: #444444;
background: rgba(40,40,40,.85);
color: #FFFFFF;
@ -1660,13 +1681,18 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
color: #FF7766;
border-color: #FF7766;
}
.battle-controls .movecontrols, .battle-controls .switchcontrols {
max-width: 640px;
}
.movemenu {
display: none;
padding: 0 100px 0 90px;
padding: 0 75px 0 85px;
}
.switchmenu {
display: none;
padding: 0 70px 0 210px;
max-width: 325px;
padding: 0 75px 0 85px;
margin: 0 0 0 auto;
}
.moveselect {
position: absolute;