martin/marian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add mobile responsive positioning for chat and accessibility buttons #deploy

Browse Source
This commit is contained in:
martin 2026-01-24 18:51:21 +01:00
parent 11879133e7
commit 0bb6262ce6
3 changed files with 86 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
index.html
View File

@ -45,6 +45,33 @@
transform: none !important;
}
/* Mobile responsive positioning */
@media (max-width: 768px) {
html body div[class*="chat-button"],
html body div[class*="chat-launcher"],
html body button[aria-label*="chat"],
html body button[title*="chat"] {
right: 16px !important;
bottom: 80px !important;
width: 48px !important;
height: 48px !important;
font-size: 20px !important;
}
}
@media (max-width: 640px) {
html body div[class*="chat-button"],
html body div[class*="chat-launcher"],
html body button[aria-label*="chat"],
html body button[title*="chat"] {
right: 12px !important;
bottom: 70px !important;
width: 44px !important;
height: 44px !important;
font-size: 18px !important;
}
}
/* Override any inline styles */
div[style*="bottom"] {
bottom: 24px !important;
@ -64,6 +91,25 @@
align-items: center !important;
justify-content: center !important;
}
/* Mobile positioning for contact button */
@media (max-width: 768px) {
.fixed.bottom-6.right-6 {
right: 16px !important;
bottom: 16px !important;
width: 48px !important;
height: 48px !important;
}
}
@media (max-width: 640px) {
.fixed.bottom-6.right-6 {
right: 12px !important;
bottom: 12px !important;
width: 44px !important;
height: 44px !important;
}
}
</style>
</head>
@ -106,14 +152,25 @@
// Force reposition after chat loads
setTimeout(() => {
const isMobile = window.innerWidth <= 768;
const isSmallMobile = window.innerWidth <= 640;
const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
chatButtons.forEach(button => {
if (button) {
button.style.setProperty('bottom', '24px', 'important');
button.style.setProperty('right', '120px', 'important');
if (isSmallMobile) {
button.style.setProperty('bottom', '70px', 'important');
button.style.setProperty('right', '12px', 'important');
} else if (isMobile) {
button.style.setProperty('bottom', '80px', 'important');
button.style.setProperty('right', '16px', 'important');
} else {
button.style.setProperty('bottom', '24px', 'important');
button.style.setProperty('right', '120px', 'important');
}
button.style.setProperty('position', 'fixed', 'important');
button.style.setProperty('z-index', '9999', 'important');
button.style.setProperty('transform', 'none', 'important'); // Ensure no transform interferes
button.style.setProperty('transform', 'none', 'important');
}
});
@ -121,20 +178,39 @@
const chatContainers = document.querySelectorAll('[class*="chat-container"], [class*="chat-popup"], [class*="chat-widget"]');
chatContainers.forEach(container => {
if (container) {
container.style.setProperty('bottom', '24px', 'important');
container.style.setProperty('right', '120px', 'important');
container.style.setProperty('position', 'fixed', 'important'); // Ensure position is fixed
if (isSmallMobile) {
container.style.setProperty('bottom', '70px', 'important');
container.style.setProperty('right', '12px', 'important');
} else if (isMobile) {
container.style.setProperty('bottom', '80px', 'important');
container.style.setProperty('right', '16px', 'important');
} else {
container.style.setProperty('bottom', '24px', 'important');
container.style.setProperty('right', '120px', 'important');
}
container.style.setProperty('position', 'fixed', 'important');
}
});
}, 3000); // Increased delay to 3 seconds
// Continuous repositioning - run every 500ms
setInterval(() => {
const isMobile = window.innerWidth <= 768;
const isSmallMobile = window.innerWidth <= 640;
const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
chatButtons.forEach(button => {
if (button) {
button.style.setProperty('bottom', '24px', 'important');
button.style.setProperty('right', '120px', 'important');
if (isSmallMobile) {
button.style.setProperty('bottom', '70px', 'important');
button.style.setProperty('right', '12px', 'important');
} else if (isMobile) {
button.style.setProperty('bottom', '80px', 'important');
button.style.setProperty('right', '16px', 'important');
} else {
button.style.setProperty('bottom', '24px', 'important');
button.style.setProperty('right', '120px', 'important');
}
button.style.setProperty('position', 'fixed', 'important');
button.style.setProperty('z-index', '9999', 'important');
button.style.setProperty('transform', 'none', 'important');

2
src/components/AccessibilityToggle.tsx
View File

@ -49,7 +49,7 @@ const AccessibilityToggle = () => {
{/* Toggle Button */}
<Button
onClick={() => setIsOpen(!isOpen)}
className="fixed top-20 right-4 z-40 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-3 shadow-lg"
className="fixed top-20 right-4 z-40 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-3 shadow-lg md:right-4 sm:right-2"
aria-label="Barrierefreiheitsoptionen"
>
{isOpen ? <X className="w-5 h-5" /> : <Accessibility className="w-5 h-5" />}

2
src/components/Layout.tsx
View File

@ -102,7 +102,7 @@ const Layout = ({ children }: LayoutProps) => {
<AccessibilityToggle />
<div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3">
<div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3 md:right-6 sm:right-2 sm:bottom-2">
{showToTop ? (
<Button
type="button"