Skip to content

Commit 8b4e5b4

Browse files
ReenigneArcherReenigneArcher
committed
Optimize gamepad tester desktop layout
Add a large-screen layout mode for the gamepad tester that condenses and reflows panels when a controller is connected. The JS now toggles a `has-gamepad` class based on detected devices and removes inline display overrides so CSS can control visibility cleanly. Also add a page-specific stylesheet (and include it in `gamepad-tester.html`) to adjust intro header spacing on desktop.
1 parent 5cff7ee commit 8b4e5b4

4 files changed

Lines changed: 252 additions & 3 deletions

File tree

‎_sass/styles.scss‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -811,6 +811,242 @@ table tr:nth-child(2n) {
811811
overflow-wrap: anywhere;
812812
}
813813

814+
/* Fit the complete tester workspace into a typical desktop viewport. */
815+
@media (min-width: 1200px) {
816+
.gamepad-tester.has-gamepad {
817+
padding-bottom: 1.25rem !important;
818+
padding-top: 1.25rem !important;
819+
}
820+
821+
.gamepad-tester.has-gamepad .gamepad-tester-header {
822+
align-items: center;
823+
display: flex;
824+
gap: 1rem;
825+
max-width: none;
826+
text-align: left !important;
827+
}
828+
829+
.gamepad-tester.has-gamepad .gamepad-kicker,
830+
.gamepad-tester.has-gamepad .gamepad-tester-header > .lead,
831+
.gamepad-tester.has-gamepad .gamepad-privacy-note {
832+
display: none;
833+
}
834+
835+
.gamepad-tester.has-gamepad .gamepad-tester-header > h2 {
836+
flex: 0 0 auto;
837+
font-size: 1.65rem;
838+
margin-bottom: 0 !important;
839+
}
840+
841+
.gamepad-tester.has-gamepad .gamepad-status {
842+
flex: 1 1 auto;
843+
margin: 0 !important;
844+
max-width: none;
845+
padding: 0.65rem 0.85rem;
846+
}
847+
848+
.gamepad-tester.has-gamepad .gamepad-selector-panel {
849+
display: grid;
850+
grid-template-columns: 13rem minmax(0, 1fr);
851+
margin-top: 0.85rem !important;
852+
}
853+
854+
.gamepad-tester.has-gamepad .gamepad-selector-heading {
855+
border-bottom: 0;
856+
border-right: 1px solid var(--navbar-border-col);
857+
padding: 0.65rem 0.85rem;
858+
}
859+
860+
.gamepad-tester.has-gamepad .gamepad-selector-heading > .small {
861+
display: none;
862+
}
863+
864+
.gamepad-tester.has-gamepad .gamepad-selector-grid {
865+
gap: 0.5rem;
866+
grid-template-columns: repeat(auto-fit, minmax(13rem, 18rem));
867+
padding: 0.5rem;
868+
}
869+
870+
.gamepad-tester.has-gamepad .gamepad-selector-card {
871+
gap: 0.55rem;
872+
padding: 0.45rem 0.6rem;
873+
}
874+
875+
.gamepad-tester.has-gamepad .gamepad-selector-icon {
876+
border-radius: 0.5rem;
877+
font-size: 1rem;
878+
height: 2.25rem;
879+
width: 2.25rem;
880+
}
881+
882+
.gamepad-tester.has-gamepad #gamepad-info {
883+
display: grid;
884+
gap: 0.75rem;
885+
grid-template-columns: repeat(12, minmax(0, 1fr));
886+
margin: 0.75rem 0 0 !important;
887+
}
888+
889+
.gamepad-tester.has-gamepad #gamepad-info > [class*="col-"] {
890+
padding: 0;
891+
width: auto;
892+
}
893+
894+
.gamepad-tester.has-gamepad #gamepad-info > :nth-child(1) {
895+
grid-column: 1 / 8;
896+
grid-row: 1;
897+
}
898+
899+
.gamepad-tester.has-gamepad #gamepad-info > :nth-child(2) {
900+
grid-column: 8 / 13;
901+
grid-row: 1;
902+
}
903+
904+
.gamepad-tester.has-gamepad #gamepad-info > :nth-child(3) {
905+
grid-column: 7 / 10;
906+
grid-row: 2;
907+
}
908+
909+
.gamepad-tester.has-gamepad #gamepad-info > :nth-child(4) {
910+
grid-column: 1 / 7;
911+
grid-row: 2;
912+
}
913+
914+
.gamepad-tester.has-gamepad #gamepad-info > :nth-child(5) {
915+
grid-column: 10 / 13;
916+
grid-row: 2;
917+
}
918+
919+
.gamepad-tester.has-gamepad #gamepad-info > :nth-child(6) {
920+
grid-column: 1 / 13;
921+
grid-row: 3;
922+
}
923+
924+
.gamepad-tester.has-gamepad .gamepad-visual-panel {
925+
height: 100%;
926+
}
927+
928+
.gamepad-tester.has-gamepad .gamepad-panel-header {
929+
gap: 0.5rem;
930+
padding: 0.55rem 0.75rem;
931+
}
932+
933+
.gamepad-tester.has-gamepad .gamepad-panel-header h3 {
934+
font-size: 0.95rem;
935+
}
936+
937+
.gamepad-tester.has-gamepad .gamepad-panel-eyebrow {
938+
font-size: 0.6rem;
939+
}
940+
941+
.gamepad-tester.has-gamepad .gamepad-panel-body {
942+
padding: 0.7rem;
943+
}
944+
945+
.gamepad-tester.has-gamepad .gamepad-visual {
946+
min-height: 12rem;
947+
}
948+
949+
.gamepad-tester.has-gamepad .gamepad-visual-svg {
950+
max-height: 12.5rem;
951+
}
952+
953+
.gamepad-tester.has-gamepad .gamepad-trigger-visual {
954+
padding: 0.3rem;
955+
top: 1.25rem;
956+
width: 4.5rem;
957+
}
958+
959+
.gamepad-tester.has-gamepad .gamepad-trigger-visual:first-child {
960+
left: max(calc(50% - 22rem), 0.25rem);
961+
}
962+
963+
.gamepad-tester.has-gamepad .gamepad-trigger-visual:last-child {
964+
right: max(calc(50% - 22rem), 0.25rem);
965+
}
966+
967+
.gamepad-tester.has-gamepad .gamepad-trigger-image {
968+
max-height: 2rem;
969+
width: 3rem;
970+
}
971+
972+
.gamepad-tester.has-gamepad .gamepad-button-grid {
973+
gap: 0.4rem;
974+
grid-template-columns: repeat(6, minmax(0, 1fr));
975+
}
976+
977+
.gamepad-tester.has-gamepad .gamepad-button-grid .circular-button {
978+
height: 3.5rem;
979+
line-height: 3.5rem;
980+
width: 3.5rem;
981+
}
982+
983+
.gamepad-tester.has-gamepad .gamepad-button-grid .button-image {
984+
max-height: 1.65rem;
985+
max-width: 1.65rem;
986+
}
987+
988+
.gamepad-tester.has-gamepad .gamepad-button-grid .button-name {
989+
font-size: 0.62rem;
990+
}
991+
992+
.gamepad-tester.has-gamepad .gamepad-button-grid .button-value {
993+
font-size: 0.6rem;
994+
margin-top: 0.1rem;
995+
}
996+
997+
.gamepad-tester.has-gamepad .gamepad-axis-grid {
998+
gap: 0.5rem;
999+
}
1000+
1001+
.gamepad-tester.has-gamepad .gamepad-axis {
1002+
padding: 0.5rem;
1003+
}
1004+
1005+
.gamepad-tester.has-gamepad .gamepad-axis-header {
1006+
margin-bottom: 0.35rem;
1007+
}
1008+
1009+
.gamepad-tester.has-gamepad .stick-circle {
1010+
height: 5.75rem;
1011+
width: 5.75rem;
1012+
}
1013+
1014+
.gamepad-tester.has-gamepad .gamepad-stick-label {
1015+
font-size: 0.65rem;
1016+
margin-bottom: 0.4rem;
1017+
}
1018+
1019+
.gamepad-tester.has-gamepad .gamepad-capability {
1020+
margin-bottom: 0.5rem !important;
1021+
}
1022+
1023+
.gamepad-tester.has-gamepad .gamepad-range-control {
1024+
margin-bottom: 0.45rem;
1025+
}
1026+
1027+
.gamepad-tester.has-gamepad .gamepad-range-control label {
1028+
font-size: 0.75rem;
1029+
margin-bottom: 0.1rem;
1030+
}
1031+
1032+
.gamepad-tester.has-gamepad .form-range {
1033+
height: 1.15rem;
1034+
}
1035+
1036+
.gamepad-tester.has-gamepad #vibration-buttons .btn {
1037+
font-size: 0.75rem;
1038+
padding: 0.3rem 0.45rem;
1039+
}
1040+
1041+
.gamepad-tester.has-gamepad .gamepad-device-details > summary {
1042+
padding: 0.55rem 0.75rem;
1043+
}
1044+
1045+
.gamepad-tester.has-gamepad .gamepad-device-details > summary .h5 {
1046+
font-size: 0.95rem;
1047+
}
1048+
}
1049+
8141050
@media (max-width: 767.98px) {
8151051
.gamepad-axis-grid,
8161052
.gamepad-details-grid {

‎assets/css/gamepad-tester.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.intro-header {
2+
margin-bottom: 0;
3+
}
4+
5+
@media (min-width: 1200px) {
6+
.intro-header {
7+
margin-top: 5.6875rem;
8+
}
9+
}

‎assets/js/gamepad-tester.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
1616
const gamepadSelector = document.getElementById('gamepad-selector');
1717
const gamepadSelectorContainer = document.getElementById('gamepad-selector-container');
1818
const gamepadInfoSection = document.getElementById('gamepad-info');
19+
const gamepadTester = document.getElementById('GamepadTester');
1920
const gamepadStatus = document.getElementById('gamepad-status');
2021
const gamepadStatusMessage = document.getElementById('gamepad-status-message');
2122
let gamepadVisualButtons = new Map();
@@ -190,10 +191,12 @@ document.addEventListener('DOMContentLoaded', function() {
190191
gamepadSelector.innerHTML = '';
191192

192193
const gamepadIndices = Object.keys(gamepads);
194+
const hasGamepads = gamepadIndices.length > 0;
195+
gamepadTester.classList.toggle('has-gamepad', hasGamepads);
193196

194-
if (gamepadIndices.length > 0) {
195-
gamepadSelectorContainer.style.display = 'block';
196-
gamepadInfoSection.style.display = 'flex';
197+
if (hasGamepads) {
198+
gamepadSelectorContainer.style.removeProperty('display');
199+
gamepadInfoSection.style.removeProperty('display');
197200

198201
gamepadIndices.forEach(index => {
199202
const card = document.createElement('button');

‎gamepad-tester.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
full-width: true
55
css:
66
- /assets/css/hide-heading.css
7+
- /assets/css/gamepad-tester.css
78
ext-js:
89
- href: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.0/chart.umd.min.js"
910
sri: "sha512-Y51n9mtKTVBh3Jbx5pZSJNDDMyY+yGe77DGtBPzRlgsf/YLCh13kSZ3JmfHGzYFCmOndraf0sQgfM654b7dJ3w=="

0 commit comments

Comments
 (0)