ShuriZma
/
pokerogue
mirror of https://github.com/pagefaultgames/pokerogue.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[UI] add open filter button for mobile touch pad (#3480)

This commit is contained in:
MokaStitcher 2024-08-12 06:44:00 +02:00 committed by GitHub
parent 0f09893091
commit f8b9397d06
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
index.css
View File

@ -69,7 +69,9 @@ input:-internal-autofill-selected {
--controls-padding: 1rem; --controls-padding: 1rem;
--controls-size-with-padding: calc(var(--controls-size) + var(--controls-padding)); --controls-size-with-padding: calc(var(--controls-size) + var(--controls-padding));
--controls-size-with-wide-padding: calc(var(--controls-size) *1.2 + var(--controls-padding));
--control-group-extra-size: calc(var(--controls-size) * 0.8); --control-group-extra-size: calc(var(--controls-size) * 0.8);
--control-group-extra-wide-size: calc(var(--controls-size) * 1.2);
--control-group-extra-2-offset: calc(var(--controls-size-with-padding) + (var(--controls-size) - var(--control-group-extra-size)) / 2); --control-group-extra-2-offset: calc(var(--controls-size-with-padding) + (var(--controls-size) - var(--control-group-extra-size)) / 2);
--control-group-extra-1-offset: calc(var(--controls-padding) + (var(--controls-size) - var(--control-group-extra-size)) / 2); --control-group-extra-1-offset: calc(var(--controls-padding) + (var(--controls-size) - var(--control-group-extra-size)) / 2);
@ -117,25 +119,31 @@ input:-internal-autofill-selected {
width: var(--control-group-extra-size); width: var(--control-group-extra-size);
height: var(--control-group-extra-size); height: var(--control-group-extra-size);
} }
/* Hide buttons on specific UIs */ /* Hide buttons on specific UIs */
/* Show #cycleForm and #cycleShiny only on STARTER_SELECT and SETTINGS */ /* Show #apadPreviousTab and #apadNextTab only in settings, except in touch configuration panel */
#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode^='SETTINGS']) #apadCycleForm, #touchControls:not([data-ui-mode^='SETTINGS']) #apadPreviousTab,
#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode^='SETTINGS']) #apadCycleShiny { #touchControls:not([data-ui-mode^='SETTINGS']) #apadNextTab,
#touchControls:is(.config-mode) #apadPreviousTab,
#touchControls:is(.config-mode) #apadNextTab {
display: none; display: none;
} }
/* Show #apadInfo only in battle */ /* Show #apadInfo only in battle */
#touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']) #apadInfo { #touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']):not([data-ui-mode='TARGET_SELECT']) #apadInfo {
display: none; display: none;
} }
/* Show #apadInfo only in battle and target select */ /* Show #apadStats only in battle and shop */
#touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']):not([data-ui-mode='TARGET_SELECT']):not([data-ui-mode='MODIFIER_SELECT']) #apadStats { #touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']):not([data-ui-mode='TARGET_SELECT']):not([data-ui-mode='MODIFIER_SELECT']) #apadStats {
display: none; display: none;
} }
/* Show cycle buttons only on STARTER_SELECT and on touch configuration panel */ /* Show cycle buttons only on STARTER_SELECT and on touch configuration panel */
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadOpenFilters,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleForm,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleShiny,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleNature, #touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleNature,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleAbility, #touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleAbility,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleGender, #touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleGender,
@ -272,8 +280,8 @@ input:-internal-autofill-selected {
} }
#control-group-cancel { #control-group-cancel {
right: var(--controls-size-with-padding); right: var(--controls-size-with-wide-padding);
bottom: var(--controls-padding);; bottom: var(--controls-padding);
} }
#control-group-extra-1 { #control-group-extra-1 {
@ -282,6 +290,7 @@ input:-internal-autofill-selected {
} }
#control-group-extra-2 { #control-group-extra-2 {
width: var(--control-group-extra-wide-size);
right: var(--control-group-extra-2-offset); right: var(--control-group-extra-2-offset);
bottom: var(--control-group-extra-2-offset); bottom: var(--control-group-extra-2-offset);
} }

24
index.html
View File

@ -96,36 +96,50 @@
</div> </div>
<div id="control-group-extra-1" class="control-group control-group-extra"> <div id="control-group-extra-1" class="control-group control-group-extra">
<div id="apadCycleShiny" class="apad-button apad-square apad-small" data-key="CYCLE_SHINY"> <!-- buttons to navigate settings tabs -->
<div id="apadPreviousTab" class="apad-button apad-square apad-small" data-key="CYCLE_FORM">
<span class="apad-label">F</span>
</div>
<div id="apadNextTab" class="apad-button apad-square apad-small" data-key="CYCLE_SHINY">
<span class="apad-label">R</span> <span class="apad-label">R</span>
</div> </div>
<div id="apadCycleVariant" class="apad-button apad-square apad-small" data-key="V"> <!-- buttons to open filter menu in starter select -->
<span class="apad-label">V</span> <div id="apadOpenFilters" class="apad-button apad-rectangle apad-small" data-key="STATS">
</div>
<div id="apadStats" class="apad-button apad-rectangle apad-small" data-key="STATS">
<span class="apad-label">C</span> <span class="apad-label">C</span>
</div> </div>
<!-- main menu button -->
<div id="apadMenu" class="apad-button apad-rectangle apad-small" data-key="MENU"> <div id="apadMenu" class="apad-button apad-rectangle apad-small" data-key="MENU">
<span class="apad-label">Menu</span> <span class="apad-label">Menu</span>
</div> </div>
</div> </div>
<div id="control-group-extra-2" class="control-group control-group-extra"> <div id="control-group-extra-2" class="control-group control-group-extra">
<!-- buttons to cycle through pokemon characteristics in starter select -->
<div id="apadCycleForm" class="apad-button apad-square apad-small" data-key="CYCLE_FORM"> <div id="apadCycleForm" class="apad-button apad-square apad-small" data-key="CYCLE_FORM">
<span class="apad-label">F</span> <span class="apad-label">F</span>
</div> </div>
<div id="apadCycleGender" class="apad-button apad-square apad-small" data-key="CYCLE_GENDER"> <div id="apadCycleGender" class="apad-button apad-square apad-small" data-key="CYCLE_GENDER">
<span class="apad-label">G</span> <span class="apad-label">G</span>
</div> </div>
<div id="apadCycleShiny" class="apad-button apad-square apad-small" data-key="CYCLE_SHINY">
<span class="apad-label">R</span>
</div>
<div id="apadCycleAbility" class="apad-button apad-square apad-small" data-key="CYCLE_ABILITY"> <div id="apadCycleAbility" class="apad-button apad-square apad-small" data-key="CYCLE_ABILITY">
<span class="apad-label">E</span> <span class="apad-label">E</span>
</div> </div>
<div id="apadCycleNature" class="apad-button apad-square apad-small" data-key="CYCLE_NATURE"> <div id="apadCycleNature" class="apad-button apad-square apad-small" data-key="CYCLE_NATURE">
<span class="apad-label">N</span> <span class="apad-label">N</span>
</div> </div>
<div id="apadCycleVariant" class="apad-button apad-square apad-small" data-key="V">
<span class="apad-label">V</span>
</div>
<!-- buttons to display battle-specific information -->
<div id="apadInfo" class="apad-button apad-rectangle apad-small" data-key="V"> <div id="apadInfo" class="apad-button apad-rectangle apad-small" data-key="V">
<span class="apad-label">V</span> <span class="apad-label">V</span>
</div> </div>
<div id="apadStats" class="apad-button apad-rectangle apad-small" data-key="STATS">
<span class="apad-label">C</span>
</div>
</div> </div>
</div> </div>