From 5591a3ed142cc2fc3ba72064ade51783f75fc6b2 Mon Sep 17 00:00:00 2001 From: KOWX712 Date: Fri, 8 Nov 2024 01:30:05 +0800 Subject: [PATCH] Minor UI change change icon, enhanced UI experience --- module/webroot/index.html | 40 +++++++++++++------------ module/webroot/index.js | 20 ++++++++----- module/webroot/styles.css | 62 +++++++++++++++++++++++---------------- 3 files changed, 72 insertions(+), 50 deletions(-) diff --git a/module/webroot/index.html b/module/webroot/index.html index 38acbb6..8109be7 100644 --- a/module/webroot/index.html +++ b/module/webroot/index.html @@ -4,33 +4,37 @@ Document +
Tricky Addon - Update Target List
-
- - -
-
- - - +
Loading...
Credit to j-hc/zygisk-detach WebUI
diff --git a/module/webroot/index.js b/module/webroot/index.js index 61ca499..fbdf81f 100644 --- a/module/webroot/index.js +++ b/module/webroot/index.js @@ -156,14 +156,15 @@ function showPrompt(message, isSuccess = true) { }, 500); } -// Menu toggle functionality function setupMenuToggle() { const menuButton = document.getElementById('menu-button'); const menuIcon = menuButton.querySelector('.menu-icon'); const menuOptions = document.getElementById('menu-options'); let menuOpen = false; + let menuAnimating = false; menuButton.addEventListener('click', (event) => { + if (menuAnimating) return; event.stopPropagation(); if (menuOptions.classList.contains('visible')) { closeMenu(); @@ -196,6 +197,7 @@ function setupMenuToggle() { }); function openMenu() { + menuAnimating = true; menuOptions.style.display = 'block'; setTimeout(() => { menuOptions.classList.remove('hidden'); @@ -203,19 +205,22 @@ function setupMenuToggle() { menuIcon.classList.add('menu-open'); menuIcon.classList.remove('menu-closed'); menuOpen = true; + menuAnimating = false; }, 10); } function closeMenu() { if (menuOptions.classList.contains('visible')) { + menuAnimating = true; menuOptions.classList.remove('visible'); menuOptions.classList.add('hidden'); menuIcon.classList.remove('menu-open'); menuIcon.classList.add('menu-closed'); setTimeout(() => { menuOptions.style.display = 'none'; - }, 400); - menuOpen = false; + menuOpen = false; + menuAnimating = false; + }, 200); } } } @@ -227,6 +232,7 @@ searchInput.addEventListener("input", (e) => { apps.forEach(app => { const name = app.querySelector(".name").textContent.toLowerCase(); app.style.display = name.includes(searchQuery) ? "block" : "none"; + window.scrollTo(0, 0); }); if (searchQuery !== "") { clearBtn.style.display = "block"; @@ -239,6 +245,7 @@ searchInput.addEventListener("input", (e) => { clearBtn.addEventListener("click", () => { searchInput.value = ""; clearBtn.style.display = "none"; + window.scrollTo(0, 0); const apps = appListContainer.querySelectorAll(".card"); apps.forEach(app => { app.style.display = "block"; @@ -305,17 +312,16 @@ document.addEventListener('DOMContentLoaded', async () => { // Scroll event let lastScrollY = window.scrollY; +const searchMenuContainer = document.querySelector('.search-menu-container'); window.addEventListener('scroll', () => { if (isRefreshing) return; if (window.scrollY > lastScrollY) { title.style.transform = 'translateY(-100%)'; - searchCard.style.transform = 'translateY(-35px)'; - menu.style.transform = 'translateY(-35px)'; + searchMenuContainer.style.transform = 'translateY(-35px)'; floatingBtn.style.transform = 'translateY(0)'; } else { title.style.transform = 'translateY(0)'; - searchCard.style.transform = 'translateY(0)'; - menu.style.transform = 'translateY(0)'; + searchMenuContainer.style.transform = 'translateY(0)'; floatingBtn.style.transform = 'translateY(-100px)'; } lastScrollY = window.scrollY; diff --git a/module/webroot/styles.css b/module/webroot/styles.css index 0a9ce3f..d3aadbd 100644 --- a/module/webroot/styles.css +++ b/module/webroot/styles.css @@ -21,29 +21,40 @@ body { margin-top: 100px; } +.search-menu-container { + display: flex; + position: fixed; + top: 40px; + width: calc(100% - 15px); + z-index: 1000; + transition: transform 0.3s ease; +} + .search-card { background-color: white; border: 1px solid #ccc; - border-radius: 25px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); display: flex; align-items: center; padding: 10px; - position: fixed; - top: 40px; - transition: transform 0.3s ease; - width: calc(100% - 100px); - z-index: 1000; + border-radius: 50px; + left: 0; + width: calc(100% - 80px); + position: absolute; } +.search-icon { + position: absolute; + left: 18px; +} + + .search-input { background-color: #fff; border: none; - box-sizing: border-box; font-size: 14px; outline: none; - padding: 5px 15px; - text-align: left; + padding: 5px 30px; width: 100%; } @@ -52,7 +63,6 @@ body { right: 10px; border: none; background: none; - color: #ccc; font-size: 18px; cursor: pointer; display: none; @@ -61,11 +71,8 @@ body { .menu { display: flex; - position: fixed; - top: 40px; - right: 10px; - z-index: 1000; - transition: transform 0.3s ease; + right: 0; + position: absolute; } .menu-toggle { @@ -75,17 +82,18 @@ body { #menu-button { background-color: white; border: 1px solid #ccc; - border-radius: 25px; + border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - padding: 13px 17px; - text-align: center; - position: relative; - z-index: 1000; + width: 50px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; } .menu-icon { display: inline-block; - transition: transform 0.3s ease; + transition: transform 0.2s ease; } .menu-icon.menu-open { @@ -106,7 +114,7 @@ body { top: 110%; right: 0; transform: translateX(120%); - transition: transform 0.3s ease; + transition: transform 0.2s ease; width: auto; white-space: nowrap; } @@ -224,15 +232,18 @@ body { .floating-btn { background-color: #007bff; border: none; - border-radius: 24px; box-shadow: 0 4px 8px #0003; color: #fff; display: flex; justify-content: center; align-items: center; - padding: 10px 20px; - font-size: 16px; + padding: 12px 17px; + font-size: 17px; transition: transform 0.3s ease-in-out; + border-top-left-radius: 50px; + border-top-right-radius: 50px; + border-bottom-left-radius: 50px; + border-bottom-right-radius: 50px; } .loading { @@ -271,6 +282,7 @@ body { border: 1px solid #6E6E6E; } + .clear-btn, .search-input{ color: white; }