mirror of
https://github.com/bunkerity/bunkerized-nginx
synced 2023-12-13 21:30:18 +01:00
fix and enhance
*fix popover z-index *fix mobile plugin style and duplicate *auto close dropdown select settings + auto close file manager action btn *remove font awesome pro
This commit is contained in:
parent
834fbaf01d
commit
dffc770a99
7 changed files with 64 additions and 3576 deletions
File diff suppressed because one or more lines are too long
|
@ -372,7 +372,9 @@ class Upload {
|
|||
<svg class="fill-sky-500 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM385 215c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V392c0 13.3-10.7 24-24 24s-24-10.7-24-24V177.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 103c9.4-9.4 24.6-9.4 33.9 0L385 215z"/></svg>
|
||||
<span class="text-sm text-slate-700 dark:text-gray-300 mr-4">${name} </span>
|
||||
<span class="text-sm text-slate-700 dark:text-gray-300">${fileSize}</span>
|
||||
<svg class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-3 w-3 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"/></svg>
|
||||
<svg class=" fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-3 w-3 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
|
|
@ -181,6 +181,14 @@ class FolderDropdown {
|
|||
init() {
|
||||
let prevActionBtn = ""; //compare with curr to hide or not prev
|
||||
this.container.addEventListener("click", (e) => {
|
||||
//remove when none click
|
||||
try {
|
||||
if (
|
||||
!e.target.closest("div").hasAttribute(`${this.prefix}-action-button`)
|
||||
) {
|
||||
this.hideDropEls();
|
||||
}
|
||||
} catch (err) {}
|
||||
//show dropdown actions for folders
|
||||
try {
|
||||
if (
|
||||
|
|
|
@ -37,6 +37,23 @@ class Select {
|
|||
|
||||
init() {
|
||||
window.addEventListener("click", (e) => {
|
||||
//CASE NO BTN SELECT CLICKED
|
||||
try {
|
||||
if (!e.target.closest("button")) {
|
||||
const selectEls = document.querySelectorAll(
|
||||
"div[setting-select-dropdown]"
|
||||
);
|
||||
selectEls.forEach((select) => {
|
||||
select.classList.add("hidden");
|
||||
select.classList.remove("flex");
|
||||
});
|
||||
const btnEls = document.querySelectorAll("button[setting-select]");
|
||||
btnEls.forEach((btn) => {
|
||||
const dropdownChevron = btn.querySelector(`svg[setting-select]`);
|
||||
dropdownChevron.classList.remove("rotate-180");
|
||||
});
|
||||
}
|
||||
} catch (err) {}
|
||||
//SELECT BTN LOGIC
|
||||
try {
|
||||
if (
|
||||
|
|
|
@ -82,12 +82,18 @@ class Tabs {
|
|||
//reset desktop style
|
||||
const tabsDesktop = container.querySelectorAll("button[tab-handler]");
|
||||
tabsDesktop.forEach((tab) => {
|
||||
tab.classList.remove("brightness-90", "z-10");
|
||||
tab.classList.remove("brightness-90", "z-[1001]");
|
||||
tab.classList.add("z-1000");
|
||||
});
|
||||
//reset mobile style
|
||||
const tabsMobile = container.querySelectorAll("button[tab-handler-mobile]");
|
||||
tabsMobile.forEach((tab) => {
|
||||
tab.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
|
||||
tab.classList.add(
|
||||
"bg-white",
|
||||
"dark:bg-slate-700",
|
||||
"text-gray-700",
|
||||
"z-1000"
|
||||
);
|
||||
tab.classList.remove(
|
||||
"dark:bg-primary",
|
||||
"bg-primary",
|
||||
|
@ -103,7 +109,7 @@ class Tabs {
|
|||
const tabDesktop = container.querySelector(
|
||||
`button[tab-handler='${tabAtt}']`
|
||||
);
|
||||
tabDesktop.classList.add("brightness-90", "z-10");
|
||||
tabDesktop.classList.add("brightness-90", "z-[1001]");
|
||||
|
||||
//mobile case
|
||||
const tabMobile = container.querySelector(
|
||||
|
@ -158,10 +164,7 @@ class FormatValue {
|
|||
try {
|
||||
inp.setAttribute("value", inp.getAttribute("value").trim());
|
||||
inp.value = inp.value.trim();
|
||||
|
||||
}catch(err) {
|
||||
|
||||
}
|
||||
} catch (err) {}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
{%if message %}
|
||||
<div class="w-full flex justify-center">
|
||||
<p
|
||||
class="lowercase text-center absolute mt-6 font-normal text-white text-xl"
|
||||
class="uppercase text-center absolute mt-6 font-normal text-white text-xl"
|
||||
>
|
||||
{{ message }}
|
||||
</p>
|
||||
|
|
|
@ -12,14 +12,14 @@
|
|||
<button
|
||||
tab-handler="{{ plugin['id'] }}"
|
||||
type="button"
|
||||
class="z-1000 {% if loop.first %} brightness-90 {% endif %} border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700 border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
|
||||
class="{% if loop.first %} brightness-90 z-[1001]{%else %} {% endif %} border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700 border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<!-- text and icon -->
|
||||
<span class="text-primary transition duration-300 ease-in-out dark:opacity-90 pl-3 pr-2 dark:text-gray-300"> {{ plugin["name"] }} </span>
|
||||
<svg
|
||||
popover-btn="{{ plugin["name"] }}"
|
||||
class=" z-20 fill-blue-500 h-5 w-5 mr-2 hover:brightness-95"
|
||||
class=" fill-blue-500 h-5 w-5 mr-2 hover:brightness-95"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
|
@ -68,32 +68,31 @@
|
|||
tab-dropdown
|
||||
class="hidden z-100 absolute flex-col w-full overflow-hidden overflow-y-auto max-h-90"
|
||||
>
|
||||
{% if current_endpoint != "services" %}
|
||||
|
||||
<!-- general button-->
|
||||
<button
|
||||
tab-handler-mobile="general"
|
||||
type="button"
|
||||
data-select="false"
|
||||
class="flex justify-between border-t rounded-t border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 bg-primary dark:bg-primary my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300 text-gray-300" >
|
||||
General
|
||||
|
||||
</button>
|
||||
<!-- end general button-->
|
||||
{% endif %}
|
||||
|
||||
{% set first_el = "True" %}
|
||||
{% for plugin in plugins %} {% if current_endpoint == "services" and plugin["settings"]
|
||||
and check_settings(plugin["settings"], "multisite") or current_endpoint == "global-config" and plugin["settings"]
|
||||
and check_settings(plugin["settings"], "global") %}
|
||||
<button
|
||||
tab-handler-mobile="{{ plugin['id'] }}"
|
||||
type="button"
|
||||
data-select="false"
|
||||
id="edit-{{current_endpoint}}-{{ plugin['id'] }}-tab"
|
||||
class="flex justify-between {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 bg-white text-gray-700 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300">
|
||||
{{ plugin["name"] }}
|
||||
|
||||
</button>
|
||||
{% if loop.first %}
|
||||
<button
|
||||
tab-handler-mobile="{{ plugin['id'] }}"
|
||||
type="button"
|
||||
data-select="false"
|
||||
id="edit-{{current_endpoint}}-{{ plugin['id'] }}-tab"
|
||||
class="flex justify-between border-t rounded-t border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300 z-1000 dark:bg-primary bg-primary text-gray-300">
|
||||
{{ plugin["name"] }}
|
||||
</button>
|
||||
{% else %}
|
||||
<button
|
||||
tab-handler-mobile="{{ plugin['id'] }}"
|
||||
type="button"
|
||||
data-select="false"
|
||||
id="edit-{{current_endpoint}}-{{ plugin['id'] }}-tab"
|
||||
class="flex justify-between {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 bg-white text-gray-700 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300">
|
||||
{{ plugin["name"] }}
|
||||
|
||||
</button>
|
||||
{%endif%}
|
||||
{% endif %} {% endfor %}
|
||||
</div>
|
||||
<!-- end dropdown-->
|
||||
|
|
Loading…
Reference in a new issue