librewolf
/
bunkerized-nginx
mirror of https://github.com/bunkerity/bunkerized-nginx
4
0
Fork 1
Code Issues Projects Releases Wiki Activity

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:
BlasenhauerJ 2023-04-24 16:57:09 +02:00
parent 834fbaf01d
commit dffc770a99
7 changed files with 64 additions and 3576 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3543
src/ui/static/css/dashboard.css
View File

File diff suppressed because one or more lines are too long

4
src/ui/static/js/plugins.js
View File

@ -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>`;

8
src/ui/static/js/utils/file.manager.js
View File

@ -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 (

17
src/ui/static/js/utils/form.js
View File

@ -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 (

17
src/ui/static/js/utils/settings.js
View File

@ -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) {}
});
}
}

2
src/ui/templates/loading.html
View File

@ -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>

49
src/ui/templates/settings_tabs.html
View File

@ -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-->