nodes/avatechai-avatar-graph-comfyui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

app ui update

Browse Source
This commit is contained in:
San
2023-11-16 12:01:29 +08:00
parent b3eb1acfac
commit bbe89107cc
2 changed files with 80 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/AvatarPreview.js
+14 -27
View File
@@ -71,12 +71,12 @@ async function prepareImageFromUrlRedirect(stage) {
dragndrop.addEventListener("dragenter", (evt) => {
evt.preventDefault();
dragndrop.className =
"w-full border-2 border-purple-500 text-purple-500 border-dashed rounded-lg flex justify-center items-center";
"h-96 w-full border-2 border-purple-500 text-purple-500 border-dashed rounded-lg flex justify-center items-center";
});
dragndrop.addEventListener("dragleave", (evt) => {
evt.preventDefault();
dragndrop.className =
"w-full border-2 border-black border-dashed items-center rounded-lg flex justify-center";
"h-96 w-full border-2 border-black border-dashed items-center rounded-lg flex justify-center";
});
dragndrop.addEventListener("dragover", (evt) => {
evt.preventDefault();
@@ -84,7 +84,7 @@ async function prepareImageFromUrlRedirect(stage) {
dragndrop.addEventListener("drop", async (evt) => {
evt.preventDefault();
dragndrop.className =
"w-full border-2 border-black border-dashed items-center rounded-lg flex justify-center";
"h-96 w-full border-2 border-black border-dashed items-center rounded-lg flex justify-center";
if (evt.dataTransfer.files.length > 1) return;
if (
evt.dataTransfer.files[0].type != "image/jpeg" &&
@@ -191,9 +191,7 @@ export function AvatarPreview() {
button(
{
class: () =>
`${
previewImg.val != "" && "w-full"
} h-full btn flex flex-row normal-case px-4 rounded-md left-0 top-0 z-[200] pointer-events-auto`,
`w-full h-full btn flex flex-row normal-case px-4 rounded-md left-0 top-0 z-[200] pointer-events-auto`,
onclick: async () => {
// previewImg.val = await uploadImage();
// stage.val = 1;
@@ -230,33 +228,22 @@ export function AvatarPreview() {
class: "loading loading-spinner loading-md",
})
: ""
),
previewImg.val == ""
? div(
{ class: () => "divider divider-horizontal !gap-0" },
"OR"
)
: "",
previewImg.val == ""
)
),
() => previewImg.val == ""
? div(
{
id: "dnd",
class: () =>
"w-full border-2 border-black border-dashed items-center rounded-lg flex justify-center",
"h-96 w-full border-2 border-black border-dashed items-center rounded-lg flex justify-center",
},
"Drag and drop the image here"
"or drag and drop the image here"
)
: ""
),
() =>
previewImg.val != ""
? img({
class: () =>
"z-[10] object-contain w-full h-[394px] border",
src: previewImg,
})
: "",
: img({
class: () =>
"z-[10] object-contain w-full h-[394px] border",
src: previewImg,
}),
button(
{
class: () =>
js/tw-styles.css
+66 -44
View File
@@ -730,6 +730,12 @@ html{
.tab:hover{
--tw-text-opacity: 1;
}
.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover,
.tabs-boxed :is(input:checked):hover{
--tw-text-opacity: 1;
color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}
}
.btn{
@@ -1533,12 +1539,6 @@ input.tab:checked + .tab-content,
}
}
.card.bordered{
border-width: 1px;
--tw-border-opacity: 1;
border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
}
@keyframes checkmark{
0%{
background-position-y: 5px;
@@ -2140,10 +2140,25 @@ details.collapse summary::-webkit-details-marker{
background-position: top right;
}
.tabs-boxed{
border-radius: var(--rounded-btn, 0.5rem);
--tw-bg-opacity: 1;
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
padding: 0.25rem;
}
.tabs-boxed .tab{
border-radius: var(--rounded-btn, 0.5rem);
}
.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]),
.tabs-boxed :is(input:checked){
--tw-bg-opacity: 1;
background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
--tw-text-opacity: 1;
color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}
.table tr.active,
.table tr.active:nth-child(even),
.table-zebra tbody tr:nth-child(even){
@@ -2645,6 +2660,10 @@ details.collapse summary::-webkit-details-marker{
height: 100%;
}
.h-\[400px\]{
height: 400px;
}
.h-24{
height: 6rem;
}
@@ -2653,6 +2672,10 @@ details.collapse summary::-webkit-details-marker{
height: 9rem;
}
.h-96{
height: 24rem;
}
.min-h-\[600px\]{
min-height: 600px;
}
@@ -2661,28 +2684,24 @@ details.collapse summary::-webkit-details-marker{
min-height: 400px;
}
.min-h-\[200px\]{
min-height: 200px;
.w-24{
width: 6rem;
}
.w-3{
width: 0.75rem;
}
.w-32{
width: 8rem;
}
.w-56{
width: 14rem;
}
.w-\[24rem\]{
.w-96{
width: 24rem;
}
.w-\[32rem\]{
width: 32rem;
.w-\[24rem\]{
width: 24rem;
}
.w-\[550px\]{
@@ -2698,6 +2717,18 @@ details.collapse summary::-webkit-details-marker{
width: 100%;
}
.w-\[32rem\]{
width: 32rem;
}
.w-32{
width: 8rem;
}
.w-\[400px\]{
width: 400px;
}
.min-w-\[300px\]{
min-width: 300px;
}
@@ -2824,9 +2855,9 @@ details.collapse summary::-webkit-details-marker{
border-bottom-right-radius: 0px;
}
.rounded-t-md{
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
.rounded-b-md{
border-bottom-right-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.rounded-b-none{
@@ -2834,14 +2865,9 @@ details.collapse summary::-webkit-details-marker{
border-bottom-left-radius: 0px;
}
.rounded-t-none{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.rounded-b-md{
border-bottom-right-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
.rounded-t-md{
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
.border{
@@ -2856,18 +2882,10 @@ details.collapse summary::-webkit-details-marker{
border-top-width: 4px;
}
.border-r{
border-right-width: 1px;
}
.border-b-0{
border-bottom-width: 0px;
}
.border-t-0{
border-top-width: 0px;
}
.border-dashed{
border-style: dashed;
}
@@ -2881,16 +2899,6 @@ details.collapse summary::-webkit-details-marker{
border-color: rgb(249 115 22 / var(--tw-border-opacity));
}
.border-gray-500{
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity));
}
.border-gray-300{
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-black{
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -2901,6 +2909,11 @@ details.collapse summary::-webkit-details-marker{
border-color: rgb(168 85 247 / var(--tw-border-opacity));
}
.border-gray-300{
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.bg-\[\#f6f6f6\]{
--tw-bg-opacity: 1;
background-color: rgb(246 246 246 / var(--tw-bg-opacity));
@@ -2997,6 +3010,10 @@ details.collapse summary::-webkit-details-marker{
padding: 0px;
}
.p-10{
padding: 2.5rem;
}
.p-2{
padding: 0.5rem;
}
@@ -3034,6 +3051,11 @@ details.collapse summary::-webkit-details-marker{
padding-bottom: 0.5rem;
}
.py-4{
padding-top: 1rem;
padding-bottom: 1rem;
}
.text-start{
text-align: start;
}