From 00ff3c3c0c31de06b47fd5357c24dd0721f3e998 Mon Sep 17 00:00:00 2001 From: andrepat0 Date: Mon, 18 Nov 2024 16:16:08 +0100 Subject: [PATCH] feat: added a new generic layouts.css that handles mobile responsivness for all the layouts --- src/components/Avatar/Avatar.css | 4 +- src/components/layouts/ZoomedFullBody.tsx | 48 +-- .../ZoomedFullBody.test.tsx.snap | 2 +- src/components/layouts/chat.css | 2 +- src/components/layouts/layouts.css | 247 +++++++++++++++ src/components/layouts/zoomed-full-body.css | 280 +----------------- src/styles.css | 3 + 7 files changed, 258 insertions(+), 328 deletions(-) create mode 100644 src/components/layouts/layouts.css diff --git a/src/components/Avatar/Avatar.css b/src/components/Avatar/Avatar.css index 8fdcd847..fe88e175 100644 --- a/src/components/Avatar/Avatar.css +++ b/src/components/Avatar/Avatar.css @@ -61,12 +61,12 @@ } @media (max-width: 870px) { - .memori--avatar-wrapper div, + /* .memori--avatar-wrapper div, .memori--avatar-wrapper canvas, .memori--avatar-wrapper model-viewer { width: 150px !important; height: 150px !important; - } + } */ .memori--avatar-wrapper model-viewer { margin-top: 2rem; diff --git a/src/components/layouts/ZoomedFullBody.tsx b/src/components/layouts/ZoomedFullBody.tsx index 4527c397..6865264f 100644 --- a/src/components/layouts/ZoomedFullBody.tsx +++ b/src/components/layouts/ZoomedFullBody.tsx @@ -24,60 +24,14 @@ const ZoomedFullBodyLayout: React.FC = ({ useEffect(() => { // Prevent body scrolling document.body.style.overflow = 'hidden'; - - // Touch focus handler for chat bubbles - const handleBubbleTouch = (e: any) => { - const bubble = e.target.closest('.memori-chat--bubble'); - if (bubble) { - // Remove focus from other bubbles - document.querySelectorAll('.memori-chat--bubble.focused').forEach(other => { - if (other !== bubble) { - other.classList.remove('focused'); - } - }); - bubble.classList.add('focused'); - // Prevent any default touch behaviors - e.stopPropagation(); - } - }; - - // Handle clicking outside to remove focus - const handleOutsideTouch = (e: any) => { - const chatContainer = e.target.closest('.memori-full-body-layout--controls'); - const bubble = e.target.closest('.memori-chat--bubble'); - - if (chatContainer && !bubble) { - document.querySelectorAll('.memori-chat--bubble.focused').forEach(bubble => { - bubble.classList.remove('focused'); - }); - } - }; - - // Add event listeners - const chatContainer = document.querySelector('.memori-full-body-layout--controls'); - if (chatContainer) { - chatContainer.addEventListener('touchstart', handleBubbleTouch, { passive: true }); - document.addEventListener('touchstart', handleOutsideTouch, { passive: true }); - } - - // Cleanup function - return () => { - document.body.style.overflow = ''; - if (chatContainer) { - chatContainer.removeEventListener('touchstart', handleBubbleTouch); - document.removeEventListener('touchstart', handleOutsideTouch); - } - }; }, []); // Empty dependency array since we only want this to run once on mount - const isChrome = navigator.userAgent.includes('Chrome'); - return ( <> {integrationStyle} {integrationBackground} - + {showInstruct && ChangeMode && changeModeProps && ( )} diff --git a/src/components/layouts/__snapshots__/ZoomedFullBody.test.tsx.snap b/src/components/layouts/__snapshots__/ZoomedFullBody.test.tsx.snap index b77f24b5..91951677 100644 --- a/src/components/layouts/__snapshots__/ZoomedFullBody.test.tsx.snap +++ b/src/components/layouts/__snapshots__/ZoomedFullBody.test.tsx.snap @@ -36,7 +36,7 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = ` />
.memori-spin { + height: calc(100vh - 150px) !important; + } + + .memori-widget.memori-layout-totem { + height: 100% !important; + } + + + .memori--powered-by-custom { + top: 30px !important; + bottom: auto; + left: 30px; + } + + /* Avatar */ + .memori-full-body-layout--avatar-mobile { + position: fixed; + z-index: 0; + top: 0; + left: 0; + overflow: hidden; + width: 100%; + min-height: 100vh; + flex: 1; + touch-action: pan-y pinch-zoom; + } + + .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper > div { + overflow: visible !important; + width: auto !important; + height: 80vh !important; + max-height: 80vh !important; + border-radius: 0; + transform: scale(1.7) translate(0px, 10vh); + will-change: transform; + } + + .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper canvas { + width: auto !important; + max-width: 100%; + height: 100% !important; + max-height: 100%; + touch-action: none; + } + + .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper > div canvas + div, + .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper .avatar-loader { + position: absolute !important; + width: 100%; + height: 100%; + transform: none !important; + } + + .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper .avatar-loader { + display: flex; + align-items: center; + justify-content: center; + } + + /* Grid and Controls */ + .memori-full-body-grid-column-right { + position: fixed; + z-index: 2; + bottom: 0; + width: 100%; + max-width: 93%; + margin-bottom: 5%; + } + + .memori--active .memori--grid-column-right { + overflow-y: auto; + } + + .memori--grid-column--zoomed-full-body { + height: 450px; + /* padding: 12px; + margin-bottom: 32px; */ + } + + .memori-chat--history { + max-height: 100%; + } + + /* Improved touch targets */ + .memori-control-button { + min-width: 44px; + min-height: 44px; + /* padding: 12px; */ + margin: 4px; + touch-action: manipulation; + } + + /* Header */ + .memori-full-body--header { + padding: 16px; + text-align: right; + touch-action: manipulation; + } + + .memori-header { + position: relative; + z-index: 100; + display: inline-flex; + width: auto; + height: auto; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.25rem; + text-align: center; + touch-action: manipulation; + } + + /* Hide elements */ + .memori-chat--cover, + .memori--avatar-toggle { + display: none; + } + + /* Layout adjustments */ + .memori--powered-by { + top: 0; + bottom: auto; + } + + .memori--cover, + .memori--start-panel { + max-height: 100%; + padding: 0px; + background: none; + } + + /* Chat layout */ + .memori-full-body-layout--controls { + position: relative; + z-index: 5; + display: flex; + width: 100%; + height: 100%; + flex-direction: column; + justify-content: flex-end; + touch-action: pan-y; + } + + /* Improved scrolling container */ + .memori-chat--content { + padding-bottom: env(safe-area-inset-bottom); + overscroll-behavior: contain; + scroll-behavior: smooth; + } + + .memori-full-body-layout--controls .memori-chat--history, + .memori-full-body-layout--controls .memori-chat--content { + padding: 0; + background: transparent; + overscroll-behavior: contain; + } + + .memori-full-body-layout--controls .memori-chat--history { + margin-top: 0; + -webkit-backdrop-filter: none; + backdrop-filter: none; + } + + .memori-button--icon-only.memori-header--button.memori-header--button--reload, + .memori-button--icon-only.memori-header--button.memori-header--button--clear { + display: none !important; + } + + .memori--start-panel { + padding: 24px 12px; + /* margin-bottom: 10%; */ + } + + .memori-chat--wrapper { + margin-bottom: 2rem !important; + } + + .memori--start-panel .memori-full-body-layout--controls, + .memori-full-body-layout--controls .memori-chat--wrapper { + width: 100%; + max-width: 800px; + margin: 0 auto; + touch-action: pan-y; + } + .memori-full-body-layout--controls .memori-chat--wrapper { + height: calc(100% - 1rem); + } + + .memori-full-body-layout--controls .memori-chat--bubble, + .memori-full-body-layout--controls .memori-chat--bubble.memori-chat--user-bubble { + position: relative; + opacity: 0.6; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); + touch-action: manipulation; + transition: all 0.3s ease-in-out; + user-select: text; + } + + .memori--description-text{ + max-height: 200px; + overflow-y: auto; + } + + /* Focus state */ + .memori-full-body-layout--controls .memori-chat--bubble.focused, + .memori-full-body-layout--controls .memori-chat--bubble.memori-chat--user-bubble.focused { + background-color: #fff; + box-shadow: 0 0 0 1px rgba(var(--memori-primary-rgb, 0, 0, 0), 0.1); + opacity: 1; + transform: scale(1); + } + + .memori-full-body-layout--controls .memori-chat--bubble:hover, + .memori-full-body-layout--controls .memori-chat--bubble.memori-chat--user-bubble:hover { + opacity: 1; + transform: scale(0.98); + } + + /* Maintain focus styles during touch */ + .memori-full-body-layout--controls .memori-chat--bubble.focused:hover, + .memori-full-body-layout--controls .memori-chat--bubble.memori-chat--user-bubble.focused:hover { + background-color: #fff; + opacity: 1; + } + + /* Safe area insets for modern mobile devices */ + @supports (padding: max(0px)) { + .memori-full-body-layout--controls { + padding-bottom: max(1rem, env(safe-area-inset-bottom)); + } + + /* .memori-header { + padding-top: max(1rem, env(safe-area-inset-top)); + } */ + } +} \ No newline at end of file diff --git a/src/components/layouts/zoomed-full-body.css b/src/components/layouts/zoomed-full-body.css index 7ec1922a..8b81e452 100644 --- a/src/components/layouts/zoomed-full-body.css +++ b/src/components/layouts/zoomed-full-body.css @@ -17,287 +17,13 @@ /* Grid and layout */ .memori--grid-column--zoomed-full-body { - max-height: 100%; + max-height: calc(100% - 20px); + align-self: flex-start; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .memori.memori-widget.memori-layout-zoomed_full_body .memori--grid { - height: calc(100% - 25px); + height: calc(100% - 30px); } -/* Touch interaction improvements */ -.memori-interactive { - cursor: pointer; - -webkit-tap-highlight-color: transparent; - touch-action: manipulation; - user-select: none; -} - -.memori-scrollable { - -webkit-overflow-scrolling: touch; - overscroll-behavior: contain; - scroll-behavior: smooth; -} - - -/* Mobile styles */ -@media (max-width: 870px) { - /* Layout */ - .memori-full-body--container { - display: flex; - flex-direction: column; - overscroll-behavior-y: none; - } - - .memori-full-body--container--chrome{ - height: 90vh !important; - } - - .memori-full-body--container--safari{ - height: 85vh !important; - } - - - .memori--powered-by-custom { - top: 30px; - bottom: auto; - left: 30px; - } - - /* Avatar */ - .memori-full-body-layout--avatar-mobile { - position: fixed; - z-index: 0; - top: 0; - left: 0; - overflow: hidden; - width: 100%; - min-height: 100vh; - flex: 1; - touch-action: pan-y pinch-zoom; - } - - .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper > div { - overflow: visible !important; - width: auto !important; - height: 80vh !important; - max-height: 80vh; - border-radius: 0; - transform: scale(1.7) translate(0px, 10vh); - will-change: transform; - } - - .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper canvas { - width: auto !important; - max-width: 100%; - height: 100% !important; - max-height: 100%; - touch-action: none; - } - - .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper > div canvas + div, - .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper .avatar-loader { - position: absolute !important; - width: 100%; - height: 100%; - transform: none !important; - } - - .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper .avatar-loader { - display: flex; - align-items: center; - justify-content: center; - } - - /* Grid and Controls */ - .memori-full-body-grid-column-right { - position: fixed; - z-index: 2; - bottom: 0; - width: 100%; - max-width: 93%; - margin-bottom: 5%; - } - - .memori--grid-column--zoomed-full-body { - height: 450px; - /* padding: 12px; - margin-bottom: 32px; */ - } - - .memori-chat--history { - max-height: 100%; - } - - /* Improved touch targets */ - .memori-control-button { - min-width: 44px; - min-height: 44px; - padding: 12px; - margin: 4px; - touch-action: manipulation; - } - - /* Header */ - .memori-full-body--header { - padding: 16px; - text-align: right; - touch-action: manipulation; - } - - .memori-header { - position: relative; - z-index: 100; - display: inline-flex; - width: auto; - height: auto; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 0.25rem; - text-align: center; - touch-action: manipulation; - } - - /* Hide elements */ - .memori-chat--cover, - .memori--avatar-toggle { - display: none; - } - - /* Layout adjustments */ - .memori--powered-by { - top: 0; - bottom: auto; - } - - .memori--cover, - .memori--start-panel { - max-height: 100%; - padding: 0px; - background: none; - } - - /* Chat layout */ - .memori-full-body-layout--controls { - position: relative; - z-index: 5; - display: flex; - width: 100%; - height: 100%; - flex-direction: column; - justify-content: flex-end; - touch-action: pan-y; - } - - /* Improved scrolling container */ - .memori-chat--content { - padding-bottom: env(safe-area-inset-bottom); - -webkit-overflow-scrolling: touch; - overscroll-behavior: contain; - scroll-behavior: smooth; - } - - .memori-full-body-layout--controls .memori-chat--history, - .memori-full-body-layout--controls .memori-chat--content { - padding: 0; - background: transparent; - -webkit-overflow-scrolling: touch; - overscroll-behavior: contain; - } - - .memori-full-body-layout--controls .memori-chat--history { - margin-top: 0; - backdrop-filter: none; - } - - .memori--start-panel { - padding: 24px 12px; - -webkit-overflow-scrolling: touch; - overflow-y: auto; - } - - .memori--start-panel .memori-full-body-layout--controls, - .memori-full-body-layout--controls .memori-chat--wrapper { - width: 100%; - max-width: 800px; - margin: 0 auto; - touch-action: pan-y; - } - .memori-full-body-layout--controls .memori-chat--wrapper { - height: calc(100% - 1rem); - } - - .memori--grid-column-right{ - overflow-y: auto; - } - - .memori-full-body-layout--controls .memori-chat--bubble, - .memori-full-body-layout--controls .memori-chat--bubble.memori-chat--user-bubble { - position: relative; - opacity: 0.6; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); - touch-action: manipulation; - transition: all 0.3s ease-in-out; - user-select: text; - } - - /* Focus state */ - .memori-full-body-layout--controls .memori-chat--bubble.focused, - .memori-full-body-layout--controls .memori-chat--bubble.memori-chat--user-bubble.focused { - background-color: #fff; - box-shadow: 0 0 0 1px rgba(var(--memori-primary-rgb, 0, 0, 0), 0.1); - opacity: 1; - transform: scale(1); - } - - /* Touch active state */ - @media (hover: none) { - .memori-full-body-layout--controls .memori-chat--bubble:active, - .memori-full-body-layout--controls .memori-chat--bubble.memori-chat--user-bubble:active { - opacity: 1; - transform: scale(0.98); - } - - /* Maintain focus styles during touch */ - .memori-full-body-layout--controls .memori-chat--bubble.focused:active, - .memori-full-body-layout--controls .memori-chat--bubble.memori-chat--user-bubble.focused:active { - background-color: #fff; - opacity: 1; - } - } - - /* Hover states for non-touch devices */ - @media (hover: hover) { - .memori-full-body-layout--controls .memori-chat--bubble:hover, - .memori-full-body-layout--controls .memori-chat--bubble.memori-chat--user-bubble:hover { - opacity: 1; - } - - /* Maintain focus styles on hover */ - .memori-full-body-layout--controls .memori-chat--bubble.focused:hover, - .memori-full-body-layout--controls .memori-chat--bubble.memori-chat--user-bubble.focused:hover { - background-color: #fff; - opacity: 1; - } - } - - /* Safe area insets for modern mobile devices */ - @supports (padding: max(0px)) { - .memori-full-body-layout--controls { - padding-bottom: max(1rem, env(safe-area-inset-bottom)); - } - - .memori-header { - padding-top: max(1rem, env(safe-area-inset-top)); - } - } -} - -/* Momentum scrolling for iOS devices */ -@supports (-webkit-overflow-scrolling: touch) { - .memori-scrollable { - -webkit-overflow-scrolling: touch; - } -} diff --git a/src/styles.css b/src/styles.css index 9d261626..2b4d83a1 100644 --- a/src/styles.css +++ b/src/styles.css @@ -54,6 +54,9 @@ @import url('./components/layouts/website-assistant.css'); @import url('./components/layouts/chat.css'); @import url('./components/layouts/zoomed-full-body.css'); + +/* Default layout style */ +@import url('./components/layouts/layouts.css'); @import url('https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css'); .sr-only {