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

start creating custom selectors

This commit is contained in:
BlasenhauerJ 2023-04-27 17:35:51 +02:00
parent 5285a2f4a1
commit 72bc9e4bb6
4 changed files with 304 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1236,10 +1236,6 @@ h6 {
min-height: 130px;
}
.min-h-\[38px\] {
min-height: 38px;
}
.min-h-\[400px\] {
min-height: 400px;
}
@ -2491,6 +2487,268 @@ h6 {
flex-wrap: inherit;
}
.checkbox {
position: relative;
z-index: 10;
float: left;
margin-top: 0.25rem;
height: 1.25rem;
width: 1.25rem;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0.35rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(210 214 218 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
background-size: contain;
background-position: center;
background-repeat: no-repeat;
vertical-align: top;
font-size: 1rem;
line-height: 1.5rem;
transition-property: all;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-duration: 250ms;
}
.checkbox:disabled {
cursor: default;
--tw-border-opacity: 1;
border-color: rgb(206 212 218 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(206 212 218 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(73 80 87 / var(--tw-text-opacity));
}
.checkbox[aria-checked="true"] {
z-index: 0;
--tw-border-opacity: 1;
border-color: rgb(8 85 119 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(8 85 119 / var(--tw-bg-opacity));
}
.checkbox:disabled[aria-checked="true"] {
--tw-border-opacity: 1;
border-color: rgb(206 212 218 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(206 212 218 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(73 80 87 / var(--tw-text-opacity));
}
:is(.dark .checkbox) {
--tw-border-opacity: 1;
border-color: rgb(98 117 148 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(52 71 103 / var(--tw-bg-opacity));
}
:is(.dark .checkbox:disabled) {
--tw-border-opacity: 1;
border-color: rgb(37 47 64 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(37 47 64 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(210 214 218 / var(--tw-text-opacity));
}
:is(.dark .checkbox[aria-checked="true"]) {
--tw-border-opacity: 1;
border-color: rgb(8 85 119 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(8 85 119 / var(--tw-bg-opacity));
}
:is(.dark .checkbox:disabled[aria-checked="true"]) {
--tw-border-opacity: 1;
border-color: rgb(37 47 64 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(37 47 64 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(210 214 218 / var(--tw-text-opacity));
}
.custom-select-btn {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
border-radius: 0.5rem;
border-width: 1px;
border-style: solid;
--tw-border-opacity: 1;
border-color: rgb(210 214 218 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
background-clip: padding-box;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
text-align: left;
vertical-align: middle;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.4rem;
--tw-text-opacity: 1;
color: rgb(73 80 87 / var(--tw-text-opacity));
transition-property: all;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.custom-select-btn::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(173 181 189 / var(--tw-text-opacity));
}
.custom-select-btn::placeholder {
--tw-text-opacity: 1;
color: rgb(173 181 189 / var(--tw-text-opacity));
}
.custom-select-btn:focus {
--tw-border-opacity: 1;
border-color: rgb(8 85 119 / var(--tw-border-opacity));
}
.custom-select-btn:disabled {
--tw-border-opacity: 1;
border-color: rgb(206 212 218 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(206 212 218 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(73 80 87 / var(--tw-text-opacity));
opacity: 0.75;
}
:is(.dark .custom-select-btn) {
--tw-border-opacity: 1;
border-color: rgb(98 117 148 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(52 71 103 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(210 214 218 / var(--tw-text-opacity));
opacity: 0.9;
}
:is(.dark .custom-select-btn:disabled) {
--tw-border-opacity: 1;
border-color: rgb(37 47 64 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(37 47 64 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(210 214 218 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
.custom-select-btn {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
.custom-dropdown-btn {
position: relative;
margin-top: 0px;
margin-bottom: 0px;
min-height: 38px;
cursor: pointer;
border-radius: 0px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(210 214 218 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: center;
vertical-align: middle;
font-size: 0.875rem;
line-height: 1.5rem;
line-height: 1.5;
letter-spacing: -0.025rem;
--tw-text-opacity: 1;
color: rgb(73 80 87 / var(--tw-text-opacity));
transition-property: all;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-duration: 150ms;
transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
}
.custom-dropdown-btn:hover {
--tw-brightness: brightness(.9);
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);
}
:is(.dark .custom-dropdown-btn) {
--tw-border-opacity: 1;
border-color: rgb(98 117 148 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(52 71 103 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(210 214 218 / var(--tw-text-opacity));
}
.active.custom-dropdown-btn {
position: relative;
margin-top: 0px;
margin-bottom: 0px;
min-height: 38px;
cursor: pointer;
border-radius: 0px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(210 214 218 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(8 85 119 / var(--tw-bg-opacity));
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: center;
vertical-align: middle;
font-size: 0.875rem;
line-height: 1.5rem;
line-height: 1.5;
letter-spacing: -0.025rem;
--tw-text-opacity: 1;
color: rgb(210 214 218 / var(--tw-text-opacity));
transition-property: all;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-duration: 150ms;
transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
}
.active.custom-dropdown-btn:hover {
--tw-brightness: brightness(.9);
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);
}
:is(.dark .active.custom-dropdown-btn) {
--tw-border-opacity: 1;
border-color: rgb(98 117 148 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(8 85 119 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(210 214 218 / var(--tw-text-opacity));
}
.first-letter\:absolute::first-letter {
position: absolute;
}

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

@ -109,20 +109,10 @@ class Select {
const btnEls = dropdownEl.querySelectorAll("button");
btnEls.forEach((btn) => {
btn.classList.remove(
"dark:bg-primary",
"bg-primary",
"text-gray-300"
);
btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
btn.classList.remove("active");
});
//highlight clicked btn
btn.classList.remove(
"bg-white",
"dark:bg-slate-700",
"text-gray-700"
);
btn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
btn.classList.add("active");
//close dropdown
const dropdownChevron = selectCustom.querySelector(

28
src/ui/styles.css
View File

@ -1,3 +1,31 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.checkbox {
@apply cursor-pointer disabled:cursor-default
relative dark:border-slate-600 dark:bg-slate-700 z-10 aria-checked:z-0 w-5 h-5
text-base rounded-1.4 aria-checked:bg-primary aria-checked:border-primary
dark:aria-checked:bg-primary dark:aria-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
aria-checked:disabled:bg-gray-400
aria-checked:disabled:border-gray-400 dark:aria-checked:disabled:bg-gray-800
dark:aria-checked:disabled:border-gray-800 aria-checked:disabled:text-gray-700
dark:aria-checked:disabled:text-gray-300;
}
.custom-select-btn {
@apply 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-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 {
@apply min-h-[38px] border-b border-l border-r border-gray-300 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;
}
.active.custom-dropdown-btn {
@apply min-h-[38px] border-b border-l border-r border-gray-300 hover:brightness-90 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:bg-primary text-gray-300 dark:text-gray-300;
}

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

@ -104,7 +104,7 @@ data-plugin-item="{{plugin['id']}}"
data-default-value="{{global_config[setting]['value']}}"
data-default-method="{{global_config[setting]['method']}}"
type="button"
class="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-primary flex justify-between align-middle items-center text-left text-sm leading-5.6 ease 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"
class="custom-select-btn"
>
{% for item in value['select'] %} {% if global_config[setting]['value'] and
global_config[setting]['value'] == item %}
@ -146,7 +146,7 @@ data-plugin-item="{{plugin['id']}}"
value="{{item}}"
data-setting-select-dropdown-btn="{{value['id']}}"
type="button"
class="min-h-[38px] {% 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 hover:brightness-90 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:bg-slate-700 dark:text-gray-300"
class="active custom-dropdown-btn {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} "
>
{{item}}
</button>
@ -156,7 +156,7 @@ data-plugin-item="{{plugin['id']}}"
value="{{item}}"
data-setting-select-dropdown-btn="{{value['id']}}"
type="button"
class="min-h-[38px] {% 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 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"
class="custom-dropdown-btn {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} "
>
{{item}}
</button>
@ -181,6 +181,7 @@ data-plugin-item="{{plugin['id']}}"
aria-checked="{% if global_config[setting]['value'] == "yes" %}true{% else %}false{% endif %}"
checked
id="checkbox-{{value['id']}}"
<<<<<<< Updated upstream
class="cursor-pointer disabled:cursor-default
relative dark:border-slate-600 dark:bg-slate-700 z-10 aria-checked:z-0 w-5 h-5 ease
text-base rounded-1.4 aria-checked:bg-primary aria-checked:border-primary
@ -196,6 +197,9 @@ data-plugin-item="{{plugin['id']}}"
dark:aria-checked:disabled:text-gray-300"
type="checkbox" data-pattern="{{value['regex']|safe}}"
=======
class="checkbox" type="checkbox" data-pattern="{{value['regex']|safe}}"
>>>>>>> Stashed changes
value="{{global_config[setting]['value']}}" />
@ -331,7 +335,7 @@ data-plugin-item="{{plugin['id']}}"
data-setting-select="{{value['id']}}"
data-default-value="{{value['default']}}"
type="button"
class="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-primary flex justify-between align-middle items-center text-left text-sm leading-5.6 ease 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"
class="custom-select-btn"
>
{% for item in value['select'] %} {% if value['default'] == item %}
<span
@ -364,7 +368,7 @@ data-plugin-item="{{plugin['id']}}"
value="{{item}}"
data-setting-select-dropdown-btn="{{value['id']}}"
type="button"
class="min-h-[38px] {% 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 hover:brightness-90 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:bg-slate-700 dark:text-gray-300"
class="active custom-dropdown-btn {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %}"
>
{{item}}
</button>
@ -374,7 +378,7 @@ data-plugin-item="{{plugin['id']}}"
value="{{item}}"
data-setting-select-dropdown-btn="{{value['id']}}"
type="button"
class="min-h-[38px] {% 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 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"
class="custom-dropdown-btn {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %}"
>
{{item}}
</button>
@ -391,15 +395,8 @@ data-plugin-item="{{plugin['id']}}"
<input id="{{setting}}_SCHEMA" name="{{setting}}_SCHEMA"
data-default-method="default"
data-default-value="{{value['default']}}" {% if value['default'] == 'yes' %} checked {%
endif %} id="checkbox-{{value['id']}}" class="relative cursor-pointer disabled:cursor-default
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" data-pattern="{{value['regex']|safe}}"
endif %} id="checkbox-{{value['id']}}"
class="checkbox" type="checkbox" data-pattern="{{value['regex']|safe}}"
value="{{value['default']}}" />
<svg
data-checkbox-handler="{{value['id']}}"