cclohmar/zoraxy-dhcp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: inline toast notification instead of fixed-position (visible in iframe)

Browse source
This commit is contained in:
Claus Lohmar 2026-07-29 10:03:29 +00:00
parent a8edcfe823
commit 4ef2208418
3 changed files with 6 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/app.js
View file

@ -11,7 +11,6 @@ function showToast(message, type) {
var toast = document.getElementById('toast'); var toast = document.getElementById('toast');
toast.textContent = message; toast.textContent = message;
toast.className = 'toast ' + (type || ''); toast.className = 'toast ' + (type || '');
void toast.offsetWidth;
toast.classList.remove('hidden'); toast.classList.remove('hidden');
setTimeout(function () { toast.classList.add('hidden'); }, 3000); setTimeout(function () { toast.classList.add('hidden'); }, 3000);
} }

3
web/index.html
View file

@ -18,6 +18,7 @@
<button id="reload-btn" class="btn btn-secondary" title="Reload dnsmasq to apply changes"> <button id="reload-btn" class="btn btn-secondary" title="Reload dnsmasq to apply changes">
Reload dnsmasq Reload dnsmasq
</button> </button>
<span id="toast" class="toast hidden"></span>
</div> </div>
</header> </header>
@ -40,8 +41,6 @@
</table> </table>
</main> </main>
<div id="toast" class="toast hidden"></div>
<!-- jQuery and $.cjax() from Zoraxy --> <!-- jQuery and $.cjax() from Zoraxy -->
<script src="/script/jquery-3.6.0.min.js"></script> <script src="/script/jquery-3.6.0.min.js"></script>
<script src="/script/utils.js"></script> <script src="/script/utils.js"></script>

16
web/style.css
View file

@ -182,19 +182,14 @@ tr:last-child td {
gap: 6px; gap: 6px;
} }
/* Toast notification */ /* Toast notification (inline, inside actions bar) */
.toast { .toast {
position: fixed; margin-left: 12px;
bottom: 20px; padding: 4px 12px;
right: 20px; border-radius: 3px;
padding: 10px 18px;
border-radius: 4px;
font-size: 13px; font-size: 13px;
color: #fff; color: #fff;
background: #2d3436; transition: opacity 0.25s;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: opacity 0.25s, transform 0.25s;
z-index: 1000;
} }
.toast.success { background: #00b894; } .toast.success { background: #00b894; }
@ -202,6 +197,5 @@ tr:last-child td {
.toast.hidden { .toast.hidden {
opacity: 0; opacity: 0;
transform: translateY(10px);
pointer-events: none; pointer-events: none;
} }