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

fix: viewer layout

Browse Source
This commit is contained in:
Edwin Wong
2023-11-13 04:13:17 -05:00
parent fe4de7eb28
commit e49e199641
3 changed files with 86 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/AvatarPreview.js
+41 -35
View File
@@ -193,7 +193,7 @@ export function AvatarPreview() {
name: "avatech-viewer-iframe",
allow: "cross-origin-isolated",
class: () =>
"w-[450px] h-[450px] z-[100] pointer-events-auto flex border-none overflow-hidden" +
"w-full h-full min-w-[300px] min-h-[600px] z-[100] pointer-events-auto flex border-none overflow-hidden" +
(showPreview.val ? "" : "hidden"),
// src: "https://labs.avatech.ai/viewer/default",
// src: "http://localhost:3000/viewer/default",
@@ -208,7 +208,10 @@ export function AvatarPreview() {
"w-full flex flex-col gap-2 justify-center items-center mt-8",
},
div(
{ class: () => "w-full flex justify-center text-black font-bold italic text-gray-500" },
{
class: () =>
"w-full flex justify-center font-bold italic text-gray-500",
},
span("We are launching OpenAI Assistant API integration soon!")
),
div(
@@ -313,45 +316,48 @@ export function AvatarPreview() {
return (
(showPreview.val ? "" : "hidden ") +
"w-full h-screen absolute left-0 top-0 z-[99] pointer-events-auto flex border-none"
"w-full h-full absolute left-0 top-0 z-[99] pointer-events-auto flex border-none"
);
},
},
div(
{
class: "absolute top-4 left-4 flex flex-row gap-2",
},
renderCloseButton(),
renderChangeWorkflowButton()
),
renderTwitter(),
() => {
if (isMobileDevice()) {
return div(
{
class: () =>
"flex flex-col w-full h-[110%] bg-white justify-center items-center py-16 px-4 gap-2" +
(showPreview.val ? "" : "hidden"),
},
renderIFrame(),
renderSteps(),
renderShareLink()
);
} else {
return div(
{
class: () =>
"flex w-full h-full bg-white justify-around items-center p-24" +
(showPreview.val ? "" : "hidden"),
},
renderSteps(),
div(
{ class: () => "flex flex-col" },
{ class: "overflow-y-auto overflow-x-hidden w-full h-full" },
div(
{
class: "absolute top-4 left-4 flex flex-row gap-2",
},
renderCloseButton(),
renderChangeWorkflowButton()
),
renderTwitter(),
() => {
if (isMobileDevice()) {
return div(
{
class: () =>
"flex flex-col w-full h-fit bg-white justify-center items-center py-16 px-4 gap-2" +
(showPreview.val ? "" : "hidden"),
},
renderIFrame(),
renderSteps(),
renderShareLink()
)
);
);
} else {
return div(
{
class: () =>
"flex w-full h-full bg-white justify-around items-center p-24" +
(showPreview.val ? "" : "hidden"),
},
renderSteps(),
div(
{ class: () => "flex flex-col" },
renderIFrame(),
renderShareLink()
)
);
}
}
}
)
);
}
js/state.js
+1 -1
View File
@@ -18,7 +18,7 @@ export const iframeSrc = van.state("https://editor.avatech.ai?comfyui=true");
export const showEditor = van.state(false);
// localStorage.getItem("showPreview") == 'true'
export const showPreview = van.state(true);
export const previewUrl = van.state("https://editor.avatech.ai/viewer?avatarId=default&debug=false&width=400&height=400&hideTrigger=true&voiceSelection=true");
export const previewUrl = van.state("https://editor.avatech.ai/viewer?avatarId=default&debug=false&width=300&height=300&hideTrigger=true&voiceSelection=true");
export const previewImg = van.state("");
export const previewImgLoading = van.state(false);
// export const previewUrl = van.state("http://localhost:3006/viewer?avatarId=default&hideUI=true&debug=true&width=300&height=300&showAudioControl=true");
js/tw-styles.css
+44 -41
View File
@@ -1,7 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Gabarito&display=swap');
/*
! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
*/
/*
@@ -803,7 +803,7 @@ html{
display: inline-block;
}
.dropdown > *:focus{
.dropdown > *:not(summary):focus{
outline: 2px solid transparent;
outline-offset: 2px;
}
@@ -921,8 +921,7 @@ html{
.file-input::file-selector-button{
margin-right: 1rem;
display: inline-flex;
height: 2.875rem;
min-height: 2.875rem;
height: 100%;
flex-shrink: 0;
cursor: pointer;
-webkit-user-select: none;
@@ -1000,8 +999,8 @@ html{
.join .dropdown .join-item:first-child:not(:last-child),
.join *:first-child:not(:last-child) .dropdown .join-item{
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
border-start-end-radius: inherit;
border-end-end-radius: inherit;
}
.link{
@@ -1460,6 +1459,11 @@ details.collapse summary::-webkit-details-marker{
--tw-text-opacity: 0.2;
}
.input input:focus{
outline: 2px solid transparent;
outline-offset: 2px;
}
.input[list]::-webkit-calendar-picker-indicator{
line-height: 1em;
}
@@ -1468,7 +1472,8 @@ details.collapse summary::-webkit-details-marker{
--tw-border-opacity: 0.2;
}
.input:focus{
.input:focus,
.input:focus-within{
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
@@ -1545,9 +1550,9 @@ details.collapse summary::-webkit-details-marker{
.menu :where(li ul):before{
position: absolute;
bottom: 0.75rem;
left: 0px;
top: 0.75rem;
bottom: 0.75rem;
width: 1px;
background-color: hsl(var(--bc) / 0.1);
content: "";
@@ -1644,8 +1649,8 @@ details.collapse summary::-webkit-details-marker{
.mockup-browser .mockup-browser-toolbar .input:before{
content: "";
position: absolute;
top: 50%;
left: 0.5rem;
top: 50%;
aspect-ratio: 1 / 1;
height: 0.75rem;
--tw-translate-y: -50%;
@@ -1659,8 +1664,8 @@ details.collapse summary::-webkit-details-marker{
.mockup-browser .mockup-browser-toolbar .input:after{
content: "";
position: absolute;
top: 50%;
left: 1.25rem;
top: 50%;
height: 0.5rem;
--tw-translate-y: 25%;
--tw-rotate: -45deg;
@@ -1890,8 +1895,8 @@ details.collapse summary::-webkit-details-marker{
}
.btn-group .btn:first-child:not(:last-child){
margin-top: -0px;
margin-left: -1px;
margin-top: -0px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
@@ -1913,8 +1918,8 @@ details.collapse summary::-webkit-details-marker{
}
.btn-group-horizontal .btn:first-child:not(:last-child){
margin-top: -0px;
margin-left: -1px;
margin-top: -0px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
@@ -1929,8 +1934,8 @@ details.collapse summary::-webkit-details-marker{
}
.btn-group-vertical .btn:first-child:not(:last-child){
margin-top: -1px;
margin-left: -0px;
margin-top: -1px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: var(--rounded-btn, 0.5rem);
border-bottom-left-radius: 0;
@@ -2136,24 +2141,21 @@ details.collapse summary::-webkit-details-marker{
height: 0.75rem;
}
.h-\[110\%\]{
height: 110%;
}
.h-\[394px\]{
height: 394px;
}
.h-\[450px\]{
height: 450px;
.h-fit{
height: -moz-fit-content;
height: fit-content;
}
.h-full{
height: 100%;
}
.h-screen{
height: 100vh;
.min-h-\[600px\]{
min-height: 600px;
}
.w-24{
@@ -2176,10 +2178,6 @@ details.collapse summary::-webkit-details-marker{
width: 24rem;
}
.w-\[450px\]{
width: 450px;
}
.w-\[550px\]{
width: 550px;
}
@@ -2193,6 +2191,14 @@ details.collapse summary::-webkit-details-marker{
width: 100%;
}
.min-w-\[250px\]{
min-width: 250px;
}
.min-w-\[300px\]{
min-width: 300px;
}
.-translate-x-1\/2{
--tw-translate-x: -50%;
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));
@@ -2255,6 +2261,14 @@ details.collapse summary::-webkit-details-marker{
overflow: hidden;
}
.overflow-y-auto{
overflow-y: auto;
}
.overflow-x-hidden{
overflow-x: hidden;
}
.rounded{
border-radius: 0.25rem;
}
@@ -2505,6 +2519,11 @@ details.collapse summary::-webkit-details-marker{
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.text-gray-500{
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-orange-700{
--tw-text-opacity: 1;
color: rgb(194 65 12 / var(--tw-text-opacity));
@@ -2519,11 +2538,6 @@ details.collapse summary::-webkit-details-marker{
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-500{
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.opacity-80{
opacity: 0.8;
}
@@ -2533,11 +2547,6 @@ details.collapse summary::-webkit-details-marker{
outline-offset: 2px !important;
}
.outline-none{
outline: 2px solid transparent;
outline-offset: 2px;
}
.ring-1{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2728,9 +2737,3 @@ img[src] {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.focus\:ring-0:focus{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}