Layout Issues in RTL Version of the Zero Template

[salahjaafar]

Dear Astroid Framework Team,

I hope this message finds you well. I wanted to bring to your attention an issue I've encountered in the RTL version of the Zero template on the Astroid framework. Through testing, I've identified two significant layout problems that impact the user experience. I believe addressing these issues would greatly contribute to the overall quality improvement of the template.

1. Incorrect Dropdown Menu Positioning: When the site is configured in RTL mode, the dropdown menu appears to be improperly positioned. This creates an uncomfortable user experience, and it would be beneficial to review the menu positioning to ensure proper alignment in right-to-left written languages.

2. Alignment Issue with ul li Bullet Icons: The bullet icons in unordered lists (ul li) are currently overlapping with the text in the RTL version. It is essential to rewrite the associated CSS code to ensure proper alignment of these elements, providing a consistent visual presentation.

To help you visualize these issues, I have recorded a video of the current situation. You can view it by following this link:

https://github.com/templaza/astroid-framework/assets/47123877/34b8c009-0eb6-4c6f-96f1-42991cd6e7d3

I encourage you to consider these issues in your future updates, and I am willing to provide additional information or collaborate with your team to address these concerns.

Thank you very much for your hard work on the Astroid framework, and I appreciate your attention to these potential issues.

Best regards,

Salah JAAFAR

[sonvnn]

Thank you for report issue! I will check and update in the next version.

Best Regards, Sonny

[Chacapamac]

Just following this! @salahjaafar I’m not knowledgeable of the RTL language convention.

QUESTION? On the Sub-menu positioning, the sub-menu items shouldn’t start on the right side ? For me it make sens to be align on the right?

[salahjaafar]

@Chacapamac @sonvnn

For RTL languages like Arabic:

• The sub-menu should appear beneath the link that the mouse hovers over, with the text on the right and RTL orientation (direction).
• The sub-sub-menu should appear to the left, while keeping the text on the right and RTL orientation (direction).
• Here's a video demonstrating how it works.

https://github.com/templaza/astroid-framework/assets/47123877/334f8359-e6fe-4dfb-816a-7dab3f37430b

Thank you for your efforts.

[sonvnn]

@salahjaafar I fixed this issue in https://github.com/templaza/astroid-framework/commit/1b81458677119982302db14e06e82a8436e43630

Let's download v3-branch for testing. Please tell me your result, so I can confirm this issue is solved. Note: After re-install framework, you have to click Astroid Clear Cache to force Astroid recompile scss.

Best Regards, Sonny

[salahjaafar]

Hello @sonvnn ,

I want to express my gratitude for your ongoing efforts. However, after reviewing the changes, it seems that the issues still persist. I'd like to share some suggestions that could help improve the situation:

Change position: absolute; to position: relative; for .astroid-nav .nav-item-parent .nav-title > .nav-item-caret.
Change transform: rotate(180deg); to transform: rotate(360deg); for .rtl .astroid-nav .nav-item-parent .nav-title > .nav-item-caret to ensure downward orientation while making sure the icon points to the left for the submenu.
Ensure that the submenu is directly beneath the link of the main menu, rather than to the right.

I have also created a video showcasing these changes. You can view it here with your changes: https://drive.google.com/file/d/1pJy0hkBplbkDCd7rjzXHrw1bCgkolp--/view?usp=sharing

and here with my changes:

https://drive.google.com/file/d/1_BELVUVxO3Yz5mA9IDft7zEy64t9PXsz/view?usp=sharing

Your feedback and corrections would be greatly appreciated. Thank you very much for your collaboration.

Best regards, Salah JAAFAR

[Chacapamac]

I was thinking to be able to change the position of the sub-menu by changing the Menu Heading (first level) “Drop Down” alignment but changing from Left to right have no effect on the placement in my case, this is weird, it should?

After testing, the sub-menus container is not moving until I change the “Drop Down” alignment to “Container” or “Full” ?

[salahjaafar]

@Chacapamac Automating the alignment of text and directional orientations is imperative.

[sonvnn]

@salahjaafar I fixed the issue. Please help me download v3 and retest again.

[salahjaafar]

Congratulations @sonvnn , it's working correctly. Just one more simple improvement: the beginning of the submenu should be directly under the link that I hover over with the mouse. Here is an image explaining the situation:

Thanks once again; this encourages me to use the framework for all applications and websites that operate with RTL.

[sonvnn]

@salahjaafar Go to Astroid Mega Menu change Dropdown Alignment from Right to Left.

[salahjaafar]

@sonvnn I tried this, but it doesn't yield any results.

[Chacapamac]

Yep, as in my last post changing “Left to Right” and even “Center” doesn't change the position of the dropdown container at all on a “Normal” Main Menu item with submenus items. (NOT A MEGA MENU)

[salahjaafar]

@Chacapamac @sonvnn Alright, I tried to solve this issue by adding the following condition to the _menu.scss file:

/* Add condition for RTL */
body.rtl .megamenu-container.nav-submenu-container.nav-item-level-1 {
  left: auto; /* Reset left value */
  right: 0px;
}

However, there is still an issue with the mobile display, as shown in this image:

I added the following condition to address the situation:

/* For RTL languages, override the text-align property: */
.rtl .astroid-mobilemenu-container .astroid-mobilemenu-inner .dropdown-menus .menu-indicator-back {
  text-align: right;
}

After modification

[sonvnn]

@Chacapamac @salahjaafar I fixed this issue in https://github.com/templaza/astroid-framework/commit/e37e42fdc5ecb22740197a4a6a810b1ac1748cd6

Please help me check Dropdown Alignment again. My result below:

@salahjaafar I will check mobile menu issue on the next Monday.

Thanks, Sonny

[salahjaafar]

Congratulations @sonvnn, it's working correctly. I am very satisfied. The mobile menu just needs a simple correction, and everything will be fine. Have a great day!

[sonvnn]

@Chacapamac @salahjaafar I fixed all issue related in this topic. Please help me download v3-branch and recheck again. Note: you have to click Astroid Clear Cache to force Astroid recompile scss.

Thank you & Merry Christmas, Sonny

[salahjaafar]

@sonvnn Yes, it works for desktop, but for mobile, there is only one simple correction remaining, as I mentioned in this comment: https://github.com/templaza/astroid-framework/issues/511#issuecomment-1866833651.

[sonvnn]

@salahjaafar Please download v3 latest, clear Astroid Cache, browser cache, etc. The result on my mobile below

[salahjaafar]

@sonvnn @Chacapamac Congratulations, it's working correctly! A big thank you; this could attract another audience for the framework. Certainly! Feel free to close this discussion, and we'll await the release of the official version.

[Chacapamac]

This is Great News that should bring more people to the framework and should be advertise on the Astroid Website to be a little bit more prominent.

I like this because Joomla was really intended as an international CMS.

FUN FACTS Joomla is the anglicized spelling of the Swahili word jumla, meaning "all together" or "as a whole" that also has a similar meaning in at least Amharic, Arabic, Turkic languages and Urdu.

[salahjaafar]

@Chacapamac Joomla in Arabic is written as 'جملة,' which means a group or assembly of something.

[Chacapamac]

@salahjaafar

Joomla in Arabic is written as 'جملة,'

Cool, do you need to keep both start and end “apostrophes” looking characters?

[salahjaafar]

@Chacapamac

@salahjaafar

Joomla in Arabic is written as 'جملة,'

Cool, do you need to keep both start and end “apostrophes” looking characters?

No, she only writes like this: جملة