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

enhance responsive + add loader

This commit is contained in:
BlasenhauerJ 2022-11-23 19:18:43 +01:00
parent 3bafe137d2
commit cc748a0480
11 changed files with 160 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -811,6 +811,14 @@ h6 {
z-index: 50;
}
.z-\[1500\] {
z-index: 1500;
}
.z-\[10000\] {
z-index: 10000;
}
.order-2 {
order: 2;
}
@ -1310,6 +1318,10 @@ h6 {
width: 20rem;
}
.w-40 {
width: 10rem;
}
.min-w-0 {
min-width: 0px;
}
@ -1523,6 +1535,10 @@ h6 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
@ -2393,6 +2409,10 @@ h6 {
opacity: 0.6;
}
.opacity-0 {
opacity: 0;
}
.shadow-md {
--tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08);
--tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
@ -2902,11 +2922,6 @@ h6 {
border-color: rgb(58 65 111 / var(--tw-border-opacity));
}
.dark .dark\:border-slate-850 {
--tw-border-opacity: 1;
border-color: rgb(17 28 68 / var(--tw-border-opacity));
}
.dark .dark\:border-gray-700 {
--tw-border-opacity: 1;
border-color: rgb(73 80 87 / var(--tw-border-opacity));
@ -3127,6 +3142,10 @@ h6 {
grid-column: span 1 / span 1;
}
.sm\:col-span-2 {
grid-column: span 2 / span 2;
}
.sm\:col-start-5 {
grid-column-start: 5;
}
@ -3165,6 +3184,18 @@ h6 {
height: 1.75rem;
}
.sm\:h-16 {
height: 4rem;
}
.sm\:h-20 {
height: 5rem;
}
.sm\:h-14 {
height: 3.5rem;
}
.sm\:max-h-28 {
max-height: 7rem;
}
@ -3185,6 +3216,14 @@ h6 {
width: 1.75rem;
}
.sm\:w-60 {
width: 15rem;
}
.sm\:w-50 {
width: 12.5rem;
}
.sm\:flex-row {
flex-direction: row;
}
@ -3283,6 +3322,14 @@ h6 {
display: none;
}
.md\:h-25 {
height: 6.25rem;
}
.md\:h-16 {
height: 4rem;
}
.md\:max-h-160 {
max-height: 40rem;
}
@ -3295,6 +3342,14 @@ h6 {
width: 50%;
}
.md\:w-80 {
width: 20rem;
}
.md\:w-60 {
width: 15rem;
}
.md\:justify-end {
justify-content: flex-end;
}
@ -3391,6 +3446,14 @@ h6 {
height: 7.5rem;
}
.lg\:h-20 {
height: 5rem;
}
.lg\:h-24 {
height: 6rem;
}
.lg\:w-9 {
width: 2.25rem;
}
@ -3403,6 +3466,10 @@ h6 {
width: 50%;
}
.lg\:w-80 {
width: 20rem;
}
.lg\:flex-none {
flex: none;
}
@ -3454,6 +3521,10 @@ h6 {
top: 0.75rem;
}
.xl\:col-span-4 {
grid-column: span 4 / span 4;
}
.xl\:mx-4 {
margin-left: 1rem;
margin-right: 1rem;
@ -3514,6 +3585,10 @@ h6 {
grid-column: span 4 / span 4;
}
.\32xl\:col-span-6 {
grid-column: span 6 / span 6;
}
.\32xl\:my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;

3
src/ui/static/js/dashboard.js
View File

@ -1,4 +1,4 @@
import { Checkbox } from "./utils.js";
import { Checkbox, Loader } from "./utils.js";
class Menu {
constructor() {
@ -97,6 +97,7 @@ class FlashMsg {
}
}
const setLoader = new Loader();
const setMenu = new Menu();
const setNews = new News();
const setDarkM = new darkMode();

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

@ -403,5 +403,5 @@ class Upload {
}
const setDropdown = new Dropdown("plugins");
const setFilter = new Plugins("plugins");
const setFilter = new Filter("plugins");
const setUpload = new Upload();

39
src/ui/static/js/utils.js
View File

@ -911,6 +911,44 @@ class FormatValue {
});
}
}
class Loader {
constructor() {
this.menuContainer = document.querySelector("[menu-container]");
this.logoContainer = document.querySelector("[loader]");
this.logoEl = document.querySelector("[loader-img]");
this.isLoading = true;
this.init();
}
init() {
this.loading();
window.addEventListener("load", (e) => {
setTimeout(() => {
this.logoContainer.classList.add("opacity-0");
}, 350);
setTimeout(() => {
this.isLoading = false;
this.logoContainer.classList.add("hidden");
}, 650);
setTimeout(() => {
this.logoContainer.remove();
}, 800);
});
}
loading() {
if ((this.isLoading = true)) {
setTimeout(() => {
this.logoEl.classList.toggle("scale-105");
this.loading();
}, 300);
}
}
}
export {
Checkbox,
Popover,
@ -921,4 +959,5 @@ export {
FolderEditor,
FolderDropdown,
FormatValue,
Loader,
};

15
src/ui/templates/base.html
View File

@ -9,10 +9,17 @@
<noscript class="relative w-full p-4 text-white bg-yellow-500 rounded-lg"
>Your browser does not support JavaScript!</noscript
>
<!--fixed background-->
<div class="absolute w-full dark:hidden bg-primary"></div>
<!-- end fixed background-->
<div
loader
class="fixed z-[10000] transition duration-300 h-screen w-screen bg-primary flex justify-center align-middle items-center"
>
<img
loader-img
src="images/logo-menu-2.png"
class="duration-300 w-40 h-12 sm:w-50 sm:h-14 md:w-60 md:h-16 lg:w-80 lg:h-24 inline transition-all"
alt="main logo"
/>
</div>
{% include "menu.html" %} {% include "news.html" %}

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

@ -47,7 +47,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
<!-- filter -->
<div
{{current_endpoint}}-filter
class="col-span-12 md:col-span-8 3xl:col-span-6 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"
class="col-span-12 md:col-span-8 2xl:col-span-6 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">FILTER</h5>
<div class="grid grid-cols-12 gap-x-4 gap-y-2">

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

@ -9,19 +9,15 @@
href="data:image/svg+xml, %%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='96.000000pt' height='96.000000pt' viewBox='0 0 96.000000 96.000000' preserveAspectRatio='xMidYMid meet'%%3E%%3Cg transform='translate(0.000000,96.000000) scale(0.100000,-0.100000)'%%0Afill='%%23085577' stroke='none'%%3E%%3Cpath d='M535 863 c-22 -2 -139 -17 -260 -34 -228 -31 -267 -43 -272 -85 -2%%0A-10 23 -181 55 -379 l57 -360 400 0 400 0 20 40 c16 31 20 59 19 125 -1 100%%0A-24 165 -73 199 -41 29 -46 57 -22 111 30 67 29 188 -3 256 -13 28 -37 60 -53%%0A72 -55 39 -169 62 -268 55z m-15 -348 c30 -16 60 -61 60 -90 0 -10 -8 -33 -17%%0A-52 -16 -34 -16 -41 0 -116 9 -44 15 -82 12 -85 -6 -7 -92 -21 -131 -21 l-31%%0A-1 -6 85 c-4 75 -8 89 -31 112 -20 20 -26 36 -26 70 0 38 5 50 34 79 39 39 86%%0A45 136 19z'/%%3E%%3C/g%%3E%%3C/svg%%3E"
type="image/svg+xml"
/>
<link
rel="stylesheet"
type="text/css"
href="http://127.0.0.1:5501/static/css/dashboard.css"
/>
<link rel="stylesheet" type="text/css" href="./css/dashboard.css" />
</head>
<body>
<div
class="h-screen w-screen bg-primary flex justify-center align-middle items-center"
class="fixed h-screen w-screen bg-primary flex justify-center align-middle items-center"
>
<img
src="images/logo-menu-2.png"
class="duration-300 w-60 h-16 sm:w-80 sm:h-24 lg:w-90 lg:h-30 inline transition-all"
class="duration-300 w-40 h-12 sm:w-50 sm:h-14 md:w-60 md:h-16 lg:w-80 lg:h-24 inline transition-all"
alt="main logo"
/>
</div>
@ -36,7 +32,7 @@
async function check_reloading() {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 3000);
const timeoutId = setTimeout(() => controller.abort(), 500);
const response = await fetch(
`${location.href.replace("/loading", "/check_reloading")}`,
{ signal: controller.signal }

46
src/ui/templates/logs.html
View File

@ -10,7 +10,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<div class="grid grid-cols-12 gap-x-4 gap-y-2">
<!-- select instance -->
<div
class="flex flex-col relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3"
class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3"
>
<h5
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
@ -63,7 +63,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<!-- end select instance -->
<!-- from date input -->
<div
class="flex flex-col relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3"
class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3"
>
<h5
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
@ -74,7 +74,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
type="text"
id="from-date"
name="from-date"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="dd/mm/yyyy or yyyy/mm/dd"
pattern="(.*?)"
required
@ -83,7 +83,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<!-- end from date input -->
<!-- to date input -->
<div
class="flex flex-col relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3"
class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3"
>
<h5
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
@ -94,46 +94,17 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
type="text"
id="to-date"
name="to-date"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="dd/mm/yyyy or yyyy/mm/dd"
pattern="(.*?)"
required
/>
</div>
<!-- end to date input -->
<!-- refresh input -->
<div
class="flex flex-col relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3"
>
<h5
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
>
Update auto
</h5>
<div checkbox-handler="live-update" class="relative mb-7 md:mb-0">
<input
id="live-update"
class="relative cursor-pointer dark:border-slate-600 dark:bg-slate-700 z-10 checked:z-0 w-5 h-5 ease text-base rounded-1.4 checked:bg-primary checked:border-primary dark:checked:bg-primary dark:checked:border-primary duration-250 float-left mt-1 appearance-none border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition-all disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 disabled:text-gray-700 dark:disabled:text-gray-300"
type="checkbox"
pattern=""
value="no"
/>
<svg
checkbox-handler="live-update"
class="cursor-pointer absolute fill-white dark:fill-gray-300 left-0 top-0 translate-x-1 translate-y-2 h-3 w-3"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
></path>
</svg>
</div>
</div>
<!-- end refresh input -->
<!-- refresh delay input -->
<div
class="flex flex-col relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3"
class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3"
>
<h5
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
@ -144,13 +115,14 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
type="number"
id="update-delay"
name="update-delay"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="2"
pattern="(.*?)"
required
/>
</div>
<!-- end refresh delay input -->
<div class="col-span-12 w-full justify-center flex mt-2">
<button
type="button"

6
src/ui/templates/plugins.html
View File

@ -217,7 +217,7 @@ plugins = config["CONFIG"].get_plugins() %}
{% for plugin in plugins %} {% if plugin['page'] %}
<div
{{current_endpoint}}-external="{% if plugin['external'] %} external {%else%} internal {%endif%}"
class="py-3 min-h-12 relative col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 3xl:col-span-2 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"
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
{{current_endpoint}}-content
@ -259,11 +259,11 @@ plugins = config["CONFIG"].get_plugins() %}
<div
{{current_endpoint}}-external="{% if plugin['external'] %} external {%else%} internal {%endif%}"
class="py-3 min-h-12 relative col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 3xl:col-span-2 p-1 flex justify-start items-center transition rounded bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800"
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
{{current_endpoint}}-content
class="ml-3 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-center text-sm md:text-base text-slate-700 dark:text-gray-300"
class="ml-3 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-left text-sm md:text-base text-slate-700 dark:text-gray-300"
>
{{plugin['name']}}
</p>

18
src/ui/templates/services.html
View File

@ -37,10 +37,10 @@
<!-- detail list -->
<div
class="w-full grid grid-cols-2 justify-items-center sm:justify-items-start gap-2 mt-4 mb-6 ml-3 sm:ml-1"
class="w-full grid grid-cols-12 justify-items-center sm:justify-items-start gap-2 mt-4 mb-6 ml-3 sm:ml-1"
>
<!-- detail -->
<div class="flex items-center col-span-2 sm:col-span-1">
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -75,7 +75,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-2 sm:col-span-1">
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -109,7 +109,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-2 sm:col-span-1">
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -143,7 +143,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-2 sm:col-span-1">
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -178,7 +178,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-2 sm:col-span-1">
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -212,7 +212,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-2 sm:col-span-1">
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -246,7 +246,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-2 sm:col-span-1">
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -280,7 +280,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-2 sm:col-span-1">
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<p
class="font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500"
>

1
src/ui/templates/settings_plugins.html
View File

@ -205,6 +205,7 @@
<!-- end plugin settings -->
</div>
<!-- end plugin settings not multiple -->
<!-- plugin multiple -->
{% if not plugin['multiple'] %}
<div class="flex items-center mx-0 sm:mx-4 md:mx-6 md:my-3 my-2 2xl:mx-6 2xl:my-3 col-span-12 ">