adjust chat button positioning to avoid overlap with accessibility button, add responsive breakpoints for mobile and small mobile screens #deploy
This commit is contained in:
parent
c43ba0be83
commit
a460cbd99c
53
index.html
53
index.html
@ -38,20 +38,37 @@
|
||||
height: 52px !important;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
|
||||
bottom: 24px !important;
|
||||
right: 24px !important;
|
||||
right: 120px !important;
|
||||
font-size: 22px !important;
|
||||
position: fixed !important;
|
||||
z-index: 9999 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Hide chat button on mobile */
|
||||
/* 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"] {
|
||||
display: none !important;
|
||||
right: 80px !important;
|
||||
bottom: 24px !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: 70px !important;
|
||||
bottom: 24px !important;
|
||||
width: 44px !important;
|
||||
height: 44px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -96,11 +113,22 @@
|
||||
|
||||
// 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', '24px', 'important');
|
||||
if (isSmallMobile) {
|
||||
button.style.setProperty('bottom', '24px', 'important');
|
||||
button.style.setProperty('right', '70px', 'important');
|
||||
} else if (isMobile) {
|
||||
button.style.setProperty('bottom', '24px', 'important');
|
||||
button.style.setProperty('right', '80px', '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');
|
||||
@ -110,11 +138,22 @@
|
||||
|
||||
// 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', '24px', 'important');
|
||||
if (isSmallMobile) {
|
||||
button.style.setProperty('bottom', '24px', 'important');
|
||||
button.style.setProperty('right', '70px', 'important');
|
||||
} else if (isMobile) {
|
||||
button.style.setProperty('bottom', '24px', 'important');
|
||||
button.style.setProperty('right', '80px', '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');
|
||||
|
||||
@ -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 hidden md:flex"
|
||||
className="fixed top-20 right-4 z-40 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-3 shadow-lg"
|
||||
aria-label="Barrierefreiheitsoptionen"
|
||||
>
|
||||
{isOpen ? <X className="w-5 h-5" /> : <Accessibility className="w-5 h-5" />}
|
||||
|
||||
@ -101,63 +101,6 @@ const Footer = () => {
|
||||
|
||||
return (
|
||||
<footer className="bg-blue-50 border-t border-blue-100">
|
||||
{/* Mobile Action Buttons */}
|
||||
<div className="md:hidden bg-white border-b border-blue-100 sticky bottom-0 z-40">
|
||||
<div className="container mx-auto px-4 py-3">
|
||||
<div className="flex justify-around items-center gap-2">
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1 h-10 text-xs bg-blue-600 text-white border-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
<Link to="/contact#contact" className="flex items-center justify-center gap-1">
|
||||
<Phone className="h-3 w-3" />
|
||||
<span>Kontakt</span>
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1 h-10 text-xs bg-blue-600 text-white border-blue-600 hover:bg-blue-700"
|
||||
onClick={() => {
|
||||
// Open n8n chat if available
|
||||
const chatButton = document.querySelector('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]') as HTMLElement;
|
||||
if (chatButton) {
|
||||
chatButton.click();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MessageCircle className="h-3 w-3 mr-1" />
|
||||
<span>Chat</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1 h-10 text-xs bg-blue-600 text-white border-blue-600 hover:bg-blue-700"
|
||||
onClick={() => setIsAccessibilityOpen(!isAccessibilityOpen)}
|
||||
>
|
||||
<Accessibility className="h-3 w-3 mr-1" />
|
||||
<span>A11y</span>
|
||||
</Button>
|
||||
|
||||
{showToTop && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1 h-10 text-xs bg-blue-600 text-white border-blue-600 hover:bg-blue-700"
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||||
>
|
||||
<ArrowUp className="h-3 w-3 mr-1" />
|
||||
<span>Top</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
{/* Logo & Description */}
|
||||
@ -439,13 +382,6 @@ const Footer = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Accessibility Bar */}
|
||||
{isAccessibilityOpen && (
|
||||
<div className="md:hidden bg-white border-t border-blue-100">
|
||||
<AccessibilityBar />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="border-t border-blue-100 mt-12 pt-8 text-center text-sm text-blue-950/70">
|
||||
<p>{t('bottom.externalNotice', 'Externe Links: Wir sind nicht verantwortlich für Inhalte externer Webseiten.')}</p>
|
||||
<p> 2026. Agentur Mizera & Partner - {t('bottom.copyright', 'Alle Rechte vorbehalten.')}</p>
|
||||
|
||||
@ -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 hidden md:flex">
|
||||
<div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3">
|
||||
{showToTop ? (
|
||||
<Button
|
||||
type="button"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user