Skip to content

Commit

Permalink
feat: added a new generic layouts.css that handles mobile responsivne…
Browse files Browse the repository at this point in the history 
…ss for all the layouts
  • Loading branch information
@andrepat0 @nzambello
andrepat0 authored and nzambello committed Nov 19, 2024
1 parent a4ab0a8 commit 00ff3c3
Show file tree
Hide file tree
Showing 7 changed files with 258 additions and 328 deletions.
4 changes: 2 additions & 2 deletions src/components/Avatar/Avatar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
48 changes: 1 addition & 47 deletions src/components/layouts/ZoomedFullBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,60 +24,14 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
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}

<Spin className={`memori-full-body--container ${isChrome ? 'memori-full-body--container--chrome' : 'memori-full-body--container--safari'}`} spinning={loading}>
<Spin className={`memori-full-body--container`} spinning={loading}>
{showInstruct && ChangeMode && changeModeProps && (
<ChangeMode {...changeModeProps} />
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/layouts/__snapshots__/ZoomedFullBody.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
/>
</div>
<div
class="memori-spin memori-full-body--container memori-full-body--container--safari"
class="memori-spin memori-full-body--container"
>
<div
class="memori-full-body--header"
Expand Down
2 changes: 1 addition & 1 deletion src/components/layouts/chat.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@

@media (max-width: 870px) {
.memori-chat-layout .memori--powered-by {
top: 3.5rem;
/* top: 3.5rem; */
bottom: auto;
}
}
Expand Down
247 changes: 247 additions & 0 deletions src/components/layouts/layouts.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,247 @@
/* Mobile styles */
@media (max-width: 870px) {
/* Layout */
.memori-full-body--container {
display: flex;
flex-direction: column;
overscroll-behavior-y: none;
}

.memori-widget>.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));
} */
}
}
Loading

0 comments on commit 00ff3c3

Please sign in to comment.