Skip to content

Commit d28edfc

Browse files
vanshika2720vanshika2720
authored
UI/UX: Fix keyboard and bottom controls disappearing when scrolling in play-only mode #5461 (#5467)
1 parent 2a491f8 commit d28edfc

File tree

2 files changed

+87
-123
lines changed

2 files changed

+87
-123
lines changed

‎css/play-only-mode.css‎

Lines changed: 86 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,114 @@
1-
.play-only #palette {
2-
display: none !important;
3-
visibility: hidden !important;
4-
height: 0 !important;
5-
width: 0 !important;
6-
pointer-events: none !important;
7-
overflow: hidden !important;
1+
/* play-only-mode.css - Clean implementation of play-only mode UI */
2+
3+
/* Allow scrolling in play-only mode */
4+
.play-only body {
5+
overflow: auto !important;
6+
height: auto !important;
7+
min-height: 100vh !important;
88
}
99

10-
.play-only #Grid {
11-
display: none !important;
12-
visibility: hidden !important;
13-
height: 0 !important;
14-
width: 0 !important;
10+
/* Floating controls container at bottom-right */
11+
.play-only #buttoncontainerBOTTOM {
12+
display: flex !important;
13+
flex-direction: column-reverse !important;
14+
align-items: flex-end !important;
15+
position: fixed !important;
16+
bottom: 1rem !important;
17+
right: 1rem !important;
18+
width: auto !important;
19+
height: auto !important;
20+
background: transparent !important;
21+
z-index: 1000 !important;
22+
padding: 0 !important;
23+
margin: 0 !important;
1524
pointer-events: none !important;
16-
overflow: hidden !important;
1725
}
1826

19-
.play-only #Clear {
20-
display: none !important;
21-
visibility: hidden !important;
22-
height: 0 !important;
23-
width: 0 !important;
24-
pointer-events: none !important;
25-
overflow: hidden !important;
27+
/* Individual floating buttons */
28+
.play-only #buttoncontainerBOTTOM>div {
29+
position: static !important;
30+
display: flex !important;
31+
pointer-events: auto !important;
32+
margin: 0.4rem !important;
33+
background-color: rgba(255, 255, 255, 0.95) !important;
34+
padding: 8px !important;
35+
border-radius: 50% !important;
36+
/* Circular floating buttons */
37+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
38+
border: 1px solid rgba(0, 0, 0, 0.1) !important;
39+
40+
/* Resize safe rules */
41+
min-width: 48px !important;
42+
min-height: 48px !important;
43+
max-width: 100% !important;
44+
overflow: visible !important;
45+
justify-content: center !important;
46+
align-items: center !important;
47+
transition: transform 0.2s ease !important;
2648
}
2749

28-
.play-only #Collapse {
29-
display: none !important;
30-
visibility: hidden !important;
31-
height: 0 !important;
32-
width: 0 !important;
33-
pointer-events: none !important;
34-
overflow: hidden !important;
50+
.play-only #buttoncontainerBOTTOM>div:active {
51+
transform: scale(0.9) !important;
3552
}
3653

37-
.play-only [id="Show/hide blocks"] {
38-
display: none !important;
39-
visibility: hidden !important;
40-
height: 0 !important;
41-
width: 0 !important;
42-
pointer-events: none !important;
43-
overflow: hidden !important;
54+
.play-only #buttoncontainerBOTTOM>div img {
55+
width: 32px !important;
56+
height: 32px !important;
57+
margin: 0 !important;
4458
}
4559

46-
.play-only [id="Expand/collapse blocks"] {
47-
display: none !important;
48-
visibility: hidden !important;
49-
height: 0 !important;
50-
width: 0 !important;
51-
pointer-events: none !important;
52-
overflow: hidden !important;
60+
/* Ensure Home button is always visible in this container */
61+
.play-only #Home\ \[HOME\],
62+
.play-only [id="Home [HOME]"] {
63+
display: flex !important;
5364
}
5465

55-
.play-only [id="Decrease block size"] {
56-
display: none !important;
57-
visibility: hidden !important;
58-
height: 0 !important;
59-
width: 0 !important;
66+
/* Floating Windows and Keyboard */
67+
.play-only #floatingWindows {
68+
position: fixed !important;
69+
bottom: 0 !important;
70+
left: 0 !important;
71+
width: 100% !important;
72+
z-index: 1001 !important;
6073
pointer-events: none !important;
61-
overflow: hidden !important;
6274
}
6375

64-
.play-only [id="Increase block size"] {
65-
display: none !important;
66-
visibility: hidden !important;
67-
height: 0 !important;
68-
width: 0 !important;
69-
pointer-events: none !important;
70-
overflow: hidden !important;
76+
.play-only #floatingWindows>div {
77+
pointer-events: auto !important;
7178
}
7279

73-
.play-only #buttoncontainerBOTTOM {
74-
display: flex !important;
75-
justify-content: flex-end !important;
76-
align-items: center !important;
77-
width: 100% !important;
80+
.play-only #keyboardHolder2 {
81+
display: block !important;
7882
position: fixed !important;
79-
bottom: 10px !important;
83+
bottom: 0 !important;
8084
left: 0 !important;
81-
padding: 5px 10px !important;
82-
background: rgba(255, 255, 255, 0.85) !important;
83-
z-index: 9999 !important;
85+
width: 100% !important;
86+
background: #fff !important;
87+
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
88+
z-index: 1002 !important;
89+
border-top: 1px solid #ddd !important;
8490
}
8591

86-
.play-only #Home\ \[HOME\] {
87-
display: flex !important;
88-
justify-content: center !important;
89-
align-items: center !important;
90-
position: fixed !important;
91-
right: 15px !important;
92-
bottom: 15px !important;
93-
width: auto !important;
94-
height: auto !important;
95-
z-index: 10000 !important;
96-
background-color: rgba(255, 255, 255, 0.9) !important;
97-
padding: 5px !important;
98-
border-radius: 5px !important;
92+
/* Narrowly scoped hiding of editor-only elements */
93+
.play-only #palette,
94+
.play-only #Grid,
95+
.play-only #grid,
96+
.play-only #searchBar,
97+
.play-only #languageDiv,
98+
.play-only #labelDiv,
99+
.play-only #textLabel {
100+
display: none !important;
99101
}
100102

101-
@media only screen and (max-width: 400px) {
102-
.play-only ul.main.right {
103-
margin-top: 0px !important;
104-
position: relative !important;
105-
display: flex !important;
106-
flex-wrap: wrap !important;
107-
justify-content: center !important;
108-
align-items: center !important;
109-
gap: 10px !important;
103+
/* Responsive adjustments */
104+
@media only screen and (max-width: 600px) {
105+
.play-only #buttoncontainerBOTTOM {
106+
bottom: 0.5rem !important;
107+
right: 0.5rem !important;
110108
}
111109

112-
.play-only nav {
113-
min-height: 50px !important;
114-
display: flex !important;
115-
align-items: center !important;
116-
justify-content: center !important;
110+
.play-only #persistentNotification {
111+
bottom: 5rem !important;
112+
/* Move up to avoid overlapping with floating buttons */
117113
}
118-
}
119-
120-
/* Make the container background invisible without affecting child elements */
121-
.play-only #buttoncontainerBOTTOM {
122-
background: transparent !important;
123-
border: none !important;
124-
padding: 0 !important;
125-
margin: 0 !important;
126-
height: auto !important;
127-
box-shadow: none !important;
128-
}
129-
130-
/* Ensure the Home button remains visible */
131-
.play-only #Home\ \[HOME\] {
132-
display: flex !important;
133-
position: fixed !important;
134114
}

‎index.html‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -481,7 +481,7 @@
481481
<li><a id="bn"></a></li>
482482
<li><a id="he"></a></li>
483483
<li><a id="ur"></a></li>
484-
484+
485485
</ul>
486486

487487
<ul style="display: none;" id="themedropdown" class="dropdown-content">
@@ -782,19 +782,6 @@
782782
body.classList.add("play-only");
783783
showPersistentNotification();
784784

785-
if (buttonContainer) {
786-
buttonContainer.style.display = "flex";
787-
buttonContainer.style.justifyContent = "flex-end";
788-
buttonContainer.style.alignItems = "center";
789-
}
790-
if (homeButton) {
791-
homeButton.style.display = "flex";
792-
homeButton.style.position = "fixed";
793-
homeButton.style.right = "15px";
794-
homeButton.style.bottom = "15px";
795-
homeButton.style.zIndex = "10000";
796-
}
797-
798785
// Hide certain elements
799786
hideElementById("Show/hide blocks");
800787
hideElementById("Expand/collapse blocks");
@@ -807,9 +794,6 @@
807794
body.classList.remove("play-only");
808795
removePersistentNotification();
809796

810-
if (homeButton) homeButton.style = "";
811-
if (buttonContainer) buttonContainer.style = "";
812-
813797
showElementById("Show/hide blocks");
814798
showElementById("Expand/collapse blocks");
815799
showElementById("Decrease block size");

0 commit comments

Comments
 (0)