Skip to content

Commit 86c24ef

Browse files
justin212407justin212407
committed
Enabling Aux button in play-only-mode
Signed-off-by: Justin Charles <[email protected]>
1 parent bfc9f72 commit 86c24ef

File tree

2 files changed

+69
-82
lines changed

2 files changed

+69
-82
lines changed

‎css/play-only-mode.css‎

Lines changed: 32 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -117,82 +117,50 @@
117117
}
118118
}
119119

120-
@media (max-width: 768px), (max-height: 600px) {
121-
/* Apply styles only when in play-only mode */
120+
@media (max-width: 768px), (max-height: 600px) {
121+
/* Enable the auxiliary button */
122+
.play-only #toggleAuxBtn {
123+
pointer-events: auto !important;
124+
opacity: 1 !important;
125+
}
126+
127+
/* Hide the full auxiliary toolbar */
122128
.play-only #aux-toolbar {
123129
display: none !important;
124130
}
125131

126-
.play-only .blue.darken-1.nav-wrapper {
127-
background: transparent !important;
128-
box-shadow: none !important;
132+
/* Custom dropdown for play-only mode */
133+
.play-only #aux-dropdown {
134+
display: none;
135+
position: absolute;
136+
top: 50px;
137+
right: 10px;
138+
background-color: white;
139+
border: 1px solid #ccc;
140+
border-radius: 5px;
141+
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
142+
padding: 10px;
143+
z-index: 1000;
129144
}
130145

131-
.play-only #aux-toolbar > div {
132-
background: transparent !important;
146+
.play-only #aux-dropdown.show-dropdown {
147+
display: block;
133148
}
134149

135-
.play-only #toggleAuxBtn {
136-
pointer-events: none !important;
137-
opacity: 0.5 !important;
150+
.play-only #aux-dropdown a {
151+
display: block;
152+
padding: 8px 12px;
153+
text-decoration: none;
154+
color: black;
138155
}
139-
}
140-
141-
.play-only #aux-toolbar {
142-
display: none !important;
143-
}
144-
145-
.play-only #aux-dropdown {
146-
display: block !important;
147-
position: absolute;
148-
top: 50px;
149-
right: 10px;
150-
background: white;
151-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
152-
border-radius: 4px;
153-
min-width: 180px;
154-
z-index: 10000;
155-
}
156156

157-
.play-only #aux-dropdown li {
158-
padding: 10px;
159-
text-align: left;
160-
}
161-
162-
.play-only #aux-dropdown li a {
163-
color: black;
164-
display: flex;
165-
align-items: center;
166-
}
167-
168-
.play-only #aux-dropdown li a i {
169-
margin-right: 8px;
170-
}
171-
/* Play-Only Mode Dropdown */
172-
.play-only #aux-dropdown {
173-
display: none;
174-
position: absolute;
175-
top: 50px;
176-
right: 10px;
177-
background-color: white;
178-
border: 1px solid #ccc;
179-
border-radius: 5px;
180-
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
181-
padding: 10px;
182-
z-index: 1000;
157+
.play-only #aux-dropdown a:hover {
158+
background-color: #f2f2f2;
159+
}
183160
}
184161

185-
.play-only #aux-dropdown.show-dropdown {
186-
display: block;
187-
}
188162

189-
.play-only #aux-dropdown a {
190-
display: block;
191-
padding: 8px 12px;
192-
text-decoration: none;
193-
color: black;
163+
.play-only #aux-toolbar {
164+
display: none !important;
194165
}
195166

196-
.play-only #aux-dropdown a:hover {
197-
background-color: #f2f2f2;
198-
}

‎index.html‎

Lines changed: 37 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -677,25 +677,25 @@
677677
>menu</i
678678
></a
679679
>
680-
</li>
681680
<!-- Dropdown menu for Play-Only Mode -->
682-
<ul id="aux-dropdown" class="dropdown-content">
683-
<li>
684-
<a id="themeSelectIcon" class="tooltipped dropdown-trigger" data-position="left" data-activates="themedropdown">
685-
<i class="material-icons md-48">brightness_7</i>
686-
</a>
687-
</li>
688-
<li>
689-
<a id="restoreIcon" class="tooltipped" data-position="bottom">
690-
<i class="material-icons md-48">restore_from_trash</i>
691-
</a>
692-
</li>
693-
<li>
694-
<a id="languageSelectIcon" class="tooltipped dropdown-trigger" data-position="left" data-activates="languagedropdown">
695-
<i class="material-icons md-48">translate</i>
696-
</a>
697-
</li>
698-
</ul>
681+
<ul id="aux-dropdown" class="dropdown-content">
682+
<li>
683+
<a id="themeSelectIcon" class="tooltipped dropdown-trigger" data-position="left" data-activates="themedropdown">
684+
<i class="material-icons md-48">brightness_7</i>
685+
</a>
686+
</li>
687+
<li>
688+
<a id="restoreIcon" class="tooltipped" data-position="bottom">
689+
<i class="material-icons md-48">restore_from_trash</i>
690+
</a>
691+
</li>
692+
<li>
693+
<a id="languageSelectIcon" class="tooltipped dropdown-trigger" data-position="left" data-activates="languagedropdown">
694+
<i class="material-icons md-48">translate</i>
695+
</a>
696+
</li>
697+
</ul>
698+
</li>
699699

700700
<li>
701701
<a
@@ -1037,6 +1037,25 @@
10371037
disableAuxDropdown();
10381038
}
10391039
}
1040+
1041+
if (toggleAuxBtn) {
1042+
toggleAuxBtn.onclick = (e) => {
1043+
e.preventDefault(); // Prevent default action
1044+
if (window.innerWidth < 768 || window.innerHeight < 600) {
1045+
toggleAuxDropdown(); // Trigger custom dropdown
1046+
} else {
1047+
toggleAuxiliaryMenu(); // Trigger full auxiliary menu for larger screens
1048+
}
1049+
};
1050+
}
1051+
// Function to toggle simplified dropdown in play-only mode
1052+
function toggleAuxDropdown() {
1053+
const auxDropdown = document.getElementById("aux-dropdown");
1054+
if (auxDropdown) {
1055+
auxDropdown.classList.toggle("show-dropdown");
1056+
}
1057+
}
1058+
10401059

10411060
function showPersistentNotification() {
10421061
if (!persistentNotification) {

0 commit comments

Comments
 (0)