Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

enhance settings UI

Browse source 
* add disabled settings cursor style
* better position for password / no password settings disabled message
* reduce main top padding
This commit is contained in:
Jordan Blasenhauer 2024-05-07 15:49:12 +02:00
parent e0e7213e7c
commit 08655350b6
5 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/ui/static/css/dashboard.css
View file

File diff suppressed because one or more lines are too long

9
src/ui/static/js/utils/form.js
View file

@ -303,11 +303,18 @@ class DisabledPop {
showPopup(el, type = "input") {
if (!el.hasAttribute("disabled")) return;
const isPassword = el
.closest("[data-setting-container]")
.querySelector("button[data-setting-password]")
? true
: false;
const method = el.getAttribute("data-default-method");
const popupHTML = `
<div data-disabled-info class="${
type === "select" ? "translate-y-2" : ""
} right-8 pointer-events-none bg-blue-500 absolute rounded-lg px-2 py-1 z-20 dark:brightness-90">
} ${
isPassword ? "right-8" : "right-2"
} pointer-events-none cursor-not-allowed bg-blue-500 absolute rounded-lg px-2 py-1 z-20 dark:brightness-90">
<p class="m-0 text-xs text-white dark:text-gray-100">disabled by ${method}</p>
</div>`;
let cleanHTML = DOMPurify.sanitize(popupHTML);

2
src/ui/static/js/utils/settings.js
View file

@ -1466,7 +1466,7 @@ class SettingsMultiple extends Settings {
.hasAttribute("data-pro-disabled")
? true
: false;
return proDisabled;
}

6
src/ui/styles.css
View file

@ -64,11 +64,11 @@
data-checked:disabled:bg-gray-400
data-checked:disabled:border-gray-400 dark:data-checked:disabled:bg-gray-800
dark:data-checked:disabled:border-gray-800 data-checked:disabled:text-gray-700
dark:data-checked:disabled:text-gray-300;
dark:data-checked:disabled:text-gray-300 disabled:cursor-not-allowed;
}
.custom-select-btn {
@apply min-h-[38px] disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200 focus:border-primary flex justify-between align-middle items-center text-left text-sm leading-5.6 w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500;
@apply min-h-[38px] disabled:cursor-not-allowed disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200 focus:border-primary flex justify-between align-middle items-center text-left text-sm leading-5.6 w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500;
}
.custom-dropdown-btn {
@ -80,7 +80,7 @@
}
.regular-input {
@apply transition-none outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200 disabled:opacity-75 focus:border-gray-300/0 focus:ring-1 focus:valid:ring-green-500 focus:invalid:ring-red-500 text-sm leading-5.6 ease-in block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700;
@apply transition-none outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200 disabled:opacity-75 focus:border-gray-300/0 focus:ring-1 focus:valid:ring-green-500 focus:invalid:ring-red-500 text-sm leading-5.6 ease-in block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:cursor-not-allowed;
}
.invalid.regular-input {

2
src/ui/templates/base.html vendored
View file

@ -20,7 +20,7 @@
{% include "header.html" %}
</div>
<!-- info -->
<main class="xl:pl-75 w-full px-2 sm:px-6 pb-0 pt-20 sm:pt-6 min-h-[85vh] flex flex-col justify-between">
<main class="xl:pl-75 w-full px-2 sm:px-6 pb-0 pt-20 sm:pt-3 min-h-[85vh] flex flex-col justify-between">
<div class="max-w-[1920px] grid gap-y-4 gap-3 sm:gap-4 lg:gap-6 grid-cols-12 w-full">
{% block content %}{% endblock %}
</div>