Merge pull request #426 from syrk4web/staging

enhance style + some fix
This commit is contained in:
Théophile Diot 2023-03-21 17:28:17 +01:00 committed by GitHub
commit 4a67a5f56e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 210 additions and 102 deletions

View File

@ -997,6 +997,11 @@ h6 {
margin-right: 1rem;
}
.my-1\.5 {
margin-top: 0.375rem;
margin-bottom: 0.375rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
@ -1125,6 +1130,10 @@ h6 {
margin-right: 1rem;
}
.mb-1\.5 {
margin-bottom: 0.375rem;
}
.block {
display: block;
}
@ -1489,6 +1498,16 @@ h6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
--tw-translate-y: 0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-12 {
--tw-rotate: 12deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1528,6 +1547,16 @@ h6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-y-110 {
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-y-125 {
--tw-scale-y: 1.25;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@ -1767,6 +1796,10 @@ h6 {
border-style: solid;
}
.\!border-solid {
border-style: solid !important;
}
.border-dashed {
border-style: dashed;
}
@ -1862,6 +1895,10 @@ h6 {
background-color: rgb(58 65 111 / 0.1);
}
.bg-slate-700\/50 {
background-color: rgb(52 71 103 / 0.5);
}
.bg-none {
background-image: none;
}
@ -2714,6 +2751,11 @@ h6 {
background-color: rgb(8 85 119 / 0.05);
}
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(233 236 239 / var(--tw-bg-opacity));
}
.hover\:bg-blue-500\/80:hover {
background-color: rgb(94 114 228 / 0.8);
}
@ -2822,6 +2864,10 @@ h6 {
opacity: 0.85;
}
.disabled\:cursor-not-allowed:disabled {
cursor: not-allowed;
}
.disabled\:border-gray-400:disabled {
--tw-border-opacity: 1;
border-color: rgb(206 212 218 / var(--tw-border-opacity));
@ -2841,6 +2887,11 @@ h6 {
opacity: 0.75;
}
.disabled\:hover\:translate-y-0:hover:disabled {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.dark .dark\:inline {
display: inline;
}
@ -2901,6 +2952,10 @@ h6 {
background-color: rgb(37 47 64 / var(--tw-bg-opacity));
}
.dark .dark\:bg-slate-700\/50 {
background-color: rgb(52 71 103 / 0.5);
}
.dark .dark\:bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
@ -2932,6 +2987,26 @@ h6 {
fill: #495057;
}
.dark .dark\:stroke-slate-700 {
stroke: #344767;
}
.dark .dark\:stroke-gray-400 {
stroke: #ced4da;
}
.dark .dark\:stroke-gray-700 {
stroke: #495057;
}
.dark .dark\:stroke-gray-500 {
stroke: #adb5bd;
}
.dark .dark\:stroke-gray-600 {
stroke: #6c757d;
}
.dark .dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
@ -3042,6 +3117,15 @@ h6 {
background-color: rgb(8 85 119 / 0.2);
}
.dark .dark\:hover\:bg-slate-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(52 71 103 / var(--tw-bg-opacity));
}
.dark .dark\:hover\:bg-slate-700\/50:hover {
background-color: rgb(52 71 103 / 0.5);
}
.dark .dark\:hover\:brightness-100:hover {
--tw-brightness: brightness(1);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@ -3428,11 +3512,6 @@ h6 {
right: 1.5rem;
}
.xl\:mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.xl\:ml-68 {
margin-left: 17rem;
}
@ -3472,11 +3551,6 @@ h6 {
grid-column: span 6 / span 6;
}
.\32xl\:my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.\32xl\:mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;

View File

@ -259,12 +259,12 @@ class Upload {
//dropzone logic
this.dropZoneElement.addEventListener("dragover", (e) => {
e.preventDefault();
this.dropZoneElement.classList.add("bg-gray-100 dark:bg-gray-800");
this.dragInStyle();
});
["dragleave", "dragend"].forEach((type) => {
this.dropZoneElement.addEventListener(type, (e) => {
this.dropZoneElement.classList.remove("bg-gray-100 dark:bg-gray-800");
this.dragOutStyle();
});
});
@ -272,15 +272,17 @@ class Upload {
e.preventDefault();
this.fileInput.files = e.dataTransfer.files;
this.fileInput.dispatchEvent(new Event("change"));
this.dropZoneElement.classList.remove("bg-gray-100 dark:bg-gray-800");
this.dragOutStyle();
});
//when added file, set upload logic
this.fileInput.addEventListener("change", () => {
this.dragOutStyle();
const timeout = 500;
for (let i = 0; i < this.fileInput.files.length; i++) {
setTimeout(() => this.uploadFile(this.fileInput.files[i]), timeout * i);
}
});
//close fail/success log
this.container.addEventListener("click", (e) => {
try {
@ -292,6 +294,24 @@ class Upload {
});
}
dragOutStyle() {
this.dropZoneElement.classList.remove(
"border-solid",
"bg-gray-100",
"dark:bg-slate-700/50"
);
this.dropZoneElement.classList.add("border-dashed");
}
dragInStyle() {
this.dropZoneElement.classList.add(
"border-solid",
"bg-gray-100",
"dark:bg-slate-700/50"
);
this.dropZoneElement.classList.remove("border-dashed");
}
uploadFile(file) {
let name = file.name;
if (name.length >= 12) {
@ -304,7 +324,6 @@ class Upload {
let fileSize;
xhr.upload.addEventListener("progress", ({ loaded, total }) => {
let fileLoaded = Math.floor((loaded / total) * 100);
let fileTotal = Math.floor(total / 1000);
fileTotal < 1024
@ -320,11 +339,19 @@ class Upload {
xhr.addEventListener("readystatechange", () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
this.progressArea.innerHTML = "";
let uploadedHTML =
xhr.status == 201
? this.fileSuccess(name, fileSize)
: this.fileFail(name, fileSize);
this.uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML);
if (xhr.status == 201) {
this.uploadedArea.insertAdjacentHTML(
"afterbegin",
this.fileSuccess(name, fileSize)
);
this.allowReload();
} else {
this.uploadedArea.insertAdjacentHTML(
"afterbegin",
this.fileFail(name, fileSize)
);
}
}
});
@ -334,68 +361,73 @@ class Upload {
xhr.send(data);
}
allowReload() {
const reloadBtn = document.querySelector("[plugin-reload-btn]");
reloadBtn.removeAttribute("disabled");
}
fileLoad(name, fileSize) {
const str = `<div u class="mt-2 rounded p-2 w-full bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-between">
<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>
</div>
</div>
</div>`;
<div class="flex items-center justify-between">
<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>
</div>
</div>
</div>`;
return str;
}
fileSuccess(name, fileSize) {
const str = `<div upload-message class="mt-2 rounded p-2 w-full bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-between">
<svg
class="fill-green-500 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
/>
</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>
<button type="button" upload-message-delete>
<svg class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-4 w-4 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path>
</svg>
</button>
</div>
</div>
</div>`;
<div class="flex items-center justify-between">
<svg
class="fill-green-500 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
/>
</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>
<button type="button" upload-message-delete>
<svg class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-4 w-4 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path>
</svg>
</button>
</div>
</div>
</div>`;
return str;
}
fileFail(name, fileSize) {
const str = `<div upload-message class="mt-2 rounded p-2 w-full bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-between">
<svg
class="fill-red-500 h-5 w-5 mr-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
/>
</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>
<button type="button" upload-message-delete>
<div class="flex items-center justify-between">
<svg
class="fill-red-500 h-5 w-5 mr-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
/>
</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>
<button type="button" upload-message-delete>
<svg class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-4 w-4 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path>
</svg>
</button>
<svg class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-4 w-4 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path>
</svg>
</button>
</div>
</div>
</div>`;
</div>
</div>
</div>`;
return str;
}
}

View File

@ -66,7 +66,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
>
<button type="button">
<svg
class="relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary stroke-gray-100"
class="relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary stroke-gray-100 dark:stroke-gray-600"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
@ -94,7 +94,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
>
<button type="button">
<svg
class="-translate-x-1 relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary stroke-gray-100"
class="-translate-x-1 relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary stroke-gray-100 dark:stroke-gray-600"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
@ -147,7 +147,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<!-- service root-->
{% if child['type'] == "folder" and current_endpoint == "configs" and loop.depth == 1 %}
<svg
class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:brightness-150"
class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
@ -171,23 +171,23 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<!-- services folder -->
{% if child['type'] == "folder" and current_endpoint == "configs" and loop.depth != 1 %}
<svg class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:brightness-150" 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="M21.75 17.25v-.228a4.5 4.5 0 00-.12-1.03l-2.268-9.64a3.375 3.375 0 00-3.285-2.602H7.923a3.375 3.375 0 00-3.285 2.602l-2.268 9.64a4.5 4.5 0 00-.12 1.03v.228m19.5 0a3 3 0 01-3 3H5.25a3 3 0 01-3-3m19.5 0a3 3 0 00-3-3H5.25a3 3 0 00-3 3m16.5 0h.008v.008h-.008v-.008zm-3 0h.008v.008h-.008v-.008z" /></svg> {% endif %}
<svg class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150" 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="M21.75 17.25v-.228a4.5 4.5 0 00-.12-1.03l-2.268-9.64a3.375 3.375 0 00-3.285-2.602H7.923a3.375 3.375 0 00-3.285 2.602l-2.268 9.64a4.5 4.5 0 00-.12 1.03v.228m19.5 0a3 3 0 01-3 3H5.25a3 3 0 01-3-3m19.5 0a3 3 0 00-3-3H5.25a3 3 0 00-3 3m16.5 0h.008v.008h-.008v-.008zm-3 0h.008v.008h-.008v-.008z" /></svg> {% endif %}
<!-- end services folder-->
<!-- services files -->
{% if child['type'] == "file" and current_endpoint == "configs" and loop.depth != 1 %}
<svg class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:brightness-150" 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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
<svg class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150" 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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
{% endif %}
<!-- end services files-->
<!-- cache folder-->
{% if child['type'] == "folder" and current_endpoint == "cache" and loop.depth == 1 %}
<svg class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:brightness-150" 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">
<svg class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150" 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="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
</svg>
{% endif %}
<!-- end cache folder -->
<!-- cache file -->
{% if child['type'] == "file" and current_endpoint == "cache" %}
<svg class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:brightness-150"
<svg class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150"
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="M15 13.5H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
</svg>

View File

@ -18,7 +18,7 @@
class="px-2 translate-x-2 bottom-0 right-0 absolute rounded-full bg-white"
>
<p flash-count class="mb-0 text-sm text-bold text-red-500">
{%if messages %} {{messages.length}}{%else%}0 {%endif%}
{%if messages %} {{messages|length}}{%else%} 0 {%endif%}
</p>
</div>
</button>
@ -73,7 +73,8 @@
class="{% if category == 'error' %}bg-red-500 {%else%} bg-green-500 {%endif %} my-2 border relative p-4 w-11/12 min-h-20 rounded-lg hover:scale-102 transition shadow-md break-words dark:brightness-90"
>
<div class="flex justify-between align-top items-start">
{% if category == 'error' %}
{% if category == 'error' or "Please log in to access this page." in
message|safe %}
<h5 class="text-lg mb-0 text-white">Error</h5>
{%else%}
<h5 class="text-lg mb-0 text-white">Success</h5>
@ -95,7 +96,9 @@
</svg>
</button>
</div>
<p class="text-white mt-2 mb-0 text-sm">{{ message|safe }}</p>
<p class="text-white mt-2 mb-0 text-sm">
{{ message|safe }} {%if "log in" in message|safe%} test {%endif%}
</p>
</div>
{% endfor %}
<!-- end flash message-->

View File

@ -193,7 +193,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
<div
class="w-full overflow-hidden overflow-y-auto overflow-x-auto max-h-100 sm:max-h-125 min-h-50-screen col-span-12 p-4 relative break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<h5 class="mb-2 font-bold dark:text-white">{{current_endpoint}}</h5>
<h5 class="mb-4 mt-2 font-bold dark:text-white mx-2">JOBS</h5>
<!-- list container-->
<div class="min-w-[900px] w-full grid grid-cols-12 rounded p-2">
<!-- header-->
@ -232,28 +232,30 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
<ul class="col-span-12 w-full" {{current_endpoint}}-list>
{% for job_name, value in jobs.items() %}
<!-- job item-->
<li class="grid grid-cols-12 border-b border-gray-300 py-2.5">
<li
class="items-center grid grid-cols-12 border-b border-gray-300 py-2.5"
>
<p
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0"
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0 my-1"
{{current_endpoint}}-name
>
{{job_name}}
</p>
<p
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0"
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0 my-1"
{{current_endpoint}}-last_run
>
{{value['last_run']}}
</p>
<p
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
{{current_endpoint}}-every
>
{{value["every"]}}
</p>
{% if value["reload"] %}
<p
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
{{current_endpoint}}-reload="true"
>
<svg
@ -269,7 +271,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
{%endif %} {% if not value["reload"] %}
<p
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
{{current_endpoint}}-reload="false"
>
<svg
@ -284,7 +286,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
</p>
{% endif %} {% if value["success"] %}
<p
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
{{current_endpoint}}-success="true"
>
<svg
@ -299,7 +301,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
</p>
{% elif not value["success"] %}
<p
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
{{current_endpoint}}-success="false"
>
<svg
@ -314,20 +316,20 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
</p>
{% endif %}
<div
class="relative dark:text-gray-400 text-sm col-span-3 m-0"
class="relative dark:text-gray-400 text-sm col-span-3 m-0 my-1"
{{current_endpoint}}-files
>
{% if value['cache']%}
<button
{{current_endpoint}}-setting-select="{{job_name}}"
type="button"
class="text-sm 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:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left leading-6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500"
class="py-1 text-sm 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:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left leading-6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500"
>
<span
id="{{current_endpoint}}-{{job_name}}"
name="{{current_endpoint}}-{{job_name}}"
{{current_endpoint}}-setting-select-text="{{job_name}}"
>list</span
>files</span
>
<!-- chevron -->
<svg
@ -345,7 +347,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
<!-- dropdown-->
<div
{{current_endpoint}}-setting-select-dropdown="{{job_name}}"
class="hidden z-100 absolute h-full flex-col w-full"
class="hidden z-100 absolute h-full flex-col w-full translate-y-0.5"
>
{% for file in value['cache'] %}
<button

View File

@ -289,7 +289,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<div
class="min-h-50-screen col-span-12 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<h5 class="mb-2 font-bold dark:text-white">LOGS</h5>
<h5 class="mb-4 mt-2 font-bold dark:text-white mx-2">LOGS</h5>
<!-- list container-->
<div class="w-full grid grid-cols-12 rounded p-2">
<!-- header-->

View File

@ -70,7 +70,7 @@ include "plugins-modal.html" %}
<form
id="dropzone-form"
action="#"
class="cursor-pointer col-span-12 border-2 rounded-lg p-2 border-dashed border-primary dark:brightness-125 drop-zone"
class="hover:bg-gray-100 dark:hover:bg-slate-700/50 cursor-pointer col-span-12 border-2 rounded-lg p-2 border-dashed border-primary dark:brightness-125 drop-zone"
>
<input
type="hidden"
@ -94,21 +94,18 @@ include "plugins-modal.html" %}
<section class="col-span-12 uploaded-area"></section>
<!-- end dropzone -->
<div class="col-span-12 flex flex-col justify-center items-center">
<p
class="dark:text-gray-300 mx-4 my-3 font-sans font-semibold leading-normal uppercase text-sm"
>
or
</p>
<div class="col-span-12 flex flex-col justify-center items-center mt-2">
<form
method="post"
class="col-span-12 flex flex-col justify-center align-middle items-center"
class="col-span-12 flex flex-col justify-center align-middle items-cente"
>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<button
plugin-reload-btn
disabled
type="submit"
class="tracking-wide dark:brightness-125 hover:brightness-75 w-full inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="disabled:hover:translate-y-0 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 tracking-wide dark:brightness-125 hover:brightness-75 w-full inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
Reload
</button>
@ -214,12 +211,12 @@ include "plugins-modal.html" %}
<div
class="min-h-[55vh] max-h-80 overflow-hidden overflow-y-auto p-4 col-span-12 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<h5 class="col-mb-2 font-bold dark:text-white">LIST</h5>
<h5 class="mb-4 mt-2 font-bold dark:text-white mx-2">LIST</h5>
<div {{current_endpoint}}-list class="grid grid-cols-12 gap-3">
{% for plugin in plugins %} {% if plugin['external'] %}
<div
{{current_endpoint}}-external="{% if plugin['external'] %} external {%else%} internal {%endif%}"
{{current_endpoint}}-external="{% if plugin['external'] %} external {% else %} internal {% endif %}"
class="py-3 min-h-12 relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 p-1 flex justify-between items-center transition rounded bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800"
>
<p