From faf1b7bc3a92a5db2bba3d17e35697f47ddab15c Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Wed, 9 Apr 2025 16:23:47 -0700 Subject: [PATCH] translation ux --- css/styles.css | 2 ++ js/translations.js | 32 ++++++++++++++++++++++++-------- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/css/styles.css b/css/styles.css index e2737b8..07b5d49 100644 --- a/css/styles.css +++ b/css/styles.css @@ -97,6 +97,7 @@ header { left: 0; width: 100%; z-index: 1000; + direction: ltr !important; } .navbar { @@ -104,6 +105,7 @@ header { justify-content: space-between; align-items: center; padding: 1rem 0; + direction: ltr !important; } .logo { diff --git a/js/translations.js b/js/translations.js index 4e5d847..9e03e26 100644 --- a/js/translations.js +++ b/js/translations.js @@ -9,6 +9,7 @@ const translations = { contact: "Contact", // Shared elements + organizationName: "Schools Without Borders", footerAbout: "A non-profit organization supporting education and providing services to students affected by wars and conflicts.", quickLinks: "Quick Links", contactUs: "Contact Us", @@ -30,33 +31,48 @@ const translations = { contact: "اتصل بنا", // Shared elements + organizationName: "مدارس بلا حدود", footerAbout: "منظمة غير ربحية تدعم التعليم وتقدم الخدمات للطلاب المتأثرين بالحروب والنزاعات.", quickLinks: "روابط سريعة", contactUs: "اتصل بنا", copyright: "© 2025 مدارس بلا حدود. جميع الحقوق محفوظة.", - // Import page-specific translations from your arabic_translations.txt - ...homeTranslations.ar, - ...aboutTranslations.ar + // Import page-specific translations + ...homeTranslations?.ar, + ...aboutTranslations?.ar, + ...workTranslations?.ar, + ...supportTranslations?.ar, + ...contactTranslations?.ar } }; let currentLanguage = 'en'; function toggleLanguage() { - // Toggle between languages currentLanguage = currentLanguage === 'en' ? 'ar' : 'en'; - // Update the language toggle text const langText = document.getElementById('langText'); if (langText) { langText.textContent = currentLanguage === 'en' ? 'EN / عربي' : 'عربي / EN'; } - // Update text direction for Arabic - document.documentElement.dir = currentLanguage === 'ar' ? 'rtl' : 'ltr'; + // Update text direction for Arabic, excluding header + if (currentLanguage === 'ar') { + document.documentElement.dir = 'rtl'; + // Add RTL class to main content areas only + document.querySelectorAll('main, section, footer').forEach(element => { + element.style.direction = 'rtl'; + }); + // Keep header LTR + document.querySelector('header').style.direction = 'ltr'; + } else { + document.documentElement.dir = 'ltr'; + // Remove RTL from all elements + document.querySelectorAll('main, section, footer').forEach(element => { + element.style.direction = 'ltr'; + }); + } - // Translate all elements with data-translate attribute translatePage(); }